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.