¿No os habéis encontrado muchas ocasiones en las que diseñadores y desarrolladores parecen no entenderse y no ponerse de acuerdo? Al final, esto se traduce en una gran cantidad de tiempo desperdiciado por ambas partes, por lo que es muy importante trabajar en prevenir estos problemas. Y es que, cuando entramos en el mundo laboral, nos damos cuenta de que la creatividad no es la única faceta valiosa de un profesional, sino que la organización tiene un papel muy importante, porque la creación de un producto digital es un trabajo en equipo. 

Hoy, voy a hablar en base a mi experiencia de lo que está en la mano de nosotros, los diseñadores, para prevenir gran parte de estos conflictos. Una serie de buenas prácticas de cara a diseñar para desarrolladores.

Empaticemos con los desarrolladores

Tenemos que pensar que la implementación de los diseños es el último paso para pasar el producto a producción. Es decir, que las funcionalidades, comportamientos y las diferentes casuísticas deberían estar contempladas y correctamente definidas antes de pasarlas a desarrollar. Todo producto empieza por el diseño, pero necesitamos el feedback de los desarrolladores para explorar posibilidades, y hacerlo juntos trae muchos beneficios.    

Una vez definidas las funcionalidades, los diseñadores somos los que pensamos en cómo se va a usar el producto, y qué va a pasar en cada interacción que el usuario haga con él (o incluso qué pasa cuando el usuario deja de hacer). Es decir, que en base a lo que vemos en los usuarios, tomamos las decisiones que creemos más convenientes. Más adelante, también es nuestra misión asegurarnos de que no nos equivocamos, para que cuando llegue la hora de implementarlo, todos conozcamos el comportamiento en cualquiera de las situaciones que se puedan presentar.

Ir mucho más allá de unas simples pantallas 

Si diseñamos unas pantallas pero no definimos una relación entre ellas, es muy fácil que no se interprete adecuadamente el flujo. Por ello, el primer paso deberá ser definir los flujos de usuario, mucho antes de meternos con la interfaz.

Tener en cuenta los diferentes estados de un componente

¿Qué pasa cuando pulsamos un botón? ¿Qué pasa cuando una lista está vacía? Tenemos que tener en cuenta todas las posibilidades para no dejar lugar a dudas. Si algo se va a desarrollar, tiene que estar previamente diseñado.

Consistencia en el diseño 

Pantallas que tienen 3 colores, otras tres pantallas con 4 colores diferentes y una última con 2 colores parecidos, pero que si miras detenidamente, no son el mismo. Si vamos eligiendo colores con el cuentagotas o no hay definido claramente una paleta de colores a lo largo de todo el producto o marca, no solamente será un caos para el desarrollador (y para nosotros). Esas inconsistencias también afectarán negativamente de cara al usuario.

Anticiparnos a los problemas

La realidad es que en muchas ocasiones, por una razón u otra, es complicado juntar un equipo único que integre el diseño y el desarrollo. Sabemos que eso sería lo ideal, pero suele ser complicado. Normalmente nos encontramos piezas separadas que trabajan en su propio proyecto: el diseñador en sus pantallas y más tarde el desarrollador pintando lo que ve de las pantallas diseñadas, donde rara vez hay una comunicación fluida. Sin embargo, debemos hacer lo posible pensando en la otra parte para llegar al mejor resultado. Cada vez que el desarrollador pregunta cómo funciona o cómo se mueve algo que no habíamos pensado, suele pasar una de las siguientes cosas:

• El desarrollador hace lo que le parece más conveniente. 
• Tenemos que volver atrás y probablemente redefinir varias interacciones.

Hagamos bien nuestro trabajo 

Para trabajar eficientemente con desarrolladores, es imprescindible tener en cuenta la forma en la que trabajamos nosotros. Y para comunicar claramente lo que hemos diseñado al desarrollador, primero tenemos que entenderlo nosotros. 

Empieza de lo grande a lo pequeño

Cuando empezamos a diseñar un producto, siempre es buena idea empezar con la vista global de este, y luego ir puliendo los detalles poco a poco. Es decir, que empezaremos por el concepto, las soluciones que cubren y las funcionalidades, y a partir de ahí iremos aterrizándolo a las interacciones del usuario y una interfaz visual. En el apartado visual, de la misma manera, definiremos primero los elementos principales, tamaños base y colores principales, y a partir de ahí a detalles más específicos. 

Crea una guía de estilos básica

Todo lo que pueda ser estandarizado, sumará a la simplicidad de nuestro producto. Intentaremos crear patrones y reglas para que adquiera una consistencia a lo largo de toda la experiencia con el producto. 

Estas reglas deberían estar reflejadas de alguna manera para que los desarrolladores sean conscientes de lo que hemos definido. Dependiendo del tiempo del que dispongamos, podemos dejar un comentario, crear un artboard sencillo con ejemplos prácticos o incluso un completo sistema de diseño. Unos pequeños ejemplos que ahorran mucho tiempo podrían ser: tener los assets agrupados y listos para exportar, elementos y componentes con sus diferentes estados, una guía básica de los estilos… Cuanto mejor dejemos documentado cómo se debe comportar nuestro diseño, mejor. Idealmente, debería ser autoexplicativo para que cualquier persona lo entienda sin tener que preguntarnos.

Trabaja con componentes y variantes

Es muy importante mantener nuestros diseños organizados. Ya sea un proyecto pequeño o a largo plazo, siempre compensa crear un sistema que sea mantenible y escalable. 

Esto quiere decir que deberíamos definir los elementos y componentes que vamos a reutilizar a lo largo del proyecto. Así, cada vez que queramos añadir un cambio, no tendremos que ir pantalla a pantalla aplicando el mismo cambio.

Del mismo modo, deberíamos estudiar los colores que vamos a necesitar a lo largo del proyecto, para distintos estados e incluso de las sombras. Igualmente, deberíamos crear los estilos tipográficos para evitar inconsistencias como apuntamos más arriba.

Seamos mejores diseñadores

Y hasta aquí mis consejos para ser un mejor diseñador. Tengo la firme creencia de que aplicando estos puntos en el día a día, ahorramos mucho tiempo y esfuerzo, tanto para nosotros como para la gente con la que trabajamos. 

Si conocéis otras maneras de trabajar eficientemente, ¡os animo a que lo dejéis en los comentarios para que todos podamos aprender juntos!