Tabla de contenidos
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.
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.
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.
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.
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.
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 |
Los colores disponen de tres propiedades que nos permiten diferenciarlos: tono, saturación y brillo.
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:
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.
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:
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:
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:
Páginas para descargar iconos:
FlaticonIconFinderFreepikFontAwesome
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
Instala y prueba las extensiones de navegadores más útiles para diseñadores y desarrolladores web.