Este documento presenta una introducción a un taller de diseño de interfaz de usuario (UI). Explica conceptos como identidad visual, diseño de información, diseño de interfaz y resultados. Incluye ejemplos de una metodología de diseño, paletas de colores, tipografías, wireframes y prototipos. El objetivo es enseñar técnicas de diseño UI a través de la aplicación de estas a un caso real.

1. www.ida.cl
WORKSHOP UI
2016

2. WORKSHOP UI
Esta presentación fue realizada por IDA | Ideas Digitales Aplicadas para el WORKSHOP UI.
Fue preparada y desarrollada por:
Presentación de expositores
Fernanda Zúñiga
Encargada de Diseño
Jaime Pérez
Diseñador Web
Valentina Reyes
Diseñadora Web
valentina@ida.cljaime@ida.clfernanda@ida.cl
Puedes encontrar artículos de interés en www.ida.cl/blog

3. WORKSHOP UI
Metodología DCU
Rueda metodológica de trabajo
MÉTRICAS
IMPLE
MENTACIÓN
CONTENIDOSYCONVERSIÓN
AI-ARQUITECTURA
DIA
GNÓSTICO Y PROPUESTA
UX
METODOLOGÍA
INVESTIGACIÓN Y ESTRATEGIA
ARQUITECTURAYD
ISEÑOFRO
NTYDESARROLLO
INVESTIGACIÓN CON USUARIOS
ESTRATEGIA
PRODUC
CIÓN
UI-INTERFAZDEUSUARIOS
2
3
4
1
A
5
B
C

4. 1. Identidad Visual
2. Diseño de Información
3. Diseño de Interfaz
4. Resultados
5. Actividades
Índice

5. 1. Tipografías web e iconografía.
2. Paleta cromática.
3. Tratamiento de la imagen.
Identidad Visual
INTERPRETACIÓN
01

6. WORKSHOP UI
๏ Usuario enfrentado a un gran volumen de
contenidos técnicos.
๏ Paradigma: contenido “para expertos” a uno
accesible “para todos”.
Identidad Visual
Centro de Despacho Económico de Carga del Sistema Interconectado Central

7. WORKSHOP UI
Tipografía web e iconografía
Tipografías e iconografía CDECSIC
01 Capítulo /
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean m
HEADING H2
HEADING H3 SIDEBAR
HEADING H1
H3.title.featured
H3.title.simple
Encabezados Iconografía
Párrafos
Navegación .MAIN-NAVIGATION UL LI
HELP-NAVIGATION UL LI

8. WORKSHOP UI
Paleta cromática del sitio CDECSIC
Reserva
#36B349
rgb(54, 179, 73)
Corporativo-dark
#004A6A
rgb(0, 74, 106)
Corporativo
#1A74BB
rgb(26, 116, 187)
Corporativo-light
#0DB7FF
rgb(13, 183, 255)
Complementario
#F9A846
rgb(249, 168, 70)
C.-dark
#BA561B
rgb(186, 86, 27)
Gris-dark
#333333
rgb(51, 51, 51)
Gris
#999999
rgb(153, 153, 153)
Gris-light
#E6E6E6
rgb(230, 230, 230)
Gris-lighter
#F2F2F2
rgb(242, 242, 242)
Blanco
#FFFFFF
rgb(255, 255, 255)
01 Capítulo / Paleta cromática

9. WORKSHOP UI
01 Capítulo / Tratamiento de imágenes

10. WORKSHOP UI
01 Capítulo / Tratamiento de imágenes

11. 1. Interpretación de wireframe.
2. Identificación de jerarquías.
3. Reconocimiento de la unidad discreta.
Diseño de Información
APLICACIÓN
02

12. WORKSHOP UI
Interpretación de un wireframe
Wireframes del sitio Dulce Receta
02 Capítulo /
WORKSHOP UI

13. WORKSHOP UI
Identificación de Jerarquías
Wireframe del sitio Dulce Receta
Cuando hablamos de jerarquías y
funciones nos referimos a las
cabeceras, títulos, listas, imágenes,
formularios y las tipografías indican el
orden y la relevancia de cada elemento.
02 Capítulo /

