Una guía de estilo recoge las normas de diseño que se utilizarán para crear un sitio web. Normalmente hace referencia a una serie de elementos (tipografía, colores, logos, etc.) que se deben utilizar para garantizar la uniformidad de la estructura y apariencia visual del sitio.
Logo #
El logo es la imagen del sitio web. Es importante diseñarlo adecuadamente para que refleje correctamente la temática y el contenido del sitio web.
Para diseñar un logo se suele recurrir a algún programa de dibujo vectorial como Inkscape. La principal ventaja de los gráficos vectoriales es que no están formados por píxeles, por lo que no pierden calidad. Una vez creado el gráfico vectorial éste puede ser exportado a diferentes formatos (PNG, JPG,…) o personalizado (blanco y negro, cambio de colores, versiones con o sin texto,…) para su uso en el sitio web.
Algunos recursos para crear un logo:
- https://logomakr.com/
- Inkscape (software OpenSource equivalente a Adobe Illustrator)
- Videotutorial: creación de un logo básico con Inkscape
Paleta de colores #
A la hora de elegir la paleta de colores es importante definir como mínimo:
- Un color principal
- Una paleta de colores complementaria del color principal
- Un color de fondo
El color principal suele estar presente en el logo y todos los aspectos relacionados con la marca del sitio. También suele aparecer en los encabezados y en los botones de formulario que activen la acción principal.
Algunos recursos para generar una paleta de colores:
Tipografía #
La tipografía es uno de los elementos más importantes a tener en cuenta. Se deben elegir cuidadosamente los tipos de letra que mejor casen con la temática del sitio y el diseño del logo. Normalmente se utiliza una tipografía principal para encabezados y otra para el resto del texto.
Algunos recursos para elegir tipografías:
- https://fonts.google.com/ (Google Fonts ofrece un repositorio de tipografías Open Source para usar libremente en cualquier tipo de proyecto, comercial o no comercial)
- https://www.smashingmagazine.com/2019/07/gorgeous-free-open-source-typefaces/
Estructura #
La estructura del sitio es otro de los aspectos que puede ser incluido en una guía de estilo. La posición de los elementos de navegación (menús, migas de pan,…), el número de capas que tendrá el sitio (contenido, cabecera, pie,…), donde incluir información de contacto (teléfonos, dirección,…) o dónde incorporar una posible área para anuncios son algunos de los puntos que se pueden detallar. Entraremos más en detalle sobre este tema en otros artículos.
Elementos gráficos #
En este apartado se suele hacer referencia a alguno de estos elementos:
- Iconos
- Imágenes (tamaños, uso en fondos de página, efectos, tipos de edición,…)
- Animaciones
- Patrones de decoración
Algunos recursos para elegir elementos gráficos:
- https://octicons.github.com/
- https://useiconic.com/open/
- https://material.io/resources/icons/?style=baseline
- https://feathericons.com/
Ejemplos de guías de estilo #
- Guía de estilo de Mozilla Firefox
- Photon Design System (para diseño de productos basados en Firefox)
- Guía de estilos de la UPV
- Material Design (Google)
Referencias #
- https://marinarodrigo.com/como-y-por-que-crear-una-guia-de-estilo-para-tu-web/
- https://www.toptal.com/designers/ui/ui-styleguide-better-ux
- https://www.krasamo.com/creating-ui-style-guide-for-web-and-mobile-apps/
- https://www.uoc.edu/portal/en/llibre-estil/guies/digital/index.html
- https://www.smashingmagazine.com/2018/02/comprehensive-guide-to-mobile-app-design/
- https://developer.android.com/design