Olvídate del «pixel perfect» y enfócate en la experiencia

Escrito por Cris Busquets. Publicado en Opinión

El final del «pixel perfect»

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.

 


¿Te ha parecido útil? ¡Compártelo! :)


Esto también te interesa 👇

Entrevista a Alicia Blázquez (Fjord)

Entrevista Alicia Blázquez, product & brand designer en Fjord

¿Qué es un tree test?

¿Qué es un tree test y cómo puede mejorar la usabilidad?

HSL: colores más intuitivos


Deja tu opinión

  1. Hola! Enhorabuena siempre por tus esfuerzo en generar debate y aportar a la comunidad. 😉 En este caso me animo a darte mi opinión porque creo que el enfoque de este post es errado de base (es una opinión personal). Yo diría que nadie del sector usa ya ese término para referirse al clásico diseño con «slices» que comentas. Todo el mundo lo asocia bien a la frase con la que concluyes «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.» Y las ofertas igual… (no he realizado una entrevista en los últimos 5 años en la que alguien quisiera decir lo contrario).

    En 2014 recuerdo que Ustwo lanzó su famoso manual «Pixel Perfect» y ya ahí quedaba clara la relación con «atención al detalle» y aplicación de fundamentos de color, tipografía, composición… (https://www.ustwo.com/blog/the-pixel-perfect-precision-handbook)… (También es verdad que no es lo mismo diseñar web que apps)

    No obstante en la mayoría de los sistemas de diseño (desde Carbón a Material Design) hay un escrupuloso trabajo de ajuste, escalado y espaciado (si eso no es pixel perfect…) https://uxdesign.cc/worry-less-about-spacing-in-figma-8b44f34db4f5

    Un abrazo fuerte y ánimo con todo.

    1. Cris Busquets

      ¡Hola Pablo!

      Gracias por tu comentario 🙂
      La comparativa con los «slices» la he incluido porque es de donde sale el concepto. En ofertas lo sigo encontrando y también forma parte del discurso de muchos cursos y masters.

      Quizás no en diseño, pero en otros equipos (marketing, producto) muchas veces se piden diseños que se vean *igual* en cualquier pantalla, e igual al que ell@s han aprobado. Nos falta mucha pedagogía allí todavía 🙂

    2. B

      Totalmente de acuerdo con Pablo. Yo cuando veo lo de pixel perfect, entiendo que es mimar para que la implementación quede lo más ajustada posible al diseño. Pasa muchas veces a la hora de maquetar hay detalles que pueden restarle calidad, por la razón que sea, ya sea por despiste, desconocimiento o falta de ese «ojo experto» de la persona que lo implementó (lo he visto mil veces con paddings o kernings en los textos)

    3. Cristina

      Ojalá Pablo!
      Pero yo soy desarrolladora y el equipo de diseño de la consultora con la que trabajamos sigue pidiéndonos que los anchos de los elementos sean de los mismos píxeles que en el zeplin. Testean en 4 resoluciones que tienen que estar como si fuera una captura de pantalla y las demás les dan igual.
      Es increíble que en pleno 2020 siga pasando esto…

  2. Alicia

    Hola, estoy tan de acuerdo que me cuesta trabajo creer que sigamos con este debate en pleno 2020. Jaja. La cosa es que sigue siendo un debate pertinente porque hay mucha gente que, como dice Cris, sigue con la idea de que el diseño que le presentas se tiene que ver absolutamente igual en todas las pantallas de la oficina. Recuerdo el caso concreto –y muy reciente– de una cliente con la que tuvimos una larguísima conversación de besugos en la que ella nos decía que en la captura que le pasamos cuando el diseño había más espacio entre el logo y el menú en la cabecera que en el trabajo terminado. Y no fue posible hacerle entender que en el diseño se simulaba una resolución que su pantalla tenía otra. Al final «ganamos» por agotamiento, pero ella se fue con sensación de haber sido engañada.

    En fin. ¡Buena semana!

  3. Pues yo sí creo que muchas empresas piden el pixel perfect de clavar el diseño, me ha pasado en varias oportunidades y cuesta mucho hacerles entender que eso ya no existe, que la fluidez del medio y la funcionalidad es lo que tiene que preponderar.

    Me pasa también con la compatibilidad con viejos navegadores. Quieren diseños súper modernos que funcionen clavados en IE cuando la tecnología no lo permite. O deberías rehacer todo y llenar de código basura el proyecto para igualar el diseño en un navegador así. Y no será la misma experiencia.

    Algunas personas es porque no quieren renovarse, otras porque se olvidan la función del diseño y lo confunden con estética solamente, y otras porque dieron un sí rotundo a un cliente y no pueden salirse de lo prometido.

    Me encantó tu artículo, poca gente se anima a decirlo!
    Un abrazo!

  4. Nicolas

    Hola Cris! En general estoy de acuerdo con que es hora de darle importancia a aquellas cosas que durante mucho tiempo hemos tenido olvidadas o nos hicimos los distraídos. El diseño es muchísimo más que trabajar con píxeles, y es un proceso largo, compjejo y que involucra a muchas partes.

    Ahora bien, hago alguna salvedad con el tema de pixel perfect: trabajo en una aplicación de escritorio (Sketch), que no podría ser posible sin un cuidado “al píxel” de la interfaz y sus componentes.

    Y el resultado salta a la vista. El resultado de un trabajo minucioso y una atención al detalle profunda, es lo que diferencia a un carpintero que ha masterizado su trabajo o alguien que te vende una mesa fuera de escuadra porque total, igual es una mesa y sirve.

    Yo creo que lo que nos debemos, es, además de priorizar y poner el eje sobre el valor que el diseño agrega a tu negocio o servicio, aprender a distinguir qué elementos requieren un cuidado a nivel atómico (píxel), o qué contextos particulares (como es el caso de Sketch).

    Por lo demás, me encanta todo el contenido que creas, un abrazo enorme desde Argentina!

    1. Cris Busquets

      ¡Hola Nicolás!

      100% de acuerdo. Evidentemente trabajamos con pixeles y hay que tener cuidado con como trabajamos por ellos, pero esto no significa pretender que el diseño se implemente igual en cualquier resolución y nos enceguemos en eso por encima de la experiencia o de lo que supone ese diseño.

      Gracias 🙂

Deja tu comentario

Tu email no será publicado. Los campos con asterisco son obligatorios.

Únete a 3.338 diseñador@s y recibe los mejores contenidos para crecer.


No te enviaré spam. Recibirás un correo semanal y descuentos promocionales. Podrás darte de baja cuando quieras.