05/02/2014

Diseño web pixel perfect: alcanzando la exactitud

Diseño web pixel perfect: alcanzando la exactitud

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.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce