UI - Módulo 2.1.Diseño Visual

16 marzo - 1 junio | 9:00-12:00

Curso UI

(150 h)

Módulo 2.1. Diseño Visual

Guada Romero Carrascosa | Trazos

Índice

Módulo 2.1. Diseño Visual

Por sesiones

1_3. Primeros pasos en Sketch, Figma y XD

1_2. Primeros pasos en Sketch, Figma y XD

1_4. Primeros pasos en Sketch, Figma y XD

1_1. Primeros pasos en Sketch, Figma y XD

4. Leyes del diseño de interfaces

3. Principios de diseño

2_2. Diseño responsive, grids y layout

2_1. Diseño responsive, grids y layout

5. Moodboards 6_1. AI

6_3. Arquitectura de la Información

6_4. Arquitectura de la Información

6_2. Arquitectura de la Información

7_2. Guías de estilo, sd 8. Diseño smart watch

7_1. Guías de estilo, sistemas de diseño

9. Landing Pages 10_1. Wireframes high-fi

10_2. Wireframes alta fidelidad

01

Sesión

Primeros pasos en Sketch, Figma y XD I

Briefing

¿Qué es?

Herramientas de diseño

Las más conocidas

Los inicios del diseño UX...

El estudio de la interacción con las herramientas comenzó hace mucho más de lo que pensamos, ¿podríamos hablar de los primeros diseñadores UX?

Las herramientas más conocidas

Otras herramientas

Figma

Introducción

Sketch

Introducción

Adobe XD

Introducción

Figma

Primeros pasos

vs

Mac / Windows

Función de prototipado

Archivos colaborativos

Plugins

Kits

Nube

vs

Trabajar online

Trabajar offline

Tutoriales online

Documentación

Tutoriales

Jam Sessions

Ejercicios prácticos en Figma

Enlace

RETO

02

Sesión

Primeros pasos en Sketch, Figma y XD II

¿Qué vamos a trabajar?

Sesión II

Frame & Group

Sesión III

Sesión IV

Text, Button, Input

En próximas sesiones:

• Design System
• Wireframes
• Prototipado (animación)

Alignments

Shortcuts

Plugins

Color

Graphic Resources

IA

Component & Instance

What's new?

What's new?

Frame & Group

Elements

Sketch: Artboards (mesas de trabajo) + grupos anidados

Group

Frame

vs

Grupo de elementos

Mesa de trabajo

Anidable

Anidable

No muestra su nombre en el Canvas

Muestra su nombre en el Canvas

No se puede reescalar el texto

No se puede reescalar el texto

Constraints

Sin constraints

No añade fondo

Añade fondo

Se adapta al espacio que ocupan los elementos

Con desbordamiento + clip

Sin grids

Grids

Autolayout

Sin autolayout

Los componentes siempre son frames

No pueden ser Componentes

Se pueden animar

No se pueden animar

Nuevo | Secciones

Un nivel + de organización

No autolayout

Permite anidaciones

No constraints

Transformable en Frames

No se puede hacer componente

Estilos y propiedades

No admite grids

Alineaciones

No visualiza las reglas (vías)

Links de acceso rápido (Copy Link o ctrl+L)

No admite grids (truco)

No admite sombreado (truco)

Resize to fit

No clasifica bien las variantes en las librerías (los componentes sí)

Afecta a la estructura de las librerías

No se ven en Mirror

No mueve el contenido cuando lo haces por coordenadas

Text, Button, Input

Elements

Alignments

Elements

Modificar los constraints con el grafico en vez de los desplegables

Shortcuts

Elements

7 | Atajos del día a día

Último plugin utilizado

Copiar texto sin estilo

Buscador general

Alt

Opción

Cerrar capas de grupos y frames

7 | Atajos del día a día

Cambiar pestaña de Layers a Assets

Desactivar constraints (modificar Frame)

Mientras movemos un elemento: no se sale del frame, no afecta al autolayout

03

Sesión

Primeros pasos en Sketch, Figma y XD III

¿Qué vamos a trabajar?

Sesión II

Frame & Group

Sesión III

Sesión IV

Text, Button, Input

En próximas sesiones:

• Design System
• Wireframes
• Prototipado (animación)

Alignments

Shortcuts

Plugins

Color

Graphic Resources

IA

Component & Instance

What's new?

What's new?

04

Sesión

