Gemma Vela, directora de diseño web de Omatech

El diseño web contribuye a una comunicación más efectiva con el público de la empresa. Asimismo, personaliza y diferencia un sitio web. En la agencia de proyectos digitales Omatech, diseño, usabilidad y maquetación web son tan importantes como el trabajo de desarrollo web. El objetivo es crear proyectos web sólidos desde un punto de vista tecnológico, y también desde la perspectiva de la experiencia de usuario y del marketing digital.

Para reflexionar sobre el trabajo de diseño web, hemos entrevistado a Gemma Vela, directora de Arte Web de Omatech. Junto a Maquetación Web, el área de Arte Web se encarga de dar personalidad, usabilidad y eficacia comunicativa a los proyectos digitales que emprende nuestra agencia.

Dirección de diseño web

¿Qué cosas haces como directora de diseño de Omatech?

Mi trabajo es definir la estética y el estilo globales del proyecto web. Mi misión es trasladar los valores, la filosofía y los targets del cliente al ámbito del arte web. ¿Qué imagen necesita el cliente? ¿Cuál va a ser la tipografía que encaje mejor con los requisitos del cliente? ¿Cómo vamos a utilizar el color? ¿Qué interacciones establecer? Hay que definir una estructura y hay que plasmar de forma gráfica las expectativas y objetivos del cliente.

Diseño web: conversación con el cliente

¿Cómo averiguáis la imagen que va a transmitir mejor el mensaje de la empresa cliente en el mundo digital?

En la primera reunión con el cliente, ya se calibra este aspecto. Averiguamos qué necesidades tiene, a qué públicos se dirige y descubrimos su competencia. Además, prestamos atención a su identidad corporativa. Si en la primera reunión el project manager ya ha recogido estos aspectos, cuando los profesionales del área de diseño vamos a una segunda reunión, ya vamos con ideas de diseño concretas.

Los valores y la filosofía del emprendedor: incorporados al diseño web

Debe ser clave la conversación con gerencia o departamento de Marketing de la empresa cliente. ¿Qué factores hay que tener en cuenta cuando el empresario es un emprendedor que ha puesto su sello personal al negocio?

El empresario que ha impulsado su proyecto empresarial y lo ha hecho a partir de su visión personal, suele querer conocer al equipo de diseño. La conversación con el interlocutor que tengamos de la empresa cliente es fundamental, porque a través de esa persona vamos a conocer los valores, la forma de trabajar y el público de la empresa.

El manual de identidad corporativa del cliente, ¿es una Biblia o es una guía a tener en cuenta?

Más bien es una guía. Cuando concibes y emprendes un proyecto digital, a la identidad corporativa hay que darle un poco la vuelta. Con el mismo aire, pero diferente. En un sitio web debe prevalecer un mayor sentido de libertad. Y también hay mucho propósito, porque apelas a un target determinado. Y, por supuesto, no nos olvidemos, hay unos requisitos técnicos que debemos tener en cuenta.

El diseño web debe ser lo más libre posible

¿Sería un poco como lo de trasladar una novela al lenguaje cinematográfico? ¿Si eres demasiado fiel al libro, la película puede perder fuerza?

Sí, es una comparación válida. La identidad corporativa en soportes más convencionales, como el papel, se regula por otros códigos. En un sitio web, tienes que añadir acción para provocar una reacción. Y esa acción puede ser un ligero movimiento, un cambio de colores, una iluminación, etc.

¡Creatividad e interacción a tope!

La creatividad es necesaria para diferenciar el proyecto digital y para captar la atención del público.

Del diseño web a la maquetación web

Todos estos esbozos, ideas y propuestas son la base del nuevo sitio web. ¿Lo podemos ver así?

Sí, porque se trata de la primera fase. En Omatech trabajamos en equipo. Así que cuando haces el diseño y creas el estilo, lo ideal es hablarlo con Maquetación. En esta nueva fase, entre otras muchas cosas, vemos cómo funciona la animación, qué se ilumina, qué elementos cambian de posición, qué se desplaza y cómo lo hace.

Cuando se hace la maquetación de la web, ¿debe haber mucho ensayo-error?

Debes probar la viabilidad y el sentido funcional y estético de muchas decisiones. Tienes que advertir si tal elección de diseño web va a molestar cuando quieres ser responsive.

Diseño web responsive
Diseño web responsive.

Proyectos digitales ‘responsive’

Los proyectos digitales deben ser ‘responsive’. Siempre se deben adaptar a todo tipo de pantallas y dispositivos.

El sitio web debe cargar a gran velocidad y debe ser responsive. Estas son dos de las grandes prioridades de cualquier proyecto web. Generalmente, primero haces un diseño de escritorio. Y, después, lo adaptas al móvil, aunque eso está cambiando. Esta adaptación puede significar eliminar elementos para asegurar ser lo más responsive posible.

¿Hay que tener mentalidad multipantalla?

