Cómo los desarrolladores frontend pueden potenciar el trabajo del diseñador

Este artículo está dirigido principalmente a usted, querido desarrollador frontend, que disfruta implementando interfaces de usuario pero tiene dificultades para alinear las expectativas con los diseñadores con los que trabaja. Tal vez se le llame "Desarrollador de UI" o "Ingeniero de UX". Independientemente del título que lleve consigo, su trabajo (y también el mío) consiste en algo más que dar vida a los archivos de diseño. También somos responsables de llenar el vacío entre los flujos de trabajo de diseño y desarrollo . Sin embargo, al cruzar ese puente, nos enfrentamos a múltiples desafíos.

Hoy me gustaría compartir con ustedes consejos prácticos que me han ayudado a colaborar de manera más eficiente con los diseñadores en los últimos años.

Creo que es nuestro trabajo, como desarrolladores de UI, no solo ayudar a los diseñadores en su viaje para aprender cómo funciona la web, sino también conocer su realidad y aprender su lenguaje.

Comprender los antecedentes de los diseñadores de UX

La mayoría de los diseñadores de UX (también conocidos como diseñadores web o diseñadores de productos) dieron sus primeros pasos en el mundo del diseño a través de herramientas como Photoshop e Illustrator. Quizás eran diseñadores gráficos : su objetivo principal era crear logotipos e identidades de marca y diseñar diseños para revistas. También podrían haber sido Diseñadores de Marketing : imprimir vallas publicitarias, diseñar pancartas y crear infografías.

Esto significa que la mayoría de los diseñadores de UX pasaron sus primeros días diseñando para impresión, que es un paradigma totalmente diferente de su medio actual, la pantalla. Ese fue su primer gran desafío. Cuando se trata de impresión, los diseñadores se preocupan por la alineación de píxeles, pero en un área fija (papel). No tenían que lidiar con un diseño dinámico (pantallas). Pensar en rupturas de texto o estados de interacción tampoco formaba parte de su trabajo. Los diseñadores también tenían total libertad sobre los colores, las imágenes y la tipografía sin restricciones de rendimiento.

Afortunadamente, ha habido muchos esfuerzos de la comunidad de diseñadores de UX autodidactas para enseñar los fundamentos del desarrollo, discutir si los diseñadores deben aprender a codificar y comprender cómo realizar mejor la transferencia a los desarrolladores. Lo mismo se aplica también al lado del desarrollo (más sobre eso en un minuto). Sin embargo, todavía hay fricción entre los dos campos.

Por un lado, los diseñadores se quejan cada vez que una implementación no coincide con sus diseños o se sienten incomprendidos cuando los desarrolladores las rechazan sin una explicación clara. Por otro lado, los desarrolladores pueden dar por sentado que los diseñadores saben algo técnico cuando eso podría no ser cierto. Creo que todos podemos hacerlo mejor que eso.

Abrazando una nueva forma de pensar

Los sitios web y las aplicaciones que estamos creando se mostrarán en una amplia gama de tamaños de pantalla. Cada persona los usará en múltiples dispositivos. Nuestro objetivo común es crear una experiencia familiar a lo largo de sus viajes.

Cuando nosotros, como desarrolladores, pensamos que los diseñadores están siendo exigentes con las alineaciones de píxeles, debemos entender por qué. Necesitamos reconocer que está más allá de la fidelidad y la consistencia. Se trata de la suma de todas las partes trabajando juntas. Es cohesión. Tenemos que abrazarlo y hacer nuestro mejor esfuerzo para lograrlo. Aprender los fundamentos de los principios de diseño es un buen punto de partida . Comprenda la importancia de seleccionar los colores correctos, cómo funciona la jerarquía y por qué son importantes los espacios en blanco.

Nota : Hay un curso en línea conocido como "Diseño para desarrolladores" y un libro llamado "Refactorización de la interfaz de usuario". Ambos son excelentes para comenzar. Con estos, podrá implementar interfaces de usuario con un buen ojo para los detalles y obtener una ventaja significativa cuando se comunique con los diseñadores.

