Cómo crear una guia de Estilo de Diseño Web
INFORMACIÓN HECHA PARA TI
Guía de Estilo de Diseño Web
Tabla de contenidos
En este artículo vamos a ver más en detalle las pinceladas que dábamos previamente sobre estilo y diseño web. Dado que lo que hemos ido tratando hasta ahora de diseño ha estado principalmente enfocado en el logotipo, ahora nos toca ver cómo transmitir tus valores y mensaje también en la web.
Preparar una guía de estilo de diseño web después de haber estado trabajando en el logo supone que ya haya muchos conceptos que tengas claros o al menos que ya te suenen y sepas el por qué de su importancia. Continúa leyendo para entender qué ventajas tiene una guía de estilo web y cómo puedes hacerla.
¿Qué es una Guía de Estilo y por qué es importante?
Empecemos viendo qué es exactamente una guía de estilo web y luego te contaremos cuáles son los beneficios que tiene crear una.
Una guía de estilo web es una fuente de referencia donde están recogidas todas las reglas, gráficos y elementos que los diseñadores o desarrolladores tendrán que seguir para asegurar que los distintos componentes de la web son coherentes entre sí y con el mensaje que deseas transmitir.
Lo mejor de preparar una guía de estilo de diseño web es que tanto tú como el equipo de diseño os vais a beneficiar de tener este recurso ¿Por qué? Pues muy sencillo, gracias a esta guía será mucho más sencillo para el diseñador o diseñadores desarrollar su trabajo pues tendrá un lugar donde podrá consultar desde el color exacto que tiene que utilizar, cómo el tipo de botón, la tipografía, etc. Así el trabajo será más fluido y será más fácil llegar al resultado que tienes en mente.
No solo eso, si no que además la guía puede servir como referencia de cara a futuros diseños para evitar muchas idas y venidas o acabar centrándose en ciertas características porque no se hayan definido unas reglas de uso.
Ahora que conoces cuáles son las ventajas, vamos a ponernos manos a la obra y ver exactamente que tienes que tener en cuenta cuando vayas a crear la guía de estilo para tu web.
Cómo crear una Guía de Estilo de Diseño Web
Para que esta guía sea lo más completa posible te damos a continuación una serie de recomendaciones sobre qué elementos tienes que tener en cuenta y sobre los cuales tendrás que definir unas reglas.
Paleta de colores
Como te comentábamos antes, si ya has trabajado en el logotipo para tu negocio este punto sobre los colores no es desconocido para ti, y podrás aprovechar el ejercicio que hiciste en su momento como apoyo a la hora de definir cuál será la paleta de colores más adecuada para tu web.
Como seguramente ya te imaginas el color desempeña un papel fundamental en la percepción y el recuerdo tanto de tu web como de tu marca. Por esta razón, es importante empezar definiendo los colores primarios que no deberían ser más de tres. Para completar la paleta deberás incluir también colores secundarios, terciarios y neutros.
Dentro de la Guia de estilo de diseño web a la hora de presentar los colores tendrá que ser tanto por su aspecto visual (rojo) como sus valores técnicos, incluyendo exactamente el tono en número RGB y Hex.
La tipografía
Otro punto del que también hemos hablado es la tipografía y forma para crear un logo, y que al igual que el color es una parte esencial dentro del diseño web.
Para asegurarte de mantener la coherencia en todo el sitio web, tendrás que crear una jerarquía tipográfica incluyendo las fuentes y los tamaños de los títulos principales así como el estilo para el texto corriente (cuerpo), formularios, CTAs, etc. Para ahondar en el tema puedes ver esta comparativa de estilos tipograficos.
Los tamaños de las fuentes deberán estar escritos en píxeles (px) y ser consistentes en todos los elementos.
El espaciado
Otro punto importante dentro de una Guia de estilo de diseño web es el espaciado. Puede ser desde la cuadrícula utilizada para un diseño; el espaciado que tendrá que haber entre los titulares, las imágenes, los formularios y otros elementos.
Un espaciado consistente hará que tu web ofrezca parezca más estructurada y profesional.
El estilo de los iconos
Los iconos son un recurso muy cómodo que permite dar una idea instantánea a los usuarios sobre determinados conceptos. Es por ello, que tendrás que definir algunas reglas básicas de uso.
Este tipo dede pautas incluye decidir si prefieres utilizar una biblioteca de iconos ya hecha o tus iconos personalizados, así como qué estilo tendrán: de color o monocromático, con contorno o rellenos, etc.
Un gran ejemplo donde os muestra los estilos de iconos y una buena web donde descargar bibliotecas de iconos es flaticon
El estilo de los principales componentes de la web
Una vez tengas definido todos los puntos anteriores llega el momento de tener en cuenta el estilo del resto de elementos que estarán en la web de tu marca. En este punto se trata de establecer el tamaño, apariencia y estados de los botones, los menús de navegación, los elementos de un formularios, entre muchos otros.
En este apartado, un factor diferenciador principal será el hecho de si es una Web Corporativa, un blog o pretendes Montar una Tienda Online para tu negocio lo que estás desarrollando.
El tono y voz de tu marca
No todo dentro de la guía de estilo tiene que ver con la apariencia que vaya a tener tu Diseño web sino también con los mensajes y el tono. Puede ser algo difícil reflejar por escrito estos conceptos por lo que te recomendamos que te apoyes en profesionales para crear estas directrices.
Como un extra que también puedes incluir dentro de la guía, dado que hay conceptos que a veces pueden ser complicados de plasmar en texto, puedes utilizar ejemplos visuales concretos sobre cómo se debe o no se debe hacer. De esta manera muestras la aplicación real de las normas que has definido.
Son muchos los elementos que hay que tener en cuenta cuando se prepara una Guia de estilo de diseño web pero hemos querido recoger los principales que te harán tanto a ti como a tu Diseñador Gráfico y Diseñador Web la vida más fácil.
¡Únete a nuestra newsletter!
Obtén acceso exclusivo a nuevos consejos, artículos, guías, actualizaciones y más.
Sobre el Autor
2 comentarios en “Cómo crear una guia de Estilo de Diseño Web”
Hola, soy Matías. Algún sitio en particular para descargar fuentes? Tengo un pequeño blog de arquitectura que he dejado de mantener, porque utilicé blogspot y pasó de moda. Ahora me lancé en hacer un blog propio en otra plataforma, pero me cuesta encontrar una web donde se puedan descargar sin virus. Me podrán, por favor recomendar alguna página. Gracias. Saludos
Hola Matias, bienvenido a nuestro pequeño blog. Yo con diferencia te recomendaría Dafont.
Tienes muchísimas fuentes gratuitas, simplemente tienes que fijarte en cada una si tiene licencia 100% gratuita, solo de uso personal etc. Espero haberte ayudado 😉