Primeros pasos en Sketch, Figma y XD IV

¿Qué vamos a trabajar?

Sesión II

Frame & Group

Sesión III

Sesión IV

Text, Button, Input

En próximas sesiones:

• Design System
• Wireframes
• Prototipado (animación)

Alignments

Shortcuts

Plugins

Color

Graphic Resources

IA

Component & Instance

What's new?

What's new?

Responsive & Adaptative

Responsive design

Combo 1

Grids: principios básicos

05

Sesión

Diseño responsive, grids y layout I

Responsive & Adaptative

Diferencias

vs

• 1600px
• 1200px
• 960px
• 760px
• 480px
• 320px

Adaptative Aaron Gustafson, 2011: Adaptable Web Design. Diseños estáticos para diferentes formatos.

Responsive Ethan Marcotte, 2010: Responsive Web Design. Modifica la istribución y tamaño de los elementos.

• Control total sobre el aspecto del producto en cada tamaño.
• Limitación de los tamaños (si se utiliza uno alternativo puede no poder ser navegable).
• Más caro.
• Más trabajo.
• Tiempo de carga reducido.

• Las pantallas son fluídas y se adaptan al tamaño de la pantalla del usuario.
• Utilizan saltos dinámicos que modifican la distribución y tamaño de los elementos.
• Barato porque la adaptación es automática, pero con tiempo de carga más prolongado.

Resposive o Adaptativo

RETO

Resposive o Adaptativo

RETO

Responsive design

Principios básicos

Diferenciar conceptos

Responsive vs Adaptative

¿Por dónde empezar?

Desktop first vs Mobile First

Fluidez

Fluído vs Estático

Unidades

Relativas (%) vs Fijas (px)

Saltos o breakpoints

Con breakpoints vs sin breakpoints

Valores máximos y mínimos

Width 100% vs wisth max. 1000px

Agrupaciones y anidaciones

Anidados vs no anidados

Origen de las fuentes

Fuentes del sistema vs fuentes web

Formato del diseño visual

Imágenes (jpg., png.) vs vectores (svg.)

Combo 1

RETO

Grids

Principios básicos

Grids - Cuadrículas

Las cuadrículas se utilizaron para organizar elementos en libros e incluso en el arte renacentista, donde los artistas buscaban una geometría perfecta.

• En el siglo XIII, un arquitecto francés desarrolló el diagrama de Villard de Honnecourt: mezcla el sistema de cuadrícula con el concepto de proporción áurea para crear diseños con márgenes basados ​​en proporciones fijas (Renacimiento: la escuela de Atenas de Rafael Sanzio)

Grids

Estructura formada por líneas invisibles que dividen una página en columnas o módulos.

• Precisión y flexibilidad: alineación
• Adaptabilidad: breakpoints

Unidades de espaciado

Grids: partes y tipos

Grids: configuración

Wireframes

06

Reto: wireframes y grids

Combo 2

Sesión

Diseño responsive, grids y layout II

Unidades de espaciado

Píxeles y dl

Unidad básica px

• Múltiplo de cada medida
• Diseños consistentes
• Recomendada: 8px (mayoría de tamaños de pantalla divisibles por 8. 8 > 4 > 2)

01

A tener en cuenta I

Unidad dp

02

Desde desarrollo se trabaja mucho desde el dp

Conceptos básicos de espaciado

Dimensionamiento

• Los elementos deben medirse entorno a la unidad base (2, 4, 8, 16, 24) cuando sea posible
• Jerarquía clara, alineamiento ordenado y ritmo visual constante

03

Relleno

• Espacio entre los elementos
• Se mide en incrementos de la unidad base
• Agradable, aclara relación entre elementos y mejora la legibilidad

04

Grids

Partes y tipos

Partes de una grid

Gutters | Canales

Columns | columnas

Margins | Márgenes

De manuscrito

• El diseño más sencillo
• Una sola columna que abarca el ancho de toda el área de contenido
• Utilidad: definir los márgenes de un bloque de texto (como en un manuscrito).

De columna

• El diseño más común utilizado para aplicaciones web
• Divide el marco en campos verticales espaciados a los que se alinean los objetos
• Generalmente compuestas por 12 columnas (mitades, tercios, cuartos y sextos)

Rejilla modular

• Variación de la cuadrícula de columnas
• Columnas verticales y filas horizontales que se cruzan y crean una matriz de celdas o módulos
• Proporcionan pautas de diseño adicionales: unidades individuales o como bloques más grandes cuando se combinan

