04 noviembre, 2016

Claves para hacer un buen diseño web corporativo local

En esta entrada quiero compartir con los usuarios de La Grafiteca una conversación muy interesante que he mantenido recientemente, concretamente con unos grandes especialistas del diseño web corporativo: los creativos del Grupo Metacom.

Dicha compañía es una joven agencia dedicada al Marketing Digital, ubicada a caballo entre la provincia de Barcelona y los USA (Miami). Dado que realizan todo tipo de actividades publicitarias online, están dotados de su propio estudio de diseño, al que he tenido la oportunidad de conocer. Como he comentado al principio, aprovecho para compartir la conversación que mantuvimos, pues encuentro que será de interés especialmente para diseñadores y desarrolladores web. Su experiencia en la creación de sitios corporativos a nivel local puede aportar bastantes claves útiles para est@s profesionales.

Sin más, vamos con ello. Voy a contar nuestra conversación estilo entrevista, para así resumirla:

- Chicos, vosotros que habéis hecho tantos sitios para negocios y empresas de marcada ubicación geográfica, ¿cómo afrontáis el diseño de una web corporativa de este tipo, a nivel local? ¿Alguna clave que la diferencie, por ejemplo, de una compañía online sin localización geográfica, o tal vez de una gran empresa que opere a nivel nacional e incluso internacional?

Sí, hay algunos matices diferentes… El diseño web corporativo a nivel local se debe afrontar desde 2 puntos de vista igualmente importantes: el gráfico en sí mismo y el relacionado con el posicionamiento SEO. Este último deberá estar enfocado lógicamente a esa determinada localidad, y a nivel general ambas cosas hay que tenerlas muy en cuenta a la hora de escribir el código de la web. En pocas palabras, el diseño tiene que ser claro y bueno, y al mismo tiempo muy legible a nivel de código para los buscadores. El contenido, orientado geográficamente.

Más concretamente, centrándonos en el diseño gráfico (creación de logotipos, tarjetas de visita, imagen corporativa, etc), no tiene por qué ser diferente ni seguir una línea gráfica distinta frente a una empresa nacional o incluso internacional. Salvo tal vez en algunos casos de nombre de marca. Por otro lado, en clave SEO hay aspectos técnicos que sí determinan bastante, cuando hablamos de orientación geográfica internacional, nacional o local. Por ejemplo, en Metacom hemos desarrollado este artículo sobre SEO Internacional, respondiendo definitivamente a que la construcción y posterior posicionamiento de un sitio web no sólo se trata de darle a un botón. ¡Todo lo contrario! Muchísimo trabajo detrás.

- Entiendo… Entonces el trabajo de diseño no cambia para una empresa local, ha de ser tan bueno como si se tratara de una compañía conocida en el mundo entero… Quién sabe si no lo terminará siendo, ¿verdad? (sonríen). Por cierto, ¿qué hay del diseño reponsive? ¿Tan importante es realmente hacer una web adaptable a los distintos dispositivos?

(No dudan ni un momento)Evidentemente que sí. La máxima excelencia es tener una web en versión móvil y otra para ordenadores de escritorio, aprovechando así sus grandes monitores y facilidad de navegación gracias al ratón. Pero claro está que no todas las empresas se pueden permitir un presupuesto para ambas (es trabajo doble, implica diseñar y desarrollar dos sitios en lugar de uno). Así que la alternativa más recomendable es crear una Web Responsive -que se adapta a todos los dispositivos, tanto ordenador, como tablets y móviles-, para ahorrar así en costes y favorecer el posicionamiento en Google. Pero más allá de esto, el principal objetivo del diseño es la usabilidad: que el internauta tenga una excelente experiencia de usuario frente a un diseño web que se plasma en millones de dispositivos, con muchas diferencias entre ellos en tamaño de pantalla, etc. Además, el tráfico móvil ya alcanza el 50% en la mayoría de webs, e incluso lo supera (me muestran un artículo que confirma todo esto).

(Continúan)En Metacom fomentamos ambas cosas… y algunas más. Diseño Web Responsive, Indexación y Corporativismo local. Por ejemplo, actualmente tenemos 4 sedes locales y 1 Internacional: Sant Cugat, Sabadell, Barcelona, Puigcerdà y Miami (Estados Unidos). En España, hemos creado diferentes marcas y logotipos para establecer un acercamiento más próximo y humano según la localidad. En el diseño web se puede ver bien reflejado en Metacom BCN, Metacom SBD y Piricom.cat (me muestran las diferentes webs).

