Detrás de cada marca potente y con una expresión coherente, hay un documento: una guía de estilo. Y aunque la mayoría de ellas existen en formato PDF, difíciles de encontrar y aún más de actualizar, las mejores viven en la web en forma de guías de estilo vivas.
En este artículo, te mostraremos cómo crear una y, lo que es más importante, por qué.
¿Por qué crear una guía de estilo viva?
Porque (la mayoría de) las guías de estilo son un desastre
En lugar de darte una descripción paso a paso de la experiencia habitual al trabajar con una guía de estilo, aquí tienes una breve historia que lo resume todo:
Antes de Webflow, trabajaba en una agencia de publicidad. Teníamos un cliente que siempre tenía unos 10 archivos PDF de guías de estilo circulando, con distintos niveles de precisión. Nosotros —el equipo de diseño, y en realidad, todos los implicados— nunca sabíamos con seguridad qué guías seguir porque se actualizaban constantemente. Por otra parte, nuestro cliente era una gigantesca empresa, donde cumplir con una guía de estilo es aún más crítico, pero cada vez más difícil de gestionar. Por no hablar de mantenerse al día.
Me pasaba el día preguntando qué azul de botón era el correcto ese día, en comparación con el anterior o con el azul de los iconos. Y luego tenía que lidiar con los comentarios del cliente sobre este tipo de discrepancias. Con demasiada frecuencia, los comentarios del cliente sobre el estilo eran erróneos, porque ni siquiera ellos tenían siempre la guía de estilo actualizada.
Además de todo eso, estaba el problema de encontrar los archivos del logotipo, icono o fuente aprobados por la guía de estilo, porque esta no era más que un PDF estático.
Y esto era un problema cotidiano: nunca había una fuente de verdad definitiva, sino un juego de adivinanzas constante.
El mejor escenario posible para las guías de estilo (antes de Webflow)
Un puñado de empresas han creado magníficas guías de estilo como sitios web. MailChimp, Intuit, IBM y Salesforce han dado pasos de gigante hacia lo que una guía de estilo puede llegar a ser. Pero ese gran paso tiene un coste: ya sea en recursos de ingeniería para programar el sitio o en el precio de utilizar un servicio de terceros que limita la libertad creativa.
A pesar de ello, la recompensa es incalculable. Como están en línea, ya no tienes que preocuparte por tener la última versión. Otras ventajas clave de estas "guías de estilo ideales" son la posibilidad de descargar recursos y otros tipos de interactividad.
Pero incluso estos escenarios ideales podrían ser mucho mejores:
He creado nuestra guía de estilo en Webflow y hace la vida más fácil a todo el mundo
Cuando creas una guía de estilo con Webflow, puede vivir literalmente como una página más de tu sitio web. Es facilísimo. Y como tu guía de estilo reside ahora dentro de tu sitio web, está intrínsecamente actualizada, siempre activa y accesible (o protegida por contraseña), y es visual (como debe ser una guía de estilo).
Ebook gratuito: Introducción al diseño web
Domina los conceptos fundamentales del diseño web, como la tipografía, la teoría del color, el diseño visual y mucho más.
Y es muy sencillo. Aquí te explico cómo crear una guía de estilo en Webflow
Tanto si empiezas desde cero como si creas una guía para un sitio existente, los pasos son prácticamente los mismos. En este ejemplo, empezaremos desde cero. Y si quieres saltarte todo esto, he creado una plantilla con la que puedes empezar. Pero aprender cómo se hace nunca viene mal, ¿verdad?
1. Crea un nuevo proyecto en blanco y luego crea una página llamada "Guía de estilo"
Como mencionamos antes, también puedes crear una guía de estilo para un proyecto existente y así darle un poco más de coherencia a tu construcción. Pero, idealmente, tu guía de estilo debería ser el punto de partida para todos los proyectos, para que la coherencia esté presente desde el primer día.
Idealmente, tu guía de estilo debería incluir también pautas de contenido, pero aquí nos centraremos en los elementos de diseño más importantes.
2. Estructura tu diseño
Al final, el diseño depende de ti y puede ser tan pulido o tan sencillo como necesites. La plantilla que creé para ti utiliza una estructura de dos columnas dentro de un contenedor, a su vez dentro de una sección. No le des demasiadas vueltas al diseño: cuanto más simple y fácil de navegar, mejor.
3. Desarrolla las secciones de tu guía de estilo
Crea una sección para cada elemento que quieras incluir en tu guía de estilo. Te recomiendo tener al menos:
- Tipografía
H1–H6, párrafos, citas, enlaces de texto, etc. - Colores
Colores de marca, colores de texto y tonos neutros. - Logotipos
Versiones en negro, blanco y (si es necesario) a color. - Componentes
Formularios, tarjetas, etc. Cualquier cosa que consista en varios elementos básicos combinados para formar un módulo más complejo.
Con esas secciones listas, empieza a soltar un montón de elementos en el lienzo, cada uno en su sección correspondiente.
4. Define el estilo base de cada elemento
Dejando a un lado tu paleta de colores por un momento, empieza a dar estilo a los estados base de tus elementos sin crear un nombre de clase único. Por ejemplo, para un encabezado H1, selecciona el elemento en tu lienzo, haz clic en el cuadro de selector y luego elige "All H1 Headings" (Todos los encabezados H1) al final del menú desplegable.
Cuando llegues al botón, sí tendrás que crear una clase y usarla para todos los botones de tu sitio. "Button" es un nombre sólido para esta clase.
5. Añade tus colores
Crea un cuadro (o la forma que mejor se adapte a tu marca) de color sólido para cada color de marca, color de texto y tono neutro que vayas a usar en el sitio. Crea una muestra global para cada color que necesites, pero mantén el blanco y negro como no globales. Ponles nombres memorables a los colores de tu marca y usa ese nombre como etiqueta en el lienzo.
6. Añade logotipos, componentes, etc.
En el ejemplo proporcionado, verás logotipos y componentes, que es como llamo a los elementos más complejos, como formularios, pestañas y tarjetas. También es útil añadir cualquier otro elemento que vaya a aparecer varias veces en tu sitio.
¡Y eso es todo! Realmente depende de ti, de tu flujo de trabajo, del sitio que estés construyendo y de lo que a tu cliente le pueda resultar útil. ¡Que lo disfrutes!
