interfaz de usuario - dgpc cátedra...
TRANSCRIPT
![Page 1: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/1.jpg)
![Page 2: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/2.jpg)
Interfaz de usuarioMedio por el cual el usuario interactúa con un sistema
informático específico.
![Page 3: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/3.jpg)
Diseñador deInterfaz de usuario
✓ Aspecto visual (look & feel)
✓ Diseño modular (Atomic Design)
✓ Maqueta (Mockup)
✓ Grillas
✓ Diseño adaptable (Responsive Design)
![Page 4: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/4.jpg)
Metodología delDiseñador de IU
Maqueta Diseñoadaptable
Optimización
![Page 5: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/5.jpg)
MaquetaRepresentación gráfica final de la estructura de la información, donde se revisa el contenido visual real del proyecto y se definen los componentes
estéticos del mismo de una manera estática.
![Page 6: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/6.jpg)
Controles de entrada
Componentes de navegación
Componentes de la información Contenedores
Maqueta
Elementos de la Interfaz de usuario
![Page 7: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/7.jpg)
Controles de entrada
Componentes de navegación
Componentes de la información Contenedores
Checkbox Radio Button Botones Toggle Button
Listados Input Selectores de fecha y hora
![Page 8: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/8.jpg)
Controles de entrada
Componentes de navegación
Componentes de la información Contenedores
Buscador
Miga de pan
Tags
Paginado
Íconos
Scrollbar
Slider
![Page 9: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/9.jpg)
Controles de entrada
Componentes de navegación
Componentes de la información Contenedores
Notificaciones
Barra de progreso
Avisos
Cuadros informativos
Cuadros de acción
![Page 10: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/10.jpg)
Controles de entrada
Componentes de navegación
Componentes de la información Contenedores
Acordeón
![Page 11: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/11.jpg)
Átomo Molécula Organismo Template
Maqueta
Diseño modular
Mockup
![Page 12: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/12.jpg)
Átomo Molécula Organismo Template Maqueta
![Page 13: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/13.jpg)
Átomo Molécula Organismo Template Maqueta
![Page 14: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/14.jpg)
Átomo Molécula Organismo Template Maqueta
![Page 15: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/15.jpg)
Átomo Molécula Organismo Template Maqueta
![Page 16: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/16.jpg)
Átomo Molécula Organismo Template Maqueta
![Page 17: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/17.jpg)
Maqueta
Grillas
![Page 18: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/18.jpg)
Maqueta
Grillas
![Page 19: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/19.jpg)
Maqueta
Misma grilla, diferentes estructuras
![Page 20: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/20.jpg)
Maqueta
Misma grilla, diferentes estructuras
![Page 21: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/21.jpg)
Maqueta
Misma grilla, diferentes estructuras
![Page 22: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/22.jpg)
Diseño adaptable“Surge como una estrategia para poder mostrar los
contenidos y que respondan correcta e independientemente del tipo de pantalla y dispositivo.”
Ethan Marcotte
![Page 23: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/23.jpg)
![Page 24: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/24.jpg)
¿Por qué no diseñar para todos?
✓ Perdida de tiempo y dinero.
✓ Difícil actualizar los contenidos.
✓ Si no contemplo un tamaño que mañana pueda
llegar a existir no sirve.
![Page 25: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/25.jpg)
Diseño adaptable
Jerarquías
✓ Clasificar la información(de lo más importante a lo menos relevante)
✓ Localizar lo que no es indispensable(lo que NO hace al contenido)
✓ Generar tipologías de texto
![Page 26: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/26.jpg)
Diseño adaptable
NO Pixel Perfect
✓ Pensar los elementos para ser contenidos
en una estructura variable
✓ NO a los tamaños fijos de imágenes(uso de porcentajes)
✓ NO a los tamaños de tipografías sólo en píxel(uso de em y rem)
![Page 27: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/27.jpg)
Diseño adaptable
Grilla adaptable
320px 768px 960px480px
![Page 28: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/28.jpg)
Diseño adaptable
Tipos de respuesta
Fluido Caída decolumna
Cambios deestructura
Pequeñoscambios
Fuera dePantalla
![Page 29: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/29.jpg)
Fluido Caída decolumna
Cambios deestructura
Pequeñoscambios
Fuera dePantalla
![Page 30: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/30.jpg)
Fluido Caída decolumna
Cambios deestructura
Pequeñoscambios
Fuera dePantalla
![Page 31: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/31.jpg)
Fluido Caída decolumna
Cambios deestructura
Pequeñoscambios
Fuera dePantalla
![Page 32: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/32.jpg)
Fluido Caída decolumna
Cambios deestructura
Pequeñoscambios
Fuera dePantalla
![Page 33: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/33.jpg)
Fluido Caída decolumna
Cambios deestructura
Pequeñoscambios
Fuera dePantalla
![Page 34: Interfaz de usuario - DGPC Cátedra Ocampocatedraocampo.com.ar/wp-content/uploads/2016/06/UI-y... · 2016-06-01 · Interfaz de usuario Medio por el cual el usuario interactúa con](https://reader034.vdocumento.com/reader034/viewer/2022042116/5e944211096cf048a36451d5/html5/thumbnails/34.jpg)
Gracias!
☺