Diseñador front-end

Fusión de un diseñador y un desarrollador front-end

El diseño front-end es la pequeña área gris que se une al mundo de diseño Oh tan hermoso que involucra formas, texturas, equilibrio, color y simetría y la entidad lógica que es el desarrollo front-end compuesto por radio de borde, imagen de fondo, flotadores , Cuadrículas y Flexbox.

Brad Frost lo resume así:

El diseño frontend implica crear el código HTML, CSS y JavaScript de presentación que conforma una interfaz de usuario.

Seamos realistas, la relación entre los diseñadores y los desarrolladores que ejecutan sus diseños puede ser difícil.

Los desarrolladores se frustran cuando los diseñadores diseñan cosas que son "imposibles". Muchas veces he escuchado a los desarrolladores maldecir a los diseñadores por su "revista" como diseño para la interfaz de usuario de una página web. Básicamente, esto significa que el diseño sería difícil de construir, o es probable que cause problemas entre navegadores.

Los diseñadores nunca pueden entender por qué sus diseños nunca llegan intactos al usuario. ¿No pueden ver los desarrolladores que el interlineado y el interletraje no se parecen en nada al PDF exportado desde Sketch / Illustrator? ¿Tengo que deletrear todo para ellos? ¿Por qué no pueden intuir la elección correcta?

Incluso después de la conceptualización más elaborada de una interfaz de usuario, siempre habrá obstáculos durante el proceso de desarrollo front-end que requerirán alguna forma de consideración de diseño.

Yo mismo he trabajado en ambos extremos del espectro. He diseñado interfaces de usuario para que otras personas las implementen. Y también he implementado las especificaciones de diseño que me dieron como desarrollador front-end.

Pero más recientemente tuve la oportunidad de trabajar en esa pequeña área gris que mencioné anteriormente, como Diseñador Front End. Según la experiencia, fue bastante dulce y más divertido que cualquiera de los dos trabajos realizados por separado. Ahora tuve la oportunidad de diseñar la interfaz de usuario de tal manera que siga los esquemas de color correctos y al mismo tiempo no fue una molestia en el código A **. Vivir en este purgatorio de los dos mundos estaba extasiado.

Tener el control de contenido del diseño me ayudó a detectar problemas potenciales con mayor facilidad y a tomar las decisiones correctas por adelantado.

Con este poder a mi disposición, pude: -

  • Cree un sistema de diseño basado en código escalable junto con la consideración de los matices de las Leyes UX.
  • Implemente una metodología de prueba y error para evaluar el impacto técnico de las decisiones de diseño y siempre implemente las alternativas de diseño para reducir las complejidades involucradas en el código.
  • Proporcione una prueba de concepto en el navegador teniendo en cuenta la importancia de un diseño receptivo.
  • Generar mis propios activos personalizados sin la necesidad de esperar a que alguien más lo haga bien en 100 intentos.
  • Obtenga una mejor idea de las dimensiones de varios objetos de manera proporcional.

Con la experiencia anterior, me di cuenta de que HTML, CSS y JavaScript crean interfaces de usuario: sí, las mismas interfaces de usuario que los diseñadores están elaborando meticulosamente en herramientas como Photoshop y Sketch. Para que los equipos puedan construir sistemas exitosos de diseño de interfaz de usuario juntos, es crucial tratar el desarrollo frontend como una parte central del proceso de diseño.

Y sí, estamos borrando las líneas. Empresas como Shopify y Optimizely ya han llevado el desarrollo front-end al lado del diseño de su proceso, con un éxito rotundo. Estas empresas están contratando personas (a menudo denominadas tecnólogos creativos) que son expertos en diseño de productos y tecnologías web front-end, evitando cualquier transferencia necesaria para dar vida a los diseños en código.

"El objetivo final de un ingeniero de interfaz de usuario es crear excelentes experiencias para el cliente, al igual que nuestros diseñadores. Por eso están en el equipo de diseño ".
- Jeff Zych, gerente de diseño de Optimizely

De hecho, esta convergencia también está ocurriendo en la sofisticación de las herramientas. Es solo cuestión de tiempo antes de que las herramientas de diseño y creación de prototipos reemplacen por completo el desarrollo front-end, produciendo a la perfección una base de código front-end de alta calidad para su marco de elección (React, Vue u otro).

Hoy en día, como la entidad conocida como Web está explorando sus vastos horizontes y se está volviendo cada vez más enrevesada, simplemente no es posible que los diseñadores trabajen en entornos estáticos para articular de manera realista todos los tamaños de pantalla, factores de forma y predicciones de variables posibles que afectan a la web . Por lo tanto, es responsabilidad de los desarrolladores trabajar estrechamente con los diseñadores para comprender lo que es factible.

Tenemos que pasar del arcaico proceso de crear diseños estáticos en Photoshop a adoptar un conjunto de herramientas mucho más expansivo, que abarca desde herramientas de diseño colaborativo (como Figma), plataformas de prototipos simples (como InVision, Marvel), servicios de prueba de usuario (como UserTesting). com, Validately and Lookback) y herramientas de colaboración diseñador-desarrollador (como Zeplin).

El proceso moderno de diseño web requiere una intensa colaboración entre diseñadores y desarrolladores front-end. Lograr una buena experiencia de usuario es el resultado de una ejecución inteligente tanto del diseño visual como del código. La responsabilidad no se encuentra dentro de una disciplina u otra, sino en algún punto intermedio: el Área Gris.

Con esto, me gustaría llamar a todos los tipos como yo: adopte su doble naturaleza: los aspectos creativos y técnicos que lo convierten en un "diseñador frontend".