Crea tu Guía de Estilo Web

Crea tu Guía de Estilo Web

Posteado el Posteado en Blog

Prepara una guía de estilo con el fin de crear una experiencia cohesiva entre los diferentes apartados del proyecto. Así garantizaras el desarrollo futuro y la producción de terceros seguirán siempre las mismas directrices utilizando estos elementos pre-diseñados.

EJEMPLO – Libro de estilo Web de UPV

image

  1. Estudia la marca: En primer lugar, conoce la historia de la marca, observa el equipo y averigua la visión, misión y valores de la empresa. Así crearas una guía de estilos visualmente y emocionalmente representativa.
  2. El tono: Una vez estudiada la marca deberemos definir el tono de la web. Por ejemplo, si elegimos un tono divertido y joven, podríamos usar este tipo de mensajes “Oh, has roto la web. Error 404”. Sin embargo si el tono elegido es serio, el mensaje utilizado tendría que ser simplemente “Error 404”. Recuerda siempre que, la brillantez se esconde en los detalles originales.
  3. La paleta de colores: Comienza ajustando los colores primarios que dominarán en la web (nunca más de tres colores). En algunos apartados, sin embargo, necesitaras  colores secundarios e incluso terciarios. Si es así, defínelos también. Finaliza la paleta de colores incluyendo  los colores neutros como el blanco, gris y negro. Herramienta para colores
  4. Define la tipografía: Establece la jerarquía para los distintos títulos e identifícalos: h1, h2, h3, h4, h5 y h6. A continuación elige el cuerpo del texto, la negrita y la cursiva. Y para finalizar escoge un color que se lea bien sobre los distintos fondos que vayas a utilizar. Herramienta para tipografias
  5. Iconografía: Los iconos han existido durante miles de años siendo más eficaces que muchos textos. A la hora de elegir los iconos para tu web ten en cuenta el público al que va dirigida tu web. Herramienta para iconografias
  6. Imagenes: Una imagen vale más que mil palabras, o eso dicen. Asegúrate de incluir las imágenes que definen el estilo de tu web. Una vez más, piensa en los valores de la marca y su misión. Herramienta para imagenes gratuitas y libres
  7. Botones: Los botones son una mezcla de la paleta de colores  junto a el tono elegido. También podríamos tener en cuenta la iconografía. Confía en estos apartados creados anteriormente para crear botones consistentes y funcionales.
  8. Espaciado: Es extremadamente importante mencionar la separación. Puedes utilizar una rejilla, pero delimita la separación entre titulares, botones, imágenes, formas y otros elementos. Conseguirás  que tu trabajo se vea estructurado y profesional.
  9. FAQ: Define una manera y un diseño para que los visitantes tengan opción a interactuar. Herramienta para comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *