Diseño

En este capítulo vamos a profundizar un poco más en el diseño como tercer pilar fundamental en el rango de disciplinas que debería tener un buen Ingeniero Frontend. Somos los encargados de hacer la parte visible, de construir la interfaz a través de la cual el usuario se comunicará con el sistema. Se necesita de un gusto por lo exquisito y por la calidad para ser capaces de confeccionar auténticas maravillas que las personas amen usar.

Utilitas y delectus

En 1908, Adolf Loos decía que “el ornamento es delito” y que todos deberíamos reducir el diseño a su mínima expresión funcional. Loos fue precursor del Movimiento Moderno, influyendo de forma brutal a arquitectos como Le Corbusier y Mies van der Rohe, los máximos exponentes de este etapa artística que se adueñó de la arquitectura durante el siglo XX.

Pese a la llegada del post-modernismo y otras corrientes que pedían la vuelta a la ornamentación que tanto criticaba Loos, el diseño de productos digitales de hoy en día se sigue influyendo del Movimiento Moderno del siglo pasado.

Al diseñar hay una tensión constante entre dos conceptos muy importantes: la función y la emoción, el utilitas y el delectus. Por ejemplo, Le Corbusier pintaba paredes de una misma habitación de diferentes colores para que la percepción del espacio fuera mayor, algo que horrorizaría a muchas personas. Todo por y para la función.

La maestría está en encontrar el sitio exacto entre estos dos conceptos. Es importante crear productos que funcionen y que solucionen un problema real de forma efectiva, pero sin olvidarse del deleite de la persona que lo usa. ¿Podría alguien sentir una conexión con un producto frío e inexpresivo?

En caso de que haya que desatascar un problema, depende del diseñador elegir hacia cual de los dos lados favorecer. Alvar Aalto, por ejemplo, se decantaba en estas situaciones por la parte estética, ya que pensaba que ante todo los lugares estaban para ser habitados, debían ser acogedores y no siempre tenían que servir a la función como máxima expresión.

Historia de las interfaces

Las interfaces, tal y como las conocemos hoy en día, son algo nuevo, muy posterior al surgimiento de las primera aplicaciones y programas informáticos.

Las primeras formas de comunicación con la máquina eran a través de tarjetas perforadas y luces que se encendían y apagaban comunicando el resultado.

De ahí pasamos a las CLIs, aun usadas sobre todo por personas relacionadas con el mundo de la informática. Son fáciles de crear y son muy potentes si entiendes profundamente su funcionamiento.

De ahí saltamos a las primeras interfaces visuales tal y como las conocemos, inventadas por Xerox PARC y popularizadas por Apple en el Macintosh.

Desde esas primeras interfaces gráficas que veíamos en el primer Macintosh hasta ahora hemos pasado por diferentes etapas y movimientos. En ocasiones, vimos estos cambios influídos por factores externos y otras veces por variables más relacionadas, como la concienciación en la accesibilidad y el cambio de desktop first a mobile first. De este último salieron sistemas de diseños tan importantes como el Material Design de Google, donde todo se intentaba reducir a la última expresión para que fuera fácil de utilizar desde una pantalla tan pequeña como la de un smartphone.

Microinteracciones

¿Sabrías decir que diferencia un buen producto digital de otro excelente? Que resuelva un problema es importante como ya hemos visto, pero hay más. Que la interfaz sea bonita y sencilla de usar también debe ser requisito obligatorio, innegociable, pero vamos a fijarnos más en los detalles.

Las microinteracciones son aquellas animaciones y transiciones que pasan casi desapercibidos, que por lo general no mejoran funcionalmente la aplicación, pero que generar un placer visual en la persona que interactúa con ella.

Una buena microinteracción debe de ser como una especia. Si te pasas y gana más protagonismo del que se merece, arruinará tu aplicación. Si por el contrario te quedas corto o directamente no las usas, parecerá como que le falta algo.

Hay muchas librerías para llevar a cabo estas microinteracciones, aunque Motion (ex-Framer Motion) es la más popular. Fórmate en ella y colabora con tu diseñador para ver dónde puede ser interesante añadirlas. Ten en cuenta que si estás en un gran proyecto, con un sistema de diseño detrás, puede que favorezca interfaces más planas y estáticas, mientras que otros pueden fomentar el movimiento y la animación. Tienes más información y ejemplos de microinteracciones en los recursos.

Embrace beauty, reject mediocrity

Como recordarás de la introducción, uno de los valores de los que hablamos era el gusto por la sofisticación y lo exquisito.

Deberíamos estar concienciados en hacer las cosas bonitas y bellas, que den gusto ver y utilizar. No se trata solo de cumplir una función o resolver un problema, sino de generar emociones positivas a través de lo que creamos.

Ser capaces de provocar ese efecto wow en las personas que interactúan con nuestro producto, ese momento en el que las personas se sorprenden gratamente por la atención al detalle, por la fluidez de la experiencia o por lo intuitivo y agradable que resulta todo el proceso.

Para lograr esta misión, no todo depende exclusivamente del diseñador. Como hablamos en el capítulo de ingeniería, la clave está en los detalles, esos pequeños elementos que, aunque a veces pasan desapercibidos, son los que realmente marcan la diferencia.

Y ahí es donde entra en juego muchas veces el desarrollador, quien tiene la capacidad de cubrir todos esos huecos invisibles pero esenciales que hacen de la experiencia algo memorable. Desde la suavidad de una animación hasta la rapidez de una transición o la precisión en las interacciones, cada pequeño ajuste contribuye a crear una experiencia que no solo funcione bien, sino que sea un placer para los sentidos.

Design debt

El concepto de deuda técnica es ampliamente conocido por ingenieros y equipos de producto. Es fácil y común ver tareas de mejora técnica en los tablones de los equipos y cada vez es más fácil convencer a managers de la necesidad de pagar esta deuda cuanto antes.

En el caso del diseño existe un concepto similar, la deuda de diseño (o design debt en inglés). Al igual que ocurre en los desarrollos, diferentes factores pueden afectar a la calidad del diseño de un producto, algunos de ellos se podrían haber evitados, mientras que otros son el resultado de la propia iteración del producto que se va desarrollando.

No es nuestro trabajo identificar ni resolver este problema, pero esta bién conocerlo. Si queréis leer más, os dejo este artículo de cómo se enfrentó Linear a este problema en 2024.

Herramientas de prototipado

Como verás en los recursos, hay varias herramientas de prototipado que podemos usar, aunque la que tiene la medalla de oro por excelencia es Figma. Cada vez son más las empresas, sobre todo startups, que valoran tener a ingenieros frontend que sean capaces de crear un nuevo proyecto y montar prototipos e interacciones para validar algunas pruebas de concepto. No necesitas convertirte en un experto en la herramienta, pero sí tener unos conocimientos básicos de cómo hacer layouts, prototipar, crear componentes, …

Si sois muy buenos desarrollando y conocéis bien el proyecto, no descartes el código como herramienta para prototipar. Mucha gente lo infravalora porque se piensa que es más lento que si usásemos otra herramienta como Figma, y puede que sea verdad, pero no tienes por qué seguir buenas prácticas de programación para este propósito. Incluso puedes usar fake data para no tener que implementar una llamada a un API. Además, en caso de validarlo y seguir adelante, tendrás una parte del trabajo hecho.