COMENZAMOS EN 5 MIN

¿Todo listo?
RECUERDA PONER A GRABAR LA CLASE
 Clase 14 . PROTOTIPADO

Sistemas de Diseño
 ● Comprender los sistemas de diseños de
Google, Apple y Microsoft.
● Crear nuestro propio sistema de diseño a
través de un Moodboard.

OBJETIVOS DE LA CLASE
● Comprender cómo ofrecer una buena
experiencia a las personas usuarias.
MAPA DE CONCEPTOS
MAPA DE CONCEPTOS CLASE 14

PROTOTIPO FIDELIDAD VISUAL

Moodboard Guías de Estilo

Fluent System Human Interfase Material Design

 CRONOGRAMA DEL CURSO
Clase 13 Clase 14 Clase 15

Figma, XD y el código Sistema de diseño Como en el mundo

físico, pero en la pantalla

PROTOTIPO DE CÓDIGOS SISTEMAS DE DISEÑO MÁS

USADOS USO DE MATERIAL DESIGN

CREANDO PANTALLAS MOODBOARD ELEGIR TIPOGRAFÍA E

RESPONSIVE ICONOGRAFÍA

SEGUNDA ENTREGA PENSANDO LOS COLORES

INTERMEDIA DE NUESTRA INTERFASE ÍCONOS Y FONTS
Sistemas de Diseños de
Google, Apple y
Microsoft.
 SISTEMAS DE DISEÑO

También conocidos como Guidelines, son las pautas,

normas y lineamientos que cada sistema operativo
establece al crear productos para sus plataformas,
permitiendo unificación, coherencia y cohesión.
 SISTEMAS DE DISEÑO
Es una combinación de estilos y patrones que serán
utilizados, colores, tipos de letra y todo aquello que se
utiliza para construir la interfaz del producto, el sitio web o
la aplicación.

Esto se traduce en las formas en que los componentes/

elementos de nuestra UI se construyen y se utilizan,
qué se debe y qué no se debe hacer.
SISTEMAS DE DISEÑO

Se podría definir como un conjunto de

reglas o normas en constante
evolución que determina la
composición de un producto.
 Cada SO tiene el suyo

IOS Android Microsoft

“Human Interface” “Material Design” “Fluent Design System”
SPOILER ALERT
En las próximas clases, desarrollaremos cada una de ellas en
detalle. Hoy realizaremos una visita general.

😉
Normas generales de los
Sistemas de Diseño.
 Componentes de un SO
● Biblioteca de componentes.
● Uso y forma de sus componentes:
botones, cards, listas, iconografias,
switches, tap bars, etc
● Estilos y uso de cada cuerpo
tipográfico
● Colores y formas
● Imágenes o Ilustraciones
HUMAN INTERFACE
 HUMAN INTERFACE
Las Human Interface Guidelines (HIG) son
documentos con lineamientos para mejorar la
experiencia de los usuarios, haciendo interfaces de
uso más intuitivos, aprendibles, y constantes.

Apple divide sus guías de estilo según la familia de

dispositivos.
APPLE: FAMILIA DE DISPOSITIVOS
 HUMAN INTERFACE

El HIG busca que las aplicaciones posean un

mismo diseño visual y elementos
comunes de la interfaz - algunos simples,
tales como botones e iconos hasta
construcciones más complejas, como
cuadros de diálogo.
¡VAMOS A NAVEGAR!
 EJEMPLO EN VIVO
Navegaremos por la web de Apple para ver como utilizan el
color y como es su sistema cromático.
●

Sitio: Human Interface Guidelines- Design | developer.apple.com

 Tipografía y cuerpos tipográficos.

Colores recomendados en modo dark y

light

Sitio: Human Interface Guidelines- Design | developer.apple.com

MATERIAL DESIGN
 MATERIAL DESIGN
Presentado por Google, a lo largo de los años se ha
ido extendiendo y, a día de hoy, también se utiliza en
aplicaciones iOS y web.

Material Design es un concepto, una filosofía, unas

