Cómo crear una guía de estilo de diseño web

Diseñar un sitio web puede ser un proceso difícil. Encontrar inspiración para un diseño que sea estética y funcionalmente agradable no siempre es simple. Mantener un estilo consistente en diferentes propiedades y páginas web puede dificultar aún más las cosas. Es especialmente cierto después de lanzar un sitio, cuando puede haber varios equipos trabajando en él. En este momento, una guía de diseño web puede ser realmente útil. ¿Qué es una guía de estilo de diseño web? Una guía de estilo de diseño web detalla el diseño de cada elemento de un sitio web. Una guía de estilo no es la creación de evidencia de diseño para cada plantilla de página, sino componentes más específicos, como tipografía, colores y relleno.
¿Por qué crear una guía de estilo? La creación de una guía de estilo de diseño lo ayudará a asegurarse de mantener un estilo consistente en su sitio web, así como en propiedades externas, como los perfiles de redes sociales. Las guías de estilo se vuelven muy útiles cuando más equipos trabajan en su sitio web. Por ejemplo, una agencia puede crear nuevas páginas. Al darles su guía de estilo, puede asegurarse de que el diseño de las nuevas páginas esté de acuerdo con el resto de su sitio web. Ejemplos de guías de estilo de diseño para echar un vistazo a algunas guías de diseño web existentes. Obtendrá una idea de los diferentes enfoques que puede adoptar, así como algunos de los elementos comunes que incluirán la mayoría de las guías de estilo.
Aquí hay dos guías de estilo de diseño web que analizaremos más de cerca:
Diseño de material de Google
Biblioteca de modelos de mailchimp

Dominios cubiertos por las pautas de Google para el diseño de materiales por material de diseño, podemos ver las siguientes áreas principales incluidas en la guía de estilo:
Movimiento
Estilo (incluye color, iconos, imágenes, impresión, escritura)
apariencia
Componentes (como botones, tarjetas, listas y hojas)
Modelos a seguir
Crecimiento y comunicación
usabilidad
plataforma
Guía de biblioteca de modelos de MailChimp

