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 50×50px cada una repartida en 4 columnas de 2 celdas, su area debe medir exactamente 200×100px.
Harley-Davidson, la marca de motocicletas más famosa del mundo, recuperó 40 millones de dólares el año pasado únicamente con la licencia de su marca y logotipo. Es una marca de motos que obtiene millones sin vender motos, únicamente vendiendo su distintivo escudo. La marca de computadoras Apple, incluso tiene una comunidad de evangelistas, personas que voluntariamente promocionan sus productos ¿Quien no pega la calcomanía de la manzana en su auto?. En los juguetes, la empresa Mattel controla poderosos nombres como Barbie y Hot Whells, Hasbro tiene a G.I. Joe y Transformers, ambas empresas ganan millones licenciando sus marcas a productores de películas, videojuegos y espectáculos.
“Cada gran truco de magia consiste en tres partes o actos. El primero es llamado La Promesa. El mago te muestra algo común como unas cartas, un ave o una persona. El te muestra este objeto. Incluso te pide que lo revises para comprobar que es real, inalterado, normal. Pero por supuesto… probablemente no lo sea. El segundo acto es llamado El Giro. El mago toma lo ordinario y lo hace hacer algo extraordinario. Después buscas el secreto… pero no lo encuentras, porque en realidad no lo estas buscando. En realidad no quieres saberlo. Quieres ser engañado. Pero aún no aplaudes. Porque hacer que algo desaparezca no es suficiente; tienes que traerlo de vuelta. Es por eso que cada truco de magia tiene un tercer acto, el mas difícil, la parte que llamamos El Prestigio.”
Quizá lo mas interesante del Social Media es que todos lo hacen, pero parece no funcionarle a nadie, y lo peor, que aunque es medible, nadie hace nada por hacerlo funcionar y mucho menos por abandonarlo.
Memento mori es una frase que en latín significa “recuerda que eres mortal”. Cuenta la leyenda, que cuando un gobernante o general triunfante desfilaba por las calles de Roma, aclamado por sus súbditos, un esclavo lo acompañaba solo para recordarle: Memento mori.
