Blog sobre tecnología, diseño y comunicación

Cada vez más los diseñadores alternan sobre diferentes plataformas. Del papel a la web, muchas veces un mismo trabajo se distribuye por múltiples canales y no sé sabe muy bien cuál soporte quedará plasmado el trabajo. De todas formas, cada área tiene sus cuestiones técnicas específicas, sus trucos y un modo de trabajo diferente.

Sin embargo, con esta tendencia a la convergencia muchas veces un trabajo que comienza para papel termina en la web… o viceversa. En este post van algunos consejos básicos para diseñadores gráficos que quieren incursionar en la web.

1. El diseño web es fluido

Hace años que lo repito: Mientras un producto gráfico está cerrado y acabado (al menos como producto, no nos metamos en tema del otorgamiento de sentido); en la web hablamos de un diseño abierto donde no sabemos muy bien bajo que condiciones nuestro trabajo será reproducido. Hoy en día menos que nunca. 

Una computadora de escritorio, una tablet o un teléfono o inclusive un smart tv. Las producciones se consumen en diferentes pantallas y con diferentes interfaces. Y un sitio web debe estar preparado para verse bien en cualquier condición. Por eso, hablamos de un «diseño líquido» o «diseño adaptativo» donde cada elemento es una pieza de rompecabezas que se ensambla de distinta forma según sea el tamaño y la resolución del dispositivo bajo el cual se muestra el sitio.

2. Aprender un poco de HTML

Seamos claros: para hacer un trabajo de diseño web medianamente profesional hay que saber un poco de HTML. Hoy en día existen múltiples herramientas que nos permiten trabajar de forma visual y se encarga de generar el código automáticamente. Algunas son muy buenas. Pero en algún punto siempre tenemos que recurrir a trabajar sobre el código, aunque más no se apara insertar un enlace, embeber información de otra página o modificar algún detalle.

HTML es un lenguaje de etiquetas, es decir, que de acuerdo al tipo de elementos que tenemos en una página le asignamos una etiqueta determinada: p a los párrafos, img a las imágenes, a  los enlaces… No hay dominar algoritmos ni técnicas de programación, solo tener algo de tiempo y ganas de apreneder.

3. El contenido es dinámico

Cuando estás diseñando un folleto, un libro o una tarjeta normalmente te envían un archivo con el texto a incluir. Sobre este texto aplicamos tipografías, interlineados, márgenes, tamaños, negritas, itálicas, separaciones de párrafo y un largo etcétera. En la web, el texto puede venir predeterminado o puede provenir de una fuente dinámica: una base de datos, una página externa, una actualización de Facebook o cualquier otro lugar que pueda almacenar información.

Es decir, no podemos trabajar sobre un texto concreto sino sobre  un área de texto que podrá variar su extensión. Pero también hay una ventaja: podemos obtener también imágenes, videos y todo tipo de contenido multimeida de forma dinámica. Por ello el consejo fundamental es emplear metáforas visuales fácilmente reconocibles por los usuarios.

4. Nuevo sistema de color

Tema de diseño estrictamente técnico: Mientras el modelo de color tinta se basa sobre la síntesis sustractiva (cada vez que mezclamos colores obtenemos como resultado uno más oscuro), la pantallas trabajar con el color luz que funciona por síntesis aditiva (mezclamos haces de luces y obtenemos por resultado un color más claro). 

En gráfica se trabaja sobre el modelo CMYK de cuatro colores, mientras que en las pantallas empleamos el modelo RGB. Es decir, los colores no son los mismos y esto se nota particularmente en el brillo de las tonalidades y la saturación de las tonalidades verdosas. Para complicar un poco más la cosa, la forma convencional de referirse a los colores en la web es sobre base hexadecimal.

5. Tipografía en la web

Años los recursos tipográficos para la web eran de una austeridad franciscana. Hoy en día, tenemos más variedad. Sin embargo debemos tener presente que la tipografía que queremos usar debe estar disponible en un servidor y descargarse a la computadora del usuario. Por lo tanto, no se trata de un recurso para abusar. 

Al mismo tiempo, tipografías que se ven hermosas en papel pueden tener problemas para mostrarse en pantalla. Y para complicar más la cosa, cada navegador y sistema operativo tiene sus bemoles y particularidades. Por eso conviene chequear bien el texto en diferentes tamaños y pantallas para asegurarse que el contenido es legible.

Eso explica porque hay tantos sitios web que para no complicarse emplean  Arial / Helvetica para los párrafos de texto: estas tipografías vienen instaladas por defecto en Windows / Mac instalada  y siempre se ve bien.

6. El tamaño de las imágenes importa

El ancho de banda siempre es un recurso escaso. A pesar de la mejora generalizada de las conexiones a nivel global, también es cierto que cada vez más programas y aplicaciones se conectan a la red y que el volumen de datos que se transporta es mayor. Conclusión: sigue siendo importante optimizar el sitio web para obtener una mejor velocidad.

Uno rol importante lo juegan las imágenes: a mayores dimensiones y resolución, mayor tamaño del archivo y más tiempo requiere para transferirse. Por lo tanto es importante limitar la resolución de las imágenes  72 DPI, aunque en el caso de los dispositivos con pantallas de alta definición como es el caso de la tecnología retina para los últimos iPad y iPhones es mejor elevarlo a 150 DPI. 

En la web se trabaja básicamente con tres formatos: JPG, GIF y PNG. El primero admite control de compresión por lo tanto hay que afinar el ojo y reducir el tamaño del archivo lo máximo posible sin sacrificar calidad de imagen. Para los otros dos formatos, hay que probar reduciendo la paleta de colores.

7. El impacto del SEO

La optimización de las páginas de un sitio web para ser correctamente indexadas por los buscadores como Google o Bing tiene un nombre: Search Engine Optimization o SEO. Esto es, que ademas de hacer diseños bonitos, funcionales y de acuerdo con el público y los objetivos del producto hay que tratar que los buscadores lo encuentren.

Para ellos conviene prestar mucha atención a algunos elementos clave de una página: el título de la misma (definida con la etiqueta TITLE), los títulos del texto (H1, H2, H3…) y siempre que sea posible tener un poco de texto para los buscadores tengan un poco algo para indexar. Básicamente, los robots de búsqueda son voraces escrudiñadores de textos y, aunque han mejorado, tiene problemas para detectar el contenido en formato de imágenes, animaciones Flash u otro tipo de elementos interactivo.

8.  El diseño no es perfecto…

Los diseñadores obsesivos por cada milímetro pueden volver locos en la web. Es imposible tener el  control total y absoluto sobre cómo se mostrará cada elemento. Aunque tecnologías como CSS y las adopción de estándares han contribuido a mejorar mucho, lo cierto es que con la variedad de dispositivos, sistemas operativos y navegadores lograr que una pantalla se va absolutamente igual es imposible.

No es para desesperarse. Siguiendo los estándares y empleando tecnologías extendidas se pueden conseguir generar experiencias muy similares. Obsesionarse porque el interlineado no funciona de la misma manera en un iPad o una PC, enojarse porque un pixel rojo no luce del mismo modo en distintos celulares no conduce a nada. En su lugar, mejor preparar un diseño para que pueda verse bien bajo múltiples condiciones.

Vía Design Shack