Cómo y por qué crear una guía de estilo para tu web

Cuando era pequeña mi familia tenía un pequeño negocio. Empezaron con poquita cosa, pero aquello fue creciendo y un día se tomó la decisión de que había llegado la hora de contratar a un diseñador para hacer una imagen de marca profesional.

No recuerdo mucho de cómo fue el proceso, pero sí del resultado. Tras unos meses de trabajo, recibimos un dossier de unas 100 páginas en las que se explicaba cada detalle de la marca. Las tipografías, los colores, la distribución… Pero no solo eso, también la infinidad de aplicaciones que se le podía dar: cómo incluir el logo en los sobres, cómo aplicar la imagen en el papel carta, cómo diseñar el rótulo de la fachada del local, cómo utilizar el isotipo, el logotipo… y mil explicaciones más que a mí familia les sonaron a chino.

Sin embargo, aquel manual (que seguramente costó de hacer bastante tiempo y dinero) se convirtió en una especie de biblia que mi familia utilizó durante años y años para cuidar su marca y mantener siempre cierta coherencia en todo lo que iban haciendo.

Pero, ¿te imaginas un libro de estilo de 100 páginas para tu pequeño negocio online?

Me pongo a pensar en mi propia marca tan diseccionada y me entra hasta un nosequé.

Y es que en unos pocos años las cosas han cambiado mucho. Hace 20 y pico años montar un negocio digital era casi una utopía. Y trabajar desde tu propia casa utilizando tan solo un ordenador con conexión a internet… Ni existía ni se le esperaba.

Pero aquí estamos hoy. Te escribo desde mi casa, desde un ordenador con conexión a internet, y tú, probablemente, me lees en las mismas condiciones.

Las cosas han cambiado mucho en los últimos años. Y, como tantas otras disciplinas, el diseño de imágenes corporativas también se ha ido adaptando a los tiempos.

Tener una imagen de marca consistente sigue siendo un must en cualquier negocio al igual que hace 20 años. Pero el uso que hacemos de esa marca no es el mismo. Ni siquiera la concepción que tenemos sobre el proceso y el resultado es el mismo.

Aunque la intención sea que una marca sea “para toda la vida”, hoy las encargamos sabiendo que es posible que cambie en unos años. Porque puede que en un tiempo cambiemos de sector, que nos especialicemos en algo concreto, que nuestro negocio crezca y sea necesaria una nueva marca, que añadamos o eliminemos servicios… Sabemos que tenemos que ser flexibles, rápidos y adaptarnos a los cambios lo mejor posible.

Entonces, ¿qué necesita exactamente un negocio digital como el nuestro para conseguir una presencia online potente?

Olvidarse de un manual de 100 páginas, desde luego.

Un negocio digital lo que necesita es una guía de estilo que le permita, de manera ágil, tener una imagen de marca cohesionada y coherente. Y eso, hoy en día, es posible hacerlo en poco más de 2 ó 3 páginas.

¿Y qué debe incluir esa guía de estilo?

1. Marca gráfica

Es el elemento principal de tu imagen corporativa. Vas a usarlo como distintivo en tu web y en tu proyecto en general. Por eso debería ocupar el primer puesto en tu guía de estilo.

Lo ideal es incluya tanto el logotipo principal como sus variaciones. Que esté pensado como usarlo tanto en blanco y negro como en color,  en diferentes formatos (por ejemplo, en versiones horizontales o verticales para determinadas aplicaciones) o incluso sobre diferentes fondos claros y oscuros .

2. Paleta de colores

Es sorprendente como unos determinados colores pueden comunicar tantas sensaciones. Los colores tienen mucha fuerza y van a jugar un papel fundamental en tu imagen de marca. De ellos va a depender mucho el carácter de tu marca y la percepción que de ella van a tener tus clientes. La paleta marcará que sea percibida como más seria, más espontánea, más dramática o más alegre.

Dependiendo de la cantidad de colores que constituyan tu marca y su uso, pueden estar divididos en colores principales y colores secundarios. Los colores principales deberán predominar en tu web y en tu material corporativo, los secundarios podrás usarlos en algunos pequeños detalles o integrarlos en el blog o redes sociales.

Es interesante que en la guía de estilo cada color vaya acompañado de sus diferentes valores en RGB, CMYK (en caso de que necesites imprimir cualquier elemento corporativo) y Hexadecimal (tú diseñador web lo agradecerá 😉 ).

3. Tipografías

Otra parte fundamental de la marca. Aunque al hablar de las tipografías debemos diferenciar entre aquellas que forman parte del logotipo y aquellas que utilizaremos en el resto de materiales, por ejemplo, en nuestra web.

Es conveniente que no utilicemos la tipografía del logotipo en ningún otro lugar para que la marca no pierda su identidad, fuerza y protagonismo. Por eso, para diseñar la web, lo ideal es buscar otras 2/3 tipografías diferentes a la del logo que complementen nuestra marca y la refuercen. Lo más aconsejable es elegir una para los títulos/destacados y otra para el cuerpo de texto. Asegúrate de que estas tipografías formen parte de Google Fonts para que no tengas ningún problema a la hora de utilizarlas en tu web.

4. Tono y estilo visual

Al juntar los elementos que hemos visto hasta ahora (logotipo + tipografías + colores) ya podemos hacernos una idea de cómo queda nuestra imagen corporativa.

Pero, ¿qué personalidad queremos darles?, ¿qué valores queremos que transmita?, ¿cómo queremos comunicarla a nuestros clientes?

La respuesta esas preguntas son el tono y el estilo. La forma en la que vamos a usar los elementos principales de la marca, los materiales gráficos con los que los vamos a acompañar.

