Cómo Crear una Guía de Estilo de Diseño Web

Una de las formas de asegurar que el equipo esté alineado al diseñar partes separadas del sitio web o guardar diseños de desarrolladores es crear documentación de diseño o una guía de estilo de diseño web.

Es beneficioso tener una guía de estilo para crear una experiencia cohesiva entre diferentes páginas. Además, ayuda a garantizar que el desarrollo futuro o la producción de terceros sigan las directrices de marca y se perciban como parte de la marca general.

¿Qué es una Guía de Estilo?

Una guía de estilo es una colección de elementos pre-diseñados, gráficos y reglas que los diseñadores o desarrolladores deben seguir para garantizar que las piezas separadas del sitio web sean consistentes y creen una experiencia cohesiva al final.

Kit de herramientas de interfaz de usuario de Airbnb – Web por Derek Bradley

¿Por qué es importante?

Es extremadamente importante cuando múltiples diseñadores trabajan en un sitio web o aplicación web grande, garantizar que no interpreten demasiado y no alteren ni ajusten estilos según preferencias personales. En desarrollo, tener elementos definidos del sitio web facilita que los desarrolladores reutilicen estos elementos. Además, puede facilitar las cosas porque obtendrán qué elementos tienen que codificar y verán exactamente cómo necesitan verse desde el inicio.

Para facilitar la vida de los desarrolladores, es responsabilidad del diseñador incluir todas las interacciones posibles como pasar el ratón, hacer clic, visitar y otros estados para botones, títulos, enlaces, etc.

Crear una Guía de Estilo de Diseño Web

1. Estudiar la Marca

Primero, necesita estudiar la marca para comprender qué representa. Conozca la historia detrás de la marca, observe el equipo y descubra la visión, misión y valores de la empresa. Es importante profundizar en la marca para que la guía de estilo que produzca represente visual y emocionalmente la organización.

Si es un diseñador que no puede codificar, simplemente abra Photoshop y dé a su documento un título y una breve descripción de qué es el documento y para qué sirve.

Si puede codificar, es mejor crear un documento HTML con activos pre-codificados para que puedan reutilizarse fácilmente.

2. Definir Tipografía

Según Oliver Reichenstein, la tipografía es el 95 por ciento del diseño web.

Debe acertar con la tipografía porque es una de las herramientas de comunicación más importantes entre los visitantes y su sitio web.

Establezca la jerarquía e identifíquela. Hay tipos de título: h1, h2, h3, h4, h5 y h6.

Luego verifique las etiquetas de cuerpo de texto, variaciones en negrita e itálica. Piense en copias personalizadas que se utilizarán para enlaces más pequeños, texto introductorio, etc. Proporcione familia de fuente, peso y color.

Guías de estilo por Zech Nelson

3. Paleta de Colores

Es increíble cómo los humanos perciben el color y asocian tonos con marcas conocidas. Piense en Coca-Cola, apuesto a que ve ese rojo ahora.

Comience por establecer colores primarios para su guía de estilo que dominarán su sitio web; los colores dominantes no deben incluir más de tres matices. Sin embargo, en algunos casos, necesitará colores secundarios e incluso terciarios para ilustrar su interfaz de usuario, asegúrese de definirlos también. Además, incluya colores neutrales como blanco, gris y negro para que los colores primarios de la marca se destaquen.

Paleta de colores del Centro de huéspedes por Chloe Park

4. Voz

La voz a la que me refiero es una copia real. Estudió la marca antes de comenzar la guía de estilo y descubrió que la marca es juvenil y moderna. Si no hay direcciones para la voz de la copia, debe definirla. Puede ser un ejemplo simple que muestre que la voz debe ser profesional pero divertida y acogedora. En lugar de decir “Ha obtenido un error 404” puede decir “Oh, ha roto internet. Error 404.” Si la voz fuera más corporativa, no lo haría. La genialidad se esconde en las pequeñas cosas.

5. Iconografía

Los iconos han existido durante miles de años y son más antiguos que el texto y las palabras. Aproveche el uso de iconos en sus proyectos porque darán una idea instantánea a los visitantes sobre qué está sucediendo y qué sucederá a continuación. Elegir los iconos correctos dará más contexto al contenido que la paleta de colores, la copia o los gráficos. Al usar iconos, asegúrese de pensar en la audiencia objetivo, religión, historia, para evitar conceptos erróneos y malentendidos. Una cosa más a mencionar, piense en la marca y sus valores para no usar iconos dibujados a mano en un sitio web bancario grande.

Iconfinder es una herramienta excelente para encontrar iconos increíbles para sus proyectos.

NounProject está construyendo un lenguaje visual de iconos que cualquiera puede entender

6. Imágenes

Las imágenes hablan miles de palabras. Asegúrese de incluir imágenes que definan el estilo y la dirección de imágenes que el sitio web debe usar. Una vez más, piense en los valores de la marca y su misión. Por ejemplo, una organización benéfica de agua utiliza imágenes impactantes que tienen una emoción fuerte, una buena causa y hacen un llamado a la emoción humana para que tengan la suerte de tener productos básicos esenciales como agua, comida, electricidad y educación.

Algunos excelentes sitios web para imágenes gratuitas: 16 lugares para encontrar las mejores fotos de stock gratuitas.

7. Formularios

Los formularios son lo que hace que su sitio web o aplicación web sea interactivo y dinámico para que el usuario pueda ingresar los datos y luego pueda manipularlos y hacer el trabajo.

Asegúrese de establecer una jerarquía e incluir la retroalimentación posible de formularios — activo, pasar el ratón, agregar error, advertencia y mensajes de éxito, incluidas cosas como una contraseña demasiado débil, correo electrónico no válido o mensajes de éxito simples, p. ej., “correo electrónico fue enviado.”

8. Botones

Los botones son una mezcla de paleta de colores, formularios y voz. Confíe en estos activos previamente creados para crear botones con aspecto consistente y funcionales con diferentes diseños de estado.

9. Espaciado

¿Cómo puede el espaciado estar en una guía de estilo? Es extremadamente importante mencionar el espaciado. Puede estar en forma de una cuadrícula utilizada para un diseño; puede ser espaciado definido entre títulos, botones, imágenes, formularios y otros elementos.

Acertar con el espaciado es importante porque da más espacio a los elementos y el uso consistente hace que su trabajo se vea estructurado y profesional.

10. Haz y No Hagas

Último pero no menos importante: Haga la sección de HAGO y NO HAGO muy similar a un FAQ mostrando los errores más comunes y dé ejemplos de cómo deberían verse y funcionar las cosas en su lugar.

Activos de marca y directrices de Twitter

Ejemplos

Aquí hay algunos de los mejores ejemplos de guías de estilo para usar como inspiración al crear su propia guía de estilo. Tenga en cuenta que estas guías están altamente influenciadas por la estructura organizativa, su visión, misión y valores, y algunas decisiones pueden ser irrelevantes o ilógicas en relación con lo que está haciendo, así que no siga ciegamente las cosas que se hacen allí.

Spotify – Directrices de Marca para Socios (PDF)

Marca y Logotipos de Dropbox

Guía de Estilo de Kickstarter

Guía de Diseño de Lonely Planet

Encontrar Directrices – La forma más rápida de obtener activos de marca

Conclusión

Debe estudiar la marca para la que está creando la guía de estilo, asegúrese de acertar diferentes partes del diseño y garantice que una guía de estilo sea consistente e incluya todos los escenarios posibles al convertir diseños en productos funcionales.