Este articulo trata de debelar los aspectos básicos que debe tener un diseñador gráfico al afrontar proyectos Webs. Estas ideas y conceptos de diseño son algunas de las reflexiones de los tantos puntos de inflexión a la hora de diseñar.
Seria muy bueno ir extendiendo estas ideas y que ustedes colaboren a la redefinición de la problemática.

La primera respuesta que puedo tener a punta de lengua es un "diseñador", pero… ¿es en realidad un diseñador gráfico? Se suelen presentar sinfines de pseudo capaces del diseño, desde audaces, creativos, artistas, arquitectos, amigos, el vecino, programadores y, alguna vez, un valiente diseñador gráfico.

Esta realidad no se da porque contemos con un parque limitado, sino todo lo contrario. El problema radica más profundamente en el corazón de las escuelas de diseño, donde no se educa, adiestra, ni presenta la herramienta, ni se debate la problemática.

Este es un tema que lo he charlado hasta el cansancio con varios docentes de diferentes instituciones. Los motivos son miles: desde porque no son suficiente 3 años de carrera, porque la informática e internet evolucionan a velocidades que no dan respiro a preparar y ajustar un programa sin que este caiga en desuso, porque no hay profesionales que puedan claramente trasmitir los conceptos y técnicas sobre las herramientas, porque los alumnos de diseño gráfico son solo "gráficos”.

Aclaro que, para mí, el diseño Web es “diseño gráfico”, por el simple motivo de ser un "medio visual". Ojo, algunos se apresurarán a corregir que es audio-visual-interactivo y demás cosas que es verdad, pero desde el origen de los outputs en el caso del “monitor”, los elementos fueron sólo visuales, a duras penas con los escasos pixeles disponibles más la buena voluntad de la imaginación, se lograron cosas fabulosas. Por lo tanto, los problemas que se plantearon originalmente no distan tantos de los actuales. El cliente pretenderá dar solución a una necesidad de comunicar, haciendo uso de las más variadas técnicas básicas o avanzadas del diseño, como el color, la forma, la tipografía, la escala, la gamma, el espacio, el orden, etc.

Todos estos recursos de los más variados son propios y pertinentes a un diseñador gráfico, queda claro que él mismo es la persona más adecuada para dar solución a las funciones y comunicaciones que requieran de orden, jerarquía y semántica de los signos.

Pero sabemos que los matices van mas allá de las fronteras actuales del diseño académico: hay elementos que nos obligan a entender y saber cómo funciona el medio o soporte donde se plasmará nuestro diseño. Así como el diseñador establece un canvas o soporte pre definido (ancho, alto), también se deberá familiarizar, por ejemplo, con el medio de impresión que se utilizará para producir la pieza, porque el diseño puede verse enriquecido o desfavorecido con el simple cambio de una variable, por ejemplo, el sistema de impresión: la serigrafía no será de seguro adecuada para algunos cuerpos tipográficos, que la impresión offset sin problemas puede reproducir.

Constantes y Variables

Estas palabras en el mundo del diseño web son muy recursivas, en diferentes ámbitos y contextos, pero el fin es similar.
Ddiseño web y gráfico tienen los mismos elementos contantes que aprendimos con nuestros profesores: la jerarquía y orden de los elementos para favorecer la lectura o crear un recorrido sobre la pantalla son los mismos principios del papel.
El color también cumple un rol importante en la comunicación web, aunque haya colores que son rápidamente relacionados con grandes marcas impuestas. En relación a ello, si propongo magenta dirán freak. Así mismo, el uso es totalmente válido, las reglas y técnicas siguen siendo efectivas: un titular de color rojo despertará más interés que uno gris.

El tamaño, el espacio y orden también son recursos muy utilizados en la gráfica para generar secuencias de lectura, acentuar un mensaje o significar el mismo. Pero por el contrario, cuando el diseñador se dispone para la Web, pareciera que entra en PAL (pánico, ataque y locura), a tal punto que realiza diseños que jamás propondría en una pieza grafica tradicional.

