Introducción
Una guía o manual de estilo es un conjunto de normas para el diseño y la redacción de documentos, ya sea para el uso general, o para una publicación u organización específica. Los manuales de estilo son frecuentes en el uso general y especializado, en medios escritos, orales y gráficos. También dice que el manual de estilo se compone tanto de normas lingüísticas, como de estilo, para que el mensaje sea más coherente, eficaz y correcto.
Algunos manuales de estilo se centran en el diseño gráfico, y abarcan tópicos tales como la tipografía, los colores y espacios en blanco. Los manuales de estilo de sitios Web se centran en los aspectos técnicos y visuales de la publicación, la prosa, uso correcto del lenguaje, la gramática, la puntuación, la ortografía pero, sobre todo, la estética. La estricta aplicación de los reglamentos del manual de estilo proporciona uniformidad al aspecto visual de un documento.
La guía de estilo está dirigida las personas encargadas del diseño y programación de la interfaz Web. Esta guía debe recoger todos los aspectos relacionados con el diseño de la interfaz propia del sitio y, servir de ayuda eficaz en la toma de decisiones, tanto en el proceso de diseño como en la fase posterior de mantenimiento de un sitio Web.
Una guía de estilo incluye aspectos relacionados en la inclusión en la interfaz de fotografías, logos, imágenes, iconos, los colores, los tipos de letra y, aquellos relacionados con la maquetación Web vista anteriormente.
Una guía de estilo se hace imprescindible cuando el sitio Web es desarrollado por un grupo de personas.
Haz click aquí para descargar y echarle un ojo al manual de estilo del Gobierno de Navarra.
Video voluntario:
(Voluntario) Lee el artículo Guía de estilo, importancia en el diseño de interfaces web.
Elementos de las guías de estilo
Los elementos de una guía de estilo son:
- Fotos y logos
- Tipografías
- Colores
- Iconografía
- Estructura
Fotos y logos
Los recursos gráficos se emplean mucho en la Web. Si se utilizan adecuadamente, pueden mejorar el aprendizaje del usuario y añadir valor a nuestro sitio. Ahora bien, si se utilizan inadecuadamente, producen el efecto contrario.
A la hora de emplear imágenes en la Web, debemos tener en cuenta que las imágenes son archivos que tienen un tamaño y que para poder visualizarse correctamente deben descargarse previamente. Por esta razón, sólo usaremos aquellas imágenes que complementen nuestro sitio Web y trataremos de evitar aquellas cuya única finalidad sea adornar nuestro sitio.
Una guía debe indicar al equipo de desarrollo de la interfaz los siguientes puntos:
- Formato. El tipo de formato en el que deberán estar almacenadas la imágenes o logotipos empleados.
- Tamaño. El tamaño de la imagen o logotipo que se establece dando las medidas de ancho y alto en píxeles.
¿Sabrías decir 5 formatos de imagen que se pueden encontrar en una web?
Todos los tamaños y formatos a emplear en las imágenes y logos del sitio deben quedar perfectamente descritos en el documento de la guía de estilo.
Tipografías
El uso de una fuente familiar al usuario aumenta la facilidad de lectura.
A la hora de elegir la tipografía más adecuada hay que tener en cuenta varias cosas:
- La fuente. No todas las fuentes se leen con la misma facilidad y no todas las fuentes se ven igual en todas las plataformas. La fuente ARIAL es una fuente muy extendida que asegura una correcta visibilidad en todos los tamaños y, en todas las plataformas y navegadores.
- El estilo o tipo de la fuente. En la guía de estilo hay que especificar en que casos debemos usar la negrita, el subrayado, la cursiva o alguna de las posibles combinaciones. Hay que tener en cuenta que:
- El subrayado se emplea normalmente en los enlaces pudiendo dar una falsa impresión al usuario si se emplean con otra finalidad.
- Se debe usar la negrita sólo para conseguir fijar la atención del usuario sobre un elemento, destacándolo sobre el resto.
- No se deben utilizar diferentes características de la fuente para mostrar el énfasis de más de una o dos palabras o una frase corta.
- Tamaño de la fuente. La guía de estilo debe reflejar los tamaños a emplear según la ubicación del texto y su finalidad. No se emplea el mismo tamaño en un texto empleado como titular de un contenido que el del propio contenido. Así mismo, se pueden establecer diferentes tamaños según la importancia del titular.
- El color de la fuente respecto al fondo. La guía de estilo debe especificar el color de la fuente en función de la ubicación del texto y su finalidad. A la hora de elegir un color para el texto hay que tener en cuenta que:
- Se lee mejor un texto en color oscuro sobre un fondo de color claro que al revés.
- Se lee mejor un texto sobre un fondo liso que un texto sobre un fondo con una textura o con una imagen.
Conocer los tipos de fuentes y sus comportamientos en los distintos navegadores y sistemas operativos es de gran importancia para garantizar una visualización consistente de nuestro sitio Web.
Video voluntario:
¿Qué son las serifas? ¿Para qué sirven?
Video voluntario:
(Voluntario) Lee el artículo Tipografía aplicada al diseño web
(Voluntario) Lee el artículo Cómo elegir una Tipografía para una página web
Recuerda que en las páginas web no puedes usar tipografías que los usuarios no tengan instalada en su PC.
Puedes utilizar las siguientes webs para descargar fuentes que no tengas en tu ordenador:
- https://fonts.google.com/
- https://www.creativefabrica.com/es/
- https://www.dafont.com/es/
- https://fonts.adobe.com/
- https://fontawesome.com/
Si conoces alguna web de fuentes que creas que merezca estar aquí ponla en los comentarios y la añadiré 😉.
¿Qué diferencia hay entre una fuente con y sin sherifas?
Colores
En una guía de estilo deben figurar los colores a emplear en el sitio Web en todos los textos, fondos, e imágenes según sea su ubicación y finalidad. La información debe suministrarse aportando los valores para el modelo RGB tanto en hexadecimal como en decimal.
La guía de estilos debería reflejar, entre otras, las combinaciones hexadecimales para el color de:
- Las fuentes en el bloque central de la página principal (la que está en el centro de la imagen).
- Los fondos de los títulos de las secciones de la página principal (mencionadas en el párrafo anterior).
- Las fuentes del menú de navegación y del título del contenido en cada una de las páginas de las secciones (las cuatro que están alrededor de la principal).
- Los fondos de las opciones del menú de navegación y de su título en cada una de las páginas de las secciones.
Por último, una serie de consejos que te pueden ser útiles:
- Si vas a emplear los colores como sistema de codificación asegúrate de que sea fácil de comprender.
- Ser consistentes en el uso de los colores. Usar un color siempre para lo mismo.
- No excederse en el uso de colores distintos.
- Utilizar combinaciones de colores que transmitan armonía.
- Utilizar correctamente el contraste de colores para destacar las partes relevantes del sitio.
- Ten en cuenta la psicología del color.
Iconografía
La iconografía es la aplicación práctica de los elementos prácticos del diseño.
Un icono es un signo que mantiene una relación de semejanza con el objeto representado. Desde el punto informático, un icono es un pequeño gráfico en pantalla que identifica y representa a algún objeto, usualmente con algún simbolismo gráfico, para establecer una asociación.
Los iconos se suelen emplear para complementar los textos de los enlaces en la página de portada.
La elección de los iconos es muy importante, puesto que si un usuario no es capaz de determinar su significado a simple vista, entonces no habremos conseguido nuestro propósito de ahorrarle tiempo en la visualización de la página.
¿Por qué usamos iconos?
¿Un icono debería contener la menor cantidad de detalle posible sin perder significado?
Es importante hacer uso de iconos a los que el usuario está ya acostumbrado.
En la guía de estilos se especificarán los iconos a emplear en el sitio web, dónde se van a emplear y con que finalidad.
Resulta muy arriesgado emplear iconos por el mero hecho de adornar nuestras páginas pero que no aportan ningún significado por sí solos.
Os dejo una lista de webs para conseguir iconos de forma gratuita:
- https://www.iconfinder.com/
- https://icons8.com/
- https://www.flaticon.es/
- https://fonts.google.com/icons
- https://icones.js.org/
- https://www.svgrepo.com/
- https://fontawesome.com/
- https://feathericons.com/
- https://www.webiconset.com/category/free-icons/
- https://lenguajejs.com/retos/recursos/iconos/
- Herramienta IA para generar iconos: https://www.recraft.ai/
- Como usarla aquí.
Si conoces alguna web de iconos que creas que merezca estar aquí ponla en los comentarios y la añadiré 😉.
¿Es recomendable usar emojis en lugar de imágenes para los iconos?
No. Pero… ¿sabrías decirme por qué?
Estructura
En una guía de estilos debe quedar reflejada no sólo la disposición de estos bloques en cada una de las páginas del sitio, sino también el esquema de navegación que va a existir entre las diferentes páginas del sitio.
Es muy común en los sitios Web de gran tamaño que la página de portada o principal tenga un diseño diferente al de las demás, pero, tanto si todas las páginas son iguales como si tenemos grupos diferentes de páginas iguales entre sí, nuestra guía de estilo deberá reflejar todos los diseños posibles indicando en todos los casos:
- El tamaño en píxeles que ocupará el encabezado y dentro de él lo que ocupará y dónde se ubicará cada uno de sus elementos.
- El tamaño en píxeles o en porcentaje de la zona de navegación y su ubicación, así como si estará dispuesta horizontal o verticalmente, o si estará dividida en secciones distintas y, en su caso, la ubicación de cada una de ellas.
- Cómo se dispondrán los enlaces dentro de cada zona de navegación y su tamaño.
- El tamaño, el lugar y el formato de la zona de posicionamiento dentro de la página.
- El tamaño de la zona del contenido y su ubicación. Dónde se colocará el título y lo que ocupará dentro de la zona de contenido.
- Si hay cuadros de contenidos secundarios, cuál va a ser su tamaño y posición y cuál será su funcionamiento. Si estarán siempre visibles o se mostrarán al pasar el ratón por alguna zona concreta.
- El tamaño y la distribución de los elementos del pie.
- También se deberán reflejar los huecos que se quieran dejar a propósito.
- Cómo se van a mostrar los submenús de navegación, si los hubiera.
¿Por qué crees que es importante en el diseño de página web reflejar los huecos?
Los huecos en el diseño de una web son tan importantes como los silencios en el teatro o en una partitura. Actúa como refuerzo comunicativo. Puede colocarse intencionadamente para llamar la atención, para evitar un agrupamiento indeseado debido al principio de proximidad o al principio de semejanza. O simplemente para facilitar la lectura del contenido.