ida workshop #3 diseño de interfaz ui

www.ida.cl

WORKSHOP UI

2016

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

valentina@ida.cljaime@ida.clfernanda@ida.cl

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

-

E-mail

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

-

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

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