pautas enfocadas al diseño en Android, en la
web y varias plataformas.
 MATERIAL DESIGN
Material Design viene de estar basado en objetos materiales. Es decir, piezas
colocadas en un espacio (lugar) y con un tiempo (movimiento) determinado.
 MATERIAL DESIGN

Es un diseño donde la profundidad, las superficies, los bordes, las sombras y los
colores son una manera de aproximarse a la realidad. Para esto, se guía por las leyes de
la física con animaciones lógicas.

Ejemplo: cuando los objetos se superponen pero no se atraviesan o cuando los objetos se alejan y
acercan a una velocidad que contempla es espacio y gravedad.
 MATERIAL DESIGN

Aquí verás una muestra de MD. Fuente: MATERIAL DESIGN | Google Developers
¡VAMOS A NAVEGAR!
 EJEMPLO EN VIVO
Navegaremos por la web de MD para ver sus componentes y
como utilizan el color.
 ●

Sitio: Homepage - Material Design | material.io

 1 2 3

1- Encontrarás todos los elementos del sistema diseño y sus respectivas reglas
de buen uso.
2- En esa sección podrás filtrar los componentes según sean para Android,
web o flutter.
3- Es una librería de distintos tipos de recursos.

Sitio: Homepage - Material Design | material.io

VEAMOS UN ELEMENTO SUMAMENTE
INTERESANTE:

LOS COLORES
 El sistema de colores - Color Palettes

Acá podrás seleccionar tu color primario que

será usado en los componentes de
navegación.

Acá podrás seleccionar tu color secundario

que será usado en componentes como
botones.

Sitio: the color system- Tools for picking colors | material.io

El sistema de colores - Color Palettes

A cada color seleccionado se le asignan

dentro de su gama las variables más claras y
más oscuras para ser usado en distintos
estados y elementos de un componente.

Al pasar el mouse podrás ver el código

hexadecimal de cada uno.

Sitio: the color system- Tools for picking colors | material.io

COLOR TOOL
Material Design tiene Podrás ver templates o
su accesibilidad
su propia herramienta
para testear colores y
combinaciones.
Podrás seleccionar color
primario, secundario y de
los textos. También ver
cómo quedaría el diseño
en el template. Color primario y secundario con una variable
más clara y oscura en cada caso.

Sitio: Color Tool | material.io

COLOR TOOL - visualización de la UI

Sitio: Color Tool | material.io

 MATERIAL PALETTE,
UNA HERRAMIENTA RÁPIDA AL
MOMENTO DE PENSAR LA PALETA DE
COLORES
 MATERIAL PALETTE

El objetivo de esta web es facilitarnos la elección de colores inspirados en material

design, proporcionandonos una paleta de colores que combinan entre ellos.

El funcionamiento es simple:

1 Tenemos que elegir dos colores, por ejemplo el principal que queremos
para nuestra web y otro secundario para otro tipo de funcionalidad.
 MATERIAL PALETTE

2○ Una vez elegidos, automáticamente se genera una paleta personalizada

según los colores elegidos.
3
○ En la paleta aparecen distintos colores con una breve descripción: tenemos
siempre un color más oscuro, otro más claro, el principal, otros para distintos
tipos de texto según su importancia, otro de división y para acentuar algún
aspecto importante como puede ser un botón.
Link: Material Palette: Material design color palette generator | materialpalette.com
FLUENT DESIGN SYSTEM
 MICROSOFT FLUENT DESIGN SYSTEM
Fluent es un sistema de diseño multiplataforma de código abierto que brinda los
marcos necesarios para crear experiencias de producto atractivas, incluidas la
accesibilidad, la internacionalización y el rendimiento.
 MICROSOFT FLUENT DESIGN SYSTEM
Antes: El Microsoft Design Language o
Metro, fue un sistema de diseño creado como
una nueva manera de visualizar información
en dispositivos móviles. Pensado en
principios de comunicación visual rápida,
inspirada en las señales de tránsito, era
muy minimalista, hacia un uso fuerte de
tipografía, colores y animaciones.
Imagen: mspoweruser.com