Metacom BCN - captura de pantalla

Metacom SBD - captura de pantalla

piricom - captura de pantalla

El objetivo es claro. La marca y el diseño web de Metacom BCN es para Barcelona, Metacom SBD para la ciudad de Sabadell y Piricom.cat para la zona de Cerdanya en Catalunya. Incluso, para este último hemos modificado el logotipo eligiendo el símbolo “^” para relacionarlo con las montañas de los Pirineos Catalanes.

Logos divisiones metacom

Es solo una muestra, cada página tiene dentro imágenes propias de dicha localidad o región (fotografías, iconos, etc), así como en general un diseño y contenido geo-localizado. Esto hace que sea mucho más próxima.

- Veo que en Barcelona habéis usado el rojo como color dominante, mientras que para Sabadell se ha elegido un tono verde, y para los Pirineos el azul. ¿Algún motivo para ello?¿Qué opináis sobre la teoría del color?

La idea del menos es más. (Asiento cuando dicen esto, pues “menos es más” es una de las leyes principales del diseño, si no directamente la más importante). Aparte de eso no tiene mucho secreto… Te sorprenderás en cuanto te lo diga. Para Metacom BCN hemos elegido el color rojo ya que es uno de los colores que tiene la bandera de Barcelona -se trata de una bandera en fondo blanco con la cruz roja-. Mientras que para Metacom SBD hemos seleccionado el verde por la misma razón: también es uno de los colores predominantes en la bandera de Sabadell -la cual es verde, blanca y amarilla-. El azul pirenaico viene muy bien a la montaña. ¿Cómo te quedas?

- (Río) Me quedo muy bien pues tiene toda la lógica del mundo. Me parece bastante apropiado. Por cierto, también noto que los iconos y el diseño en general es bastante "flat" (plano). ¿Sigue el Flat Design tan en boga como ha estado estos últimos años?

Por supuesto que sí –asienten-. El diseño plano sigue siendo una tendencia fuertísima en el diseño web, seguramente porque es muy limpio y claro. Recuerda también al “menos es más”. Para una web corporativa es totalmente apropiado, pero en realidad para todas, de cocina, restaurantes o lo que sea. Luego en las fotografías puede buscarse la complejidad y el alto refinamiento artístico-estético, dentro de un entorno por lo demás limpio. Así resaltan más dichas imágenes.

Además, otra de las razones principales del éxito del diseño “flat” y, digamos, minimalista en general, es que dichos iconos pueden hacerse pequeños sin problema, sin perder detalles y siendo entendibles y usables a todos los tamaños, mientras que si están llenos de sombras y cosas así al verlos en pantallas pequeñas pueden quedar emborronados, o no entenderse bien su significado. El diseño Flat está muy enfocado a las páginas web Responsive, una cosa va de la mano de la otra.

- Pues sí, la verdad es que todo el mundo comenta eso, y yo estoy totalmente de acuerdo, es algo cierto. Sin ir más lejos aquí en La Grafiteca pueden encontrarse muchos recursos con un diseño de tipo Flat, que hemos ido recopilando con el tiempo. Se ven mucho (consultar por ejemplo en la categoría Iconos, o realizar directamente una búsqueda poniendo “Flat”). ¿Destacaríais alguna clave más?

Si. Hemos visto que es bastante útil usar colores básicos, queda todo más claro con una paleta sencilla. Por ejemplo vienen muy bien los tonos normalizados presentes en el Framework Bootstrap, que se emplea mucho en desarrollo web. Nosotros los usamos bastante en todos nuestros sitios: naranja, verde, rojo y azul celeste. Son colores que pueden usarse en botones para reforzar mensajes como “Atención a esto”, “Operación realizada con éxito”, “Más información” y cosas así. En realidad, puede emplearse incluso uno solo de ellos, un tono único para cada web, siendo así todavía más limpio el diseño.

Pues más o menos esto fue lo que me comentaron los chicos del departamento de diseño de Metacom. Espero que estas claves puedan ser de utilidad para el resto de profesionales (y aficionad@s) del ramo.

Comentarios y discusión sobre esta entrada