La biblioteca de modelo MailChimp cubre los siguientes campos:
Sistema de red
IMPRESIÓN
Elementos de forma
Navegación
Comidas
liza
Cuchillas
Estadística/datos
Opinión
Diálogo
Freddicons
Cursos de ayuda
Ambas son guías de estilo integrales y podemos ver algunos elementos comunes entre los dos, como la tipografía, los iconos, los modelos/cuadrículas y los componentes.
No cubriremos todo lo que incluya material de diseño y la biblioteca de modelos MailChimp, pero detallaremos los elementos importantes para incluir en la mayoría de las guías de estilo. Qué incluir en una guía de estilo acaba de ver algunos ejemplos de guías de estilo de diseño web y elementos comunes. Ahora entraremos en algunos de los elementos comunes más detallados. 1. La tipografía no subestima la importancia de la tipografía. Para algunas personas, el tipo es el aspecto más importante del diseño de un sitio web. Debe asignar una cantidad suficiente de tiempo para obtener esta parte de su guía de estilo correctamente. Puede leer lo que dice la investigación sobre el estilo del texto en su sitio, si desea profundizar la tipografía.
Hay algunas áreas clave en las que debe centrarse al definir las reglas para el tipo de sitio. Ahora pasaremos por cada una de ellas en detalle. Familias de fuentes Hay dos tipos de familias de fuentes: apellidos como “Times New Roman” y “Courier”
Familias de fuentes genéricas, como “serif” y “sans-series”
Elegir una familia de fuentes puede ser un verdadero desafío, porque la gran cantidad de fuentes diferentes puede ser bastante desalentador. Elegir fuentes se convierte en un desafío aún mayor una vez que comienzas a combinar más familias de fuentes. Afortunadamente, hay algunos recursos disponibles para ayudar a este respecto.
Google Fonts es una herramienta que hace que algunas fuentes excelentes estén disponibles de forma gratuita. Si nunca ha usado Internet nuevamente (¿cómo lees esto? Dos de las fuentes de Google más populares.
Fuentes de Google
Google Fonts facilita la filtración de fuentes, pero aún puede ser difícil aparear las fuentes, es decir, elegir las diferentes fuentes para el título y el texto del cuerpo. Si se esfuerza por combinar dos fuentes de Google, puede usar recursos como pares de fuentes o fuentes. Hay fuentes de fuentes gratuitas que no sean Google Fonts. Typekit de Adobe ofrece una amplia gama de fuentes de muy alta calidad. Tienen una versión gratuita, así como un nivel de pago, que necesitará actualizar solo si desea una de sus fuentes premium o tiene un sitio de alto tráfico.

Adobe Typekit
También puede usar muchas de las bibliotecas de fuentes gratuitas que están disponibles para buscar fuentes. Asegúrese de consultar la licencia de fuente que usa para asegurarse de que sean apropiados, por ejemplo, una licencia comercial si la usa para un sitio web que genera ingresos. Dimensiones de fuentes El tamaño de los diferentes elementos tipográficos en su diseño puede tener un gran impacto en la apariencia general del sitio web, así como su legibilidad. No establecer pautas claras puede conducir a un sitio web que parece inconsistente y poco profesional. He visto personalmente sitios web en los que la copia es diferente de un párrafo a otro y no se veía bien. También es bueno recordar que elegir el tamaño de diferentes elementos tipográficos es bastante difícil, por lo que no se vaya a los demás. Deberá definir los elementos de texto para los que establecerá pautas. Al menos, estas deberían ser las diferentes dimensiones de los títulos (H1, H2, H3, etc.), así como los elementos del párrafo. Puede usar herramientas como la escala o escala modular para ayudar a definir las proporciones del texto. Trabajan usando informes para calcular cuán grandes deberían ser los diferentes elementos de texto.

Use herramientas como ModularScale para elegir las dimensiones de diferentes elementos tipográficos
El grosor de la fuente para mantener la coherencia, debe definir el peso de la fuente para los diferentes elementos tipográficos durante su diseño. Debe asegurarse de usar el peso de la fuente para diferenciar los diferentes elementos tipográficos por alguna razón.
La altura de la línea / ritmo vertical La altura de las líneas de sus elementos tipográficos es vital para la legibilidad de su copia, así como para mantener el ritmo vertical. El ritmo vertical es difícil de mantener con los sitios web receptivos, por ejemplo, la altura de las imágenes cambia de tamaño en diferentes tipos de dispositivos. A pesar de los desafíos que enfrentan los sitios web receptivos, tratar de mantener un ritmo vertical lo ayudará a hacer que su diseño sea más cohesivo. Desea definir la altura de cada uno de sus elementos tipográficos (H1, H2, H3, P), así como el Llenado y bordes que mantienen el ritmo vertical deseado. 2. La paleta de colores que elige los colores correctos es otro elemento vital de su diseño. La elección correcta de color puede influir en las emociones, las opiniones y el comportamiento de los visitantes. Hay varias teorías basadas en las cuales los colores son mejores para elegir, incluida la biología/evolución, el género y la valencia ecológica. Comprender por qué los colores tienen el efecto que tienen puede ayudar a producir un sitio con conversiones más grandes, que se siente “adecuada” para la teoría del color de su visitante es un tema popular y, por esta razón, hay muchas herramientas disponibles, como Be Paletton y Adobe. Kuler.

Herramienta para elegir el color Adobe Kuler
Deberá definir todos los colores principales que usará (primario, secundario, terciario y acentos), así como un tono abierto y oscuro. Idealmente, definirá diferentes intensidades de cada color, así como algunos tonos diferentes entre su luz y sombra oscura. Después de definir la paleta de colores, desea proporcionar orientación sobre cómo aplicar esto en el diseño. Querrá especificar los colores de la fuente, los colores de fondo, los elementos de anclaje y lo que desee para permanecer consistente en su diseño. Imagine que imagina dos tipos de imágenes muy diferentes: uno es una foto de una persona real para una computadora portátil. , el otro es una caricatura, una imagen vectorial de una persona. Ambos son bastante diferentes, pero si no ha establecido ninguna regla para los tipos de imágenes que se pueden usar, las personas que realizan cambios en su sitio podrían pensar que es perfecto usarlas a ambos. Definir pautas para sus imágenes puede ser un poco más difícil que especificar fuente y colores. Las imágenes pueden ser muy subjetivas;

Sin embargo, puede continuar definiendo características como tono, color, temas, relaciones de apariencia y calidad.Lea por qué es importante que se presenten las imágenes correctamente.3. Iconografía Muchos sitios web presentarán íconos de un tipo.Si el suyo es uno que lo hace, entonces querrá incluir íconos en su guía de estilo.Si sus íconos no están personalizados y usan un conjunto de iconos predeterminados, entonces su inclusión en la guía de estilo puede ser tan simple de especificar qué conjunto de iconos usar, las dimensiones, los colores y dónde usarlos.Si está utilizando un conjunto personalizado de iconos y, posiblemente, deberá crear otros iconos personalizados, entonces deberá definir más reglas para ellos. Google ofrece instrucciones para los iconos de diseño de materiales
Puede averiguar cómo agregar rápidamente iconos increíbles a su sitio de WordPress aquí. 4. El espacio es importante para dar los elementos de su espacio de diseño web. Cuando determine los bordes y el relleno superior e inferiores, querrá tener en cuenta el ritmo vertical, como se menciona en la sección de impresión. Especifique exactamente cuánto espacio debe tener cada elemento. Se sorprenderá de cuán desordenados y poco profesionales puede comenzar a mostrar un diseño sin un espacio constante y deliberado. 5. Apariencia Si va a crear nuevas páginas, entonces defina reglas para nuevos aspectos, lo cual es particularmente importante si tiene más de una persona que trabaja en la creación de páginas web. Por ejemplo, los sitios en los que trabajé, que permiten a los administradores crear el contenido principal en cualquier formato que hayan elegido, a menudo se vuelven inconsistentes y desordenados. Una página puede comenzar con una inserción de la página, luego participar en preguntas frecuentes y luego terminar con un impulso. Alguien viene y construye otra página para algo similar, pero esta página tiene un aspecto diferente, introducción, testimonios, preguntas frecuentes y luego no tiene ningún impulso a la acción. Su diseño debe ser estratégico, idealmente basado en las pruebas y permitir que cualquier persona cambie ese diseño sin conocer la estrategia detrás de sus decisiones. Es probable que llegue a un sitio web no profesional y con un rendimiento débil. 6. Componentes Los componentes pueden ser elementos como botones, listas y campos de texto. Asegúrese de crear pautas de estilo para los componentes que son comunes a su sitio web.

Los estilos de los componentes consistirán en muchos de los temas ya abordados, como el color, la tipografía e iconos, aunque es importante definir el estilo de los componentes explícitamente. Imagine lo rápido que podría volverse inconsistente tan simple como los estilos de los botones, desde los colores utilizados, impresión, llenado y bordes, hasta bordes y sombras. 7. Animaciones Las animaciones o transiciones aparecen en muchos sitios hoy en día. En lugar de solo dulces oculares, ofrecen un uso práctico en la experiencia del usuario. Las microinteracciones pueden ser un buen uso de las animaciones de diseño web. No olvides incluir animaciones en guías de estilo. Para simplificar la implementación de animaciones, puede usar una biblioteca de animación CSS, como animated.css y especificar en la guía de estilo que debe usarse y dónde. Qué hacer y qué hacer algo que verá en Google para el diseño de materiales es el uso generalizado de las cosas y no hacerse como ejemplos prácticos. Qué hacer y lo que no tiene que hacer es útil para asegurarse de comunicar cómo poner en práctica la guía de estilo. A continuación se muestra un ejemplo de las pautas de Google para el diseño de materiales. Como puede ver, es mucho más fácil entender los conceptos que podrían ser difíciles de explicar solo con el texto. Agregue cosas que hacer y por qué no hacer en su guía de estilo para comunicarse de manera más eficiente. Actividades y lo que no se debe hacer en el diseño del material
Resumiendo ahora tiene las herramientas necesarias para crear su propia guía de diseño web.Ponga en práctica los consejos aquí y se asegurará de que sus futuros proyectos web se vean bien, teniendo un estilo consistente, sin importar cuántas personas trabajen en el proyecto. Tiene algo que desea incluir en su guía de diseño web que no estaba por encima de ¿mencionado?Háganos saber en los comentarios a continuación.
Etiquetas:

diseño