¿Que significa diseño Pixel Perfect?

Seguro que en alguna ocasión, buceando por webs de ofertas de trabajo, os habéis encontrado con descripciones de puestos que solicitaban las siguientes características:

Necesario saber implementar píxel perfect.
Imprescindible experiencia en desarrollo web de diseños «pixel perfect».
Es importante que tu nivel de maquetación sea pixel perfect.

Es muy probable que os hayáis quedado con la cara a cuadros. Puede que penséis que se trata de otra de esas característica de moda como la «proactividad» o la «visión 360º», que casi de forma automática se añaden a las ofertas laborales y no representan ninguna diferenciación entre candidatos, ya que son valores tan subjetivos que bien se los podían haber ahorrado.

Por el contrario dominar las principales técnicas del mandamiento Pixel Perfect creará un valor añadido sobre nuestro currículo y al mismo tiempo conseguiremos trabajar de una forma más eficiente y ordenada.
Pero…

¿Qué es eso del “Pixel perfect”?

Es un concepto utilizado mayoritariamente por diseñadores y maquetadores digitales, que se basa en: diseñar logrando la perfección, para que cada parte de la página o aplicación trabajen conjuntamente en ofrecer la mejor y la misma experiencia para los usuarios en cualquier tipo de navegador y dispositivo.

Para lograr este objetivo se deben aplicar una serie de técnicas centradas en los siguientes campos de actuación:

ACCESIBILIDAD

La accesibilidad es un tema muy amplio, siendo relevante para cualquier usuarios, no simplemente aquellos que tienen algún tipo de discapacidad. Las buenas prácticas tales como facilidad de uso y la claridad son un hecho en el que se ha avanzado mucho en los últimos años. Aunque también hay medidas que se pueden tomar para hacer su trabajo más accesible a personas con patologías tales como el daltonismo o la dislexia.

MODELO DE COLOR

Seguramente jamás se te haya ocurrido anteponer el modelo de color HSB al RGB o CMYK a la hora de crear una nueva gama cromática. Pero una vez lo hayas probado podrás ver que en realidad es una manera muy eficiente de crear tonos sobre un color base. En la tabla ejemplo la se mantiene el matiz (H) y se varían los valores de saturación (S) y Brillo (B). La mayor coherencia con respecto al modelo RGB es más que evidente.

DEFINICIÓN DEL PÍXEL

Si nos centramos especialmente en la terminología, debemos tener cuidado con que los bordes de las formas sean rectas. Todos y cada uno de los píxeles deben estar enteros. A través de la configuración de una serie de parámetros en Photoshop conseguiremos que no exista rasterización de los píxeles y asé evitar el suavizado de los bordes y esquinas.

ORGANIZACIÓN Y NOMENCLATURA

Hoy en día, casi ningún diseñador trabaja en solitario. Su trabajo muchas veces tendrá que ser compartido con uno o varios desarrolladores y/o diseñadores. Una buena organización es esencial en estos casos, ya que ahorra mucho tiempo a otras personas. Tener todos tus archivos ordenados y por capas significa que otros diseñadores podrán manejarse perfectamente con tu trabajo, si a esto sumamos una nomenclatura clara y concisa conseguiremos un fujo de trabajo muy agradable.

EXPORTACIÓN

A la hora de exportar los archivos finales, a un formato válido para web, es importante seguir una serie de pautas para que estos no se excedan en tamaño y mantengan intacta la calidad. En el ejemplo, la herramienta de “guardar para web” de Photoshop es realmente útil.

ALINEAMIENTO Y ESPACIADO

Uno de los puntos fuertes en tu viaje hacia el pixel perfect es conseguir que la alineación y el espaciado sean los correctos. Así como una consistencia de criterios respecto a márgenes y tamaños.

COLOR, FORMA Y SIGNIFICADO

A través del tiempo algunos colores y formas se han convertido en sinónimo de ciertas funciones y mensajes dentro del diseño de una interfaz. Hay que tener muy claro como combinarlos, ya que puede causar confusión en el usuario que esperará una respuesta específica.

JERARQUÍA VISUAL

El diseño, los colores y la tipografía tiene un enorme influencia en cómo procesamos la información, y en que parte fijar nuestra vista. Hay que tener en cuenta que se quiere mostrar al usuario, por que orden y con que relevancia.

TIPOGRAFÍA

La tipografía es una disciplina que a menudo se pasa por alto en la experiencia digital. Pero como la mayoría de información se transmite a través del texto esta es sin duda una de las partes esenciales de una buena experiencia de usuario. Mantener una tipografía con un tamaño legible y un buen interlineado es esencial.

Si queréis profundizar un poco más en este apasionante tema no dudéis en visitar la web de los gurús del pixel perfect “Ustwo”, desde dónde os podéis descargar un completo manual en pdf que trata todas las técnicas nombradas en este post.

Otro site de referencia, un poco más generalista, es el de Google y sus reglas para el diseño de aplicaciones para Android.