Estar a al vanguardia, en un sector como el de la moda, y más como el caso de Macavi, donde la peluquería es, además de moda y belleza, también un arte, ha de mostrarse en todas las comunicaciones de la empresa. Y la página web no tiene por qué ser menos.
Las páginas web
la tecnología
y la moda.
El tiempo pasa para todo el mundo. Pero no solo las personas están afectadas por este fenómeno. La tecnología y la moda, están en constante cambio. Lo que hoy es el no va más en un móvil o el último grito en una tendencia de moda, mañana se queda obsoleto y taciturno o ha pasado a ser de lo más hortera o anticuado.
Internet responden a estos dos puntos, ya que las páginas web son hijas de la tecnología y por su puesto, víctimas de la moda. En este caso, en el diseño de páginas web, la tecnología y la moda van de la mano puesto que esta última, depende muchísimo de lo que la primera permita hacer.
Al principio había que diseñar las páginas pensando en el tiempo de descarga. Por ejemplo, se utilizaban imágenes muy pequeñas, ya que la velocidad de internet era muy baja. Hoy tenemos velocidades altísimas, pero hay que diseñar para móviles y tablets con pantallas más o menos, pequeñas y con datos finitos.
La página web antigua de Macavi
La página web con que contaba Macavi antes de que me encargaran la nueva, respondía exactamente, al paso del tiempo que te comentaba antes.
Su aspecto, en cuando al diseño, no estaba mal, era bastante moderno, con lo que casaba bastante bien con la filosofía de la empresa, pero un moderno de otro tiempo. Es decir, no tenía un diseño muy convencional para su época, pero se había quedado desfasado. Y lo que era aun peor, es que se quedó muy atrás tecnológicamente. Para empezar, NO SE ADAPTABA A LOS MÓVILES, vamos, que no era una página web responsive. Fallo muy gordo.
Además tenía una navegación bastante farragosa, no se sabía muy bien en que sección estabas, pues las URL’s de los diferentes apartados, no respondían a ningún criterio y el menú, aunque funcionaba perfectamente, no daba ninguna pista al respecto.
Otra característica que había que corregir, es que tenía una distribución de contenidos ya un poco anticuado. Poco amigable, no solo para Google, sino también para el propio usuario. El típico contenido con la típica página de “sobre nosotros” con textos muy poco cercanos, que no hablaban con el usuario, sino que era un texto muy genérico, con poco contenido propio.
Objetivo para
la nueva web
Al principio de la presentación de este proyecto web, te comentaba como una empresa debe cuidar enormemente su aspecto en todos los elementos de comunicación. Sobre todo si es una empresa tan vinculada al mundo de la moda y el arte. Y digo arte porque Macavi peina y maquilla a cantidad de personalidades del mundo del la música y el cine. No tenéis más que echar un vistazo a su página web para conocerlos un poco mejor.
Mejorando la presencia o imagen online
Así que, el objetivo de la nueva página web para Macavi, pasaba por mejorar su presencia online en su página web a través de actualizar su diseño, facilitar o hacer más intuitiva la navegación del site con un sistema de menús muy básico incluso clásico, pero al que el usuario está perfectamente acostumbrado y, por su puesto, sugerir un trato más cercano y más transparente con todo el contenido, hablando, claro está, de los textos.
Creando una estructura de páginas y de contenidos más clara, mejoramos la orientación del usuario que navega por la web. Además le añadí algunos efectos en determinados apartados que, además de tener una función de limpieza cuando el contenido es largo y no deja mucho margen para la buena composición (vamos, que condiciona el diseño), le da un toque más moderno.
No soy muy amigo de crear demasiados efectos de movimientos, fotos que van y vienen y este tipo de cosas… en este caso, tampoco me parecía apropiado estos efectos visuales. Sí es cierto que le dan dinamismo a la página web y le dan un toque muy moderno, pero demasiado informal para Macavi. Este tipo de efectos tienen su público y no era el caso.
Mejorando la indexación en Google
Todo el mundo quiere que su web esté lo mejor posicionada posible en buscadores. El primer paso es trabajar bien la indexación en estos, principalmente para Google, a base de mejorar las URL’s de los diferentes apartados, buena optimización de las imágenes en cuando al peso, tamaños y, por su puesto, el nombre de los archivos, títulos, textos…. Pequeños gestos que ayudan un montón a Google a entender de qué va esta página web.
También para el posicionamiento web y para acercar al usuario y posible cliente, todo el alma de la empresa, es muy recomendable crear un blog con contenido afín con tu posible cliente, que aporte algo de valor, bien sea entretenimiento, informativo o algo de utilidad, funcional. Y no es fácil, es una estrategia que siempre propongo a mis clientes, pero pocos aceptan.
Es cierto que crear un blog, tiene mucho trabajo y además hay que ser lo más fiel posible a fechas de publicación y no dejarse llevar por la pereza. Pero funciona.
Afortunadamente Macavi cuenta con una persona que se dedica al blog, así que se han puesto las pilas y cada semana publican un post. Más o menos largo, más o menos trabajado, pero no fallan. Y esto es lo que vale.
Diseñando la
página
web
de Macavi
Ni que decir tiene que el cambio de diseño podría formar parte del apartado objetivos. Pero como el diseño web (resalto diseño), es mi especialidad y además hay un par de anécdotas que merece la pena detallar, he decidido presentártelo como un apartado nuevo.
Algo me condicionó
La imagen corporativa de Macavi, consta únicamente de un logotipo. No tiene símbolo (isotipo). Es texto sin más. Con una buena elección de tipografía o incluso creándolo personalizado, puede quedar una imagen muy potente y personal. Pero la incorporación de un símbolo, sin ser obligatoria, ayuda mucho para trabajar la identidad.
Para tener una imagen asociada a su marca, sobre todo representado en los elementos de comunicación, con un fin más decorativo que otra cosa, que sirviera para las bolsas de los productos que tienen en venta, las batas de trabajo y elementos varios, encargaron la creación de unas ilustraciones a A. K. Higgins, que son una pasada. Una ilustradora de renombre internacional en el mundo de la moda.
El problema, es que al querer darle mucha importancia a esta ilustración, lógico por otra parte, para eso se hizo una gran inversión, pero me condicionó todo el diseño de la web. Sobre todo en la elección de Colores y los formatos.
El formato
El problema mayor vino con el formato de la imagen de Higgins, pues es vertical y claro, si hay un formato en internet que va mal mal con el diseño, es precisamente el vertical. Recomendación, formato de imágenes cuadradas u horizontales, siempre que se pueda claro. Quizás en una tienda online de vestidos, el formato vertical encaja mejor.
En realidad, esta imagen solo condicionaba la home de la página web. Ya que es ahí donde se va a colocar la ilustración. Pero esta página es muy importante. Normalmente es la presentación de la empresa. La entrada a la web. Aunque no siempre.
Las imágenes de Higgins tienen, hasta ahora las que me han llegado, el fondo blanco. Esto es un alivio, aunque también añade otros condicionantes.
Es un alivio porque esto me permitió jugar con los márgenes entre la imagen y la sección a la que pertenece. Al poner el fondo blanco a dicha sección y trabajar las distancias entre la imagen y los bordes de la sección, podría simular una imagen cuadrada o al menos, no tan vertical.
Al principio, creé una sección blanca a todo lo ancho de la pantalla, en la parte de la izquierda puse la imagen, ya la los textos de entrada. El formato vertical, me permite utilizar unas fuentes bastante grandes. Una tendencia muy actual en el diseño web. Y así, resaltar a modo de grito, lo más destacado del mensaje. Y no quedaba mal, pero muy soso.
Así que para dar un poco de contraste entre la imagen y el mensaje, decidí añadir una imagen gris muy muy suave, de fondo, en la parte derecha, donde van los textos. Tenía que ser algo que no diera sensación de vacío y que no dificultara la legibilidad de los textos.
El color
En cuanto a los colores, más que condicionarme, me ayudó o mejor dicho, nos ayudó (porque para esta importante elección, tuvo mucho peso la dirección de Macavi), pues como te decía, me ayudó mucho con los colores porque, la imagen de Macavi está compuesta por un único color, el negro y por ente, acompañado de algunos grises sin definir.
Si bien, podría resolver todo el diseño de la web con este color como principal y seleccionar una gama de grises, como complementarios, para determinadas partes como fondos y algún que otro encabezado. Pero poco más. El gris con el negro funcionan perfectamente, pero si queremos un poco de contraste, esta combinación no es la más apropiada.
A mi juicio como diseñador web, necesitaba un nota de color. Para resaltar de verdad, algo que dijera a voz en grito «¡eh! estoy aquí!». Esto, normalmente se suele utilizar para los CTA (acción que quieres que haga el usuario). Resaltar algún punto como por ejemplo los botones los enlaces, es decir, puntos de referencia para el usuario.
Entiendo que no se puede abusar mucho de este color, entre otras cosas, porque no es el color corporativo de la marca. Pero necesitaba algo.
No se muy bien por qué esta ilustradora basó la primera de sus ilustración en el color azul. El pelo, parte de la vestimenta e incluso acompañó a la ilustración con un texto que rezaba “Color Macavi” de color azul.
Así que por eso digo que la imagen de Higgins me condicionó o más bien, condicionó la elección de este color. Si en lugar azul, hubieran sido colores verdes o naranjas, seguramente alguno de estos hubiera sido el color elegido para la web.
No pienses que la elección fue así de simple, azul, pues azul… Tuvimos que consensuar y darle muchas vueltas al asunto color. Entre otras cosas, porque el contrato con la ilustradora consta de varias ilustraciones que irá entregando cada 6 meses. ¿Y si la siguiente ilustración la basa en un color verde?… Dependiendo de los tonos que saque en la siguiente ilustraciones, el azul y trabajando bien su uso, puede encajar muy bien. Lo cierto, es que la segunda ilustración, también tiene el azul como color predominante. Crucemos los dedos.
Tampoco se si Macavi se quedará, para siempre, con este color azul como complementario para su imagen corporativa o solo formó parte de una campaña que tintó la página web de este color. Quizás en un corto periodo de tiempo piensan cambiar todo esto. Pues bien, habrá que trabajar este asunto. No pasa nada si mañana, la web de Macavi, se tiñe un color más cálido… ya os iré contando.
Una vez terminada
la nueva web
Aunque WordPress es un sistema realmente intuitivo a la hora de añadir contenido y lo mismo pasa con mantener al día un WordPress, actualizar las plantilla y los plugins, no deja de ser un proceso técnico que, en ocasiones, da un poco de miedo.
No tiene por qué pasar nada, al actualizar un componente de la página web, no tiene por que dejar de funcionar pero, a veces, sí pasa. Por eso es importante hacer copias de seguridad periódicas.
También te puedes pregunta; pues si WordPress puede dar problemas a la hora de actualizarse, ¿para qué actualizarlo ¿no?. También puedes preguntarte: ¿qué pasa si no se actualiza WordPress?. Y es buena pregunta. Te respondo en este artículo de mi blog.
El caso, es que Macavi me contrató un servicio de mantenimiento WordPress, para que ellos no tengan más que pensar en el contenido y olvidarse de cuestiones técnicas; esas corren de mi cuenta. Y si al actualizar un plugin o cualquier otra cosa de su página web, falla algo, ya estoy yo para solucionarlo.
Pero además hay otra razón para contratar un servicio de mantenimiento. En el caso de la página web de Macavi, además tienen un blog. Ya te comenté antes (bueno más arriba), que habían decido dar un servicio extra a sus cliente, creando un blog con consejos y otras informaciones. Además que ayuda al posicionamiento en Google.
Y lo dicho, Worpress es muy sencillo de manejar, crear un post (articulo) nuevo para el blog es muy intuitivo. Podrás ver cantidad de información en google. Pero, la ventaja de subcontratar este servicio a un diseñador web, es que este, va a darle un toque especial, siempre, a los contenidos. Va a llegar un poco más allá de las funciones básicas estándar. Con el tratado de las tipografías, la optimización de las imágenes la combinación de colores, la composición de los elementos que forman el artículo… Vamos, lo que viene a ser, diseñar.
Enlazando con el párrafo destacado del principio, como decía Julio Cesar, «La mujer del César no solo debe serlo, sino también parecerlo» igualmente pasa con una empresa como Macavi, la calidad se demuestra con el trabajo día a día, pero además tiene que notarse en todas sus comunicaciones.