Como hacer diseño web Pixel Perfect

Para muchos diseñadores gráficos, diseñar páginas web es un dolor de cabeza, principalmente porque su trabajo es utilizado por un desarrollador o ingeniero de sistemas, que acostumbrado a trabajar con matemáticas y cifras exactas, no puede manipular nuestro diseño correctamente.

Es importante para los diseñadores saber que el diseño de una página web es mas un trabajo de ingeniería que de arte. Muy similar al diseño automotriz, en donde primero se hace un concepto artístico, despúes un diseño 3D en escala real y a partir de ahí­ los ingenieron pueden espezar a construir el auto.

De la misma manera que con los autos, las páginas web deben ser hermosas pero también funcionales ¿De que sirve un auto muy bello si no es aerodinámico o simplemente cómodo? Es por eso que despues de hacer el concepto artístico, es necesario hacer un diseño técnico que respete todos los aspectos de funcionalidad.

Una Interfaz Gráfica de Usuario es mucho mas compleja que una obra de arte. Mientras el arte existe unicamente para su apreciación y estética, la interfaz gráfica tambien existe como un espacio arquitectónico habitable y además como una herramienta funcional.

Entonces, un diseño de interfaz, debe ser Hermoso, Habitable y sobre todo Funcional. Arte plástica, arquitectura e ingeniería en perfecta armonia.

¿Que es “perfect pixel”?

Muy usado por los gurús del diseño web, es un concepto que significa que un diseño gráfico para web debe ser perfecto pixel por pixel, cada uno de los 72 pixeles que componen cada pulgada de nuestro diseño, deben ser perfectos y en armonia.

Esto significa que por mas que los diseñadores graficos odien las matematicas, es hora de usarlas, pues en el diseño web, las medidas, sumas y multiplicaciones lo son todo.

Antes que nada, la diferencia principal entre un diseñador gráfico para impresos y uno web, es que mientras el de impresos envía un archivo de imagen TIFF o JPG para imprimirse directamente, el web debe envíar su archivo PSD fuente, el cual será recortado y seccionado para crear la aplicación o sistema necesario. Es por eso, que antes que nada, hay que saber arganizar un PSD para su manipulación.

CREACIÓN Y ORGANIZACION DE UN PSD

LINEAS GUIAS
No solamente en los bordes de la página, todo el documento debe tener lineas guias. Las lineas deben delimitar espacios para fotos, textos, margenes. En caso de usar contorno en los bordes, este debe entrar dentro de la linea guía, igualente sombras y brillos.

TRANSPARENCIAS
No se pueden usar modos de fundido entres las layers (multiply, screen, etc) Todas las transparencias deben ser por medio de Opacity.

SOMBRAS
Al igual que con las transparencias, no se pueden usar modos de fundido, solamente opacidad. Las sombras en una imagen deben entrar dentro de los margenes de un div, por ejemplo, si hay dos botones con sombra uno al lado del otro, no pueden juntarse las sombras, por lo tanto, si la sombra de es 5 pixeles de cada lado, entre ambos botones debe haber 10px para separarlos.

ELEMENTOS INDEPENDIENTES
Cada boton, imagen, texto y fondo debe estar separado y debe delimitarse por medio de líneas guia. Estos deben estar agrupados y ser completamente independientes de otros elementos.

LAYERS y CARPETAS
Cada sección debe estar agrupada en una carpeta que solo contenga los elementos (en layers) de dicha sección. Al momento de ocultar dicha carpeta, deben ocultarse todos y unicamente los elementos de la sección, sin afectar en nada a otras secciones o espacios del diseño.

Otro aspecto primordial en el diseño web, es la arquitectura de información, o la manera en la que los elementos son acomodados en la pantalla y que a pesar de tener movimiento o cambios estructurales, conseven su belleza y organizacion.

ARQUITECTURA DE INFORMACION

PATRONES y FONDOS
Hay dos tipos de secciones o áreas de interfaz, las absolutas y las relativas, las absolutas son area que contienen elementos fijos que no cambian (ej. menus, logotipos, banners) y las relativas que son áreas dinámicas que contienen información que cambia (ej, textos, listas, galerias). Las areas absolutas o fijas, pueden tener un fondo definido que siempre se verá igual, pero las relativas o dinamicas pueden cambiar de tamaño y por lo tanto su fondo debe poder repetirse hacia los lados o arriba y abajo. Los fondos de dichas areas deben ser en forma de pátron, que permita expanderse sin perder calidad, por ejemplo, un degradado vertical debe poder repetirse horizontalmente.

COHERENCIA

Los elementos de una interfaz deben ser coherentes, todos los textos con enlace deben tener el mismo color, todos los botones en el contenido deben ser iguales y así tambien los bullets, titulos, textos, etc. De igual manera, los espacios entre elementos deben ser constantes y respetados, por ejemplo en una lista de elementos, cada linea de la lista debe tener el mismo espacio entre si.

MARGENES Y ESPACIOS
Los elementos de una interfaz siempre tienen 2 propiedades que los separan entre si, el margen y el espacio. El margen es la distancia de ese elemento hacia otro elemento y es espacio es la distancia del contenido de dicho elemento con su margen. Por ejemplo, en una caja de texto, el espacio es la distancia del texto hacia el borde de la caja y el margen es la distancia de dicha caja con otra caja de texto o elemento.

COMUN DENOMINADOR
En una interfaz hay grupos de elementos dentro de areas o secciones especificas, el conjunto de dichos elementos deben sumar exactamente el tamaño de su área. Si tenemos 8 fotos de 50x50px cada una repartida en 4 columnas de 2 celdas, su area debe medir exactamente 200x100px.