Descubriendo el Pixel Perfect

Publicado el 06/12/2017

¿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.

9 Comentarios

  1. Jose Luis Silva

    Excelente artículo, muy bien explicado, pero le faltan ciertas mejoras en redacción y ortografía para ser entendible con facilidad.

    • Juan Barcia

      Muchas gracias por el comentario José Luís, intentaré trabajar un poco más la redacción y la ortografía en siguientes artículos. Aunque ya saben lo que dicen, zapatero a tus zapatos…

      • Eli

        Muy buen artículo!! Me re sirvió para tener en cuenta algunos aspectos que no consideraba. No sabía que el Pixel Perfect involucraba todos esos aspectos!
        Saludos!

        • Juan Barcia

          Muchas gracias Eli, me encanta saber que te ha servido para entender un poco mejor el concepto.

          ¡Un saludo y muchas gracias de nuevo!

  2. Belén García

    Excelente! Gracias por compartirlo!

  3. Roberto

    Igual que a Eli, me sirvió para contar con algunos detalles que en ocasiones se pasan por alto.

    En mi opinión, creo que para web, el problema de fondo que veo en este artículo es que se siga usando photoshop, por varias razones. Adobe XD o Sketch o Figma ponen solución a muchos de estos detalles rápido y fácil y aunque la teoría siempre es una ayuda, en la práctica photoshop ya se nos ha quedado muy atrás para los requerimientos digitales de los clientes, equipos de trabajo y compañías en muchos aspectos.

    También recomiendaría el uso de Plant o Abstract cuando se trabaja con equipos para tener un historial de versiones lo mas organizado posible.

    Un abrazo!

    • Juan Barcia

      Muchas gracias por el comentario Roberto,

      La verdad es que este artículo tiene bastante tiempo y en su época tanto Sketch como Adobe XD no estaban tan implementados. De todas maneras, Photoshop para mi sigue siendo una herramienta muy válida a la hora de prototipar proyectos digitales.

      ¡Un saludo!

  4. Alfonso

    En mi opinión todos estos conceptos, son la base del diseño ahora hace 100 años y supongo que dentro de 100, el resto son meras herramientas con las que desarrollarlo, photoshop, sketch, scotch, escuth… o lápices de colores, lo importante, en mi opinión es quedarse que la idea de arte y función. Gracias por repasar las ideas básicas del diseño.
    Saludos

Enviar un comentario

Juan Barcia Ferrer te informa que los datos de carácter personal que me proporciones rellenando el presente formulario serán tratados por Juan Barcia Ferrer como responsable de esta web.

La finalidad de la recogida y tratamiento de los datos personales que te solicito es para gestionar los comentarios que realizas en este blog.

Legitimación: Consentimiento del interesado. El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no atender pueda tu solicitud. Como usuario e interesado te informo que los datos que me facilitas estarán ubicados en los servidores de Raiola (proveedor de hosting de Juan Barcia Ferrer) dentro de la UE. Ver política de privacidad de Raiola.

Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en [email protected] así como el derecho a presentar una reclamación ante una autoridad de control.
Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://juanbarcia.com, así como consultar mi política de privacidad.

El autor

Juan Barcia

Diseñador de vocación,
freelance por convicción.

En este humilde Blog sobre mis vivencias como diseñador freelance intaré compartir toda mi experiencia acumulada de la manera más didáctica y amena posible.

 

Mis redes sociales

Últimas publicaciones