Cuando hablamos de tecnologías de pantalla plana (como LCD o LCoS), el término pixel perfect se aplica a las imágenes que se muestran exactamente con la cantidad de píxeles que poseen. En otras palabras, la imagen no está expandida (se utilizan varios píxeles para representar uno solo) ni comprimida (se utiliza un solo píxel para representar varios). Por lo tanto, no hay distorsión, pues cada píxel de la imagen entra exactamente en un píxel de la pantalla.
En diseño web, un diseño es pixel perfect cuando cada elemento de la interfaz queda delimitado exactamente por las líneas base de un boceto o wireframe. Como ya comentamos, todo wireframe debe presentar una grilla dividida en columnas que permita demarcar el ancho y la ubicación de cada bloque de la página. Si queremos que nuestro diseño sea pixel perfect, también deberemos trazar filas horizontales.
La alineación y el tamaño de los bloques deben restringirse a las líneas trazadas. Un corrimiento de apenas medio píxel hará que el diseño deje de ser pixel perfect. Fallas en apariencia mínimas, como bordes borrosos, objetos que «saltan» de posición entre páginas y diferencias de color, atentan contra la imagen que el usuario tendrá de nuestra marca. Pero pretender que todos los objetos queden ubicados exactamente donde lo indica el wireframe presenta algunos problemas:
- La estructura bosquejada por el diseñador (a través de herramientas como Photoshop) puede ser técnicamente difícil de respetar para el desarrollador.
- Una plantilla pixel perfect tiene, por definición, un ancho fijo en píxeles. Esto no es nada conveniente en una época donde, debido a la creciente variedad de dispositivos para navegar por la Web, existen cada vez más resoluciones de pantalla. Es posible diseñar varias plantillas pixel perfect de diferentes tamaños, pero esto multiplica el tiempo de desarrollo y no llega a cubrir toda la variedad de anchos existente (como sí puede hacerlo el diseño responsivo).
A pesar de los problemas del enfoque pixel perfect, diseñar wireframes siempre es un excelente punto de partida para lograr una buena armonía entre los elementos que componen nuestra interfaz.