De línea de base

• Filas horizontales densas
• Proporcionan pautas de alineación y espaciado para el texto (hoja de papel rayado)

De línea de base

• Filas horizontales densas
• Proporcionan pautas de alineación y espaciado para el texto (hoja de papel rayado)

Importante: establecer las alturas de línea partiendo de la unidad base (8x o 4px) para que el texto se alinee con la cuadrícula de referencia.

De diseño adaptable

• Ancho y posición de contenedor "fijos" (medidas exactas)
• El margen aumenta o disminuye
• Todos los elementos se mantienen proporcionales, pero puede generar demasiado espacio vacío en los márgenes en dispositivos de tamaño extra grande

De diseño responsive

• Ancho y posición de contenedor "fluídos" (medidas por porcentajes)
• Los anchos de margen y medianil permanecen constantes mientras el tamaño de la columna aumenta o disminuye

Grids

Configuración

Breakpoints | Puntos de ruptura

• Forma de controlar el diseño a medida que se escala de dispositivos mobile a desktop (se adaptan), y mejorar la comunicación de su funcionamiento
• Generalmente se representan en unidades px y vienen en rangos
• No hay un conjunto de puntos de interrupción definitivos

Algunos puntos de ruptura:

• Pequeño (0px-599px)
• Mediano (600px-899px)
• Grande (900px-1199px)
• Extra grande (1200px en adelante)

Frames aproximados en Figma:

• 375 px para breakpoint pequeño
• 600 px para breakpoint mediano
• 900 px para breakpoint grande
• 1200 px para breakpoint extra grande

FigmaAplicar grids a cualquier frame

• Se pueden aplicar a cualquier frame
• A nivel del frame
• Anidado: a nivel de los elementos

FigmaAplicar restricciones (constraints) para diseños responsive

• Permiten controlar el comportamiento de cambio de tamaño de cualquier elemento en relación con su frame principal

• Cuando se aplican con un grid de diseño ampliado, las restricciones serán relativas a su columna más cercana para mantener un espacio fijo (canaleta) entre los elementos.

FigmaGuardar estilos de cuadrícula

• para mantener un tamaño uniforme en áreas de contenido relacionadas, tipos de componentes y tamaños de dispositivos.

FigmaPersonalizar su apariencia

Wireframes

Wireframes y grids

Wireframes y grids I

RETO

Combo 2

Al hacer click en cada ejercicio, podréis ver un vídeo explicativo de cada uno

RETO

Reto: wireframes y grids II

Principios de diseño: intro

Principios de diseño: en detalle

Wireframes Low-Fi + práctica

07

Sesión

Principios de diseño

Wireframes y grids II

RETO

Principios de diseño

Wireframes y grids

Balance

Peso visual

01

Contraste

Principios básicos I

02

Diferenciar y destacar

Contraste

Énfasis o punto focal

Destacar elementos principales

03

04

Proporción

Tamaños jerárquicos, relativos e intuitivos

Repeticiones y patrones

Unifica , dinamiza y caracteriza el producto

01

Principios básicos II

Movimiento

02

Recorrido visual

Espacio en blanco

03

Espacio para respirar (aire)

04

Armonía

Unión visual

Principios de diseño

En detalle

Balance

Cualquier elemento de su diseño tiene un peso visual

• Simétrico: los elementos a ambos lados de la línea central tienen el mismo peso.
• Asimétrico: los lados tienen pesos opuestos, pero siguen pareciendo equilibrados.
• Radial: los elementos se disponen alrededor del punto central de su diseño.

Énfasis o punto focal

• Destacar el elemento más importante
• El usuario se centra en lo principal (CTA)

Proporción y escala

• Tamaño relativo de los elementos del diseño en comparación con los demás
• Muestra los elementos importantes (grandes) y señala los menos importantes (pequeños)

Repeticiones y patrones

• La repetición de un elemento, color, forma o figura en el diseño
• Unifica los elementos del diseño
• La repetición crea patrones que refuerzan el diseño (branding)

• Usar el mismo color del logo de su marca: referencia indirecta hacia su marca y ayuda a desarrollar su identidad de marca

• En UI: elementos o agrupaciones de componentes ya conocidos por el usuario

Recorrido / Ritmo

