Hace la friolera de 4 años que no escribo nada en este blog. Y tiene delito porque yo soy de las que dice “para tener un blog abandonado no lo tengas”. Pero ya se sabe, en casa del herrero, cuchara de palo.
El caso es que llevamos unos años moviditos. Con la pandemia vimos como nuestro negocio pasó de pender de un hilo – como todos – a estar completamente desbordado de trabajo.
¿El motivo? Tener una (buena) web pasó a ser un requisito si querías sobrevivir, así que muchos negocios se crearon una o la renovaron.
Cuando empezamos a estar más tranquilos, allá por 2022 se nos ocurrió la idea de ser padres. Y a lo tonto nos plantamos a finales de 2024 sin tener un respiro.
Así que cuando tuvimos algo de tiempo ocioso echamos un vistazo a nuestra marca y dijimos: “ya no nos representa”. Tocaba un cambio mayor, un rebranding de marca completo.
En este post vas a ver todo lo que hemos hecho en cuanto a rebranding. Seguramente te lleves algún aprendizaje interesante y sobre todo curiosidades que satisfacen el gossip que despierta un ejemplo real de rebranding de una marca normal.
Qué es un rebranding y cuándo hacerlo
El momento de un rebranding se suele asociar a un momento en el que se quiere “correr un tupido velo” sobre algo. Por ejemplo, una marca cuya reputación se esté resintiendo, normalmente por alguna mala praxis, y necesita un lavado de cara.
Sin embargo, hay muchas otras situaciones en las que una marca puede requerir un cambio. Hay que estar atentos a algunas señales que indican una necesidad de rebranding:
- La marca ya no refleja los valores de la empresa.
- La identidad visual está desactualizada.
- Existe un cambio en las tendencias de mercado.
- Quieres diferenciarte más de tu competencia.
- Recientemente ha habido una compra o fusión.
- Expansión a nuevos mercados o productos.
El rebranding ofrece a una marca una oportunidad para refrescarse, reflotar, volver a tener atención de su audiencia y adecuarse a la realidad actual.
Por qué hemos hecho un rebranding en Artilet
La marca la creamos en 2019 en un tiempo récord. En aproximadamente un mes concebimos todo: naming, logotipo, colores, tipografías, universo fotográfico y diseño web.
Fue una marca creada en un momento de crecimiento del negocio. Llevábamos unos 6 años dedicándonos al diseño web y marketing online bajo otra marca (aún pienso en ti ‘Estudio Momo’) y nos vimos obligados a cambiar por discrepancias legales que surgieron con otra empresa que tenía una marca similar previamente registrada.
Honestamente, aunque el naming Artilet me sigue encantando (proviene de mi unión con Pablo, del concepto arte + letras), todo el universo gráfico fue creado bajo mucha presión. Y yo lo notaba.
En 2022 además realicé un máster en experiencia de usuario (UX) y diseño de interfaces (UI) que me hicieron darme cuenta de algunas cosas que podía mejorar en nuestra marca y web, como por ejemplo la accesibilidad.
Proceso de rebranding paso a paso
Existen tres tipos de rebranding según la intensidad del impacto creado: bajo, moderado o alto.
En nuestro caso, hemos realizado un rebranding de impacto moderado.
Este tipo de rebranding implica algunos cambios en la marca como, por ejemplo, pequeñas modificaciones en el logotipo, cambios de color y mejoras gráficas. Pero no es un cambio muy radical ni se ha hecho porque vayamos a hacer un cambio en el modelo de negocio.
Cambios en el logotipo
Casi todo proceso de rebranding tiene impacto en el logotipo de la empresa, pues es el elemento más visual de la misma.
Estos son nuestro anterior logotipo y el nuevo:
Como puedes ver, existen bastantes cambios que hacen que los logos sean bastante diferentes entre sí.
Los cambios más importantes a nivel técnico son:
- Mejores proporciones entre elementos.
- Mayor coherencia de trazos y vértices.
- Mejor alineación óptica.
- Mayor legibilidad a bajo contraste.
Te listo otros cambios más sutiles pero que son igualmente importantes pues impactan en nuestros valores de marca:
- Más experiencia: trazos más gruesos.
- Más contundencia: tipografía en negrita.
- Mejor unión entre líneas de negocio: carácteres ligados entre sí. Al final, lo que hago yo (diseño web y gráfico) se complementa con lo que Pablo hace (SEO y copywriting).
- Más libertad: el elemento encajonado del anterior logo siempre me ha parecido que transmitía poca flexibilidad en nuestro servicio, cuando nosotros precisamente lo que hacemos con nuestros clientes es intentar que salgan de su pequeño círculo para que vean más allá, para que conozcan todas las posibilidades.
En definitiva, el nuevo logotipo resultante del rebranding es un logotipo con el que nos sentimos más identificados en estos momentos de madurez del negocio porque no pasa desapercibido.
Un ejemplo del resultado logrado es que no tenemos miedo de que se nos vea, cuando recibes una propuesta o un contrato de Artilet, porque sabemos que lo que hacemos lo hacemos bien.
Nueva paleta de colores
Entre nuestra competencia hay paletas de todos los tipos, suaves y llamativas. Pero en el sector tecnológico es más habitual encontrar colores más vivos.
Como nuestro objetivo es posicionarnos como expertos en tecnología WordPress y en estrategias de Marketing que destaquen, he repensado los tonos de los colores, aunque siguen siendo los mismos.
Esta es nuestra antigua paleta de colores y la nueva:
Los cambios que pueden observarse son:
- Tonos más vivos.
- Más diversidad cromática.
- Paleta maximalista, que contrasta con la estética minimalista del resto de elementos gráficos creados en el rebranding y que encontrarás en adelante.
- El degradado incorpora todos los colores, en contraste con el anterior degradado que solamente incorporaba los dos colores principales.
Además, hemos adaptado los colores y tamaños tipográficos de la web siguiendo las normativas WCAG 2. Esta normativa facilita la accesibilidad web, garantizando una óptima legibilidad y percepción de los elementos web a personas con dificultades visuales.
Las «A» indican el nivel de cumplimiento de la normativa, siendo AA el cumplimiento básico y AAA el máximo. Así ha evolucionado nuestro cumplimiento:
Mi objetivo de lograr una mayor accesibilidad con el rebranding nos permite dotarnos en adelante de una paleta de colores con:
- Un mayor rango de contraste visual texto-fondo.
- Más opciones de combinaciones entre colores de texto y de fondo.
Cambios en la tipografía
Lo mío con las tipografías es de traca: cómo puedo pasar del amor al odio con una tipografía es algo digno de estudio.
El caso es que las tipografías que usábamos en 2019 eran novedosas… en 2019. Luego me cansé de verlas en otros sitios. Por suerte, no en mi competencia, pero daba igual.
Así que ahora que estoy en 2025 he seleccionado otras tipografías, teniendo la certeza al 99% de que en 2031 me arrepentiré de mi selección y pueda querer llevar a cabo un nuevo rebranding de marca.
Estas son las tipografías anteriores y las nuevas, tanto para titulares como para cuerpos de texto:
Te listo algunas diferencias de la tipografía titular (Abril Fatface vs. Unbounded), pues la nueva tiene:
- Mejor legibilidad.
- Más variedad de grosores (regular y light).
- Una estética más neutral (la anterior resultaba más femenina).
Por su lado, si comparamos la tipografía de cuerpos (Poppins vs. Aeonik), vemos que la nueva tipo se beneficia de:
- Vértices más cuadrados, lo que transmite más perfeccionismo y seriedad.
- Panzas menos redondas, lo que la masculiniza un poco, equilibrando la paleta de colores.
- Más alineada al sector tecnológico.
- Menos vista, la Poppins es una de las tipografías más usadas del mundo actualmente (en 2019 no era así).
Es una tipografía de pago, lo que la hace menos habitual entre la competencia. Sí, has leído bien, hemos pagado por una tipografía, habiendo cientos de miles gratuitas. Pero yo quería ÉSTA.
El rediseño web: un elemento indispensable del rebranding
El diseño gráfico y concretamente el diseño web es uno de los sectores que más rápidamente se transforma. De ahí que suelen verse impactados por un rebranding. Y es que por mucho que los pilares de ambos puedan siempre ser los mismos, al final van surgiendo tendencias y necesidades en el mercado.
Desde mi punto de vista, una web puede seguir viéndose moderna 6-8 años después de su lanzamiento. PERO (en mayúsculas) depende de varios factores:
- El sector: si tu sector cambia mucho con las tendencias (como la moda o el diseño), tu web probablemente se verá clásica antes de estos 6-8 años.
- El diseño inicial: si cuando renuevas tu web te limitas a seguir con tendencias de años anteriores, el diseño aún tendrá menos años de vida. Por eso es importante contratar a un diseñador que:
- Esté al día en las tendencias más actuales.
- Tenga la suficiente experiencia u olfato como para prever las tendencias que van a cumplir años dignamente y las que no.
- Te haga un diseño a medida, sin usar plantillas. Lo que tienen las plantillas es que, al ser multisector, siguen unas tendencias muy generales y poco personalizadas; lo que hace que tu web se vea nueva y diferente durante menos tiempo. Si te interesa, mira esta comparación que hice: Diseño web personalizado vs. Plantilla de WordPress.
- El rumbo del negocio: si tu negocio ha dado un giro muy drástico, es importante valorar un rediseño completo. A veces ocurre que a lo largo de años intentamos ir poniendo parches y el resultado queda poco profesional.
En nuestro caso resultó inevitable rediseñar la web como consecuencia lógica del rebranding llevado a cabo.
Nuestro proceso de rediseño web al detalle
#1 Análisis del sitio a rediseñar
Lo primero es ver qué funciona y qué no en la web que se quiere rediseñar. En nuestro caso lo que hicimos fue (aplica al 90% de los procesos de rediseño web):
- Consultamos métricas para ver qué páginas, textos y procesos conservar y cuales eliminar de la nueva web.
- Unificamos contenidos con otro proyecto que teníamos en el que hacíamos formación de diseño web WordPress para emprendedores y que nos había funcionado muy bien.
- Revisamos la arquitectura web y cómo se organizaban los ítems del menú, para dejar más accesibles, tanto para las personas como para Google, los servicios con mayor salida.
- Para mejorar la WPO (web performance optimization) decidimos separar el blog en una instalación diferente. De esta manera, requerimos menos recursos del servidor y mejoramos algo la velocidad del sitio principal o comercial.
- Para mejorar el SEO local, cambiamos el dominio principal de .com a .barcelona. Al final, si bien tenemos clientes de todos los lares y a pesar de lo 100% digital que es lo nuestro, el core de Artilet son negocios de Barcelona.
Una vez detectados todos estos puntos de mejora estructurales del sitio a rediseñar, nos pusimos manos a la obra con esta increíble fase del rebranding.
#2 Rediseño de la homepage
Si hay un momento clave en el diseño de una web es decidir cómo será la homepage. Ahí es donde se materializa la esencia de todo.
Los elementos más importantes de una homepage son:
- Above the fold: llamamos así a toda el área que se visualiza antes de hacer scroll. Es el primer impacto de la web en el usuario y tiene dos objetivos:
- Transmitir la propuesta de valor rápidamente, pues los usuarios deciden si siguen en una web en aproximadamente 3 segundos.
- Transmitir una o dos llamadas a la acción principales de forma clara.
- Menú: la memoria a corto plazo solamente retiene unos 7 ítems, que suelen ir borrándose hacia los 20 segundos. Por eso es importante pensar muy bien los menús. En mi caso, aunque varía entre diseñadores, me gustan los menús escuetos o con pocos ítems. Por eso, prefiero usar submenús sencillos que menús largos o megamenús.
En las siguientes pantallas te muestro el antes y el después del above the fold:
Verás que además de lo dicho anteriormente, en nuestro rediseño de la home trabajamos todo esto:
- Un diseño de botón más claro.
- Dos focos de atención coherentes: “crecer” y “Así es como lo hacemos”.
- Una discontinuidad en el diseño del Above the Fold: se empiezan a ver nuestras caras, pero no se visualiza del todo la pieza de información. Favorecemos de esta manera el scroll basándonos en el principio Gestalt de continuidad.
- Reordenamos todas las secciones de la homepage, teniendo en cuenta el flujo de comportamiento de los usuarios basándonos en las secciones más visitadas de la web actual.
- Unificamos estilos de titulares, botones y diseño de secciones. Creando una imagen más coherente y que el usuario aprende más fácilmente.
- Incluimos tres opiniones reales de clientes con sus nombres completos y fotografías, ya que sabemos que es un punto muy importante cuando se valora contratarnos.
- Nos mostramos más, aparecemos más veces a lo largo de la home.
- En el footer mostramos los servicios que tenemos pero que no suelen resultar tan visitados por nuestros usuarios web.
Seguimos aplicando el rebranding en el resto de la web.
#3 Rediseño de las páginas internas
Una vez tenemos rediseñada la homepage, debemos dar forma a las páginas internas.
Lo ideal es replicar el mismo diseño para piezas de contenido similares, facilitando así la curva de aprendizaje del usuario.
Así, aplicamos un diseño similar para los servicios, otro para los proyectos del porfolio, otro para cada término del diccionario SEO y otro para los artículos de blog.
El resto de páginas se diseñan siguiendo una estética similar, pero cada una tiene su propia estructura, dado que son tipos de contenido muy dispares (equipo, contacto, guía gratuita…).
Aquí puedes ver un ejemplo de la página de diseño gráfico antes y después del rebranding:
Y ahora una comparativo de una entrada de blog con el diseño de antes del rebranding y a la derecha con el nuevo diseño de 2025:
#4 Rediseño de las páginas “invisibles”
Hay una serie de páginas a las que a veces se nos olvida que hay que aplicarles “mimo” en el rebranding de una web. Son páginas que nosotros como administradores web raramente vemos, pero que nuestros usuarios pueden encontrarse.
Hablo de:
Páginas de agradecimiento
Suelen ser las páginas que se usan para medir conversiones, en las que agradecemos una acción. Por ejemplo: gracias por contactarnos o gracias por suscribirte. Suelen ser muy simples, con uno o dos párrafos. Pero son importantes en el proceso de venta y pueden ayudar a crear conexión con un cliente potencial.
En nuestro caso, en la página de agradecimiento de contacto decidimos trabajar un poco más las pruebas de valor, facilitando un enlace a los testimonios reales.
Así era en 2019:
Y así es actualmente:
Página 404
La 404 es la página que aparece cuando no existe el destino de un enlace al que hemos hecho clic. Es llamativo la cantidad de veces que puede suceder esto y la poca atención que suele ponerse a esta página en el rediseño web. Una buena 404 indica, de una forma amena, que estás en un lugar perdido y te facilita ir a una página que esté accesible.
Decidimos quitar el buscador por defecto de WordPress (que funciona regular) y en cambio pusimos una página tipo “sin distracciones” con un solo botón que dirige a la homepage.
En 2019 se veía así:
Y su aparencia actual es ésta:
#5 Rediseño del lead magnet
Un lead magnet es un contenido que creas para captar un contacto o lead. En otras palabras, das algo a cambio de algún dato de contacto del usuario.
Por ejemplo, en Artilet hace muchos años que por suscribirte a nuestra newsletter te enviamos de regalo una guía con los puntos clave para que tu próxima web sea un éxito.
Éste y todos los documentos de marketing y ventas han tenido que ser rediseñados en este rebranding, lo cual ha sido una excelente oportunidad para revisar que lo que decimos sigue vigente a día de hoy.En la siguiente imagen puedes comparar el antes y el después de la portada del lead magnet:
Conclusión sobre nuestro rebranding
En mi opinión un rebranding de marca implica más trabajo que crear una marca desde cero.
Y lo es por varios motivos:
- Dispones de datos para tomar decisiones de diseño. No diseñas porque creas que va a funcionar, diseñas sabiendo lo que funciona y lo que no en una marca y una web específicas. Esto da menos libertad creativa, pero más probabilidad de acierto. Como diseñadora trabajo más a gusto y más rápido si me dan alas.
- Una marca tiene un componente emocional del que tienes que desprenderte en un proceso de rebranding. En muchas ocasiones, este hecho genera resistencia por parte del cliente. En nuestra trayectoria nos han rechazado propuestas muy buenas de rebranding justificando un apego emocional a la antigua marca. A mí, por ejemplo, me ha costado desprenderme de nuestras mascotas, pero no encajan en el nuevo universo gráfico.
- Un rediseño web implica romper estructuras mentales y en muchas ocasiones, reorganizar el propio negocio: a dónde queremos ir, qué queremos destacar, qué línea de negocio nos da más beneficio, qué peso damos a cada uno de los servicios que ofrecemos. Esto también genera mucha resistencia, especialmente si el negocio funciona bien.
- El rebranding implica muchas ramificaciones de las que a veces no somos conscientes: marca, web, firmas de email, contratos, facturas, presupuestos, informes de mantenimiento web WordPress, documentación técnica, tarjetas de visita, merchandising, etc. Un listado inmenso de aplicaciones que durante años se han ido creando poco a poco y que de repente se deben renovar todas. Es un proceso largo, costoso y que genera mucho trabajo.
En nuestro caso, este proceso de rebranding lo hemos vivido como algo positivo. Ha resultado ser una oportunidad de refrescarnos, oxigenarnos y corregir incoherencias que se han ido acumulando con el tiempo.
No es un renacer, porque nos encanta cumplir años, pero es un glow up del que teníamos muchas ganas.Como agencia de branding hemos ayudado a otros negocios con sus procesos de rebranding. Si quieres que trabajemos juntos en el tuyo, déjanos tu contacto.