Siempre hay que pensar en un diseño adaptable o responsive para que todas las interfaces se vean bien en cualquier dispositivo. No vale que el diseño para ordenador de sobremesa sea chulo, y que el diseño para móvil sea flojo. La web debe ser igual de brillante en todas las pantallas. Para ello, hay que tener en cuenta los requisitos que cada una te impone.

De hecho, deberíamos distinguir dos formas de optimización a la hora de diseñar una web. Son el Responsive Web Design y el Mobile First Web. Para ello es ideal basar tus layouts en grids fluidos que hagan tu creación flexible.

‘Front-end’ de la web: sistema de trabajo

¿Qué cosas hay que tener claras cuando se define el diseño web y el ‘front-end’ del website?

De hecho, hay que tenerlo claro todo. La jerarquía de los textos debe estar bien definida. La navegación no se debe repetir, para hacer más coherente el uso del sitio web. Todos los contenidos deben estar bien organizados. Debes asegurarte de que el usuario haga el mínimo número de clicks para llegar allí donde desee.

Diseño web va muy relacionado con la usabilidad

Usabilidad web: ¿cuántos clicks?

¿Un click mejor que dos clicks?

Siempre. Si bien hay que buscar un equilibrio, porque si casi todo quieres ponerlo a un solo click, el usuario de la web se puede abrumar. Para ello, también son necesarios menús que agrupen un gran número de opciones.

¿Encontrar el equilibro en el número de clicks es todo un reto?

La reducción del número de clicks nunca se puede convertir en una obsesión. Y es que todo debe ser mucho más natural. Hay que tener presente que, si te interesa una cosa, harás click. Y, si te sigue interesando, no te importará seguir accediendo a más capas. Es como cuando lees un artículo de prensa en papel u online. Primero lees el titular, luego el subtítulo, después el lead o primer párrafo del texto. Vas yendo de lo más general a los más concreto. Solo avanzas en esa progresión si sigues manteniendo el interés.

Evolución del diseño web

El diseño web, ¿tiene más protagonismo hoy que hace cinco, 10 o 15 años?

Tiene el mismo protagonismo de siempre. Lo que sí que es cierto es que es una disciplina que se valora más, lo que se refleja en los premios de diseño y usabilidad web. Se pone en valor que el diseño facilite una buena experiencia web. Que la navegación por el sitio web se viva con interés, de forma lúdica y divertida. Además, hay que diferenciarse de la competencia. Las webs deben ser todas un poco diferentes, porque esta es la manera de obtener una buena impresión.

El uso de fotografías en el diseño web

¿Decidís desde diseño web qué fotos e imagénes son idóneas para la ‘home page’ y las diferentes vistas del sitio web?

Sí, es parte de nuestra responsabilidad, siempre en coordinación con el cliente. Las fotos son una de las cosas más importantes para el diseño de una web. Vale más una imagen que 1.000 palabras. Aunque, ¡ojo!, porque también es verdad que al texto a veces no se le da la suficiente importancia. Lo que es indudable es que una foto transmite mucho.

Una de las cosas que más tira para atrás de algunos sitios web es el abuso de imágenes de bancos de stock fotográfico. ¿Cómo asesoráis al cliente en relación al uso de este tipo de fotos?

Las fotos de stock son un recurso valioso, del que generalmente se hace un uso excesivo. En muchas ocasiones, lo ideal sería hacer una sesión de fotos con un profesional. De este modo podemos transmitir todo aquello que es la marca, consiguiendo que el público conecte con esta. Ya sabemos que tirar de fotos de stock low cost abarata los precios. Pero no nos diferencia de la competencia. En la página de inicio, por ejemplo, habría que hacer todo lo posible para evitar el recurso al banco de imágenes.

Páginas de inicio con imágenes originales

En otras palabras, ¿hay que priorizar el uso de fotografías originales en todo el sitio web, con una especial insistencia en la página de inicio?

La idea es utilizar siempre imágenes singulares en la home page. Y sí, es cierto que hacer fotos aumenta el presupuesto. Ahora bien, en términos de marketing, corres el peligro de distorsionar tu mensaje si pones los tradicionales modelos rubios de ojos claros de los bancos de imágenes. Pierdes conexión con tu target si resulta que este no es predominantemente rubio y de ojos claros. La persona que visita tu web o tienda online, un cliente o un potencial cliente, no se siente reconocido. Si tu producto se dirige a hombres de mediana edad del sur de Europa, tienes que recurrir a imágenes que representen a ese grupo. Hay clientes que ya lo tienen claro, y han hecho sesiones específicas de fotos con modelos.

Diseño web para conectar con el público de la empresa

¿Es un error dar menos importancia al diseño web que al desarrollo?

Es un error. El diseño web es crucial para el engagement, para conectar con los públicos objetivos de una marca. La idea es que tan importante es el diseño web como la labor de desarrollo.

Es fantástico dar la importancia que merecen al aspecto visual y al diseño a la hora de hacer una web. El reto es marcar la diferencia respecto al resto de la competencia y hacer la web atractiva para tu público objetivo.

Toda esta conexión con tu target se consigue con un buen diseño, que quede grabado en la retina del usuario porque la experiencia ha dejado un impacto positivo.