¿Has oído hablar alguna vez del pixel perfect? ¿Te han preguntado por ello en entrevistas de trabajo o lo has visto en ofertas laborales? Si es así, quizá tengas la duda de a qué se están refiriendo. Salvo que sepas a ciencia cierta lo que es, bien por tu formación o por tu experiencia.
Pero si no es así y necesitas aclarar este concepto para que no te pillen como «novato» en una entrevista, aquí tienes toda la información que necesitas saber acerca de ello. ¿Le echas un vistazo?
Qué es el pixel perfect
Es posible que por esas palabras puedas pensar que se refiere a crear ilustraciones o imágenes con píxeles perfectos (es decir, con los elementos que conforman una imagen).
Pero en realidad va más allá. Es cierto que se trata efectivamente de esto, de conseguir la perfección con los diseños.
Estas técnicas se utilizan principalmente en los diseños de páginas o aplicaciones, pero nada impide que puedas utilizarlo a la hora de crear imágenes con el ordenador.
El término empezó a usarse en los años 90, que se caracterizaron porque las páginas web se hacían a través de Photoshop, de una manera más artesanal (no como ahora). Por eso, se buscaban personas que dominaran a la perfección la herramienta y las técnicas para que el diseño fuera el adecuado.
Por supuesto, han pasado muchos años y, si bien ya no hay muchos que busquen profesionales que sepan aplicar la técnica del pixel perfect, no está de más conocerla, o al menos saber cuáles son las técnicas que se utilizaban para conseguir un mejor resultado.
Te las contamos a continuación.
Técnicas de pixel perfect
Como te decíamos antes, aquí vamos a hablarte de las distintas técnicas que un profesional en pixel perfect ponía en marcha para conseguir su objetivo.
Accesibilidad
La accesibilidad es algo que no te permite bien saber a lo que nos estamos refiriendo si no te damos más datos, ¿verdad?
Imagina que tienes una página web que llevará un menú del que se despliegan varias opciones.
Una web no accesible sería aquella que, en esas opciones desplegadas, se pueda leer un extracto de cada página.
Una web accesible sería la que, en esas opciones desplegadas, tendríamos una palabra o dos que definieran lo que se va a encontrar en esa página.
Dicho de otro modo, y centrándonos en el diseño, se trata de crear una web o aplicación que sea fácil de navegar por ella, que no ponga problemas y que además sea intuitiva.
Tipografía
Si bien la tipografía podría entrar dentro de lo que sería la accesibilidad, lo cierto es que tiene su propia técnica.
Por un lado, hay que encontrar una tipografía que sea efectiva para el negocio o sector de esa web. Pero además, es importante que tenga un tamaño e interlineado adecuado para que sea legible, para que se pueda ver en cualquier navegador, dispositivo, etc.
En este caso no se recomienda apostar por fuentes de letras que sean muy originales, que se salgan de lo «clásico». Porque te puedes encontrar con que el navegador cambie la letra porque no la tiene, porque no se muestre el texto, etc.
El píxel
Cómo no, si hablamos de pixel perfect, una de las técnicas que debes dominar a la perfección es todo lo relacionado con los píxeles. No solo debes saber qué son, su importancia, etc. sino también cómo utilizarlos a tu favor.
Y en este sentido, debes saber que uno de los fallos de aquellos que no los dominan a la perfección es dejar que los bordes queden rasterizados (algo que puede hacer Photoshop por defecto).
Para evitarlo, necesitarás que los bordes sean rectos y, además, que estén enteros. Dicho de otro modo: mediante la configuración de Photoshop debes evitar el suavizado de bordes así como la rasterización de píxeles.
Jerarquía visual
Si bien esta técnica no está tan relacionada con los píxeles, sí que lo está con el orden en que van a aparecer los diferentes elementos de una web o de una app. Al hacerla en Photoshop había que tener muy claro cómo querías que quedara todo (porque era complicado cambiarlo después).
Por eso, a la hora de construir la «base» o estructura de la web, había que saber qué elementos eran relevantes, en qué grado y el orden en que debían aparecer para que quedara un diseño agradable a la vista.
Organización y nomenclatura
Salvo que la página web la hagas completamente tú, y te organices como quieras, llevar una buena organización da muy buena imagen.
En general los diseñadores trabajan en equipo. Por lo que presentar un archivo bien ordenador, por capas, y definiendo cada elemento (no solo las webs, sino también las imágenes, iconos, etc. que tenga esta) ayudará después a hacer cambios mucho más rápido, porque sabrás dónde tocar siempre.
Alineación y espaciado
Ofrecer un diseño web con varios productos, pero que cada uno esté más alto o más bajo que el siguiente será caótico. Primero, porque darás muy mala imagen; y segundo porque a nivel visual se sentirá tan desordenado que las personas solo querrán salir de allí cuanto antes.
Cuidar los márgenes, establecer líneas verticales y horizontales para que todo elemento esté centrado, y crear unos criterios para con el tamaño logrará un equilibrio en la página.
Además, conseguirá que el diseño “respire” y, con ello, que no se sienta abrumado por todo lo que vea, sino que vaya con más calma.
Color, forma y significado
Los elementos visuales de una web o app han de «casar». Es decir, es necesario que se combinen entre sí para que ofrezcan un resultado como si hubieran estado juntos siempre. De eso se encarga el pixel perfect.
De lo contrario, confundirá al usuario.
Por ejemplo, poner un icono negro con otro al lado fosforito.
Hay que prestar atención a esos detalles porque pueden destruir por completo el resultado final.
La técnica pixel perfect no se utiliza apenas ya, sobre todo porque las webs ya no se crean a través de Photoshop. Pero esta sí podrías trasladarla para otros usos. ¿Habías oído hablar de ella alguna vez?