Fuente: Sistema de diseño: Fluent design thinking | tesseractspace.com

 MICROSOFT FLUENT DESIGN SYSTEM
En 2017, Microsoft anunció Design
Fluent System como un nuevo sistema
de diseño que evolucionaría a partir de
Metro pero que sería llevado en una
nueva dirección: el diseño de
Aplicaciones Universales para
Realidad Mixta.

Fuente: Sistema de diseño: Fluent design thinking | tesseractspace.com

FLUENT DESIGN SYSTEM: UWP
 Universal Windows Platform
Microsoft presentó en 2016 su Universal Windows Platform o UWP, una plataforma para
desarrollar aplicaciones que pueden correr en PCs, laptops, tablets, consolas de
videojuegos, móviles, dispositivos de IoT o visores de realidad virtual o aumentada sin
necesidad de reescribirlas para cada dispositivo.

Fuente: Sistema de diseño: Fluent design thinking | tesseractspace.com

VENTAJAS DE UWP
 ALGUNAS VENTAJAS DE UWP

● Son responsive: La apps universales de Microsoft son por diseño responsivas y pueden
adaptarse a cualquier formato de pantalla o estilo de interacción (teclado, táctil,
natural, voz, controles, etc). Se distribuyen, sincronizan y actualizan a través de la tienda de
apps de Windows.

Fuente: Sistema de diseño: Fluent design thinking | tesseractspace.com

 ALGUNAS VENTAJAS DE UWP

● Utiliza lenguajes de programación preexistentes: Además, una app UWP puede ser
desarrollada en lenguajes como C++, C#, F#, VB.NET, XAML o JavaScript para que los
programadores puedan trabajar con lo que ya conocen y reutilicen lo que ya han hecho.

Fuente: Sistema de diseño: Fluent design thinking | tesseractspace.com

¡VAMOS A NAVEGAR!
 EJEMPLO EN VIVO
Navegaremos por la web de Fluent Design System para ver sus
componentes.
●

Sitio: Microsoft Design | microsoft.com

 ●
Podrás seleccionar plataforma y SO
y descargar kits según cada caso.

Sitio: Microsoft Design | microsoft.com

●

Navegamos por los controles de

Android

Sitio: Microsoft Design | microsoft.com

 CADA PLATAFORMA TIENE INDICADO SUS CONTROLS (COMPONENTES)

Sitio: Fluent UI | microsoft.com

 Listado de los componentes

Sitio: Fluent UI Android | microsoft.com

 Se muestran los estados de
cada componentes en
modo light y en modo darks

Tamaños de los
componentes

Activado

Desactivado

Sitio: Fluent UI Android | microsoft.com

En resumen los sistemas nos sirven para no pensar todo desde
cero y, principalmente, respetar los modelos mentales de sus
usuarios. Es decir las convenciones que ya tienen los sistemas
operativos que hay en el mercado.
VEAMOS MÁS HERRAMIENTAS PARA
TRABAJAR EL COLOR Y ELEGIR UNA
PALETA CROMÁTICA
●

Sitio: Mailchimp Pattern Library | ux.mailchimp.com

●

Sitio: Atlassian Design System | atlassian.design

 Open Design Systems

Sitio: Design Systems | designsystems.com

 ☕
BREAK
¡5/10 MINUTOS Y VOLVEMOS!
¿Cómo creamos nuestro propio
sistema de diseño?

Pensar el sistema de diseño propio respetando las guías

¿Cómo creamos nuestro propio
sistema de diseño?

● Definir los colores.

● Definir tipografía y los pesos tipográficos.

● Diseñar la iconografía.

● Diseñar los componentes principales y sus estados

utilizando nuestros materiales

EMPECEMOS POR EL COLOR
 La importancia de la paleta cromática

Sitio: Material You | material.io

 Para crear nuestra paleta es