• Recorre sobre el diseño (horizontal + vertical): movimiento
• La parte más importante será el principio de la composición

Espacios en blanco

• Espacio para respirar (aire)
• Dar más importancia al contenido relevante
• Sencillez. A veces + es +

Armonía

• Unión visual
• Branding, identidad de marca
• Dar sentido al uso de los recursos visuales

Color

Psicología y aplicación

Contraste

Crear una diferencia obvia entre los objetos de su diseño y destacarlos como resultado. En su composición, puede mostrar el contraste con colores contrastados, tonos claros y oscuros, formas pequeñas y grandes, fuentes finas y gruesas, etc.

Círculo cromático

• Desarrollado por Isaac Newton en 1666 al ser el primer científico en estudiar y comprender el origen del arco iris.
• Steven Bleicher publicó en 2004 “Contemporany Color: Theory and Use", un texto completo sobre el color en su conjunto, que se centra en el color digital y su relación con otras nuevas tecnologías.
• En 2011, Bleicher afirmó que la rueda de colores se puede clasificar en tres tipos principales de colores según la combinación de colores base utilizados para crear el color final.

Paletas de color | análogas

• Colores que están cerca el uno del otro en el círculo cromático (misma tonalidad)
• Proporcionando consistencia y uniformidad en el diseño
• Permite que el usuario se centre más en el contenido (sin contrastes)
• Para mayor variación: tintes y sombras (+ matices y tonos)
• Jerarquía de colores
• 1 - Mayor presencia
• 2 - Actuar como apoyo
• 3 - Crear contraste

Paletas de color | complementarias

• Colores contrarios en el círculo cromático
• Mayor equilibrio
• Se capta mejor la atención de los usuarios

Paletas de color | triádico

• Colores equidistantes en el círculo cromático, por lo que es una paleta diversa
• Requiere de una mayor experiencia para combinarlos de manera correcta
• Se recomienda añadir tonos neutros para compensar los colores más brillantes y aportar armonia

Herramientas

• Adobe Color
• Color Hunt
• BrandColors - paletas de marcas ya conocidas
• HTML Color Codes
• Coolors
• Happy Hues

Leyes UX-UI

Ley de Gestalt

Diseño atómico

Wireframes Low-Fi + práctica

08

Sesión

Leyes del diseño de interfaces

05

Ley de Jakob

Ley de usabilidad y estética

01

06

Ley de Miller

02

Ley de Doherty

07

Ley de Tesler

03

Ley de Fitt's

08

Principio de Pareto

04

Ley de Hick

Leyes UX-UI

Gestalt

Psicología Gestalt

Se basa en una corriente psicológica que surgió en Alemania en el siglo XX impulsada por Max Wertheimer, Wolfgang Köhler, Kurt KoÄa y Kurt LewinSi nos referimos a los principios de psicología Gestalt, en realidad nos estamos refiriendo a la teoría y psicología de las formas, de su figura y su estructura y cómo nos afecta a nivel cognitivo y visual Gestalt proporciona un marco de trabajo para comprender cómo funciona la percepción visual y cómo crear elementos, componentes y estructuras que influencien

Semejanza o Similitud

Figura y Fondo

Tendencia a ver un objeto separado de lo que le rodea

01

05

A + similitud entre los objetos, + coherencia total

Simetría y Orden

Prägnanz (buena figura). Los elementos que cuentan con simetría y orden, son también percibidos como parte del mismo grupo.

Continuidad

02

06

Guiar la mirada

Cierre

Dirección Común

03

07

Tendemos a cerrar espacios (logos)

Patrón o flujo en la misma dirección

04

Proximidad

Unir elementos que estén o no próximos entre sí.

Aparición

La idea de aparición surge cuando se percibe un objeto y le damos una interpretación a partir de la información previa que ya conocemos.

01

Cosificación

02

Ideas destacadas

Rellenar huecos (espacios negativos)

Multiestabilidad

03

Interpretamos objetos ambiguos en más de una forma. Nuestros cerebros van de un lado a otro buscando la certeza.

04

Invariabilidad

Reconocer objetos simples independientemente de su rotación, escala o traslación (perspectivas).

Leyes UX-UI

Diseño atómico

Leyes UX-UI

Ley de los 8 px

Wireframes | Tipos

Diseño gráfico | Color

Diseño gráfico | Tipografía

Diseño gráfico | Moodboards

