Pixel perfect. ¿Comor?

El concepto satélite de Pixel perfect está ronda que te ronda entre nosotros. ¿Qué es esto?

Pixel perfect significa algo más allá de un diseño adaptado a una retícula cuadriculada. De hecho, este sistema de cuadrícula es bastante viejuno y anterior a la llegada de los ordenadores. Dadle un vistazo a este cartel de 1968.

Cartel Vormgevers. Aparece un cartel con una rejilla de cuadrícula en el que se aprecia la tipografía ajustada a los cuadrados que se forman.
Cartel Vormgevers. Wim Crowel, 1968

Pixel perfect es simple y llanamente el mínimo de calidad que debería tener una maquetación web. Esto incluye una atención a las reglas básicas de edición editorial y a los estándares web.

Píxeles perfectos

Entre toda la información recabada sobre el tema, por lo que más me llevo las manos a la cabeza es por la confusión que hay con respecto a los píxeles.

Un pixel es la unidad mínima de color que se puede representar a través de una pantalla (en impresión sería el equivalente al punto). Puede tener más o menos profundidad, dependiendo de por cuantos bytes esté formado el dichoso pixel. Si un pixel es la unidad mínima de medida para cada punto de color, ¿de dónde ha salido la idea de los medios pixeles?

He leído mucho acerca de cómo mejorar la apariencia de los pixeles en photoshop y del erróneo mensaje de «cuadrar las cosas al pixel». Todo depende, queridos, de la cantidad de bytes que formen nuestro pixel y del tipo de soporte que manejemos. Los medios píxeles no existen, es la resolución.

mapas de bits versus vectores

Las imágenes formadas por mapas de bits alcanzan un realismo mucho mayor que las vectoriales, ya que estas están formadas por pixeles y no por áreas delimitadas por curvas Bézier. Es importante recordar que el tamaño de los píxeles es variable y que la resolución óptima estandarizada para las imágenes mostradas en pantalla es de 72 pixeles por pulgada, pero puede ser variable, como todo.

Las imágenes BMP están condenadas a ir de la manita con la resolución del soporte, mientras que las imágenes vectoriales se pueden ampliar y reducir sin temer por la resolución, ya que se trata de un área escalable. Eso si, el aspecto de una imagen vectorial es muy característico y resulta poco natural, pegando el cantazo máximo en los detalles.

Detalle de una rosa en una imagen formada por pixeles.
Imagen en mapa de bits
detalle de la misma rosa en formato vectorial, donde se aprecia la perdida de realidad al no tener pixeles.
Imagen vectorizada

Por mucho que diseñes en un programa vectorial, al final el resultado depende del soporte. Si el soporte es una pantalla pasarás por el aro de tener en cuenta la resolución, te pongas como te pongas.

GESTION DE COLOR

Segundo grito en el cielo: he leído algunos post acerca de cuál es es el mejor sistema de representación de color y que además esto tiene que ver con el rollo del pixel perfect. (Rolling eyes moment)

Logotipo de la marca PANTONE
Las cartas de color PANTONE sirven como estándar para la gestión de color

Os guste o no, el rey es el CMYK. ¿Porque? Pues porque es simple y llanamente el que menos colores puede representar.

En el apasionante mundo de la imagen corporativa, es muy importante que ciertos elementos cumplan a rajatabla la carta de color de la marca y los sistemas RGB o HSL/HSV poseen colores que no se pueden conseguir por métodos de impresión, por muchas tintas extras que tenga tu plotter. Por otra parte, los colores RGB que no se pueden imprimir tienen tufillo a tóxico. Que para fotos guay, pero ya.

Como estándar extendido en colorimetría, tenemos las cartas de color PANTONE, cuyo único propósito en la vida es zanjar la discusión de que si tu máquina está bien calibrada o no y vendernos merchan cuqui de colorinchis.

¿ENTONCES?

Entonces nada. Hay que practicar un poco la abstracción y colocarse en el plano de la fantasía. Respeto a la retícula y a la resolución de los soportes más exigentes, por favor. Llamemos las cosas por su nombre y dejémonos de cool lexic que provoca ganas de morirse a las personas aunque te pienses que te queda guay en LinkedIn.

BEBE AGUA

Estándares web

Otro de los factores a los que espero de corazón que se refieran cuando te hablan de pixel perfect, es a cumplir los estándares web en todo su esplendor.

