25

Tips para mejorar la colaboración entre diseñadores y programadores

15837Puntos

hace 2 años

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.

El unicornio del equipo es el mismo equipo 🦄

A propósito separé 2 roles: Diseño y Programación, pero: ¿Qué pasa con la gente que hace ambos?

platzi_oficina_trabajando_10.jpg

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.

No hagas pruebas en producción, fallar en papel es más barato

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.

IMG_0280.JPG

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.

El contenido es el rey, pero el contexto es dios

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.

No diseñes solo interfaces, apuesta a crear sistemas de diseño

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.

Mobile First y responsive design ya no es moda, ni siquiera opcional

Captura de pantalla 2017-09-28 17.50.10.png

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.

Marvel Handoff vs Zeplin: El puente entre diseño y desarrollo

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/handoff/

Siendo herramientas muy similares, son efectivas al momento de mostrar equivalencias en CSS, colores y hasta optimización de assets.

Captura de pantalla 2017-09-28 17.52.49.png

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.

Uriel
Uriel
@ThespianArtist

15837Puntos

hace 2 años

Todas sus entradas
Escribe tu comentario
+ 2
1
3998Puntos

Mas que nada es que exista un buena comunicación entre los diseñadores y desarrolladores para que ambos lados tenga una retroalimentación y puedan crecer de la mano ya que el problema que he tenido con mi equipo de desarrollo y el equipo de diseño es que el area de diseño innovar y mostrar cosas increíbles en sitios web, pero no hay una platica con nuestra area de desarrollo para preguntar que tan factible es y tiempos con el area, por eso creo que una retroalimentación constante es un tema muy importante.

1
15837Puntos
2 años

Lo que he descubierto es que muchos mal entendidos son eso, mal entendidos. Involucrar desde las etapas muy tempranas tanto a diseñadores y programadores adelanta mucho los posibles retos tanto técnicos como de flujo de interacción y UX.

Y sin duda, entre muchos de los acuerdos, debe respetarse el tiempo desde ambas partes, estar abiertos y humildes a cualquier caso 😄

0

Tener FE?

0
15837Puntos
2 años

Más que fe, humildad de entender que ambos perfiles siempre buscan lo mejor para el usuario