¿Cómo Crear una Guía de Estilos Web?

Crear páginas web se está haciendo cada vez más y más complejo y por lo general no es tarea para uno solo. Es importante asegurarse de que el diseño es consistente y está optimizado para ajustarse a los objetivos del negocio y crear experiencias agradables para los usuarios.

Una de las maneras de asegurar que el equipo sigue la misma línea al diseñar distintas partes del sitio web o guardando diseños para los desarrolladores es crear una documentación de diseño o guía de estilos para el diseño web.

Es beneficioso tener una guía de estilos a fin de crear una experiencia cohesiva a través de las diferentes páginas. También ayuda a garantizar que el desarrollo futuro, incluso de terceros, seguirá las mismas directrices y será percibido como parte de la marca original.

Luke Clum ha tocado el tema de la utilización de las guías de estilo como primer paso en el diseño web el año pasado y me gustaría echar un vistazo más en profundidad a como crear una guía de estilos web para tus proyectos.

¿Qué es una Guía de Estilos?

Una guía de estilos es una colección de elementos prediseñados, gráficos y reglas que diseñadores y desarrolladores deben seguir para asegurar que las diferentes partes serán consistentes y que al final crearán una experiencia cohesiva.

airbnb style guide

Airbnb UI Toolkit – Web by Derek Bradley

¿Por qué es importante?

Es extremadamente importante que cuando distintos diseñadores están trabajando en una página o aplicación web grande asegurar que no interpretan demasiado y no alteran o ajustan los estilos basándose en su gusto personal. Durante el desarrollo, tener los elementos del sitio web definidos facilita mucho la tarea a los programadores a la hora de reutilizar dichos elementos. Por otra parte, sabrán que elementos tienen que programar y el ver como deben quedar desde el principio facilita la tarea.

A fin de hacerle la vida más fácil a los desarrolladores, es responsabilidad del diseñador el incluir todas las interacciones posibles como pasar por encima(hover), click, visitado y otros estados para los botones, títulos, enlaces, etc.

Creando una Guía de Estilos Web

1. Estudio de la marca

Primero, necesitas estudiar la marca para entenderla bien. Conoce la historia detrás de la marca, observa al equipo y hazte una idea de la visión, misión y los valores de la empresa. Es importante investigar en profundidad la marca así la guía de estilos que produzcas representará a la organización visual y emocionalmente.

Si eres un diseñador que no sabe programar, simplemente abre Photoshop y dale al documento un titulo y una descripción corta sobre que es el documento y para que se usa.

Si sabes programar, es mejor crear un documento HTML con los recursos ya preparados para poder reusarlos fácilmente.

2. Define la tipografía

De acuerdo con Oliver Reichenstein, la tipografía es el 95% del diseño web.

Debes definir la tipografía correctamente porque es una de las herramientas de comunicación más importante entre los visitantes y el sitio web.

Define la jerarquía e identifícala. Hay distintos tipos de cabeceras: h1, h2, h3, h4, h5 y h6. Luego el texto, negrita y cursiva. Piensa en las descripciones cortas usadas de enlace, textos introductorios y demás. Provee el tipo de fuente, grosor y color.

Style Guides

Style Guides by Zech Nelson

3. Paleta de colores

Es increíble como los humanos perciben el color y asocian tonalidades a las marcas conocidas. Piensa en Coca-Cola, apuesto a que puedes ver ese rojo ahora mismo.

Empieza por definir los colores primarios que dominarán en sitio en tu guía de estilos, los colores dominantes no deben incluir más de tres variantes. En algunos casos, sin embargo, necesitaras colores secundarios y terciarios para ilustrar tu interfaz de usuario, asegúrate de que los defines también. Incluye también colores como el blanco, gris y negro para ayudar a los colores de la marca resalten más.

color palette

Guest Center color palette by Chloe Park

4. Voz

A la voz a la que me refiero es al texto. Has estudiado la marca antes de empezar la guía de estilos y visto que la marca es juvenil y de moda. Si no hay directrices para la voz del texto, tendrás que definirlo. Puede ser un simple ejemplo el mostrar que la voz tiene que ser profesional aunque divertida y amistosa. En vez de decir “Se ha producido un error 404” puedes decir “Oops, has roto el interweb. Error 404”. Si la voz fuera más corporativa, no harías algo así. La brillantez se esconde en los pequeños detalles.