14. WORKSHOP UI
Reconocimiento de la unidad discreta
Unidad discreta en el sitio Dulce Receta
La unidad discreta, es una
estructura modular, la cual debe
ser capaz de adaptarse a
diferentes elementos sin verse
afectada por el contexto.
02 Capítulo /

15. WORKSHOP UI
Reconocimiento de la unidad discreta02 Capítulo /

16. 1. Entendimiento del layout.
2. Diseño de interacciones.
3. Definición de proporciones.
4. Prototipos navegables.
Diseño de Interfaz
ADAPTACIÓN
03

17. WORKSHOP UI
Diseño de interfaz CDECSIC
¿Qué es el diseño de interfaz?03 Capítulo /
Aplicación e integración de
elementos según soportes
considerados (web, móviles, etc.).

18. WORKSHOP UI
๏ Diseño líquido
๏ Diseño adaptativo
๏ Diseño responsivo
La importancia del layout03 Capítulo /
Ver video explicativo en http://www.ida.cl/blog/diseno/diseno-web-fluido-adaptativo-responsivo/

19. WORKSHOP UI
El comportamiento del
sistema, los errores y las
instancias SE DISEÑAN.
Diseño de interacciones03 Capítulo /
Siguiente ∠
Razón social
Minería Forestal Acuícola SanitarioEnergía
Otros Separados por coma
Nombre fantasía
Rubro(s)
Giro
Dirección comercial*
*Campo obligatorio
Código postal
País Región
Ciudad
Teléfono
Comuna
Todos los datos son obligatorios
DATOS DE LA EMPRESA
DATOS DE LA CUENTA1. CONFIRMACIÓN3.DATOS DE LA EMPRESA2.
Subir logotipo
IMAGEN DE LA EMPRESA
Examinarimagen.jpg
Es necesario llenar este campo
Instancia
Error
¿Cómo se ve
desplegado?
¿Cómo se ve cuando ya
subí una imagen?
Formulario de registro empresa bolsa de trabajo EDITEC

20. WORKSHOP UI
¡ Ojo con las proporciones!03 Capítulo /
๏ Medida base
๏ Mantener consistencia de jerarquía en diferentes dispositivos
∠Siguiente
RUT
-
E-mail
Contraseña
Repetir contraseña
Todos los datos son obligatorios
DATOS DE LA CUENTA
Formulario de registro empresa bolsa de trabajo EDITEC

21. WORKSHOP UI
¡ Ojo con las proporciones!03 Capítulo /
๏ Medida base
๏ Mantener consistencia de jerarquía en diferentes dispositivos
∠Siguiente
RUT
-
E-mail
Contraseña
Repetir contraseña
Todos los datos son obligatorios
DATOS DE LA CUENTA
∠Siguiente
RUT
-
E-mail
Contraseña
Repetir contraseña
Todos los datos son obligatorios
DATOS DE LA CUENTA
28px
28px
28px
28px
28px
28px
28px
14px
14px
14px
14px
16px
28px 28px
14px
14px
Formulario de registro empresa bolsa de trabajo EDITEC

22. WORKSHOP UI
Prototipo navegable del blog de IDA desde dispositivo móvil
Prototipos navegables03 Capítulo /

23. 1. Identidad visual.
2. Diseño de información.
3. Diseño de interfaz.
Conclusión del proceso

24. WORKSHOP UI
Conclusión del proceso
desarrolloAI
Diseño
visual
Diseño de
información
Diseño de
interfaz
UI1 2
3

25. 1. Presentación cliente externo/interno.
2. Resultados de diseño.Resultados
04

26. WORKSHOP UI
Comparación: Tipografías04 Capítulo /

27. WORKSHOP UI
Comparación: Paleta cromática04 Capítulo /

28. WORKSHOP UI
Comparación: Call To Action04 Capítulo /

29. WORKSHOP UI
Comparación: Imágenes04 Capítulo /

30. WORKSHOP UI
Comparación: Inputs04 Capítulo /

