BlogDesign

6 cosas que debes poner en tu guía de diseño ahora mismo

6 cosas para poner en tu guía de diseño ahora mismo.

Una guía de diseño es más que un simple 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. Presenta cuál es y aspira a ser tu proyecto. Debe reunir elementos de diseño, voz e incluso código de una manera que sea manejable, utilizable y fácil de entender.

Comience con estos seis elementos de la guía de diseño que deben estar en su documentación (si no lo están, ¡revise su guía de inmediato!)

1. Ejemplos de identidad de marca

Su guía de diseño debe presentar la identidad de su marca en un formato visual que sea representativo de cómo desea que se vean sus materiales de diseño. Este es un ejemplo de un programa, no se lo digas a la clase. (Aunque hay algunas explicaciones en la guía para acompañar los ejemplos visuales).

Los mejores ejemplos son casos de uso de la vida real que ejemplifican exactamente lo que los estándares de diseño pretenden representar.

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

que tiene de bueno le encanta montar La pauta de diseño es que cada página del folleto se parezca al sitio web, creando consistencia de marca. La guía destaca incluso los elementos de diseño más pequeños, como el estilo correcto de los íconos de las aplicaciones en una visualización precisa.

La mejor parte de usar ejemplos reales en una guía de diseño es que no tiene que crear trabajo adicional para presentar imágenes; ya los tienes en la mano. Además, los miembros del equipo sabrán que la guía escrita está funcionando en la práctica porque hay evidencia visual.

caminar

2. Guía de diseño

Todo, desde muestras de color hasta paletas tipográficas, formas y uso de elementos de diseño, debe estar claramente delineado.

¿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 entornos. Cuando se trata de diseño de sitios web, es una buena idea incluir elementos que puedan ser diferentes de sus contrapartes de marca impresa y cómo se relacionan entre sí. Por ejemplo, muchos diseñadores optan por una paleta tipográfica diferente en línea que imita la marca impresa para maximizar el uso de Google Fonts en Typekit para facilitar su uso.

Asegúrese de anotar qué fuentes son alternativas si esto es parte de su estrategia de diseño.

Al delinear las pautas de diseño, sea específico cuando cuente: H1 las etiquetas siempre son 88 los puntos o las imágenes en miniatura son siempre doscientos de doscientos píxeles, pero no comunique en exceso detalles innecesarios. Desea que los miembros del equipo vean la información de un vistazo y la utilicen, no se sientan agobiados por tratar de encontrar algo en un mar de especificaciones.

netflix

3. Voz y personalidad

Las guías de estilo de escritura no son tan divertidas 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 elige usar e incluso cosas como el color y el tipo. Todos estos elementos van juntos para crear una personalidad general para la marca.

Así es como el mundo exterior te identificará.

Además, una voz fuerte y una personalidad se vuelven parte de la identidad visual. La buena personalidad se manifiesta en los elementos de diseño, ya que los usuarios casi pueden identificar los elementos de diseño incluso fuera del resto del contenido de la marca. (Piense en el rojo Coca-Cola o en el tipo de letra característico de Disney).

voz

4. SEO Palabras clave

La optimización de motores de búsqueda puede ser una de las partes más comentadas y menos divertidas del diseño de sitios web. Piense en las palabras clave desde el principio y con frecuencia.

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

Proveedores de 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 están resaltadas por color para que pueda verlas de inmediato.

Una lista de palabras clave como esta trae las palabras que desea decir al frente de su mente cada vez que las ve. La mayoría de las personas que escriben textos te dirán que una vez que ves o piensas en una palabra en un contexto determinado, se te queda grabada en la cabeza. Exactamente eso SEO lista de palabras clave debe hacer.

Los elementos de diseño deben coincidir con estas palabras clave en todo momento, ya que el contenido está vinculado en todo el diseño del sitio.

urbano

5. Estilos y elementos del modelo

Con tantos medios diferentes en línea (sin mencionar las empresas que diseñan e imprimen), es importante tener pautas para todos los usos posibles.

Esto se aplica a las 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 desea que su equipo realmente lo ame, cree una plantilla de elementos y una guía de estilo en una ubicación en línea para que los usuarios puedan simplemente copiar y pegar elementos para un uso rápido.

jajaja

6. Fragmentos de código

Cada guía de diseño de sitios web debe incluir muchos fragmentos de código de uso común. Desde botones hasta pequeñas animaciones y efectos de diapositivas, estas piezas de código agregan horas a su flujo de trabajo diario, eliminando la necesidad de ingresar especificaciones manualmente con cada elemento nuevo.

Esto funciona para todo, desde publicaciones de blog (agregue un bloque de código para imágenes que los blogueros pueden copiar y pegar para obtener el tamaño y el recorte correctos) hasta más elaboradas. IU efectos

Firefox incluye información sobre los componentes de diseño en su guía de diseño para el uso de la marca y el logotipo revisados ​​recientemente. Incluso si no proporciona una biblioteca completa de fragmentos de código, recuerde incluir información básica, como dónde usar H1 a través deH4 en páginas de diseño de sitios web y cómo diseñar botones e imágenes.

Firefox

Conclusión

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

La mayoría de los diseñadores, especialmente los diseñadores de sitios web, optan por las versiones en línea de una guía de diseño para que hacer cambios y recuperar fragmentos de código y color sea rápido y fácil. Considere agregar una página de guía de estilo a su sitio y recuerde consultarla (y actualizarla) con frecuencia.

carrie primos

Carrie Cousins ​​​​es una escritora independiente con más de 10 años de experiencia en la industria de las comunicaciones, incluida la redacción de publicaciones impresas y en línea, así como el diseño y la edición. Puedes conectarte con Carrie en Twitter @carriecousins.

Publicaciones relacionadas

Deja una respuesta

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

Botón volver arriba
Cerrar