clave tener un buen Moodboard
que nos sirva de inspiración
Pero… ¿Cómo creamos un
moodboard?
 ¿Cómo creamos un moodboard?

1. Definir qué quiero transmitir con mi producto en 3 o 5 palabras.

2. Buscar referencias y climas en imágenes o proyectos de internet.

3. Colocar todo lo encontrado en un tablero que sirva de inspiración.

1. Definir qué quiero transmitir con mi producto en 3 o 5 palabras

Comida
Saludable
Juvenil
Energico
2. Buscar referencias y climas en imágenes o proyectos de internet
3. Colocar todo lo encontrado en un tablero que sirva de inspiración.
 Con este moodboard de
inspiración vamos a crear la
paleta de colores de nuestro
proyecto!
Partiendo de nuestro moodboard vamos a extraer los colores para nuestro proyecto
Color principal
Aplicando el color
Una vez que definimos qué colores vamos a utilizar, hay que indicar
Color secundario
que función le vamos a dar a cada color. Vamos a tener:

Color principal: Nuestro color predominante. Para CTA (botones),

Color destacado
cards y componentes destacados

Color secundario: En segundo plano. Para componentes

secundarios, botones de segundo nivel.

Color destacado: Para detalle, anuncios, ofertas, notificaciones, etc.

CoderTip: Es recomendable siempre sumar una sección de colores en

escala de grises extra para tipografías y detalles
 Aplicando el color
En algunos proyectos vamos a definir un segundo nivel de colores:

Color ilustraciones/imagenes: Que va a predominar en las

fotografías, ilustraciones o imágenes de nuestro contenido.

Color Fondos: Este puede ser un color diferente, que vamos a usar
para card llenas o fondos
Color
ilustraciones/IMG
*Estos colores no son obligatorios o necesarios en todos los
proyectos.
Color fondos
MOODBOARD, PALETA DE COLORES Y GALERÍA
DE ESTILOS
Tiempo: 30 minutos
 ACTIVIDAD 1: MOODBOARD Y PALETA DE COLORES
TIEMPO: 30 MINUTOS

1. Cada estudiante deberá primero construir un moodboard (tablero de inspiración) de

lo que desea transmitir (por ejemplo: tecnología, rápidez, confianza). Usá imágenes
de internet (ej: behance, dribbble) (15 MINUTOS)
2. A partir del moodboard que construiste, selecciona los colores que usarás
dentro de tu paleta. Y definir que roll va a ocupar cada color.
3. Aplicar los colores en algunos componentes para ir viendo cómo quedan y crea tu
galeria de estilos de color en Figma o XD.
4. Compartí tu trabajo para recibir feedback!
¿CÓMO NOS FUE?
 6

DEFINIR LA PALETA DE COLORES PARA

NUESTRO PROYECTO
 MOODBOARD, PALETA DE COLORES y GALERÍA DE ESTILOS

Vamos a crear nuestra paleta de colores e identidad visual.

➔ Crear un moodboard o tablero de inspiración para tu producto digital

➔ Definir la paletas de colores y crear una galeria de estilos de color en figma o xd
➔ Aplicar la nueva paleta a los componentes que ya creamos

>>Aspectos a incluir en el desafío genérico:

● Paleta cromática nueva

● Galería de estilos de color
● Componentes con la nueva aplicación de color
EJEMPLO

Ejemplo:

Link proyecto completo ”Ensamblados”

¿PREGUNTAS?
¿QUIERES SABER MÁS? TE DEJAMOS
MATERIAL AMPLIADO DE LA CLASE
● Designers who code: A Story about Hybrids | centigrade.de
● Imagining the Future Shopping Experience | medium.com
● Lights, action, Prototype! | medium.com
● Implementing your theme | material.io
● Making Material Design | Google Design
¡MUCHAS GRACIAS!
Resumen de lo visto en clase hoy:
- Sistemas de diseño
- Colores
- Moodboard
OPINA Y VALORA ESTA CLASE
#DEMOCRATIZANDOLAEDUCACIÓN