Ampliar la conciencia de sus diseñadores

Puede dar por sentado que los diseñadores conocen la web tanto como usted. Bueno, puede que no. En realidad, ¡no tienen que hacerlo! Es nuestra responsabilidad, como desarrolladores, mantenerlos actualizados con el estado actual de la web.

He trabajado con los dos lados de este espectro: diseñadores que piensan que se puede construir cualquier cosa (como filtros complejos, nuevos comportamientos de desplazamiento o entradas de formulario personalizadas) sin pensar en la compatibilidad del navegador. Luego, hay diseñadores con suposiciones sobre las “bajas limitaciones de la web” y simplemente asumen por sí mismos que algo es imposible de implementar. Necesitamos mostrarles las verdaderas posibilidades del diseño web y no dejar que las limitaciones frenen sus habilidades.

Enséñeles código, no cómo codificar

Esto parece contradictorio, pero tengan paciencia conmigo: saber codificar es el núcleo del trabajo de un desarrollador. Trabajamos en una industria acelerada con cosas nuevas que aparecen todos los días. Sería una petición hipócrita de nuestra parte exigir a los diseñadores que aprendan a codificar. Sin embargo, podemos ayudarlos a entender el código.

Siéntese junto al diseñador con el que trabaja durante 15 minutos y enséñeles cómo pueden ver por sí mismos si las especificaciones de un elemento son correctas y cómo cambiarlas. Considero que Firefox Page Inspector es notablemente fácil de usar para esto.

Hoy en día, es un placer visualizar diseños, depurar animaciones CSS y modificar tipografías. Muéstreles un área de juegos de código lista para usar como Codepen para que la exploren. No necesitan conocer todas las especificaciones de CSS para comprender cómo funciona el paradigma de diseño. Sin embargo, necesitan saber cómo se crean y se comportan los elementos para potenciar su trabajo diario.

Incluir diseñadores en el proceso de desarrollo

Invite a los diseñadores a unirse a usted en la reunión de pie, a ser parte del proceso de control de calidad y a sentarse con usted mientras refina los detalles visuales en sus implementaciones. Esto les hará comprender las limitaciones de la web y, muy pronto, reconocerán por qué lleva tiempo implementar una función.

Pida a los diseñadores que lo incluyan en su proceso de diseño

Te darás cuenta de que hacen mucho más que “poner las cosas bonitas”. Aprenderá más sobre el proceso de investigación y cómo se realizan las pruebas de usuario. Descubrirá que por cada propuesta de diseño que le muestran, varios otros estudios se descartaron anteriormente. Cuando los diseñadores soliciten un cambio, pregunte el motivo detrás de él, para que pueda obtener más información sobre las decisiones que se toman . En última instancia, comenzará a comprender por qué son exigentes con los espacios en blanco y las alineaciones y, con suerte, ¡pronto usted también lo será!

Me parece crucial tratar el desarrollo frontend como una parte central del proceso de diseño y el diseño como una parte central del proceso de desarrollo. Abogar por una mentalidad en la que todos tengan la oportunidad de participar en el ciclo de diseño y desarrollo nos ayudará a todos a comprender mejor los desafíos de los demás y también a crear grandes experiencias.

Podemos usar diferentes herramientas, pero debemos hablar el mismo idioma

Ahora que empezamos a entender un poco mejor el flujo de trabajo de los demás, es hora de dar el siguiente paso: hablar el mismo idioma.

Mirando más allá del editor de código

Una vez que comience a prestar atención a su entorno, estará mejor equipado para abordar los problemas. Conozca mejor el negocio y esté dispuesto a escuchar lo que los diseñadores tienen que decir. Eso lo convertirá en un miembro del equipo con contribuciones más ricas al proyecto. Colaborar en áreas más allá de nuestra experiencia es la clave para crear conversaciones significativas y confianza mutua.

Uso de sistemas de interfaz de usuario como un contrato