Arquitectura de la Información I

09

Sesión

Moodboards + Arquitectura de la información I

Diseño gráfico

Color

vs

Productos físicos Cian, Magenta, Amarillo y Key (negro) Emplea la "oscuridad" para mezclar colores Sistema es más sencillo para estandarizar el espectro de colores disponibles en impresión (aunque algunas imprimen en RGB) Se puede calibrar y crear colores estándar en cada máquina = consistencia de color

• Branding: Tarjetas empresariales, pegatinas, letreros, etc.
• Publicidad: vallas, carteles, volantes y folletos.
• Merchandising: polos, camisetas, sombreros, tasas, entre otros.

Productos digitales Rojo, Verde y Azul Emplea la luz para mezclar colores, variando la intensidad Facilidad para variar y controlar la saturación, vibración y sombreado cambiando los tres colores de origen

• Diseño web
• Redes sociales
• Contenido digital

No se debería utilizar formatos TIFF, EPS, PDF Y BMP con RGB, ya que no son compatibles con este formato

Diseño gráfico

Tipografía

Tipografías

No hay reglas, hay recomendaciones

• Estilo
• Legibilidad
• 2 en total (textos principales, textos secundarios)
• Versiones variables (con el mayor número de formato)
• Observa y prueba constantemente

01

Quicksand + Ubuntu

Algunas combinaciones...

02

Montserrat + Merriweather

03

Nunito + Roboto

04

Oswald + Merriweather

Combinaciones de tipografías

Librerías de tipografías

Diseño gráfico

Estilos

Realismo

01

Fotos como enfoque principal- Transparencia en la oferta: "vendo lo que ves"

Estilos gráficos I

Fuentes

02

Color + fuentes tipográficas

Flat design

03

Imágenes y gráficos 2D, se pueden superponer

Isométrico

04

Imñagenes y gráficos 3D con perspectiva 3D

A mano alzada

01

Ilustración (iPad Pro, Surface Pro, etc.)

Estilos gráficos II

Neumorfismo

02

Profundidad con sombras

Retro

03

Bordeado, colores pastel, etc.

Código

04

Tipografía y elementos

3D

01

Ilustraciones 3D

Estilos gráficos III

Degradados

02

De retro a moderno

Orgánico

03

Tipografía, formas, composición etc.

...

Etc.

Moodboards

Aplicación

Moodboard

Panel/collage de inspiración base

• Tipografía
• Colores
• Referencias (ficticias y/o reales)
• Fotografías (inspiración)
• Estilo gráfico (ilustraciones)

