Hay algo en común que comparten tanto diseñadores como programadores:
Ambos se dedican día con día a crear cosas que la gente ame
Este post no es para hacer crecer el cliché de que son enemigos naturales, más bien, es celebrar aquellos resultados de trabajar en equipo gracias a la mejora de todo el flujo de creación de producto.
Imagen de https://dribbble.com/shots/2712522-Designer-vs-Developer
Si, te compartiremos aquellos tips que hemos prendido en Platzi. Por cierto, puedes aprender sobre diseño de producto en el curso de diseño de interfaces y UX.
A propósito separé 2 roles: Diseño y Programación, pero: ¿Qué pasa con la gente que hace ambos?
Si creo que cualquier persona debería aprender a programar, ya que es una disciplina que lejos de las tareas puntuales, te regalan un contexto de como funciona detrás un producto digital.
Sin embargo, en la práctica, resulta que esos perfiles están orientados más de un lado que ser un equilibrio perfecto, y no, no es exclusivo de los unicornios, pasa mucho con los fullstack developers.
Entonces la responsabilidad de crear un producto digital no debe de recaer en una sola persona, más bien tanto programadores como diseñadores deben existir como un sólo equipo y tener la misma voz en cada proceso de creación del mismo.
Soy testigo de que muchas ideas increíbles de diseño fueron gracias a feedback directo de desarrollo.
Un mejor diseño se crea a partir de la iteración y el feedback constante de nuestros usuarios. Esto quiere decir que somos responsables de hacer la menor cantidad de cambios de diseño posibles en producción, ¿Cómo hacemos esto?, bueno hay muchas formas, pero la más efectiva ( y afortunadamente muy accesible ) es probar la mayor cantidad de veces en papel.
Fallar en papel es barato, es más facil de agarrar y tirar para iniciar otra iteración casi de inmediato.
Si bien, desde el lado de desarrollo se debe tener una mente abierta de que todo cambio es importante, si es recomendable que no sea porque como diseñadores no tuvimos las suficientes pruebas o aprendizajes al momento de diseñar y probar nuestros prototipos.
Por cierto, siempre es divertido y productivo tener una sesión de wireframes donde se comparta la visión del producto tanto del lado de los diseñadores y programadores.
Hablando del contenido que deberíamos de tomar en cuenta para cualquier diseño, te dejo la formula secreta:
“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor velit in mollis pharetra”
Exacto, Copy tambien es diseño.
Diseñar con los datos y variables más cercanas a lo que será en el producto final nos ayuda a detectar oportunidades que el contexto otorga.
Esta etapa da sólo al inicio del diseño, si no tambien del desarrollo, por lo que vale la pena que sea un esfuerzo conjunto para evitar complicaciones inesperadas al momento de modelar para el desarrollo o mostrarlos en el diseño, por ejemplo:
Mi componente no soporta ese tamaño de texto o los emojis no están soportados por defecto en MySQL y debemos hacer un update y migración que podría complicar el lanzamiento.
Hablando de componentes, la mayoría de los productos que usas dia con dia ya funcionan así desde hace tiempo:
Tú puedes construir productos más rápidos partiendo de elementos ya preestablecidos. Sí, es como un lego.
Antes, sólo nos preocupábamos por diseñar las interfaces, y ya. Pero ahora debemos de tener en cuenta la mayor cantidad de elementos reutilizables, el UI Stack o estados que podamos tener en la aplicación, las metas del negocio y de los usuarios etc.
Suena a mucha responsabilidad, pero lo has visto y quizás los has usado, por ejemplo:
Atomic Design nos facilita la forma en que creamos toda la parte visual y de interacción del producto, muy recomendado.
Si no necesitas de un lenguaje de diseño propio ( o más bien quieres un poco de inspiración ) puedes usar Material Design, Photon Design, Carbon Design System, etc. Hay muchas propuestas interesantes, puedes verlas aquí.
Metodologías como Lean UX y en cierto modo design sprint nos ayudan a entender de mejor forma como es vamos a alinear las metas de negocio y las necesidades de nuestros usuarios.
Y gracias a que como diseñador pensaste en componentes, al momento de llevar esa abstracción a código, no habrá más complicación ya que las librerías más populares de JavaScript funcionan bajo el mismo principio.
Esto quizás ya es algo obvio para muchos pero no está de más reforzar el mensaje: Cada vez más gente conoce internet por medio de un Smartphone, simplemente no podemos ignorar un diseño optimo para móviles.
Entiendo lo divertido que es iniciar nuestros diseños en desktop, todo encaja perfecto, pero al momento de adaptar todos nuestros elementos a un espacio más reducido es donde llegan los problema y esos mismos problemas son equivalente en código.
Un tip extra que más bien es la recomendación de 2 herramientas que nos ayudan a comunicar mejor nuestros diseños a su equivalente en frontend y/o desarrollo móbvil, Marvel Handoff y Zeplin:
https://marvelapp.com/features/handoff/
Siendo herramientas muy similares, son efectivas al momento de mostrar equivalencias en CSS, colores y hasta optimización de assets.
Cuentame que otro tips te ha funcionado al momento de trabajar codo a codo con desarrolladores. Y si eres desarrollador invita a tus amigos diseñadores a crear juntos productos increibles.