Pida a los diseñadores que compartan su sistema de diseño con usted (y si no usan uno, nunca es demasiado tarde para comenzar). Eso le ahorrará la molestia de elegir a mano los colores utilizados, calcular los márgenes o adivinar un estilo de texto. Asegúrese de estar familiarizado con el sistema de interfaz de usuario tanto como ellos.

Es posible que ya esté familiarizado con el concepto basado en componentes. Sin embargo, es posible que algunos diseñadores no lo perciban de la misma manera que tú. Muéstreles cómo los componentes pueden ayudarlo a crear interfaces de usuario de manera más eficiente. Difunda esa mentalidad y también diga adiós a los nombres similares pero no iguales: encabezado frente a héroe, información de precios frente a selector de precios . Cuando se crea una parte de la interfaz de usuario (también conocida como 'un componente'), trate de usar los mismos nombres para que puedan reflejarse tanto en el diseño como en los archivos de código. Luego, cuando alguien dice: "Necesitamos modificar el widget de invitación a la propuesta", todos saben exactamente de qué se está hablando.

Reconociendo la verdadera fuente de la verdad

A pesar de que la interfaz de usuario se crea primero en los archivos de diseño, la fuente real de la verdad está en el lado del desarrollo. Al final del día, es lo que la gente realmente ve, ¿verdad? Cuando se actualiza un diseño, es una buena idea dejar una nota al margen sobre su estado de desarrollo, especialmente en proyectos en los que participa una gran cantidad de personas. Este truco ayuda a mantener la comunicación fluida, por lo que nadie (incluyéndote a ti) se preguntará: “ Esto es diferente de la versión en vivo. ¿Es un error o no se ha implementado todavía? ”

Mantener la deuda bajo control

Entonces, ya sabe todo sobre la deuda técnica : sucede cuando el costo de implementar algo nuevo es alto debido a un atajo que tomamos en el pasado para cumplir con una fecha límite. Lo mismo puede ocurrir en el lado del diseño y lo llamamos deuda de diseño .

Puede pensarlo así: cuanto mayor sea la inconsistencia de UX y UI, mayor será la deuda (técnica y de diseño). Una de las inconsistencias más comunes es tener diferentes elementos para representar la misma acción. Esta es la razón por la que un mal diseño suele reflejarse en un mal código . Depende de todos nosotros, tanto diseñadores como desarrolladores, tratar nuestra deuda de diseño con seriedad.

Ser accesible no significa que tenga que ser feo

Estoy realmente complacido de ver que tanto nosotros, como desarrolladores y diseñadores, finalmente comenzamos a incorporar la accesibilidad en nuestro trabajo. Sin embargo, muchos de nosotros todavía pensamos que diseñar productos accesibles es difícil o limita nuestras habilidades y creatividad.

Déjame recordarte que no estamos creando un producto solo para nosotros. Estamos creando un producto para que lo usen todas las personas , incluidas aquellas que usan el producto de maneras diferentes a usted. Tenga en cuenta cómo los elementos individuales pueden ser más accesibles mientras mantiene los flujos de usuarios actuales claros y coherentes.

Por ejemplo, si un diseñador realmente cree que es necesario crear una entrada de selección mejorada, apóyelo y trabaje en conjunto para diseñarlo e implementarlo de una manera accesible para que lo use una amplia gama de personas con diversas habilidades.

Dar comentarios valiosos a los diseñadores

Es inevitable que surjan preguntas al revisar los diseños. Sin embargo, esa no es razón para que empieces a quejarte de los errores de los diseñadores o de sus ambiciosas ideas. Los diseñadores no están ahí para volverte loco, simplemente no siempre saben intuitivamente lo que necesitas para hacer tu trabajo. La verdad es que, en el pasado, tampoco sabías de estas cosas, así que sé paciente y adopta la colaboración como una forma de aprender.

Cuanto antes la retroalimentación, mejor