5. Iconografía

Los iconos existen hace miles de años y son más antiguos que el texto y las palabras. Aprovéchate y utilízalos en tus proyectos porque darán a entender al instante a los visitantes que está pasando y que pasará a continuación. Escogiendo los iconos correctos dará más contexto al contenido que la paleta de colores, textos o imágenes. Al utilizar iconos, asegúrate de pensar a que audiencia va dirigida, religión, historia, para evitar conceptos mal interpretados y malentendidos. Una cosa más que mencionar, piensa en la marca y sus valores para no usar iconos dibujados a mano alzada en la página de un banco por ejemplo.

iconfinder

Iconfinder is a great tool for finding awesome icons for your projects.

Icons

NounProject is building a visual language of icons anyone can understand

6. Imágenes

Una imagen vale más que mil palabras. Asegúrate de incluir ejemplos que definan el estilo y el tipo de imágenes que el sitio web debe usar. Una vez más, piensa en los valores de la marca y en su misión. Por ejemplo, una ONG utiliza imágenes impactantes con gran contenido emocional, por una buena causa y llama al sentimiento humano para que otros puedan optar a las comodidades esenciales como el agua, comida, electricidad y educación.

images

Some great websites for free imagery: 16 Places to Find the Best Free Stock Photos.

7. Formularios

Los formularios son lo que hacen tu página o aplicación web interactivo y dinámico para que el usuario pueda introducir la información que tu manipularás y procesarás.

Asegúrate de establecer una jerarquía e incluye posibles respuestas de los formularios – active, hover y error, alerta y correcto, mensajes incluyendo cosas como que una contraseña es demasiado débil, el correo electrónico no es válido o un simple mensaje de confirmación por ejemplo “Correo electrónico enviado”

8. Botones

Los botones son una mezcla de paleta de colores, formularios y voz. Confía en los recursos creados previamente para crear unos botones visualmente consistentes con diseños para los diferentes estados.

9. Espaciado

¿Cómo puede el espaciado estar en la guía de estilos? Es extremadamente importante mencionar el espaciado. Puede ser en forma de rejilla usada para el diseño; puede definirse el espaciado entre cabeceras, botones, imágenes, formularios y otros elementos.

Conseguir un espaciado correcto es importante porque da más hueco para que los elementos respiren y un uso consistente hace que tu trabajo se vea estructurado y profesional.

10. Síes y Noes

Por último pero no por ello menos importante: Crea una sección con los Síes y los Noes como si de Preguntas Frecuentes se tratase mostrando los fallos más comunes y da ejemplos de como deberían verse y funcionar las cosas en vez.

 

twitter brand

Twitter brand assets and guidelines

Ejemplos

Aquí tienes algunos de los mejores ejemplos para usar como inspiración al crear tu propia guía de estilos. Ten en mente que estas guías están altamente influenciadas por la organización, su visión, misión y valores y algunas decisiones pueden ser irrelevantes o ilógicas en relación a lo que tu estás haciendo, así que no sigas al pie de la letra lo que ellos han hecho.

Spotify – Directrices para los asociados a la marca (PDF)

spotify

Dropbox Imagen y Logos

dropbox

Guía de estilos de Kickstarter

kickstarter

Guía de diseño de Lonely Planet

lonelyplanet

Encuentra Directrices – La Manera más Rápida de Encontrar Recursos de Marca

guides

Conclusión

Tienes que estudiar la marca para la que estás creando la guía de estilos, asegurarte de obtener las diferentes partes del diseño correctamente y cerciorarte de que sea consistente y que incluye todos los escenarios posibles cuando conviertan los diseños en productos reales.

Desarrollador php especializado en convertir un buen café en código. Amante de JavaScript, Laravel y WordPress. Adicto a cualquier herramienta que acelere el desarrollo web. Sígueme en Twitter @zreedee.

Boletín de noticias

0 Comentarios

No hay comentarios aún

Deja tu respuesta

*
* Longitud mínima: 20 caracteres