Hasta aquí, definimos las constantes generales que se presentan al diseñar para la Web; este punto no es realmente el que más complicaciones presenta, ya que un buen diseñador, todo lo nombrado le es habitual y cotidiano.

El problema está en las “variables”: cuando la información debe ser adecuada a una resolución, una limitación tipográfica,  una lectura forzada lineal,  un scroll, un dispositivo de salida particular, una superficie, interactividad, navegación,  una cultura de lectura, un redimensionamiento, accesibilidad, posicionamiento, etc. Aquí, el diseñador gráfico va rumbo al neuropsiquiátrico.

Para que esto no suceda, el diseñador debe estar adecuado al tiempo y la forma de los recursos, técnicas, tendencias, herramientas y dispositivos actuales. No quiere decir que el diseñador tenga que migrar a ser un híbrido ni, menos que menos, sea programador: el diseñador debe conocer el medio donde se desenvuelve sin profundizar ni quitar el foco en su función principal, para el resto existe programadores, analistas y técnicos especializados puntualmente en las tecnologías aplicadas. En la actualidad, el destino del diseñador es el mismo que hace 20 años: “diseñar”. Cambian los medios, cambian los paradigmas y hasta cambia la actividad fundamental, quizás hay quienes vaticinan la desaparición del diseñador gráfico tradicional fuera de las piezas digitales. Yo creo lo contrario: creo que el siguiente paso del diseñador es dirigir, supervisar y coordinar grupos interdisciplinarios donde el fin es prestar soluciones y comunicar.

Por eso ahora, más que nunca, el compromiso es acceder y conocer el medio, conocer el soporte y sus limitaciones, que, al contrario del papel, cuando están se revelan y se convierten en potentes herramientas de creación.

Algunas Variables

Multidimensional

En la gráfica tradicional, podríamos indicar que generalmente se nos presenta una sola dimensión del soporte a trabajar; en la Web pasa todo lo contrario, ya que en la pantalla (aunque sea un elemento plano bidimensional) se puede crear n dimensiones de lienzos, unos sobre otros o unos al lado de otros. Este concepto de apilamiento o layer es una de las características actuales más básicas, como lo es la vieja técnica de perspectiva isométrica para simular un espacio tridimensional.
También lo Multidimensional es afectado por la evolución, disponibilidad y equipos, aunque estas sean de poco uso o en modo de experimentación debemos tener una mera noción de sus virtudes y limitaciones. Con la aparición de los tablet, lo Multidimensional  hace un cambio rotundo, ya que se presenta como recurso normal el uso de múltiples escritorios o canvas, resultando este recurso tan efectivo y natural que la mayoría de los dispositivos táctiles lo adoptan.
Podemos plantear un diseño basado en capas, donde la información adopte importancia según el orden de apilamiento, donde el objeto en primer plano sea el discurso actual del mensaje, donde el apilamiento cuente un discurso, donde un mensaje no necesariamente deba aparecer y desaparecer para dar lugar a otro. Múltiples escritorios, múltiples layers ya están aquí: lo podemos ver en un simple lighbox.
La dimensionalidad puede salirse de nuestra pantalla, un claro ejemplo de ellos es la realidad aumentada, donde lo virtual complementa lo real o viceversa, creando mundos y canales nuevos de comunicación y experimentación.

Resolución

Esta es uno de los limitadores más grandes para el diseñador, ya que la capacidad de representación de pixeles ha ido variando con el tiempo. Hace 10 años, no existían habitualmente monitores en  formatos wide, ni tamaños fuera de las 17 pulgadas en cualquier casa; hoy, en cambio, es común ver monitores de 19 a 21 pulgadas.  Ya antes de la aparición masiva de los LCD se presentaba el problema de la resolución, que en sí consiste en la limitación de cuántos pixeles puede representar la pantalla, tanto en su alto como en su ancho: el diseño se debía adecuar a caber sobre esa pantalla para evitar el scroll o, por lo menos, el horizontal. Por entonces, se diseñaba basándose en medidas de no más de 740px de ancho (como muy generoso), para no superar el ancho de 800px; con el tiempo, los monitores representaron más pixeles y las medidas se fueron extendiendo. No hace mucho tiempo se impuso el modelo de 960px de ancho, que es capaz de mostrarse de manera correcta sobre monitores de 1024x768; pero en la actualidad van imponiéndose medidas como 1080 o más, para resoluciones de 1280x1024.
Con la aparición de monitores más grandes, diríamos que la problemática de las resoluciones se terminó, pero no es así: ahora, por el contrario, muchos sitios quedan demasiado chicos, apiñados y compactos. A esto surge una nueva manera de mostrar la información y ésta se basa en el ajuste de los espacios disponibles; este tipo de diseño se conoce como líquido o elástico, donde las cajas contenedoras y espacios guardan una relación “relativa” con respecto a las dimensiones disponibles. [ Ejemplo ]
Pero aquí tampoco se acota el problema: con la aparición de los Smartphone y tablet, nuevamente se presentan nuevas opciones de ver una página. Ahora la página no sólo debe trabajar para un monitor de 21 pulgadas, sino que en retroceso a una pantalla táctil de apenas 1024 x 768px, que, a propósito, se le suma una característica de accesibilidad que es rotar la pantalla cambiando la relación de aspecto. El diseño, entonces, debe responder a las resoluciones varias, a los dispositivos varios y a la orientación del dispositivo.
Actualmente, para este sin fin de alternativas se presenta una nueva técnica de implementar y organizar la información: el diseño "responsivo", que responde según el dispositivo y orientación del mismo, organizando, reestructurando o quitando elementos según sea necesario para la mejor lectura de la información. [ Ejemplo ]

En general, vemos que la tendencia es exponencial a mejorar la calidad del mensaje al receptor, donde el mismo cumple un rol activo receptor/trasmisor. Dejar claro un mensaje será agradecido por el usuario y  también por el emisor. En la actualidad, un mensaje mal dado y/o un usuario enojado, puede desfavorecer rápidamente a un producto o marca.

Scroll

Ya hablamos que el diseño responde a una resolución y a éste le resulta un scroll. Si es natural ver monitores cada vez más anchos que altos, ¿porque no más altos que anchos? Algunos se preguntarán por qué quitarle espacio al scroll, pero eso es consecuencia a la ley de Fitts, que establece los límites de respuesta de un movimiento con respecto a la distancia: un monitor demasiado alto implicaría un movimiento poco ergonómico e ineficiente.  Al scroll, por alguna razón, muchos se encargaron de eliminarlo; otros, le tienen terror; y algunos hasta afirman que una web sin scroll es más efectiva.
La realidad es que la información en la web es lineal, siempre se presenta un objeto y desde ése se pasa a otro. Desde el inicio, la información fue textual (texto), con el tiempo se agregaron elementos para enriquecer la información, aunque con algunos excesos. Comenzamos a ver páginas donde la animación, el discurso tipo película, la música y el movimiento titilante circundaban la información básica que el usuario solicitaba, generando largas esperas entre secciones, confusión y hasta inaccesibilidad. Por alguna razón, se puso de moda ese “modelo de no dejar mostrar lo que el usuario buscaba”. Como siempre pasa con los modelos equivocados, no soportó la prueba del tiempo y actualmente entendemos que “la información es lo que la mayoría de las personas buscan”, no hay razón de entrar a una Web y esperar que se cargue una música de background como requerimiento para acceder a un formulario de consulta.
Entonces es aquí donde el scroll aparece como nuestro aliado, porque al disponer de él, disponemos de más espacio lineal para contar y mostrar información, para organizarla en un orden de lectura natural (porque el usuario naturalmente sabe scrollear) y hasta podemos explotar esa cualidad para dar un discurso visual donde el usuario manipule el scroll como un time line; el tiempo de carga y disponibilidad de la información es progresivo y no a demanda, es decir que en vez de ir a una nueva sección y hacer una nueva consulta, se navega sobre el mismo canvas.
Al diseñar, es importante contar con el conocimiento de los altos estándares y los mínimos, tomar el alto como una unidad relativa y modular, donde la información principal sí se muestre completa desde la primera lectura y, por cada escroll, se sorprenda o se presente un discurso coherente.

