Lic.

Camila Mielgo 2022

Basado en DG Álvaro Ghisolfo

Guías de estilos
Lineamientos de los estilos visuales
 ¿Qué es?

Una guía de estilos es un documento que indica los

lineamientos de los estilos visuales que posee un sitio
web, aplicación o cualquier otro producto digital.

Establece las reglas de UI que deberán tener en cuenta

los diferentes integrantes del equipo al momento de
diseñar nuevas pantallas, garantizando consistencia
visual en el producto que se está diseñando.

Lineamientos de los estilos visuales

 Travel X change (Tomás Ayes, Guillermina Cacace, Vanesa Calvo, Tomás Lloveras) © 2020

Lineamientos de los estilos visuales

 ¿Qué es?

Esta guía incluye una descripción de exactamente

en qué lugar y en qué situación se usa cada una de
las alternativas, como así también diversos ejemplos
que ayudan a entender cada uno de esos elementos.

Tal como su nombre lo indica, no son mandamientos

sino tan solo una guía.

Lineamientos de los estilos visuales

 ¿Qué es?

Las guías de estilos

son herramientas visuales
Si bien suelen tener algunas indicaciones textuales
con explicaciones sobre el uso, las guías de estilos
son herramientas puramente visuales. Incluyen una
muestra de cada uno de los elementos UI, incluso
en el contexto de uso si es necesario.

Lineamientos de los estilos visuales

 ¿Cómo es?

Algunas guías de estilos se pueden visitar online y son

interactivas, incluyendo módulos para probar las fuentes
tipográficas, muestras de cómo quedan las distintas
combinaciones de colores, botones de descarga de kits
de íconos e ilustraciones, y mucho más.

Si los destinatarios de esta guía son desarrolladores web,

las mismas suelen incluir las propiedades y valores CSS
que aplican a cada elemento.

Lineamientos de los estilos visuales

Lineamientos de los estilos visuales
Lineamientos de los estilos visuales
 ¿Qué incluyen?

Logotipo, variantes y modos de aplicarlo

Familias y variables tipográficas
Paleta de colores
Iconografía utilizada
Uso y tratamiento de imágenes e ilustraciones
Grilla de base, márgenes, distancias y tamaños
Componentes de la interfaz
Movimientos, animaciones y transiciones
¡y mucho más!

Lineamientos de los estilos visuales

 Logotipo, variantes y modos de aplicarlo

Generalmente se muestra el logotipo, isotipo e isologo

(si hubiera), con la descripción de cuándo se usa cada uno.

Este es el lugar para incluir las distintas variantes de

aplicación del logo (horizontal o vertical, sobre colores
claros o sobre colores oscuros, etc.).

En caso de existir un favicon, un ícono de lanzamiento de

app mobile, etc., se incluirán en esta sección.

Lineamientos de los estilos visuales

 Keóken (Andrea Apesteguía, Camila López Kenny) © 2021

Lineamientos de los estilos visuales

 Groovy (Juan Pablo Barria, Guadalupe Gavazzo, Nazarena La Rocca, Sofía Mastroianni) © 2020

Lineamientos de los estilos visuales

 Familias y variables tipográficas

En este apartado se incluyen los nombres de las familias

tipográficas utilizadas, junto a todas las variables que se
usan (light, bold, black, italic, extended, etc.).

Se suelen indicar también los cuerpos tipográficos

(expresados en puntos o en píxeles), la paleta cromática
y todas las decisiones que hacen a los títulos, subtítulos,
epígrafes, textos de párrafo, etc., indicando a qué aplica
cada ejemplo.

Lineamientos de los estilos visuales

 Keóken (Andrea Apesteguía, Camila López Kenny) © 2021

Lineamientos de los estilos visuales

 Fika Bar (Sabrina Alonso, Julieta Bello, Brenda García, Valentina Hreñuk, Guadalupe Tobar) © 2021

Lineamientos de los estilos visuales

 Hacer Puentes (Martín Beliavy, Juan Geoghegan, Juan Pablo Mas, Matías Rivadulla) © 2020

Lineamientos de los estilos visuales

 Troop (Juan Manuel Cardozo Lacabe, Agustín Gamoneda, Maia García Cao, Martín Szajt) © 2021

Lineamientos de los estilos visuales

 Paleta de colores

Esta sección muestra todos los colores utilizados, junto

al código de color expresado en los distintos modelos de
color existentes para pantalla (hexadecimal, RGB, HSL,
etc.). Si bien la guía de estilos hace referencia a productos
digitales, generalmente se suelen incluir también los
modelos de color para impresión (CMYK, Pantone, etc.).

La guía suele indicar en qué situación se usa cada color.

Si hubiera degradados o texturas de fondo, también se
suelen incluir acá.

Lineamientos de los estilos visuales

 Keóken (Andrea Apesteguía, Camila López Kenny) © 2021

Lineamientos de los estilos visuales

 Domestika.org

Lineamientos de los estilos visuales

 Iconografía utilizada

La guía siempre incluye el sistema completo de íconos