El momento de la retroalimentación es crucial. El flujo de trabajo de retroalimentación depende mucho de la estructura del proyecto, por lo que no existe una solución única para todos. Sin embargo, cuando sea posible, creo que debemos apuntar a un flujo de trabajo de retroalimentación periódica , comenzando en las primeras etapas. Tener esta mentalidad de colaboración abierta es la manera de reducir la posibilidad de grandes reiteraciones inesperadas más adelante en el camino. Tenga en cuenta que cuanto más tarde le dé al diseñador su primera retroalimentación, mayor será el costo para explorar un nuevo enfoque si es necesario.

Explique ideas abstractas en términos simples

¿Recuerdas cuando dije que el rendimiento no era una preocupación de los trabajos anteriores de los diseñadores? No se asuste cuando no saben cómo crear SVG optimizados para la web. Cuando se enfrente a un diseño que requiera cargar muchas fuentes diferentes, explíqueles por qué debemos minimizar la cantidad de solicitudes, tal vez incluso aprovechar las fuentes variables. Además de cargar más rápido, también brinda una experiencia de usuario más consistente. A menos que los diseñadores estén interesados ​​en aprender, evite usar demasiados términos técnicos al explicar algo. Puede ver esto como una oportunidad para mejorar sus habilidades de comunicación y aclarar sus pensamientos.

No permita que las suposiciones se conviertan en decisiones

Algunas preguntas sobre una especificación de diseño solo aparecen cuando nos ensuciamos las manos con el código. Para acelerar las cosas, podemos sentirnos tentados a tomar decisiones basadas en nuestras suposiciones. Por favor, no. Cada vez que convierte una suposición en una decisión, está arriesgando la confianza que el equipo de diseño deposita en usted para implementar la interfaz de usuario. Siempre que tenga dudas, acérquese y aclare sus dudas . Esto les demostrará que te preocupas por el resultado final tanto como ellos.

No haga soluciones por su cuenta

Cuando se le pida que implemente un diseño que es demasiado difícil, no diga "Es imposible" ni comience a implementar una versión alternativa barata usted mismo. Esto provoca inmediatamente fricciones con el equipo de diseño cuando ven que sus diseños no se implementaron como se esperaba. Pueden reaccionar con enojo o no decir nada, pero se sienten derrotados o frustrados. Todo eso se puede evitar si les explicamos por qué algo no es posible, en términos simples y sugerimos enfoques alternativos. Evite comportamientos dogmáticos y esté abierto a colaborar en una nueva solución .

Hágales saber acerca de las técnicas de Degradación Graciosa y Mejora Progresiva y construyan juntos una solución ideal y una solución alternativa. Por ejemplo, podemos mejorar un diseño de flexbox a CSS Grid. Esto nos permite respetar el propósito central de una función y, al mismo tiempo, hacer el mejor uso de las tecnologías web.

Cuando se trata de animaciones, seamos realistas: en el fondo, usted está tan emocionado de implementar la siguiente animación increíble como lo están los diseñadores de crearla. La diferencia entre nosotros y ellos es que somos más conscientes de las limitaciones de la web. Sin embargo, ¡no dejes que eso limite tus propias habilidades! La web evoluciona rápido, así que debemos usar eso a nuestro favor.

La próxima vez que le pidan que dé vida a un prototipo, intente no rechazarlo por adelantado ni hacerlo todo usted mismo. Véalo como una oportunidad para esforzarse. Las animaciones son una de las partes más delicadas del desarrollo web, así que asegúrese de refinar cada fotograma clave con su diseñador, en persona o compartiendo un enlace sincronizado privado.

Pensar más allá del estado ideal: juntos

Aquí está la cosa: no se trata solo de ti. Uno de los desafíos de los diseñadores es comprender realmente a sus usuarios y presentar los diseños de la manera más atractiva para vender al Gerente de Producto. A veces se olvidan de lo que está más allá del estado ideal y los desarrolladores también lo olvidan.

Para ayudar a evitar que ocurran estas brechas, alinee con los diseñadores los requisitos del escenario:

