Olvídate del «pixel perfect» y enfócate en la experiencia
De vez en cuando leo ofertas de empleo para ver qué tipo de perfiles se buscan, principalmente para conocer cómo está el mercado y enfocar así los artículos que escribo o las clases que doy.
Y me choca mucho ver como en pleno 2020 sigue habiendo ofertas con este tipo de frases:
Craft every detail of new product features, from idea to pixel-perfect.
Espera… ¿qué? Este término, más allá de que está desfasado, tiene varias implicaciones. Aunque no todas son malas 😉
«Pixel Perfect» es muy de los 90-00s… y no existe
Esta expresión apareció cuando las páginas web se diseñaban utilizando Photoshop y cuando se exportaba, se hacía mediante los slices, que requerían diseñar de forma muy artesanal.
El diseño se exportaba cortando «trozos» al milímetro, ideales para desarrollar después con tablas y para resoluciones que normalmente eran 800×600 o 1024×768 (o algún tamaño primo hermano)… llevando al clásico texto de «Web optimizada para Internet Explorer y para una resolución de 800×600».
Para los que habéis aterrizado directamente en Sketch o Figma, me refiero a esto:
Durante los últimos años se han producido dos hechos que tiran por tierra esta filosofía del «pixel perfect»:
Por un lado, la web es fluida. No se diseña para una resolución en concreto y es muy inocente suponer que lo que diseñas en cualquier programa que utilices quedará reflejado en desarrollo de forma exacta en cualquier resolución. Esto no pasará jamás, precisamente porque hay centenares de tamaños de pantalla y resoluciones diferentes, además de que cada vez hay más dispositivos: no solo se trata de diseñar para móviles, ¡sino que hasta se puede navegar por una web en una televisión o en el frigorífico!
Y por el otro, muchos de los componentes de UI se renderizan directamente utilizando CSS: la mayoría de botones, con sus sombras, relieves, bordes redondeados, degradados… se construyen mediante código, no exportando «trozos» de un archivo de diseño y añadiéndolos en el HTML.
En resumen: el diseño actual es demasiado fluido y animado como para pretender que sea exacto.
De «pixel perfect» a la accesibilidad
Esto requiere un cambio de enfoque, pero creo que es muy necesario. Como diseñador@s debemos dejar de quedarnos encallados en la estética y pensar más en la función.
Se trata de pensar más en cómo se va a utilizar lo que diseñamos y quién va a interactuar con ello y en qué circunstancias. En saber diseñar de forma accesible, usable y universal y no tanto en si el espacio es perfectísimo y exacto en todas las resoluciones.
Aquí va una dura verdad: aunque el diseño puede hacer que el usuario pase por alto algunos fallos leves en UX, por lo general el público medio no aprecia de forma tan profunda como tú el detalle con el que has diseñado esa sombra.
Ojo, no estoy diciendo que debas ignorar la estética, ni mucho menos… pero no te cases con ella y vayas hasta el fin del mundo persiguiendo una implementación exacta. Porque nunca va a pasar.
Tú diseñas experiencias, no empujas pixeles
Pedir un diseño «pixel perfect» ya es un indicativo de que no se comprende el papel del diseño en la actualidad.
Ni tú ni yo empujamos pixeles. Diseñamos experiencias que acompañan al usuario por distintos pasos hasta llegar, habitualmente, a la consecución de un objetivo.
Diseñamos para explicar, transmitir y enseñar. Y todo esto, en un medio cada vez más líquido y de una forma muy agnóstica al pixel, al dispositivo y al contexto.
No vendes cuadros estáticos.
La educación está rota… y el empleo también
En relación a los párrafos anteriores y de cara a la formación en diseño y las empresas, un par de peticiones:
Hay que explicar y enseñar a l@s alumn@s los medios sobre los que van a diseñar, no únicamente herramientas. Hacerles mega-cracks de Sketch no hará que sean mejores diseñador@s, sobre todo porque no van a saber cómo volcar su diseño al mundo real y a la multitud de dispositivos, contextos y situaciones existentes. Hay que enseñarles a diseñar experiencias, no en clavar un diseño.
Las compañías debería valorar a sus diseñador@s en base al éxito de lo que diseñan y en cómo cumple con determinados objetivos, limitaciones y timings. No en revisión de portfolios como si se revisara un álbum de cromos.
Es por todo esto que insisto tanto en que los portfolios deben explicar un proceso de diseño, no reunir capturas. Explica cómo piensas y no lo bien que sabes usar Sketch o Figma. Muestra cómo la experiencia que has diseñado convive en este medio líquido y cambiante.
Consideraciones finales
Todo esto no significa que no se tenga que diseñar para ninguna resolución, al contrario. Mediante cualquier herramienta de analítica (pongamos, Google Analytics) puedes saber qué resoluciones son las que utilizan la mayoría de tus usuarios.
Utilízalas como base para crear los Frames y Artboards al diseñar y asegúrate junto al equipo de desarrollo que en esas resoluciones se ve todo de forma correcta: comprueba que el texto se lee bien y tiene proporciones correctas, que el CTA más importante está dentro del viewport, etc. Pero no te ciegues con pretender que quede todo clavado en cualquier resolución.
Como te decía arriba, tú diseñas experiencias, no empujas pixeles.
Y por último: l@s que me conocéis sabéis que tengo cierta obsesión con el espaciado y la alineación de los elementos. Esto no tiene nada que ver con el «pixel perfect»: se trata de que pese a que el medio es fluido, el diseño guarde las proporciones y tamaños correctos y cumpla con las bases del diseño.
Que no sea una excusa para obviar la consistencia, los principios Gestalt o las jerarquías en la tipografía. El «pixel perfect» tiene cabida en tanto que se entienda como ponerle cariño a lo que se diseña, no en pretender que sea exacto en todos los medios como si fuera una captura de pantalla.