utilizados. Si no fueron diseñados específicamente para
el sitio web o app, se deberá incluir el nombre del paquete
de íconos y el link de descarga. Si son muchos, se pueden
armar distintos grupos.
Si los íconos no son completamente estándar, se puede
describir para qué sirve cada uno.
En caso de tener distintos estados (activado, desactivado,
hover, etc.) o distintos colores, se suelen indicar acá.

Lineamientos de los estilos visuales

 Keóken (Andrea Apesteguía, Camila López Kenny) © 2021

Lineamientos de los estilos visuales

 Orbit (Cristian Daldi, Camila Giannini, Martina Liotti) © 2021

Lineamientos de los estilos visuales

 Uso y tratamiento de imágenes e ilustraciones

Este apartado incluye todo lo relacionado con las imágenes

de contenido y de decoración, ilustraciones manuales o
vectoriales, fotografías, etc.
Si hay un paquete de ilustraciones o de fotografías, o bien
sitios recomendados para elegirlas (que sean acordes con
los lineamientos del sitio web), se indicarán cuáles.

Al igual que las demás secciones, este apartado incluye

los lineamientos correspondientes (tipo de vector, colores,
tipo de foto, distancia focal, encuadre, iluminación, etc.).

Lineamientos de los estilos visuales

 Keóken (Andrea Apesteguía, Camila López Kenny) © 2021

Lineamientos de los estilos visuales

 Keóken (Andrea Apesteguía, Camila López Kenny) © 2021

Lineamientos de los estilos visuales

 Keóken (Andrea Apesteguía, Camila López Kenny) © 2021

Lineamientos de los estilos visuales

 Fika Bar (Sabrina Alonso, Julieta Bello, Brenda García, Valentina Hreñuk, Guadalupe Tobar) © 2021

Lineamientos de los estilos visuales

 Orbit (Cristian Daldi, Camila Giannini, Martina Liotti) © 2021

Lineamientos de los estilos visuales

 Grilla, márgenes, distancias y tamaños

Para asegurar la mayor consistencia de todo el layout,

se suele incluir una muestra de la grilla de base utilizada,
indicando cantidad de columnas, distancia entre columnas
y dimensiones de los márgenes.

En el caso de un sitio web responsive o de una app que se

adapta a orientaciones landscape (apaisada) y portrait
(vertical), se incluyen todas las grillas utilizadas.
En esta parte se suelen indicar las distancias entre los
elementos que conforman un módulo completo.

Lineamientos de los estilos visuales

 Troop (Juan Manuel Cardozo Lacabe, Agustín Gamoneda, Maia García Cao, Martín Szajt) © 2021

Lineamientos de los estilos visuales

 Troop (Juan Manuel Cardozo Lacabe, Agustín Gamoneda, Maia García Cao, Martín Szajt) © 2021

Lineamientos de los estilos visuales

 Troop (Juan Manuel Cardozo Lacabe, Agustín Gamoneda, Maia García Cao, Martín Szajt) © 2021

Lineamientos de los estilos visuales

 Componentes de la interfaz

De manera similar a los UI kits, en ocasiones las guías

de estilos incluyen muestras de algunos elementos
o componentes completos de la interfaz visual,
especialmente cuando se requiere alguna explicación
o descripción del uso de los mismos.
Esto suele abarcar campos de formularios, menúes
y barras de navegación, links, botones y call to action,
headers y footers, pop ups, etc.
Si los mismos incluyen distintos estados, se explican acá.

Lineamientos de los estilos visuales

 Keóken (Andrea Apesteguía, Camila López Kenny) © 2021

Lineamientos de los estilos visuales

 Keóken (Andrea Apesteguía, Camila López Kenny) © 2021

Lineamientos de los estilos visuales

 Keóken (Andrea Apesteguía, Camila López Kenny) © 2021

Lineamientos de los estilos visuales

 Orbit (Cristian Daldi, Camila Giannini, Martina Liotti) © 2021

Lineamientos de los estilos visuales

 Orbit (Cristian Daldi, Camila Giannini, Martina Liotti) © 2021

Lineamientos de los estilos visuales

 Movimientos, animaciones y transiciones

Las decisiones que tienen que ver con las animaciones

(transiciones entre una pantalla y la otra, despliegue
de los menúes, tipo de transición retardo de los sliders,
microinteracciones, etc.) se suelen indicar acá.

En caso de existir diferentes instancias de los mismos,

al igual que otras secciones, la guía describe para qué
y cómo se aplican cada una de estas animaciones.

Lineamientos de los estilos visuales

 Keóken (Andrea Apesteguía, Camila López Kenny) © 2021

Lineamientos de los estilos visuales

 No hace falta incluir

Lineamientos de los estilos visuales

 Algunos ejemplos online

https://mailchimp.com/about/brand-assets/

https://www.facebook.com/brand/resources/whatsapp/whatsapp-brand

https://www.facebook.com/brand/resources/instagram/instagram-brand

https://www.facebook.com/brand/resources

https://www.ibm.com/design/language/resources/

https://brand.linkedin.com/downloads

Lineamientos de los estilos visuales

Fin :)