ida workshop #3 diseño de interfaz ui
TRANSCRIPT
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úñigaEncargada de Diseño
Jaime PérezDiseñador Web
Valentina ReyesDiseñadora Web
[email protected]@[email protected]
Puedes encontrar artículos de interés en www.ida.cl/blog
WORKSHOP UIMetodología DCU
Rueda metodológica de trabajo
MÉTR
ICAS
IMPLE
MENTA
CIÓN
CONTENIDOS Y CONVERSIÓN
AI - ARQUITECTURA
DIA
GNÓSTICO Y PROPUESTA
UX
MET
ODOL
OGÍA
INVESTIGACIÓN Y ESTRATEGIA
ARQUITECTURA Y DISEÑOFRONT Y DE
SARR
OLLO
INVESTIGACIÓN CON USUARIOS
ESTR
ATEG
IA
PRODUCCIÓN
UI - INTERFAZ DE USUARIOS
2
3
4
1 A
5
B
C
1. Identidad Visual
2. Diseño de Información
3. Diseño de Interfaz
4. Resultados
5. Actividades
Índice
1. Tipografías web e iconografía.
2. Paleta cromática.
3. Tratamiento de la imagen.Identidad Visual
INTERPRETACIÓN
01
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
WORKSHOP UITipografí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
WORKSHOP UI
Paleta cromática del sitio CDECSIC
Reserva#36B349rgb(54, 179, 73)
Corporativo-dark#004A6Argb(0, 74, 106)
Corporativo#1A74BBrgb(26, 116, 187)
Corporativo-light#0DB7FFrgb(13, 183, 255)
Complementario#F9A846rgb(249, 168, 70)
C.-dark#BA561Brgb(186, 86, 27)
Gris-dark#333333rgb(51, 51, 51)
Gris#999999rgb(153, 153, 153)
Gris-light#E6E6E6rgb(230, 230, 230)
Gris-lighter#F2F2F2rgb(242, 242, 242)
Blanco#FFFFFFrgb(255, 255, 255)
01 Capítulo / Paleta cromática
WORKSHOP UI01 Capítulo / Tratamiento de imágenes
WORKSHOP UI01 Capítulo / Tratamiento de imágenes
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
WORKSHOP UIInterpretación de un wireframe
Wireframes del sitio Dulce Receta
02 Capítulo /WORKSHOP UI
WORKSHOP UIIdentificació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 /
WORKSHOP UIReconocimiento 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 /
WORKSHOP UIReconocimiento de la unidad discreta02 Capítulo /
1. Entendimiento del layout.
2. Diseño de interacciones.
3. Definición de proporciones.
4. Prototipos navegables.
Diseño de Interfaz ADAPTACIÓN
03
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.).
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/
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 obligatoriosDATOS DE LA EMPRESA
DATOS DE LA CUENTA 1. CONFIRMACIÓN3.DATOS DE LA EMPRESA 2.
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
WORKSHOP UI¡ Ojo con las proporciones!03 Capítulo /
๏ Medida base
๏ Mantener consistencia de jerarquía en diferentes dispositivos
∠Siguiente
RUT
-
Contraseña
Repetir contraseña
Todos los datos son obligatorios
DATOS DE LA CUENTA
Formulario de registro empresa bolsa de trabajo EDITEC
WORKSHOP UI¡ Ojo con las proporciones!03 Capítulo /
๏ Medida base
๏ Mantener consistencia de jerarquía en diferentes dispositivos
∠Siguiente
RUT
-
Contraseña
Repetir contraseña
Todos los datos son obligatorios
DATOS DE LA CUENTA
∠Siguiente
RUT
-
Contraseña
Repetir contraseña
Todos los datos son obligatorios
DATOS DE LA CUENTA
28px
28px
28px
28px
28px
28px
28px14px
14px
14px
14px
16px
28px 28px
14px
14px
Formulario de registro empresa bolsa de trabajo EDITEC
WORKSHOP UI
Prototipo navegable del blog de IDA desde dispositivo móvil
Prototipos navegables03 Capítulo /
1. Identidad visual.
2. Diseño de información.
3. Diseño de interfaz.
Conclusión del proceso
WORKSHOP UIConclusión del proceso
desarrolloAI
Diseño visual
Diseño deinformación
Diseño deinterfaz
UI1 2
3
1. Presentación cliente externo/interno.
2. Resultados de diseño.Resultados
04
WORKSHOP UIComparación: Tipografías04 Capítulo /
WORKSHOP UIComparación: Paleta cromática04 Capítulo /
WORKSHOP UIComparación: Call To Action04 Capítulo /
WORKSHOP UIComparación: Imágenes04 Capítulo /
WORKSHOP UIComparación: Inputs04 Capítulo /
WORKSHOP UIComparación: Entregable04 Capítulo /
Home + Plantillas Principales
(Archive, Single)
Todas las plantillas
que deben ser diseñadas
1. Presentación de la entidad y selección de material.
2. Diseño landing page simple.
3. Diseño de formulario.
ACTIVIDADES
WORKSHOP UIIntroducció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.
WORKSHOP UIIntroducción - Elección paleta cromática04 Capítulo /
#f26597rgb(242, 101, 151)
#ef4598rgb(239, 69, 152)
#eaedf5rgb(234, 237, 245)
#017e8brgb(1, 126, 139)
#a38c68rgb(163, 140, 104)
#B7B9B5rgb(183, 185, 181)
#9C9E9Brgb(156, 158, 155)
#F2F5EFrgb(242, 245, 239)
#60615Frgb(96, 97, 95)
#D3D6D1rgb(211, 214, 209)
#FFFF0Drgb(255, 255, 13)
#FF810Crgb(255, 129, 12)
#FF00C0rgb(255, 0, 192)
#02092Brgb(2, 9, 43)
#42FFA5rgb(66, 255, 165)
Paleta cromática 1
Paleta cromática 2
Paleta cromática complementaria
WORKSHOP UIIntroducció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.
WORKSHOP UIIntroducción - Elección iconos04 Capítulo /
Familia iconográfica 1 Familia iconográfica 2
i
Iconos descargados de Flaticon y Sketchappsources
WORKSHOP UI
Imágenes adquiridas mediante google
Introducción - Elección imágenes04 Capítulo /
Pack de imágenes 1
WORKSHOP UI
Imágenes adquiridas mediante google
Introducción - Elección imágenes04 Capítulo /
Pack de imágenes 2
WORKSHOP UIActividad: 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
WORKSHOP UIActividad: Diseño formulario04 Capítulo /
Diseño de formulario
45 minutos
WORKSHOP UIRecursos 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
¿Quieres éxito para tu negocio digital? Toma el camino de IDA
Conoce más en www.ida.cl