Estudio de Diseño Complejo

Semana 15: Detalles finales del wireframe y el blueprint

¿Qué hicimos?

Durante esta penúltima semana de clases tuvimos que trabajar de manera asincrónica para poder trabajar en equipo y realizar nuestros respectivos avances tanto en los wireframes como en el blueprint final.

Para esto, se nos había explicado con anterioridad que debíamos de pasar a limpio nuestro ejercicio del blueprint que habíamos hecho con anterioridad en papel craft; la profesora nos recomendó hacerlo en una tabla de excel, sin embargo, nos dio la libertad de utilizar la aplicación y el formato de nuestra preferencia.

Por otro lado, mediante sesiones en meet, mi equipo y y decidimos mantener el contacto para poder ir trabajando de manera sincrónica en los wireframes, esto nos permitía realizar modificaciones entre todos y poder generar un diseño del que pudiéramos opinar más de una persona y de esa manera retroalimentarnos entre nosotros para mejorar el diseño de la plataforma.

Durante la primera sesión terminamos por escoger el estilo general de la plataforma, en otras palabras, logramos completar una de las pantallas, siendo esta la pantalla de inicio. Una vez finalizada esta comenzamos a trabajar con la pantalla de bienvenida, la cual decidimos dividir en tres pantallas diferentes, la primera de bienvenida general, la segunda para el registro y la tercera para el inicio de sesión en dado caso de que ya se tenga una cuenta.

También en esta sesión, tuvimos una reunión con la profesora en línea para mostrar nuestros avances y que nos realizara una retroalimentación sobre qué podríamos quitar o agregar que pudiera favorecer a nuestro diseño.

Ahora bien, durante la segunda sesión decidimos dividirnos el trabajo un poco debido a que en los wireframes teníamos todo revuelto, por ello decidimos que uno de nosotros se encargara de acomodar las mesas de trabajo, mientras otro rediseñaba el logotipo de nuestra organización y otras dos personas (yo incluido) comenzamos a pasar el blueprint a limpio en la aplicación de miro, donde decidimos realizarlo en forma de diagrama de flujo.

Para esto comenzamos definiendo un color diferente para cada uno de los tiempos (antes, después y durante) para poder establecer un código de color a lo largo del blueprint que nos permita diferenciar las acciones de cada uno de los tiempo, también hicimos lo mismo con el acomodo de acciones secundarias y de acciones relacionadas que se encuentran fuera del escenario.

Logramos adelantar hasta llegar a la sección de después y comenzar a delimitar las acciones relacionadas a la pantalla principal.

Un vez que ya estaban acomodadas las pantallas de los wireframes y todo su contenido, retomamos el trabajo en equipo dentro del diseño de las pantallas para realizar pequeños cambios de acuerdo a lo que nos había comentado la profesora, tales como la creación de un pie de página con el contenido/información sobre nosotros, hacer más pequeño el logotipo y definir la paleta de color de acuerdo a la función de cada uno de los elementos en la pantalla.

Ahora bien, en la última sesión decidimos reunirnos de manera presencial para poder trabajar de manera más cercana y directa entre todos, fue en esta sesión que terminamos el resto de pantallas, siendo la única faltante la de la sección de mercancía.

Esta sesión también tuvimos asesoría con la profesor sobre todo lo que estábamos trabajando, porque aparte de lo que ya teníamos casi finalizado de los wireframes y lo iniciado del blueprint, habíamos comenzado a realizar un guion improvisado de acuerdo a los requerimientos que colocó la profesora en el classroom y de esta manera poder aclarar todas las dudas que teníamos de las tres actividades que se entregarían al final.

Ya con todo adelantado, decidimos ponernos de acuerdo durante el fin de semana para terminar las cosas que faltaron por separado y si se daba la oportunidad, realizar una sesión en línea donde pudiéramos revisar entre todos qué es lo que falta de los wireframes.

¿Qué resolví?

A lo largo de todo este proceso fuimos tomando diferentes decisiones que nos ayudaron a mejorar nuestro diseño. Lo primero que hicimos al momento de realizar todas las propuestas de la pantalla de inicio fue darnos cuenta de que todas contaban con una misma cualidad, la cual era, tener un fondo oscuro y una paleta de color en su mayoría análoga; después de analizarlo un poco nos dimos cuenta de que, al estar diseñando una plataforma para jugar videojuegos, debíamos de enfocarnos en que la estadía en la plataforma no dañase los ojos de nuestros usuarios, fue por ello que tomamos la decisión de mantener el fondo con el color más oscuro de la paleta de color y eliminar la opción (que anteriormente habíamos planteado) de poder activar o desactivar el modo oscuro de la página, para que en automático sea oscuro.

Otra cosa que realizamos fue que cada que realizábamos una propuesta de color, utilizamos la aplicación de adobe colors para medir si el contraste con tipografías era el adecuado, fue así que logramos terminar con nuestra paleta de colores final, definiendo que las tipografías fueran de color blanco y los fondos morados en tonos oscuros y no tan saturados.

Un pequeño detalle del que me percaté fue que sentía que la página en general no era tan dinámica ya que todo el tiempo trabajamos con plastas de color y figuras rectangulares, así que pensé en la forma en la que podría agregar un poco de dinamismo a la composición sin que altere el orden de lectura o la limpieza de la pantalla, esta solución fue nada más y nada menos queeeee, agregar un pequeño degradado en el fondo con colores azulados y rosas, cosa que le acabó por dar ese detalle de página gaming a la plataforma.

Por cierto, la razón por la que decidimos mantener los gráficos rectangulares y con vectores de plasta de color, fue porque a pesar de que queríamos crear una página innovadora y con composiciones parecidas a las un menú de videojuego, decidimos mantenerlo simple para que la navegación en la plataforma sea sencilla.

Por último, algo que destaca de nuestra plataforma es el constante uso de imágenes en toda la plataforma, un claro ejemplo es que en la sección de videojuegos, decidimos colocar los videojuegos en diferentes cuadros donde solamente se mostrase una imagen del videojuego, pues luego de analizar diferentes páginas, nos dimos cuenta de que son pocas las que colocan los títulos y de hecho, en base a las respuestas de nuestras entrevistas, nos percatamos que muchas veces, lo que más atrae a una persona a jugar es la apariencia del propio videojuego, por ello nos concentraremos mucho en eso.

Evidencias de trabajos y apuntes.

Pantalla de inicio final

Pantalla de bienvenida y registro

Pantallas de catálogos de videojuegos y de artículos

Pantallas de visualización de videojuego y de artículos

Pantalla de perfil del usuario

Pantallas adicionales, directorio a instituciones de salud mental, y tienda de mercancía original