31. WORKSHOP UI
Comparación: Entregable04 Capítulo /
Home + Plantillas Principales
(Archive, Single)
Todas las plantillas
que deben ser diseñadas

32. 1. Presentación de la entidad y selección de material.
2. Diseño landing page simple.
3. Diseño de formulario.
ACTIVIDADES

33. WORKSHOP UI
Introducción04 Capítulo /
¿Qué es Cordillera?
La productora nacional Streetmachine nos trae el
primer festival de música electrónica Cordillera,
made in Chile, que se realizará en La Parva,
oportunidad perfecta para aprovechar un gran
paisaje y dos jornadas de música electrónica
imperdible.
¿En qué consistirá?
Serán dos jornadas que constarán con espectáculos y
subgéneros diferentes. El evento comienza el día
viernes a las 12:00, de la mano de DJ Guti.
Público objetivo
Hombres y mujeres de 25 - 35 años, que les guste la
música electrónica.

34. WORKSHOP UI
Introducción - Elección paleta cromática04 Capítulo /
#f26597
rgb(242, 101, 151)
#ef4598
rgb(239, 69, 152)
#eaedf5
rgb(234, 237, 245)
#017e8b
rgb(1, 126, 139)
#a38c68
rgb(163, 140, 104)
#B7B9B5
rgb(183, 185, 181)
#9C9E9B
rgb(156, 158, 155)
#F2F5EF
rgb(242, 245, 239)
#60615F
rgb(96, 97, 95)
#D3D6D1
rgb(211, 214, 209)
#FFFF0D
rgb(255, 255, 13)
#FF810C
rgb(255, 129, 12)
#FF00C0
rgb(255, 0, 192)
#02092B
rgb(2, 9, 43)
#42FFA5
rgb(66, 255, 165)
Paleta cromática 1
Paleta cromática 2
Paleta cromática complementaria

35. WORKSHOP UI
Introducción - Elección tipografía04 Capítulo /
Droid Sans Google fonts (1)
abcdefghijklmñnopqrstuvwxyz
ABCDEFGHIJKLMÑNOPQRSTUVWXYZ
01234567
Merriweather Google fonts (2)
abcdefghijklmñnopqrstuvwxyz
ABCDEFGHIJKLMÑNOPQRSTUVWXYZ
01234567
3. Caviar dreams Dafont (3)
abcdefghijklmñnopqrstuvwxyz
ABCDEFGHIJKLMÑNOPQRSTUVWXYZ
01234567
Fuentes descargadas de Google Fonts y Dafont.

36. WORKSHOP UI
Introducción - Elección iconos04 Capítulo /
Familia iconográfica 1 Familia iconográfica 2
i
Iconos descargados de Flaticon y Sketchappsources

37. WORKSHOP UI
Imágenes adquiridas mediante google
Introducción - Elección imágenes04 Capítulo /
Pack de imágenes 1

38. WORKSHOP UI
Imágenes adquiridas mediante google
Introducción - Elección imágenes04 Capítulo /
Pack de imágenes 2

39. WORKSHOP UI
Actividad: Diseño landing page04 Capítulo /
Se debe definir:
๏ Paleta cromática:
๏ Familia tipográfica:
๏ Familia iconográfica:
๏ Tratamiento de imagen:
Diseño de landing page simple
45 minutos

40. WORKSHOP UI
Actividad: Diseño formulario04 Capítulo /
Diseño de formulario
45 minutos

41. WORKSHOP UI
Recursos web
๏ Craft: Herramienta de manejo de contenido (Sketch & PS). https://
www.invisionapp.com/craft
๏ Measure: Plugin para especificar dimensiones de contenido (Sketch). https://github.com/
utom/sketch-measure
๏Invision App: Herramienta para prototipados (Sketch & PS). https://
www.invisionapp.com/
๏ UXPin: Bibliografía gratuita. https://studio.uxpin.com/ebooks/
๏IDA Blog: Artículos diarios de contenidos y referencias digitales. http://www.ida.cl/blog

42. ¿Quieres éxito para tu negocio digital?
Toma el camino de IDA
Conoce más en www.ida.cl