Guía de estilo, importancia en el diseño de interfaces

9. Guía de estilo: color, tipografía e iconos

Para asegurar la consistencia de las interfaces gráficas de una web es fundamental plasmar las pautas de estilo en una guía que pueda seguir el equipo de desarrollo (programadores, analistas, diseñadores gráficos, etc.) durante el proceso de desarrollo del sitio. Estas guías se llaman guías de estilo o “look and feel”.

Las guías de estilo recogen los criterios y normas que deben seguir los desarrolladores de un sitio web para que tenga una apariencia uniforme y atractiva para el usuario.

Desde el punto de vista de los programadores y los diseñadores, estas guías de estilo son esenciales para favorecer el desarrollo de una página web, tanto en el diseño como en su posterior mantenimiento. Este aspecto es muy importante ya que el mantenimiento puede ser llevado cada vez por una persona.

En las guías de estilo se recogen datos como la gama de colores utilizada, los iconos, la tipografía, el tamaño de las letras, etc. A continuación se muestra un ejemplo de guía de estilo en la que se detallan los colores, las tipografías, los botones y los iconos de referencia.

9.1. Colores

El color es una cualidad de la materia y de la luz, pero además es un factor expresivo ya que tiene la virtualidad de comunicar y suscitar sentimientos. Por este motivo, el diseñador estudia las dimensiones y los valores del color para poder utilizarlo como instrumento de comunicación.

9.1.1. Psicología del color

El color es un elemento indispensable en el diseño de páginas web ya que mediante él se pueden definir los elementos representados.

Gracias a la psicología del color sabemos que los colores son capaces de transmitir emociones y provocar así reacciones en nuestro cerebro. De hecho, está demostrado que el color influye en el estado de ánimo y en el comportamiento de las personas. Por este motivo, el color es muy utilizado para vincular a los usuarios con los productos anunciados. A continuación, se pueden ver los colores más usados y sus significados.

Es preciso utilizar los mismos colores para cada elemento web con el fin de facilitar la interpretación de funcionalidades, mejorar la navegación y transmitir armonía.

9.1.2. Los colores fundamentales

En los entornos digitales existen tres colores fundamentales, el rojo, el verde y el azul. Un ordenador representa todos los colores combinando estos tres colores fundamentales mediante el sistema RGB («red, green, blue» en inglés).  Así pues, definiendo la cantidad de cada uno de los colores tendremos la paleta completa.

9.1.3. Sistema RGB

El sistema RGB es un modelo con el que es posible representar un color mediante la mezcla de los tres colores de luz primarios, también llamados colores fundamentales.

En el sistema RGB la intensidad de cada componente (rojo, verde y azul) se expresa como un número hexadecimal o mediante el sistema de numeración decimal (0 a 255). Veamos varios ejemplos en la siguiente tabla.

Table 9.1. Algunos colores y su representación en hexadecimal y RGB.

Color	HEX	RGB
	#000000	0,0,0
	#ffffff	255,255,255
	#ff0000	255,0,0
	#00ff00	0,255,0
	#0000ff	0,0,255
	#ffff00	255,255,0
	#808080	128,128,128

9.1.4. Propiedades de los colores

Los colores disponen de tres propiedades que nos permiten diferenciarlos: tono, saturación y brillo.

• Tono: el tono o matiz (hue en inglés) es la propiedad que nos permite diferenciar unos colores de otros. En el círculo cromático de tonos o matices se pueden distinguir los colores complementarios cuando se encuentran enfrentados.
• Saturación: la saturación (saturation en inglés) es la propiedad que define la intensidad de un color y varía según el nivel de gris que tenga. Cuanto mayor sea el nivel de gris de un color, menos saturado se encuentra y menos intenso.
• Brillo: el brillo (brightness en inglés) es la propiedad que define cómo de oscuro o de claro se encuentra un color y varía según el nivel de negro o blanco que tenga respecto al color puro. En diseño gráfico cuanto más brillante es un color más cerca parece que está.

9.1.5. Paleta de colores

Como se ha comentado, definir la gama de colores que se utilizará en una web es fundamental porque puede condicionar la experiencia de los usuarios. Esta gama de colores se puede crear mediante una paleta de colores que nos provea de un grupo de matices y tonalidades que nos ayude a marcar la diferencia entre un diseño alegre, elegante, fiable, sobrio, etc.

Una opción para definir la gama de colores es realizando una composición monocromática, que consiste en seleccionar un solo color del círculo cromático y crear sus tonalidades añadiendo blanco o negro.

