Las guías de diseño son una herramienta invaluable para maximizar el rendimiento del equipo de diseño y para garantizar una identidad de marca coherente. Vemos seis componentes esenciales de guías de diseño exitosas.

Una guía de diseño es más que un documento que viene con un nuevo sitio web o identidad de marca. Una buena guía de diseño es una obra de arte en sí misma y tiene una aplicación práctica en el trabajo de diseño cotidiano. Muestra cuál es tu proyecto y aspira a ser. Debe reunir elementos de diseño, voz e incluso código de una manera manejable, utilizable y fácil de entender.

Comienza con estos seis elementos de la guía de diseño que deben figurar en su documentación. (Si no lo son, ¡revise su guía de inmediato!)

1. Ejemplos de identidad de marca

Su guía de diseño debe mostrar su identidad de marca en un formato visual que sea representativo de la forma en que desea que se vean los materiales de diseño. Ese es un ejemplo de clase de show, no lo digas. (Aunque hay algo que dice en la guía para ir con los ejemplos visuales).

Los mejores ejemplos son usos de casos reales que ejemplifican exactamente lo que los estándares de diseño pretenden representar.

Use capturas de pantalla de la página de inicio de su sitio web, página de inicio móvil, aplicación o cualquier otro lugar cuando el diseño esté en su mejor momento.

Lo bueno de la Love to Ride la guía de diseño es que cada página en el folleto se parece al sitio web, creando consistencia de marca. La guía incluso enfoca pequeños elementos del diseño, como el estilo correcto para los iconos de las aplicaciones en una pantalla precisa.

La mejor parte sobre el uso de ejemplos reales en una guía de diseño es que no tiene que crear trabajo adicional para mostrar elementos visuales; ya los tienes en la mano. Además, los miembros del equipo sabrán que la guía escrita funciona en la práctica real porque hay una prueba visual.

paseo

2. Pautas de diseño

Todo, desde muestras de color a paletas de tipografía, a las formas y el uso de los elementos de diseño, debe ser delineado claramente.

¿Por qué el diseño se ve y funciona de cierta manera? ¿Cuál es la filosofía detrás de esto?

Explicar estas cosas puede ayudar a los usuarios a aplicar el estilo de diseño de forma más precisa y consistente en todos los medios. Cuando se trata de diseño de sitios web, es una buena idea incluir elementos que podrían ser diferentes de los de la marca de impresión y cómo se relacionan. Por ejemplo, muchos diseñadores optan por una paleta de tipografía diferente en línea que imita la marca impresa para maximizar el uso de Google Fonts a Typekit para facilitar su uso.

Asegúrese de observar qué tipos de letra son de sustitución si esto es parte de su estrategia de diseño.

Cuando se esbozan las pautas de diseño específicas cuando es importante, las etiquetas H1 siempre tienen 88 puntos o las imágenes en miniatura siempre son de 200 por 200 píxeles, pero no se comunican excesivamente detalles innecesarios. Desea que los miembros del equipo vean la información de un vistazo y la utilicen, sin pesarse tratando de encontrar algo en un mar de especificaciones.

netflix

3. Voz y personalidad

Las pautas de estilo de escritura no son tan divertidas de considerar como otros elementos visuales de una guía de diseño, pero son igual de importantes.

Un estilo de escritura descriptivo para la copia también puede afectar las imágenes. Contribuye al tipo de imágenes que eliges usar e incluso a elementos como el color y el tipo. Todos estos elementos van de la mano para crear una personalidad global para la marca.

Es cómo el mundo exterior te identificará.

Lo que es más, una voz fuerte y una personalidad se vuelven parte de la identidad visual también. Una buena personalidad se muestra en los elementos de diseño porque los usuarios casi pueden identificar elementos de diseño incluso fuera del contenido del resto de la marca. (Piense en Coca-Cola rojo o en el tipo de letra distintivo de Disney).

voz

4. Palabras clave de SEO

La optimización de motores de búsqueda podría ser una de las partes más habladas y menos divertidas del diseño de sitios web. Piense en palabras clave temprano y con frecuencia.

Inclúyalos en la forma en que habla de la marca, en un lenguaje descriptivo sobre el diseño y coloque una lista de las principales palabras clave en la guía de diseño.

Urban Outfitters tiene una lista de palabras clave bien diseñada (y divertida) en su guía de marca. Si bien la marca de ropa usa muchas palabras clave diferentes, las palabras más importantes se resaltan por color para que pueda verlas de inmediato.

Una lista de palabras clave como esta trae las palabras que desea decir a la parte superior de la mente, cada vez que las ve. La mayoría de las personas que escriben copia le dirán que una vez que ve o piensa una palabra en un contexto determinado, se queda atascada en su cabeza. Eso es exactamente lo que se supone que hace la lista de palabras clave de SEO.

Los elementos de diseño deben correlacionarse con estas palabras clave en todo momento para que el contenido esté relacionado a lo largo del diseño del sitio web.

urbano

5. Estilos de patrón y elemento

Con tantos medios diferentes en línea (sin mencionar las compañías que también diseñan elementos impresos), es importante contar con guías para todos los usos posibles.

Esto se aplica a versiones fijas y animadas de logotipos, paletas de colores, patrones e incluso elementos de diseño como campos de formulario y navegación.

Su libro de diseño debe tener una sección dedicada a estos elementos. Y si quiere que el equipo realmente lo ame, cree una guía de estilo de patrón y elemento en una ubicación en línea para que los usuarios puedan simplemente copiar y pegar elementos para un uso rápido.

ollo

6. Fragmentos de código

Cada guía de diseño de sitio web debe incluir muchos fragmentos de código de uso común. Desde botones hasta pequeñas animaciones y efectos de control deslizante, estos pedacitos de código agregan horas a su flujo de trabajo diario al eliminar la necesidad de ingresar especificaciones manualmente con cada nuevo elemento.

Esto funciona para todo, desde entradas de blog: agregue un bloque de código para imágenes que los bloggers pueden copiar y pegar para el tamaño y recorte correctos, hasta efectos de IU más elaborados.

Firefox incluye información sobre componentes de diseño en su guía de diseño para la marca revisada recientemente y el uso del logotipo. Incluso si no proporciona una biblioteca completa de fragmentos de código, recuerde incluir información básica, como dónde utilizar H1 a H4 en las páginas dentro del diseño del sitio web y cómo dar estilo a los botones e imágenes.

Firefox

Conclusión

La mejor parte de una guía de diseño es que no tiene por qué ser un documento estático. Puede crecer y cambiar a medida que su marca y su identidad visual hacen lo mismo.

La mayoría de los diseñadores de sitios web de sitios web, en particular, optan por las versiones en línea de una guía de diseño, por lo que los cambios y el uso de códigos y fragmentos de color son rápidos y fáciles. Considere agregar una página de guía de estilo a su sitio web, y recuerde consultarlo (y actualizarlo) con frecuencia.