EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Elementos prácticos
            Elementos prácticos: representación, significado y función
            05/08/2019
            Prototipos en el diseño de interfaces
            Prototipos en el diseño de interfaces web
            24/08/2019

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

            Guía de estilo

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

            Tabla de contenidos

            • 9. Guía de estilo: color, tipografía e iconos
            • 9.1. Colores
              • 9.1.1. Psicología del color
              • 9.1.2. Los colores fundamentales
              • 9.1.3. Sistema RGB
              • 9.1.4. Propiedades de los colores
              • 9.1.5. Paleta de colores
              • 9.1.6. Las marcas y su relación con los colores
            • 9.2. Tipografía
            • 9.3. Iconos
            • 9.4. Ejemplos guías de estilo
            • 9.5. Extensiones de utilidad

            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.

            Guía de estilo
            Figura 9.1. Guía de estilo.

            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.

            Colores significado
            Figura 9.2. Colores y su significado.

            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
            Ver más ejemplos de colores expresados en hexadecimal y en RGB

            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á.
            Tono, saturación y brillo
            9.3. Tono, saturación y brillo.

            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.

            Los colores y las marcas
            Figura 9.4. Los colores y las marcas

            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.

            • SERIF. El tipo de letra Serif incluye una ligera proyección que termina los trazos de las formas de las letras (llamadas Serif). Es tradicional, seria, respetable, institucional o corporativa.
            • SANS SERIF. El tipo de letra Sans Serif no incluye ninguna proyección al final de los trazos de las formas de las letras. Transmite modernidad, seguridad, alegría y, en ciertas ocasiones, neutralidad o minimalismo.
            • SCRIPT. Los tipos de letra Script se basan en los trazos fluidos parecidos a la escritura a mano. Las versiones más formales transmiten elegancia, mientras que las más casuales se utilizan para conceptos creativos.
            • DECORATIVA. Son tipografías diseñadas con fines específicos, sin tener especialmente en cuenta la legibilidad. Presentan una gran carga expresiva, son atractivas y con mucha personalidad.
            • MONOSESPACIADA. En los tipos de letra monoespaciales cada letra ocupa la misma cantidad de espacio horizontal en la pantalla. Se suelen utilizar para la representación de código informático o de texto escrito mediante una máquina de escribir.

            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

            En próximas unidades veremos más contenido relacionado con la experiencia de usuario. Si te interesa este tema puedes comenzar ya a leer algunas reglas y principios de la usabilidad.
            Compartir

            UD1. Planificación de interfaces gráficas

            • 1. Evolución del diseño web
            • 2. Interacción persona-ordenador
            • 3. Elementos de identificación, navegación, contenidos e interacción
            • 4. Componentes de una interfaz web
            • 5. Elementos conceptuales: punto, línea, plano, volumen
            • 6. Elementos visuales: forma, medida, color, textura
            • 7. Elementos de relación: dirección, posición, espacio, gravedad
            • 8. Elementos prácticos: representación, significado y función
            • 9. Guía de estilo: color, tipografía e iconos
            • 10. Prototipos web
            • 11. Mapas conceptuales y mapas de navegación
            • 12. Características: usable, visual, educativa y actualizada
            • 13. Gestores de contenido o CMS
            • 14. Pasos para crear una página web
            • 15. Referencias y recursos para la planificación de interfaces gráficas

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results