Por ejemplo, es importante elegir qué estilo fotográfico vamos a emplear, qué imágenes van a acompañar a nuestra marca en redes sociales, qué tipo de sesión de fotos nos gustaría hacer, en qué escenario vamos a grabar nuestros vídeos…

5. Elementos gráficos

Aunque comentábamos que ya no es necesario prever un sinfín de aplicaciones de nuestras marcas, es bueno guardarse un as en la manga y tener algunos recursos disponibles para cualquier ocasión que se presente. Seguramente nunca necesitemos hacer un rótulo para la fachada de nuestro negocio, pero sí es probable que un día necesitemos unos determinados iconos para poner en la web. O un pattern para decorar el fondo de alguna de nuestras publicaciones.

  • Iconos
  • Patterns
  • Separadores
  • Ilustraciones
  • Firma
  • Etcétera

Ahora que nos sabemos toda la teoría, pasemos a la práctica.

Te traigo algunos ejemplos de guías de estilo de las que estoy enamorada. Observándola verás los elementos en común y como todos ellos en conjunto acaban creando una marca coherente:

ejemplo-salted-ink-style-guide-carmen-m-rodrigo-diseno-web   ejemplo-house-hanger-style-guide-carmen-m-rodrigo   ejemplo-romp-style-guide-carmen-m-rodrigo-diseno-web
Como ves, aunque todas ellas son similares, cada una destaca uno determinados elementos según su personalidad y su estilo. En algunas hay muchas fotos de inspiración, en otras pocas, algunas incluyen patterns y otras no… Porque, al final, una guía de estilo debe ser bonita y ordenada, pero, sobre todo, útil. Tiene que ser una herramienta que te ayude a trabajar mejor y más seguro de cada paso que das.

 

Y de regalo…

 

¿Te gustaría tener una guía así de tu propia marca?

Por si acaso contestabas que sí, he preparado un editable para que puedas crear tu propia guía de estilo. Puedes descargarla tanto para trabajar en Illustrator como en Photoshop. ¡Tú eliges!

plantilla-guia-de-estilo-carmen-m-rodrigo-diseno-web

 

*Para que las plantillas funcionen correctamente necesitarás la fuente Montserrat que puedes descargar aquí

Espero que te sean útiles y pronto vuelvas por aquí para enseñarme tu guía de estilo en los comentarios, ¿trato hecho? 🙂

 

Carmen M. Rodrigo
hola@carmenmrodrigo.com

Periodista de formación y diseñadora web por vocación. Ayudo a emprendedores y pequeñas empresas a crear el cóctel perfecto entre diseño y comunicación para poner en marcha el campamento base de su negocio en internet.

5 Comentarios
  • Amaya
    Publicado a las 12:37h, 14 noviembre Responder

    ¡Hola Carmen!

    Me ha gustado mucho el salto que has comentado de manual a guía. Me parece un enfoque estupendo y totalmente adaptado a la realidad.

    Además, de las guías de estilo destaco principalmente la visualización. Yo tengo la mía siempre a la vista, en mi espacio de trabajo, y recurro a ella muchas más veces de las que me imaginaba al colocarla.

    Eso sí, para mi trabajar con un profesional que la creara junto conmigo ha sido fundamental.

    Un abrazo

    • Carmen M. Rodrigo
      Publicado a las 14:15h, 23 noviembre Responder

      ¡Hola Amaya!

      Exacto. Tenerla siempre a mano ayuda muchísimo a dar cualquier paso. A veces no nos damos cuenta, pero casi cualquier cosa que hacemos debe llevar algo de nuestra marca. Desde un presupuesto, a un mail o una imagen en redes sociales. Y tener la guía a la vista es lo mejor para no perder nunca el foco 🙂

      Y, por supuesto, trabajar con un profesional del diseño gráfico es fundamental. De hecho, muchísimos de ellos ya entregan estas guías de estilo en una página listas para usar y es todo un acierto <3

      Gracias por pasarte por aquí.

      Un abrazote

  • Conchi
    Publicado a las 15:19h, 16 noviembre Responder

    Hola Carmen,

    De las cosas que más han llamado mi atención, aunque no lo creas, es el hecho de cuánto han cambiado las cosas (para mejor, en bastantes aspectos). Somos más ágiles, hemos humanizado más las marcas y, sobre todo, somos más flexibles. Me imagino las largas reflexiones para tomar una mínima decisión, basándose en una Biblia de 100 páginas. ¡Nos volveríamos locos!

    En realidad, hay que ser más naturales, más frescos y permitirnos experimentar, con nuestra marca y con todo en esta vida. Eso sí, siempre dentro de unos límites, que nos ayuden a no perder la cabeza. Y para eso la guía que propones funciona genial. Yo vuelvo sobre la mía a menudo, ¡porque me inspira! Es cierto, hay veces que te bloqueas, lo ves todo negro, vuelves sobre ella y allí está la respuesta, todo más simple y fácil de lo que parecía al principio. Y es que vuelves al origen, en un solo vistazo.

    Gracias por el post y un saludo enorme.

  • Carmen M. Rodrigo
    Publicado a las 14:20h, 23 noviembre Responder

    ¡Hola Conchi!

    Sí, a mí también me ayuda mucho tenerla siempre cerca 🙂

    Estés preparando lo que estés preparando, al final allí acabas encontrando la respuesta. Además recurrir a ella es una gran ayuda para hacer que nuestra marca sea siempre coherente y reconocible fácilmente por cualquier persona.

    Muchas gracias por contarnos tu experiencia.

    Un abrazote

  • Diferencia tu página Web con una guía de estilo | MartaBG
    Publicado a las 06:31h, 28 marzo Responder

    […] Hablaba hace poquito sobre esto en mi blog, por si te interesa, cómo y porqué crear una guía de estilo para tu Web. […]

Publica un comentario