Estilos de interfaz

1. Diseño GUI
Electivo Diseño de Interfaces Gráficas de Usuario
ESCUELA DE DISEÑO Y MULTIMEDIA

2. Estilos DE INTERFAZ

3. GUI estilos visuales
Al ser la interfaz el punto de contacto con el usuario debe poder transmitir
la identidad e imagen visual del producto o la organización.
La búsqueda de consistencia interna permite que el usuario perciba un
sistema visual integrado, que le hace sentido y logra mayor claridad en la
comunicación del mensaje.
Un correcto diseño visual de la interfaz permite crear una experiencia
positiva y agradable para el usuario (look & feel).

4. GUI estilos visuales
La forma en que los aspectos visuales de la interfaz son presentados, no
solo son aspectos estéticos, sino que también implica aspectos funcionales
o simbólicos.
Para lograr consistencia, las mismas convenciones y reglas deben ser
aplicadas a todos los elementos que componen el sistema:
- Los mismos tipos de elementos se muestran con características similares.
- Aquellos con diferentes tipos de comportamiento o significado tienen su
propia apariencia especial.

5. UI estilos visuales
Bruno Munari, “¿Cómo nacen los objetos?”, 1981

6. UI estilos visuales
PixelArt
- Consisten en ir constituyendo las imágenes por
medio de colores ilustrándolas pixel a pixel.
- Uso de perspectiva isométrica y no isométrica.

9. UI estilos visuales
2½ D
- Fondos fotográficos, texturas o gradientes
- Bordes de marcos con volumen o sombra
proyectada
- Botones con apariencia de volumen mediante
iluminación y brillos

14. UI estilos visuales
3D
- Representación tridimensional del espacio
interactivo.
- Manipulación directa de elementos de la
interfaz.

18. UI estilos visuales
Holográfica
- Visualización traslúcida de la
información
- Utilizado comúnmente para
HUD (Heads-Up Display)
- Puede tener aspecto 3D o 2D

25. UI estilos visuales
Realista o Skeuomórfico
- Texturas de materiales extraídos de la realidad
- Adaptación Psicológica
- Reconocimiento por experiencia.
- Función emula lo analógico

32. UI estilos visuales
Minimalismo
- Simpleza
- Fondos básicos
- Tipografía clara
- Reconocimiento intuitivo y sin esfuerzo.
- Escaso ornamento
- Uso de fotografías recortadas
- Buena adaptación a dispositivos

38. UI estilos visuales
Plano o Flat Design
- Paleta de colores limitados
- Fondos planos o con gradientes minimas
- Tipografía simple
- Grandes áreas de color
- Gráfica de apariencia vectorial
- Buena adaptación a dispositivos

44. UI estilos visuales
Material Design
- Está basado en objetos materiales.
- Son piezas colocadas en un espacio
(lugar) y con un tiempo
(movimiento) determinado.
- Es una filosofía de diseño donde la
profundidad, las superficies, los
bordes, las sombras y los colores
juegan un papel principal.

48. EJERCICIO FINAL
Desarrollar propuestas de Interfaz Gráfica de Usuario para una aplicación móvil, sitio web o
videojuego.
- Definir brevemente las características producto digital a diseñar y los conceptos
comunicacionales, emocionales y estilos visuales a trabajar.
- Definir pequeño UI Kit o Guía de Estilo de Diseño de Interfaz de Usuario
- Generar propuestas de pantallas con distintas secciones del producto digital.
- Definiciones y propuestas en un documento PDF
- Trabajo individual
ENTREGA 24.06.2016

49. AFFORDANCE definición
Directrices Visuales Google
Google Visual Assets Guidelines - Parte 1
Google Visual Assets Guidelines - Parte 2