Las guías de diseño son una herramienta invaluable para maximizar la producción del equipo de diseño y para asegurar una identidad de marca consistente. Observamos 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 diario de diseño. Muestra lo que es su proyecto y lo que aspira a ser. Debe reunir elementos de diseño, voz e incluso código de una manera que sea manejable, usable y fácil de entender.

Comienza con estos seis elementos de la guía de diseño que deben estar en su documentación. (Si no lo son, ¡revisa tu 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 espectáculo, no lo cuentes. (Aunque hay algo que dice en la guía que debe ir con los ejemplos visuales).

Los mejores ejemplos son los usos en casos reales que ejemplifican exactamente lo que las normas de diseño pretenden representar.

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

Lo bueno de la guía de diseño Love to Ride es que cada página del 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 de los iconos de las aplicaciones en una visualización precisa.

Lo mejor de usar ejemplos reales en una guía de diseño es que no tienes que crear trabajo extra para mostrar elementos visuales; ya los tienes a mano. Además, los miembros del equipo sabrán que la guía escrita funciona en la práctica porque hay pruebas visuales.

2. Pautas de diseño

Todo, desde las muestras de color hasta las paletas de tipografía, pasando por las formas y el uso de elementos de diseño, debe estar claramente definido.

¿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 manera 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 pueden ser diferentes de los equivalentes de impresión de marca 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 to Typekit para facilitar su uso.

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

Al delinear las pautas de diseño, sea específico cuando sea importante (las etiquetas H1 son siempre 88 puntos o las imágenes en miniatura son siempre de 200 por 200 píxeles), pero no sobrecomunique detalles innecesarios. Usted quiere que los miembros del equipo vean la información de un vistazo y la usen, no que se sientan abrumados tratando de encontrar algo en un mar de especificaciones.

3. Voz y Personalidad

Las pautas de estilo de redacción no son tan divertidas como otros elementos visuales de una guía de diseño, pero son tan importantes.

Un estilo de escritura descriptivo para la copia también puede impactar los visuales. Contribuye al tipo de imágenes que elijas usar e incluso a elementos como el color y el tipo. Todos estos elementos van juntos para crear una personalidad general para la marca.

Es como el mundo exterior te identificará.

Lo que es más, una voz y una personalidad fuertes se convierten también en parte de la identidad visual. Una buena personalidad se manifiesta 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. (Piensa en rojo Coca-Cola o en el tipo de letra de la firma de Disney.)

4. Palabras clave de SEO

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

Inclúyalos en la forma de hablar de la marca, en lenguaje descriptivo sobre el diseño y ponga una lista de las palabras clave más importantes en la propia guía de diseño.

Urban Outfitters tiene una lista de palabras clave bien diseñada (y divertida) en su guía de marcas. Si bien la marca de ropa utiliza un montón de palabras clave diferentes las palabras más importantes son resaltadas por el color para que usted las vea 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 vea. La mayoría de las personas que escriben textos te dirán que una vez que ves o piensas en una palabra en un determinado contexto, se te queda atascada en la cabeza. Eso es exactamente lo que la lista de palabras clave SEO se supone que debe hacer.

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.

5. Estilos de Patrones y Elementos

Con tantos medios diferentes en línea (sin mencionar las empresas que también diseñan elementos impresos), es importante tener 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 quieres que el equipo te ame de verdad, crea una guía de estilo de patrones y elementos en una ubicación en línea para que los usuarios puedan copiar y pegar elementos para un uso rápido.

6. Fragmentos de código

Cada guía del diseño del Web site necesita incluir el un montón de pedacitos comúnmente utilizados del código. Desde botones hasta pequeñas animaciones y efectos deslizantes, estos pequeños fragmentos de código añaden horas a su flujo de trabajo diario al eliminar la necesidad de introducir manualmente las especificaciones de cada nuevo elemento.

Esto funciona para todo, desde entradas de blogs -añadir un bloque de código para imágenes que los bloggers pueden copiar y pegar para obtener el tamaño y recorte adecuados- hasta efectos de interfaz de usuario más elaborados.

Firefox incluye información sobre los componentes de diseño en su guía de diseño para el uso del logotipo y la marca recientemente revisados. Incluso si no proporciona una biblioteca completa de fragmentos de código, recuerde incluir alguna 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 cambiar el estilo de los botones y las imágenes.

Conclusión

La mejor parte de una guía de diseño es que no tiene que 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, en particular los diseñadores de sitios web, están optando por versiones en línea de una guía de diseño para que los cambios y la captura de código y fragmentos de color sean rápidos y fáciles. Considere la posibilidad de añadir una página de guía de estilo a su sitio web y recuerde consultarla (y actualizarla) con frecuencia.

Categorías: Sin categoría