Las guías de estilo, también conocidas como bibliotecas de patrones, son una excelente manera de garantizar que su diseño continúe según lo previsto a medida que su sitio web crece o que los nuevos miembros del equipo trabajan en un proyecto web. Cada estilo o patrón es una agrupación de marcas y estilos para los elementos de diseño de su sitio web.

Las guías de estilo modernas generalmente se muestran como una página web real, que muestra los diferentes elementos en un sitio web o diseño de aplicación. Cuando varias personas o incluso varios equipos están trabajando en un proyecto web, una guía de estilo elimina las conjeturas sobre cómo deberían verse los elementos visuales. Es una excelente manera de mantener a todos en la misma página para la coherencia del proyecto.

Mantenga a su equipo encaminado y su código SECO

Además del diseño visual, una guía de estilo ayuda a garantizar que el archivo CSS no se salga de control. Todos hemos experimentado código repetitivo, así que esforcémonos por mantener el código mantenible y sin nada absolutamente necesario. Si todos en su equipo pueden ver todos los estilos en un solo lugar, será evidente cuáles existen actualmente para que no estén duplicados en la hoja de estilos.

Debido a que su guía de estilo sirve como una colección que incluye el diseño de módulos y otros elementos de diseño, es fácil ver si los nuevos elementos de diseño se ajustan a los estándares establecidos.

¿Qué debe ir en una guía de estilo web?

Como sabemos, el diseño web tiene la tendencia a volverse un poco salvaje. La buena noticia es que el diseño web eficaz, especialmente cuando se utiliza una guía de estilo, está bajo su control. Las guías de estilo van desde muy simples hasta muy complejas. He incluido algunas ideas aquí para ayudarle a empezar.

paletas de colores

Es una gran idea incluir muestras que tengan el color hexadecimal anotado. ¡Tu yo futuro con tiempo reducido te lo agradecerá! No recuerdo cuántas veces he preguntado o me han preguntado: "¿Qué es ese color hexadecimal de nuevo?" Tener una referencia rápida sin duda será útil para todos.

Tipografía y jerarquía

Los marcadores de posición de encabezados descriptivos pueden ser de gran ayuda para ayudar a su equipo a comprender en qué tipo de contexto deben usarse los elementos de su diseño.

Las guías de estilo también deben incluir una jerarquía de encabezado sugerida. ¿Cuál es el h1, h2, h3, y así sucesivamente? Las palabras descriptivas como el encabezado principal, el subtítulo y el encabezado del widget de la barra lateral también eliminan muchas conjeturas futuras.

No olvides incluir elementos tipográficos menos comunes, como comillas en bloque, por ejemplo. Debe especificar todos los ejemplos de texto, incluso los que se usan con poca frecuencia. Si tiene un cierto estilo de encabezado y cuerpo para citas en bloque o testimonios, especifíquelos con el mismo detalle que lo hace para los elementos de uso más común.

Imágenes

Incluye un tratamiento general de imágenes para tu proyecto. ¿Las imágenes requieren bordes o un efecto de opacidad único? ¿Hay una interacción flotante? Si es así, consíguelo en tu guía de estilo. Si hay múltiples tratamientos, incluya cada uno y defina cuándo se usan ciertos tratamientos.

Enlace, navegación y estilos de formulario

Desde una perspectiva de UX, los enlaces, la navegación y los elementos de formulario son tres patos muy importantes para tener en fila. Sin duda sabe que los enlaces de texto, los botones y los estilos de navegación deben incluirse en su guía de estilo. Sin embargo, puede ser fácil olvidarse de incluir instancias de estilos normal, flotante, visitado y activo para cada uno de ellos. Consígalos documentados para garantizar la coherencia en cada detalle de su sitio.

Cuando los grandes estilos se fusionan con el formulario, no hay mejor manera de mostrar todos los elementos del formulario web que en su guía de estilo. Es una excelente manera de mapear y hacer un inventario de todos los elementos del formulario, lo que funciona, lo que no funciona y lo que falta.

Específicamente, aquí hay algunos componentes clave para incluir en los estilos de formulario:

• Estado normal del campo de entrada
• Estado del campo de entrada enfocado
• Estilos de etiqueta
• Texto de marcador de posición de formulario
• Texto activo del usuario
• Texto ingresado por el usuario
• Botón de enviar
• Mensaje de error
• Estilos de casillas de verificación

Más ideas para incluir en tu guía de estilo

Es difícil enumerar todos los elementos que puede encontrar, pero aquí hay algunos más que pueden resultarle beneficiosos:

• Cuadro de llamada
• Enlaces horizontales
• Elementos de comentario
• Etiquetas de categoría
• modelo emergente

Cómo hacer tu propia guía de estilo web

Si tiene la suerte de emprender la heroica hazaña de crear una guía de estilo desde cero, tengo algunas consideraciones útiles para usted.

Personalmente, me gusta comenzar con un archivo HTML en blanco e ir desde allí. Vincule esta guía de estilo al CSS del sitio web o la aplicación real. De esa manera, los cambios se reflejan en ambos lugares y no tiene que preocuparse por mantener dos archivos CSS.

Comience por hacer un inventario de todos los elementos de su sitio y luego agregue el marcado exacto que necesita para cada uno de ellos en su guía de estilo. ¿Suena intimidante?

Primero evalúe la cuadrícula de la página y luego complete la guía de estilo con elementos importantes como la tipografía y la paleta de colores, agregando más patrones a medida que avanza. Más patrones de diseño pueden incluir cosas como imágenes, citas en bloque, estilos de barra lateral, botones y estilos de formulario.

Confía en mí. Este es un tiempo bien empleado. También es bueno recordar que nada es permanente y que todo se puede ajustar y expandir fácilmente.

Si busca velocidad y la entrada manual de todos los estilos no es para usted, existen algunas herramientas excelentes que facilitan la creación y el uso de patrones reutilizables.

Por ejemplo, Pattern Primer de Jeremy Keith generará una lista de todos los patrones en una carpeta. Esta es una herramienta PHP simple para convertir fragmentos de código en una biblioteca de patrones. Verá el patrón representado como HTML.

Otra gran opción es KSS de Kyle Neath, que también es una gran herramienta para la documentación de la guía de estilo. Estos estilos automáticos generados son un conjunto de pautas para ayudarlo a producir una guía de estilo HTML vinculada a la documentación CSS. KSS está diseñado para funcionar bien con preprocesadores CSS y se adapta a muchos marcos CSS.

Como todos sabemos, un sitio web nunca está terminado. Si se necesitan nuevos elementos, es fácil ampliar su guía de estilo de vida simplemente agregándolo.

Es posible que su guía de estilo inicial no sea idéntica a las páginas que finalmente crea, pero es una gran oportunidad para probar nuevos estilos y es especialmente útil para diseñar para múltiples navegadores.

Ejemplos de guías de estilo

¿Quieres algunos ejemplos de la vida real de grandes guías de estilo? Lo tienes:

Código para América
mailchimp
Fuerza de ventas

Al proporcionar consistencia en su diseño, su guía de estilo facilita la expansión del sitio web y futuras mejoras web. A medida que se agregan y modifican estilos, este documento es una excelente manera de mantener informado al equipo y mostrar su proyecto de estilo.