La lectura

Al leer información sobre una web se deben establecer los criterios básicos aprendidos en diseño editorial, pero a eso sumarle criterios que favorezcan la lectura en el modelo Web.
Al observar una página web, el ojo salta de módulos a módulos de información, desde objetos que se mueven a objetos estáticos; clasifica, organiza y evalúa la información si es pertinente a lo que está buscando. Nuestro deber como diseñadores es evitar el stress visual o que este sea un factor positivo, utilizando recursos simples, como tipografías claramente jerarquizadas, cuerpos tipográficos adecuados, colores planos de buen contraste, espacios de descanso, fondos despojados de texturas en áreas de lectura, cajas organizadoras,  separadores de módulos, estructuras repetitivas que establezcan un sistema de lectura, donde en cada página se presenten los mismos elementos organizadores de la información propuestos por el diseñador.
Hay quienes antes una página sin movimientos solicitan que sea más “dinámica”, ¿qué mejor que localizar rápidamente la información? Hay criterios según los que movimientos, destellos y ruidos mejoran la experiencia del usuario; esto es  totalmente equivocado: el movimiento circundante a la información perturba al ojo y a la visión periférica, produciendo una molesta atención residual.
Que muchos de los sitios Web estén estéticamente y funcionalmente mal diseñados no quiere decir que sea lo correcto. Y que el cliente tenga una idea errónea de dinámico también es un problema a educar.

Usuarios

El destino de nuestras piezas gráficas tradicionales establecen un cierto marco de previsión y cordura, por decirlo de alguna manera. Sabemos que si el mensaje está en español, claramente será apreciado por el 99.9% de la población (Argentina); que si la lectura la hacemos de izquierda a derecha, no presentará dificultades de lectura. En general, vemos que un usuario de una pieza gráfica sigue ciertos criterios y normas establecidas; en cambio, el usuario web se comporta de manera" errante"," diferente", "creativa" y hasta "esquizofrénica". Nada puede estar sujeto a que funcione correctamente ante un usuario, ya que de alguna manera éste logra romper todos los esquemas.
Desde hacer clic atrás, delante, atrás, atrás, cerrar el navegador, abrir uno nuevo, ir a Google y en él escribir www. Clarín.com, ¡olvidando totalmente para qué sirve la barra de direcciones!

Como se puede apreciar, el usuario quizás requiere una mayor atención para utilizar una Web que para leer una pieza gráfica convencional. Aclaro: ¡el usuario demanda más del diseñador!
Establecer criterios claros de navegabilidad es uno de los puntos fundamentales. Presentar siempre un menú principal superior claro, con alto contraste y resaltando en qué lugar se está, a modo de rastro; presentar barras de navegación opcionales, como el menú en modo texto-link en el footer, son buenas costumbres que el usuario agradecerá.
Evitar la recargas de paginas entre sección y sección es un buen recurso de ahorro de información, más para aquellos sitios donde se reciban grandes flujos de visitantes. La información más vista o más solicitada puede ser presentada completa en la portada inicial junto a los otros elementos ya cargados.
No auto cargar elementos multimedia, como videos, sin la previa solicitud del usuario y, menos que menos, reproducirlos automáticamente fuera del foco visual.
Trabajar con varias columnas de información, sectorizando y valorizando la información de mayor a menor, donde los elementos más importantes y más visitados se encuentren en la parte superior del sitio.
No bloquear elementos de accesibilidad, como botón izquierdo del mouse, ampliar, guardar o imprimir.
Disponer de la capacidad de propagación en diferentes medios o dispositivos, ser versátiles con las salidas asegurará un mayor número de visitantes.
Ajustarse a estándares para asegurar accesibilidad y mejor compatibilidad con navegadores y sistemas de asistencia para personas con capacidades diferentes.
Crear contenidos diferenciados para dispositivos como impresoras, celulares o lectores para ciegos.
Crear contenidos ricos, originales, útiles y para humanos.