El contenido web tiene que ser accesible. ¿Qué significa esto? Pues que tienen que cumplir uno de los principios básicos del diseño universal: la accesibilidad de los usuarios al contenido, atendiendo a la diversidad de la especie humana y la variedad de sus opciones bajo el principio KISS.

KISS

ACCESIBILIDAD

Los diseños deben ser utilizables sin modificaciones por personas con distintas capacidades. En general, podemos hablar de cuatro características básicas de un diseño accesible:

  • Perceptibilidad
  • Operatividad
  • Simplicidad
  • Indulgencia

Podemos decir que un diseño es perceptible cuando todo el mundo es capaz de percibir dicho diseño independientemente de sus capacidades sensoriales.

La operatividad es la característica que posee un diseño de ser utilizado independientemente de las capacidades físicas del individuo. Se deben minimizar las acciones repetitivas y los esfuerzos físicos prolongados.

La simplicidad se logra cuando cualquier usuario puede manejar y entender fácilmente el diseño reduciendo al mínimo la curva de aprendizaje de uso.

La indulgencia se logra cuando se minimizan los errores y las consecuencias de los mismos. Me gustaría recalcar la importancia de recapacitar sobre los efectos negativos que causan algunos procesos en el medio ambiente (y en el humano entero).

¿USABILIDAD?

Usabilidad es un neologismo técnico, no lo busques en el María Moliner. Consiste en la optimización de la operatividad de un diseño en concreto con el objetivo de aumentar su facilidad de uso disminuyendo su curva de aprendizaje, mientras se aumenta su flexibilidad y robustez. Mucha tela para un solo pollo, de ahí la confusión generalizada.

La imagen muestra la patente del mecanismo de un chupete
Patente del mecanismo de un chupete

Tal como dije antes, una web accesible incluye per se el ser usable. No entiendo la necesidad de utilizar neologismos para conceptos que son más antiguos que un bosque, aunque si que entiendo el porqué de la cantidad de tonterías que campan a sus anchas en LinkedIn, también conocidas como cool concepts. Las webs, son más o menos operativas.

Si uno de los principios universales del Diseño es la accesibilidad, para qué tanta redundancia? Hacer la peonza lingüística no cumple el principio de accesibilidad.

¿UX/UI?

A colación con el tema del pixel perfect, también he leído barbaridades acerca de la experiencia de usuario. Que si es una moda, que si es un fiasco, que si tal y tal. A todos estos seres, me gustaría recomendarles Crítica de la razón pura (Kant). Prometo ensañarme con este punto en una próxima entrada si os resulta de interés. Hacédmelo saber vía formulario al final de esta misma página.

Portada del libro Crítica de la Razón Pura de Emmanuel Kant
Crítica de la razón pura – Kant.

La experiencia de usuario (UX) es una parte del proceso de uso de una creación cuyo análisis científico tiene como propósito mejorar la calidad de su diseño de acuerdo a unos estándares determinados. Sin manejar datos científicos, solo es que te ha molado algo mucho del benchmarking que has hecho y lo has implementado porque te parece buena idea y tal.

LEY DE FITTS

Dos ejemplos de medición científica relacionados con la experiencia de usuario que son algo así como la piedra angular:

Ecuación de la Ley de Fitts, formulación de Shannon
Ley de Fitts, formulación de Shannon

La Ley de Fitts tiene que ver con la precisión al apuntar, donde las áreas mas pequeñas y difíciles de alcanzar requieren más dedicación para lograr el mismo éxito que las mayores. Resulta poético, ¿no? Os he mostrado la formulación de Shannon, por lo de Shannon Stone. (Perdón)

Sharon Stone

LEY DE HICK

La Ley de Hick, por su parte, nos indica que cuanto más hay para elegir, más tardas en decidirte. El pinchazo de esta ley está en que obvia las necesidades del sujeto selector, por lo que aconsejo seguir siempre en su lugar el principio general KISS (Keep It Simple, Stupid).

Ecuación de la ley de Hick.
Ley de Hick

Los beneficios que se obtienen al implementar estos procesos más propios de la gestión de calidad que del proceso creativo en el propio proceso creativo son muy grandes pero imprescindibles si se quiere llegar a conseguir el mejor diseño posible y el liderazgo. Pero, si es posible, con cifras objetivas y no porque lo hayas leído en el LinkedIn.