Desde que empecé a trabajar en diseño de producto he podido aprender muchas cosas, algunas sobre User Research y otras sobre prototipo, wireframe y la importancia de hacer pruebas sobre el mismo. Esta es la última parte de mi experiencia, que trata sobre toda la parte visual a la aplicación.
Muchos pensamos que el diseño de producto sólo es esta parte, el saber sobre iconos, tipografía, composición, color y otras cosas propias de diseño, pero en realidad es que esta es la parte final. Además, podemos cometer ciertos errores, algo que ya habíamos hablado en este artículo.
La experiencia de usuario es 50%, lo que tú diseñas, y 50% lo que tus usuarios interactúan. Entonces un mejor valor se encuentra en que tu aplicación sea entendible a que sea sólo linda. Y ya que nos aseguramos de que nuestra idea se entiende y los flujos son correctos llega la parte de enfocarnos en los detalles y en la parte visual.
Wow, research de nuevo. El diseño no está exento al constante aprendizaje y notarás que hay algunas técnicas que se han ido surgiendo en diferentes plataformas, como flat design, material design u otras cosas más sutiles como el uso de gradientes y es importante entender los porqués.
Trata de crear experiencias únicas para cada plataforma, para eso existen varios lineamientos o guidelines como en Android Material Design o iOS Human Interface y por supuesto, su contexto de uso móvil tal como gestos multitouch.
Aquí vale la pena integrar a los desarrolladores encargados de ejecutar esta idea, para ver qué limitantes tendremos a nivel de implementación. Sí, en teoría todo se puede, pero también es cierto que algunas cosas tomarían mucho más tiempo del esperado, tú decides a qué darle prioridad y a que no.
El dejar la parte visual al último nos da la flexibilidad de tener variaciones de diseño, ya sea para intentar diferentes colores, tipografías, iconos y composiciones. Estos cambios no deberían ser fuertes ni distantes ya que estamos partiendo del wireframe.
Una vez que ya tenemos todo el diseño visual de la aplicación es importante crear una forma de comunicarla con el equipo, aquí entran las guías de estilo. Una guía de estilo contienen todos los valores ya sea tanto en pixeles, color, tipo de letra y componentes que tendrá nuestro proyecto. Si bien el producto digital suele ser uno, la realidad es que tendremos muchos componentes y la intención es generarlos y reutilizarlos para ser consistente en toda la aplicación.
Aquí es donde entras cosas como Atomic Design: https://bradfrost.com/blog/post/atomic-web-design/
Por ejemplo, si es una aplicación web, aquí es donde comunicamos que cada h2 tendrá un sólo tamaño y tipo de letra.
Luego viene la parte de producto: ¿cómo hacer que esto pase a desarrollo?. Aquí hay unas herramientas muy buenas, entre ellas una llamada Zeplin.
Con Zeplin podemos subir nuestro diseño visual hecho en Sketch, Adobe XD o Illustrator y que el frontend pueda entender todos los componentes, tanto los márgenes, paddings, tamaño de letra, colores, etc. Inclusive te da un equivalente en CSS a eso.
Con esto el producto ya debería estar a punto de lanzarse. Cómo product designer es necesario que estés al tanto de la ejecución de esto y apoyar en caso de que algo no sea del todo claro.
Cada gran proyecto va acompañado de grandes aprendizajes. Por eso es importante que entre varios miembros del equipo otorguen una calificación en cada parte del mismo y que documenten aquellos casos que fueron difíciles de resolver. No se trata de buscar culpables y presumir que alguien más lo haría mejor, sino que sirve como retrospectiva y como aprendizaje para futuros miembros del equipo.
Como verán el diseño del producto incluye muchas cosas a considerar, esto es sólo un pequeño contexto y es recomendable estar siempre investigando y leyendo más al respecto.
Todo este contenido a profundidad lo verán en el Curso de Diseño de interfaces y UX. Si tienen alguna pregunta, nos vemos en los comentarios. Quisiera saber qué les pareció esta serie de posts. Yo seguiré aprendiendo y compartiendo sobre estos temas con ustedes.