• El peor de los casos
  Un escenario donde están ocurriendo las peores posibilidades. Esto ayuda a los diseñadores a decir no al contenido fijo y dejar que sea fluido. ¿Qué sucede si el título tiene más de 60 caracteres o si la lista es demasiado larga? Lo mismo se aplica al contrario, el escenario vacío. ¿Qué debe hacer el usuario cuando la lista está vacía?
• Estados de interacción
  El navegador es más que flotar y hacer clic. Hay un montón de estados: predeterminado, hover, focus, active, disabled, error… y algunos de ellos pueden ocurrir al mismo tiempo. Démosles la debida atención.
• El estado de carga
  Cuando construimos cosas localmente, podemos usar simulacros y olvidar que las cosas realmente tardan en cargarse. Informe a los diseñadores sobre esa posibilidad también y muéstreles que son formas de hacer que las personas perciban que las cosas no tardan tanto en cargarse.

Tener en cuenta todos estos escenarios le ahorrará mucho tiempo yendo y viniendo durante la fase de desarrollo.

Nota : hay un excelente artículo de Scott Hurff sobre cómo corregir las malas interfaces de usuario que nos acercará un paso más a un producto accesible.

Acepta las solicitudes de cambio

Los desarrolladores son conocidos por no estar muy contentos de que alguien encuentre un error en su código, especialmente cuando se trata de un error de diseño informado por un diseñador. Hay muchos memes a su alrededor, pero ¿alguna vez reflexionó sobre cómo esos errores pueden arruinar tanto la calidad de la experiencia como su relación cuando estos errores de diseño se descartan casualmente? Sucede lentamente, casi como quedarse dormido. Poco a poco, luego todo a la vez. Los diseñadores pueden comenzar diciendo: " Es solo un pequeño detalle", hasta que la indiferencia y el resentimiento se acumulan y no se dice nada. Entonces el daño ya está hecho.

Esta situación es doble: tanto para tus compañeros como para tu trabajo. No dejes que eso suceda. Trabaja en lo que está coloreando tu reacción. Un diseñador que es 'quisquilloso' puede ser un inconveniente, pero también puede ser la interpretación superficial de atención y entusiasmo de un ingeniero. Cuando alguien le diga que su implementación no es perfecta (todavía), deje su ego a un lado y muéstrele cómo reconoce su arduo trabajo para refinar el resultado final.

Ir fuera del registro de vez en cuando

Todos tenemos tareas que cumplir y hojas de ruta que terminar. Sin embargo, algunos de los mejores trabajos ocurren extraoficialmente. No se registrará en el tablero TO DO y está bien. Si encuentra un diseñador con el que tiene una buena relación, acérquese a su espacio de trabajo y exploren juntos nuevos experimentos. ¡Nunca se sabe lo que puede salir de allí!

Conclusión

Cuando estás dispuesto a aprender del equipo de diseño, también estás aprendiendo diferentes formas de pensar. Evolucionará su mentalidad de colaboración con otras áreas a partir de su experiencia mientras refina su ojo para crear nuevas experiencias. Estar ahí para ayudar y estar abiertos a aprender, porque compartir es lo que nos hace mejores.

Este artículo no sería posible sin los comentarios de muchas personas excelentes. Quiero agradecer con gratitud a las diseñadoras Jasmine Meijer y Margarida Botelho por ayudarme a compartir una perspectiva equilibrada sobre los malentendidos entre diseñadores y desarrolladores.

Lectura relacionada en SmashingMag:

• “Diseño para desarrolladores” por Mason Gentry
• “Trabajando juntos: cómo los diseñadores y desarrolladores pueden comunicarse para crear mejores proyectos” por Rachel Andrew
• “Cómo los desarrolladores frontend pueden ayudar a cerrar la brecha entre diseñadores y desarrolladores” por Stefan Kaltenegger
• "¿Qué podcasts deberían escuchar los diseñadores y desarrolladores web?" por Ricky Onsman