Otra opción consiste en seleccionar los colores vecinos del círculo cromático, ya que son armónicos y ofrecen estabilidad al diseño. Los colores vecinos son los que se encuentran en un rango de 90 grados en el círculo cromático.

En Internet podemos encontrar diferentes generadores de paletas de color que nos permiten seleccionar las tonalidades o colores idóneos que queremos utilizar: colores vivos, pastel, apagados, grisáceos, etc. Algunos de los generadores de paletas de color son los siguientes:

• Color Picker: htmlcolorcodes.com
• Color Wheel de Adobe: color.adobe.com
• Paletton: paletton.com
• Colourlovers: Colourlovers.com/palettes/add

9.1.6. Las marcas y su relación con los colores

A continuación, se representa el significado de los colores y su relación con algunas de las marcas más famosas de la actualidad.

Veamos ahora el siguiente tablero de Pinterest en el que se han recogido diferentes marcas y su relación con los colores.

9.2. Tipografía

Los textos son la base de la mayoría de sitios web ya que lo más normal es transmitir la información mediante letras. Por este motivo, debemos prestar mucha atención en hacer una correcta elección de fuentes para nuestro sitio web.

A la hora de elegir un tipo de tipografía es muy importante verificar si puede visualizarse correctamente en los distintos navegadores y no abusar de negrita, cursiva y subrayado.

Inicialmente, se utilizaban las fuentes típicas que los usuarios tenían instaladas en sus dispositivos. Actualmente, gracias a que los navegadores soportan la directiva @font-face, es posible utilizar casi cualquier tipo de tipografía sin necesidad de que esté instalada en el dispositivo. En la unidad 4 veremos como fuentes del tipo TruType y OpenTYpe pueden convertirse en otros formatos.

A continuación, puedes ver algunas recomendaciones que hay que tener en cuenta a la hora de elegir la tipografía para un sitio web:

1. No usar más de tres tipografías distintas.
2. Utilizar fuentes legibles.
3. Elegir un buen contraste entre el fondo y la letra.
4. Establecer un interlineado de 1,5 puntos por el tamaño de la letra.
5. No abusar de los subrayados ya que suelen utilizarse para los hipervínculos.
6. Nunca escribir todo en mayúsculas porque ralentiza la lectura. Se debe utilizar solo para destacar mensajes cortos como títulos, subtítulos o conceptos importantes.
7. Los espacios en blanco entre párrafos ayudan a descansar la mirada y a mejorar la concentración gracias a la mejor comprensión de la separación entre ellos. Así pues, es necesario añadir un poco más de espaciado entre párrafos y no dejar la misma separación que con el interlineado.
8. La longitud recomendada para un párrafo está comprendida entre 45 y 75 caracteres. (aunque esto puede depender del tamaño de la pantalla).
9. Es aconsejable no utilizar textos de menos de 12 px.

Tipos de letras

Aunque existen muchas clases de letras, a continuación se verán las más destacadas.

Está demostrado que tan sólo se lee un 25% del contenido completo de una web

¡ÚSALO BIEN!

Páginas para descargar fuentes:

FreefontsDaFontGoogle Fonts

9.3. Iconos

Los iconos de los sitios web representan acciones y evitan el uso excesivo de textos. Elegir correctamente los iconos es necesario para que los usuarios interpreten fácilmente su significado y así ahorrar tiempo en la visualización del sitio web.

Es importante respetar una apariencia similar entre todos los iconos para disponer de una buena armonía y navegabilidad.

Los iconos se pueden encontrar en formatos diferentes:

• Mapa de bits: PNG, GIF y JPG.
• Imagen vectorizada: SVG.
• Fuentes tipográficas: las fuentes de texto pueden ofrecer iconos sencillos para la representación de elementos de la interfaz.

Páginas para descargar iconos:

FlaticonIconFinderFreepikFontAwesome

9.4. Ejemplos guías de estilo

Veamos ahora el siguiente tablero de Pinterest en el que se han recogido diferentes guías de estilo.

Ejemplos de guías de estilo:

Material DesignYoutubeAppleUPV

9.5. Extensiones de utilidad

Instala y prueba las extensiones de navegadores más útiles para diseñadores y desarrolladores web.

• ColorZilla.
• Fire Shot o Full Page Screen Capture.
• Responsive Viewer.
• Page Ruler Redux.
• Highlight H1 H2, H3 & highlight nofollow.
• WhatFont.
• WebDeveloper.

Ver más herramientas