Diseño gráfico para webs de empresa

 

El diseño gráfico es responsable de esa primera impresión —o como dicen los anglo­parlantes del look and feel— que se percibe cuando se entra por primera vez en un sitio web. Es como la portada de un libro, debe resultar atractiva y a la vez transmitir una idea sobre lo que el lector puede encontrar en el interior. Elementos como la composición, la tipografía, el color, las imágenes, los gráficos y el estilo influyen en la imagen que transmite la empresa a través de su web.

Un buen diseño gráfico debe combinar el estilo con la funcionalidad. Tiene que orientarse hacia el tipo de usuario y los objetivos de la empresa, y no por los gustos y preferencias del diseñador.

La creatividad del diseñador debe inspirarse en:

• Los usuarios: comportamiento, gustos, cómo buscan y navegan, etc.

• El mensaje que quiere transmitir la empresa.

• Los objetivos del negocio online.

• Las limitaciones de la tecnología: tiempos de descarga, usabilidad, indexación de buscadores, etc.

Esto no significa que se deba rechazar el componente creativo, que es importante so­bre todo en webs necesariamente muy visuales, propias de empresas cuyo objetivo sea la promoción de su marca o de sectores como la moda o la tecnología, pero el diseño siempre debe estar al servicio de la usabilidad. Una mala práctica en este sentido es el uso excesivo de flash. El resultado es muy visual pero retrasa la descarga de las pági­nas y, además, los contenidos realizados en este lenguaje no son reconocidos por los buscadores. Una web de empresa no debería estar realizada por entero en flash; sólo sería recomendable para áreas muy concretas de la web como puede ser la cabecera en la página de inicio con imágenes rotativas (aunque es mejor realizarlas en JavaScript, ya que se descargan más rápido). El flash es también un buen recurso para mostrar procesos, diferentes productos o las ventajas competitivas que ofrece la empresa.

Un ejemplo de buen uso de JavaScript es el que hace la empresa fabricante de vestuario profesional Joma´s mediante el empleo de imágenes rotativas sólo para la cabecera de la página de inicio para dar vistosidad a la web y a la vez mostrar su oferta.

Ejemplo de empleo flash en la página de inicio de una web

(Imagen disponible en el libro en PDF)

Generalmente, el diseñador gráfico interviene en el desarrollo de una web antes que el programador. Primero se realiza el diseño y luego se programa, incluyendo los contenidos y los diferentes elementos; de ahí, la importancia de que el diseñador, el programador y el responsable de la web de la empresa trabajen conjuntamente.

Dos elementos fundamentales del diseño de una página web son los colores y la tipografía:

• Los colores

Los colores tienen una gran importancia visual y deben ser coherentes con el men­saje. Para las grandes empresas los colores corporativos posiblemente marquen la pauta de los colores a utilizar en su web. En las webs de pymes las posibilidades son mayores, aunque siempre se debe mantener una coherencia de tramas de colores y una consistencia con los diferentes elementos y todas las páginas del sitio.

• La tipografía

En cuanto al tipo de letra, lo aconsejable es utilizar tipos estándar como Arial, Verdana o Times New Roman ya que son identificables por la mayoría de los na­vegadores. Afinando un poco más se puede jugar con dos tipos de letra. Para texto la tipografía denominada «San Serif» (Arial o Verdana) y para títulos la tipografía Serif (Times New Roman, Garamond o Didot).

Otra tipografía podría aparecer distorsionada. Se podría utilizar un tipo de letra más visual, diferente, cuando se hace en imágenes. Pero en este caso hay que utilizarla en casos excepcionales o repitiendo el texto en un leguaje reconocido por los buscado­res como es el HTML. De nuevo es importante mantener la consistencia utilizando siempre el mismo tipo de letra, aunque para títulos o elementos a destacar se pueda combinar con otra.

Una idea muy valorada por el visitante es ofrecerle la posibilidad de visionar la web en tamaño de letra mayor, como vemos en el ejemplo siguiente.

Ejemplo de web en la que se puede ver la letra en diferentes tamaños

(Imagen disponible en el libro en PDF)

Para la organización de los diferentes contenidos de la web y para preparar el diseño, que es previo a la programación, es aconsejable que la empresa entregue al diseñador lo que se denomina en el lenguaje técnico: un wireframe. Se trata de una representación esquemática de una página web. No muestra elementos gráficos definitivos, porque lo importante es establecer el contenido y el comportamiento de las diferentes páginas.

Los contenidos más habituales de una página que deben incluirse en un wireframe son:

• El logo de la empresa.

• El eslogan o tagline.

• El buscador.

• Contenidos en la parte central.

• Contenidos en parte lateral: a izquierda o también a izquierda y derecha.

• El menú principal que incluye pestañas del tipo: inicio, quiénes somos, nuestros productos, nuestros clientes, contacto, idiomas.

• El pie de página: mapa del sitio, FAQs (preguntas frecuentes), política de priva­cidad, copyright, etc.

Organización de contenidos de la home page (wireframe y diseño final)

(Imagen disponible en el libro en PDF)

En el siguiente cuadro se expone una lista de tareas a revisar sobre el diseño de una web para conseguir una buena usabilidad.

 

?

1. Las páginas del sitio se pueden ver sin necesidad de desplazarse de forma horizontal con scroll  
2. El usuario intuye claramente los elementos que puede cliquear. El resto de los elementos no deben sugerir que son cliqueables  
3. Las imágenes sobre las que se puede hacer clic se acompañan por «redundantes» etiquetas de texto  
4. Los enlaces se identifican claramente como tales. Se aconseja subrayarlos y utilizar un color diferente. Una vez que el usuario ha cliqueado un enlace este cambia de color para que le recuerde que ya fue cliqueado  
5. Los iconos y los gráficos son estándar y/o intuitivos  
6. Los iconos y gráficos están en armonía, pertenecen a la «misma familia»  
7. Existe un claro «punto de entrada» visual en cada página  
8. Todas las páginas comparten un diseño consistente  
9. Las páginas están preparadas para que puedan imprimirse correctamente  
10. El tamaño de letra es el adecuado para que pueda leerse fácilmente  
11. Hay un balance adecuado entre densidad informativa y espacios en blanco  
12. El sitio web es agradable y atractivo visualmente, es consistente y transmite una persona­lidad propia que «engancha» a los visitantes  
13. El color se utiliza para estructurar y agrupar elementos en cada página  
14. Los gráficos no se confunden con los banner publicitarios  
15. La negrilla se utiliza para destacar lo más importante  
16. En páginas de contenido, la longitud de las líneas no debe ser superior a 100 palabras  
17. Los elementos estándar tales como: títulos de las páginas, navegación del sitio, política de privacidad, etc., son fácilmente localizables  
18. El logo de la empresa se ubica siempre en el mismo lugar en todas las páginas del sitio, generalmente en la parte superior izquierda, y al hacer clic se regresa a la página de inicio  
19. La funcionalidad de los botones y controles es obvia por sus imágenes y su etiquetado  
20. Las etiquetas con significado claro, los colores efectivos de fondo y el uso apropiado de recuadros y espacios en blanco ayudan al usuario a identificar los elementos dentro de «cápsulas de información» funcionales  

Fuente: Smashing Magazine