interfaz de usuario - dgpc cátedra...
Post on 07-Apr-2020
7 Views
Preview:
TRANSCRIPT
Interfaz de usuarioMedio por el cual el usuario interactúa con un sistema
informático específico.
Diseñador deInterfaz de usuario
✓ Aspecto visual (look & feel)
✓ Diseño modular (Atomic Design)
✓ Maqueta (Mockup)
✓ Grillas
✓ Diseño adaptable (Responsive Design)
Metodología delDiseñador de IU
Maqueta Diseñoadaptable
Optimización
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.
Controles de entrada
Componentes de navegación
Componentes de la información Contenedores
Maqueta
Elementos de la Interfaz de usuario
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
Controles de entrada
Componentes de navegación
Componentes de la información Contenedores
Buscador
Miga de pan
Tags
Paginado
Íconos
Scrollbar
Slider
Controles de entrada
Componentes de navegación
Componentes de la información Contenedores
Notificaciones
Barra de progreso
Avisos
Cuadros informativos
Cuadros de acción
Controles de entrada
Componentes de navegación
Componentes de la información Contenedores
Acordeón
Átomo Molécula Organismo Template
Maqueta
Diseño modular
Mockup
Átomo Molécula Organismo Template Maqueta
Átomo Molécula Organismo Template Maqueta
Átomo Molécula Organismo Template Maqueta
Átomo Molécula Organismo Template Maqueta
Átomo Molécula Organismo Template Maqueta
Maqueta
Grillas
Maqueta
Grillas
Maqueta
Misma grilla, diferentes estructuras
Maqueta
Misma grilla, diferentes estructuras
Maqueta
Misma grilla, diferentes estructuras
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
¿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.
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
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)
Diseño adaptable
Grilla adaptable
320px 768px 960px480px
Diseño adaptable
Tipos de respuesta
Fluido Caída decolumna
Cambios deestructura
Pequeñoscambios
Fuera dePantalla
Fluido Caída decolumna
Cambios deestructura
Pequeñoscambios
Fuera dePantalla
Fluido Caída decolumna
Cambios deestructura
Pequeñoscambios
Fuera dePantalla
Fluido Caída decolumna
Cambios deestructura
Pequeñoscambios
Fuera dePantalla
Fluido Caída decolumna
Cambios deestructura
Pequeñoscambios
Fuera dePantalla
Fluido Caída decolumna
Cambios deestructura
Pequeñoscambios
Fuera dePantalla
Gracias!
☺
top related