Moodboards express (10')

App

Web

De música, moderna, 3D, tríada de colores

De deporte (yoga), retro, con fotografías

App

Web

De viajes, fotografías, colores análogos

De venta de productos de farmacia, neumorfismo, colores complementarios

RETO

Crea el moodboard de tu proyecto final

PRÁCTICA

Arquitectura de la información

¿Qué es?

" La arquitectura de la información es la práctica de decidir cómo organizar las partes de algo para que sea comprensible"

Information Architecture Institute

" La AI ayuda a nuestros usuarios a entender dónde están, qué han encontrado, qué pueden esperar y qué hay alrededor. Ayudamos a nuestros clientes a entender qué es posible"

Peter Morville, Architecture for the World Wide Web (1998)

¿Qué es?

• Disciplina que se dedica a la organización, disposición y estructuración de la información y de todos los elementos que conforman nuestro producto o servicio digital.
• Determina los contenidos y las funcionalidades del producto, facilitando el acceso a los mismos mediante diferentes sistemas.
• Diagrama jerárquico: taxonomía a través de la agrupación de contenidos relacionados.

• Ayudar al usuario a entender dónde se encuentra y que tiene a su alrededor.

• Facilitar la toma de decisión del usuario.
• Planificar y prever futuras modificaciones y el crecimiento del producto.

Intuitiva

Aprendida a manejar en un corto periodo de tiempo.

Flexible

Apoyando la realización de tareas para los diferentes perfiles de usuario y diversas variables en el contexto de uso actual.

Consistente

Permitiendo predecir el comportamiento del sistema durante la interacción.

Escalable

Orientando el crecimiento de los contenidos según un modelo establecido, en lugar de hacerlo por “apilamiento” de ítems en los menús.

AI | Modelo mental

• Un modelo mental es un mecanismo del pensamiento mediante el cual un ser humano intenta explicar cómo funciona el mundo real.
• ¿Cómo organizar la información? De forma cronológica, por temas, por tareas, por jerarquía, etc.

• Los usuarios debido al modelo mental idenxfican de forma fácil y rápida la información cuando se usa un modelo de organización jerárquico.

Sistemas de organización

01

Organizar el contenido en grupos según criterios (orden alfabético, tema, etc.)

Anatomía

Sistemas de etiquetado (taxonomía)

02

La Arquitectura de la Información está compuesta por una serie de sistemas que también debemos configurar

Terminología del sistema y función de cada elemento. Identificar las palabras de búsqueda de información (encabezados, palabras clave, imágenes) para que el sistema las identifique

Sistemas de navegación

03

Ordenar y agrupar el contenido para recorrerlo de la forma más efectiva posible.

Sistemas de búsqueda

04

Localizar la información según criterios. Conifguración: qué Indexar, precisión dar en resultados, el acceso a ellos y patrones de asistencia.

Estructuras jerárquicas

01

Plasmar las estructuras primero en algún diagrama para poder visualizarla

Metodologías

Wireframes

02

Metodologías que utiliza la Arquitectura de la Información

Modelo o prototipo que representa la vista del usuario de forma esquemática

Taxonomía

03

Nombrar los contenidos y su forma de agruparse: tarjetas con la información y nombrarlas a medida que se van clasificándo

Inventario de contenido

04

Documentar todo el contenido para no perder la noción del contenido

Proceso

Pasos para crear la AI de un proudcto digital

01

02

03

04

05

Inventario inicial

Agrupar

Navegación inicial

Diagrama de flujo

Diagrama avanzado

Reflejar todo lo anterior en un mapa

Agrupa las funcionalidades para ir definiendo su ubicación y jerarquía

Ullamcorper suscipit lobortis nisl ut aliquip

Identifica todo lo que quieres añadir (funcionalidades, ubicación, etc.)

Ullamcorper suscipit lobortis nisl ut aliquip

Proceso | Inventario inicial

Identificar las funcionalidades que tendrá el producto digital

• MoSCoW

Inventario inicial

Sobre tu producto digital...

Define las funcionalidades principales

RETO

Proceso | Agrupar

Definir el funcionamiento con explicaciones

Agrupar

Sobre tu producto digital...

• Agrupa las funcionalidades principales
• Define el detalle de las mismas ¿cómo van a afectar a tu producto?

RETO

Partes de una app

AI | Proceso

10

Sesión

Arquitectura de la información II

Productos digitales

Partes de una web/app

Splash Screen

01

Pantalla de carga

Partes de una app

Estructura básica

Status BarNavigation Bar Tab Bar / Toolbar Home indicator

02

Split Screen

03

División de pantalla

On Boarding

04

Presentación funcionamiento principal de la app

Arquitectura de la información

Proceso

Proceso | Navegación inicial

Crear diagramas que indiquen los procesos principales que el usuario tendrá que llevar a cabo

• Testear los flujos con los usuarios para la toma de decisiones con cardsorting

Navegación inicial

Sobre tu producto digital...

• Define las líneas de navegación principales en tu producto
• Identifica alguna que tenga mayor complejidad o el flujo general, y crea un testeo por cardsorting para poder definir aún más su funcionamiento
• Haz un testeo con tus compañerxs
• Aplica los cambios que veas conveniente

RETO

Proceso | Diagrama de flujo

Una vez realizado el mapa de navegación principal, pasamos a crear un diagrama de flujo que conecte todo el contenido del producto digital

Diagrama de flujo

Sobre un producto ficticio...

• Crea un diagrama de flujo sobre el ejemplo
• Utiliza las siguientes pantallas, ten en cuenta la información que te da el menú inferior
• Ojo! El diagrama solo debe mostrar el proceso general, sin dar detalles de la estructura del contenido en cada pantalla

RETO

Diagrama de flujo

Sobre tu producto digital...

• Crea el diagrama de flujo de tu producto digital

RETO

AI | Proceso

Wireframes | Low-fi

11

Sesión

Arquitectura de la información III

Arquitectura de la información

Proceso

Proceso | Diagrama de flujo avanzado

• Detallar el contenido de los Wireframes
• En orden descendente (cuando se trata de mobile), se indican los elementos
• Notas de notificaciones y popups extras
• Marcar los elementos clickables (color y/o iconos)

Diagrama de flujo avanzado

Sobre un producto ficticio...

• Crea un diagrama de flujo avanzado sobre el ejemplo
• Utiliza las siguientes pantallas, ten en cuenta la información que te da el menú inferior
• Ojo! En este caso el diagrama debe mostrar el detalle de la composición de las pantallas, y marcar aquellos elementos que sean clickables (con color y/o iconos)

RETO

Diagrama de flujo

Sobre tu producto digital...

• Crea un flujo de navegación avanzado sobre tu producto

RETO

Diseñar Aquitectura de Información

Sobre tu producto digital...

• Entrega la arquitectura de información que hayas desarrollado sobre tu producto digital
• La entrega debe estar compuesta como mínimo por el Diagrama de flujo avanzado

Cuanto antes realices la entrega, antes te será más fácil hacer las siguiente (como la creación de los wireframes low-fi)

PRÁCTICA

12

Sesión

Arquitectura de la información IV

💊 | 4. Extensiones Chrome

Wireframes

Desarrollo

Wireframes Low-Fi

Sobre tu producto digital...

• Entrega los wireframes low-fi que hayas desarrollado basándote en la arquitectura de la información de tu producto digital
• Cuanto antes realices la entrega, antes te será más fácil hacer las siguiente (como la creación de los wireframes high-fi)

PRÁCTICA

13

Sesión

Guías de estilo, sistemas de diseño I

A diferenciar

UI Kit

Sistema de diseño

Guía de estilo

UI Kit

¿Qué es?

¿Qué es?

• Elementos (kit) gráficos preparados para utilizar en el diseño de interfaces de usuarios (UI)
• Botones, formularios, iconos, barras de navegación (menús), tarjetas, carruseles, tablas, etc.

Guías de estilo

¿Qué es?

¿Qué es?

Documento: Guía de estilos o Style Guide

• Si a un UI Kit le agregamos:
• Estilos gráficos
• Instrucciones para el uso de colores, tipografías, retículas y otros elementos del sistema

Sistemas de diseño

¿Qué es?

¿Qué es?

• Sistema completo de diseño, llamado habitualmente Design System (DS)

• Conjunto de principios, protocolos y directrices de marca (branding) y accesibilidad
• Objetivos y propósitos del proyecto (foundations), fragmentos de códigos, patrones de diseño y otros archivos descargables
• Facilitan el desarrollo consistente de un producto digital
• Mantiene alineado al proyecto con los propósitos generales de la empresa

Beneficios

Agilizan el desarrollo

Escalable

Inicialmente es una inversión de tiempo, pero a cambio de poder utilizar los mismos recursos durante el proceso de diseño y desarrollo

Modularizan el contenido (atómico) Fflexible y mantenerse vivo a largo plazo El propio sistema puede modificarse y todo está automatizado

Iteraciones ágiles

Mantener la coherencia

Automatización

Establece patrones, reglas y prácticas

Alineamiento del equipo

Lenguaje claro y consistente: comúnÚnica fuente de componentes y documentación de los elementos

Sistémico

01

Patrones y reutilización de elementos. Coherencia, cohesión. Agiliza procesos de creación y mantenimiento.

Reticular

02

Principios

Sistema de proporciones definido, para armonizar y organizar el conjunto.

Condiciones que un Sistema de Diseño debe cumplir

Racional

03

Basado en decisiones lógicas y razonadas.

Estético

04

La calidad estética del diseño repercute en la utilidad y usabilidad de los productos.

Comprensible

04

Productos autoexplicativos.

13

Sesión

Guías de estilo, sistemas de diseño II + Diseño smart watch

Crear Style Guide Document

Crea un documento de trabajo

Trabajaremos ya todo en un mismo documento, donde tendréis que crear diferentes páginas

• Arquitectura de la información
• Wireframes Low-Fi
• Styles
• Components
• Wireframes High-Fi
• Prototipo
• Indicaciones desarrollo

RETO

Página Styles

• Tipografía
• Colores
• Sombreado
• Grids y breakpoints

Textos / Tipografía

GOOGLE FONTS

Define la fuente

Entre 1 y 2 (primario, secundario)

Material design

Define los tamaños

• H1 (títulos)
• H2 (subtítulos)
• Label (etiquetas)
• Caption (comentarios)
• Body (cuerpo de texto)

RETO

Color

Material design

Material-UI

Define los colores principales

Primarios: no más de 3 Secundarios: CTA

Define los demás colores

• Textos Background: fondo de elemento
• System: fondo de la interfaz y/o frame (tema: claro u oscuro)

RETO

Página Componentes

• Componentes utilizados en tu app

Estilos de componentes: Design System

RETO

Color

Listado de componentes

Copia, pega, modifica y mejora

Selecciona los componentes que vayas a usar en tu producto digital (de momento solo del listado)

• Botones de acciones principales (CTA)
• Botones de acciones secundarias
• Checkboxes
• Cards
• Chips
• Search
• Navigation Bar

• Mueve los componentes a tu Style Guide Document y aplica los estilos que ya has definido:
• Tipografía
• Colores
• Bordes (¿son rectos, redondeados?)
• Etc.

RETO

Smart Watches

Diseño UI

Colores y contraste

01

Mayor accesibilidad, brillo y diferenciación. Fondos

Recomendaciones

Formas y espacio

02

El diseño de smart watches = pensar en sencillez, MVP y pequeño

Mayor adaptabilidad al espacio de la pantalla

Priorizar

03

Seleccionar las funcionalidades principales (MVP) + microinteracciones

Textos

04

Tamaños y fuentes legibles, accesibles y sencillas

Diseño UI para smartwatches

Diseña los wireframes High-Fi

Diseña rápidamente un app fitness para smart watch con fondo negro:

Pantalla 1: Rutina de hoy

• Título ("Comienza una rutina")
• Card con el título de la rutina 1
• Card con el título de la rutina 2
• Card con el título de la rutina 3

Pantalla 2: Ejercicio

• Título (parte del cuerpo que se está trabajando)
• Hora actual
• Reloj timming cuenta atrás (Relax time, 60 seconds)
• Número de ejercicios restantes (2/10)

• Botón atrás (+ slide a la izquierda)

RETO

14

Sesión

Landing Pages + Wireframes alta fidelidad I

Crea una landing page

Crea la landing page de tu producto

• Adapta el contenido, ¿qué bloques quieres que tenga?
• Adapta el texto y lenguaje, ¿qué vende y aporta tu producto?
• Adapta tu corporativa

RETO

¿Dónde estamos?

Un breve repaso

Design Sprint

• Style Guide animation
• Wireframes High-Fi
• Wireframes animation

• App flow
• AI (diagramas)

• Wireframes Low-Fi
• Moodboard
• Style Guide
• Landing Page

• Copywriting

• Insights
• User persona
• MoSCoW

• Benchmarking
• Business Model Canvas

• Entrevistas
• Mapa de calor
• Seguimiento oculat

• Insights
• Aplicar los cambios
• Identificar futuribles

• Desk Research

• Entrevistas

Wireframes High-Fi

Alta fidelidad

Inputs / Text fields

01

Campos de texto donde el usuario inserta información(formularios)

Tipos de componentes

Searchbar

02

Campos de registro y formularios

Text field especifico para búsquedas

Checkboxes

03

04

Chips

Bottom nav bar

01

Barra de aplicaciones inferior con cuatro botones de iconos y un FAB

Tipos de componentes

Navigation bar

02

Navegación

Barra de navegación

Nav drawer

03

Nav rail

04

Tamaños y fuentes legibles, accesibles y sencillas

Tipos de componentes

• Inputs / text fields

15

Sesión

Wireframes alta fidelidad II

Productos digitales

Partes de una web/app

Splash Screen

01

Pantalla de carga

Partes de una web

Estructura básica

Status BarNavigation Bar Tab Bar / Toolbar Home indicator

02

Split Screen

03

División de pantalla

On Boarding

04

Presentación funcionamiento principal de la app

Splash Screen

01

Pantalla de carga

Partes de una web-app

Estructura básica

Status BarNavigation Bar Tab Bar / Toolbar Home indicator

02

Split Screen

03

División de pantalla

On Boarding

04

Presentación funcionamiento principal de la app

Splash Screen

01

Pantalla de carga

Partes de una landing page

Estructura básica

Status BarNavigation Bar Tab Bar / Toolbar Home indicator

02

Split Screen

03

División de pantalla

On Boarding

04

Presentación funcionamiento principal de la app

¡Muchas gracias!

Guada Romero Diseñadora UX-UI