Navegadores

Podemos afirmar que la mayoría de los mortales entiende que no todo es y fue IE (Internet Explorer), que existen, gracias a Google y tecnologías open source,  Firefox y Crhome, entre otros. ¿Pero dónde radica el problema con los navegadores? En cómo interpretan los elementos gráficos propuestos por el programador, elementos que son los establecidos por el diseñador.

Esta diferencia de renderización entre navegadores se puede presentar más o menos acentuada según sea la combinación de fórmulas. Aunque hay pautas generales a seguir para evitar algunos problemas de presentación, IE siempre nos sorprenderá con algo nuevo. Esta dificultad tiende a desaparecer en rasgos generales, pero no podemos ignorar que IE es el navegador más popular y con el que más problemas tenemos. No es necesario entrar en detalles de por qué Microsoft ignora todas las reglas establecidas de cómo mostrar una Web, sí vamos a saber que hay métodos de normalización entre navegadores. Podemos hacer uso de scripts (http://html5boilerplate.com/) que corrijan aspectos de la presentación o cargar hojas de estilos alternativas según el navegador.

Pero antes de entrar en detalles de navegadores, deberíamos definir nuestro alcance, es decir que el diseño debería partir desde la “accesibilidad” e incluyo en esa palabra la disponibilidad tecnológica: aunque como usuario no tenga limitaciones motrices, ni visuales, auditivas, etc., puedo no contar con la plataforma o dispositivo óptimo, o sí contar un una buena plataforma y un navegador anticuado (IE 5 o 6). Entonces, vemos que el diseño debe partir de la base de: ¿Qué navegadores o a quiénes creemos accesibles para nuestro desarrollo?. Resultará que si quiero que mi Web sea totalmente accesible, yo diseñador deberé limitar los elementos decoradores a su forma más rudimentaria o nula, dejando quizás texto plano y de esa manera asegurar el renderizado.

Actualmente ya no se presentan soportes ni desarrollos para IE 5 y 6, son escasos, pero sí se estimula a normalizar para IE7. IE8 presenta mucho más soporte y compatibilidad con CSS2 y HTML4, pero nada para CSS3 y HTML5. IE9 es la gran promesa, donde por primera vez (a golpes) Microsoft entiende que no se puede presentar la información sin ajustarse a un criterio establecido, normalizado y universal. IE9 promete soporte para HTML5 y CSS3  de manera muy exitosa, superando en algunos test al mismísimo Firefox. Quizás en un día donde no exista mas IE7 y IE8 estos temas serán para el recuerdo, aunque conociendo a Microsoft, ¡alguna sorpresa nos debe esperar!

¿Pero qué pasa con el resto de los navegadores? Nada. Ellos, en su mayoría, ya van por versiones muy actualizadas: en estos últimos tiempos, se popularizaron los navegadores con motores open source, como WebKit y Gecko. Estos motores, a diferencia de IE, se encuentran en la vanguardia de los estándares y proveen soluciones iguales en la capa de diseño, más algunas particularidades especiales según el navegador.

En general, se vislumbra un final feliz para todos aquellos diseñadores y maquetadores que tanto sufrieron: las cosas por fin se verán iguales o, por lo menos, muy parecidas.

Agradecimiento: La colaboración y aportes de la Diseñadora Gráfica Mercedes Olano, que gratamente cuento con su amistad y calidad profesional. Gracias Mechi!