Este documento presenta información sobre guías de estilo y conceptos relacionados con el diseño de interfaces gráficas de usuario. Define qué son las guías de estilo y concept boards, e indica que las guías de estilo deben ser intuitivas, sencillas, informativas y compatibles con estándares para mantener la coherencia del diseño. Además, enumera diferentes secciones que deben incluir las guías de estilo como color, tipografía, imágenes, botones e interactividad. Finalmente, propone como ejercicio final desarrollar propuestas de interf

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

2. GUÍAS DE ESTILO

3. CONCEPT BOARD definición
Herramienta de investigación visual consistente en una
articulación de palabras e imágenes ilustrativas de una idea,
un producto o de comunicación, con el fin de comunicar esa
idea a otros públicos.

6. GUÍAS DE ESTILO definición
Una Guía de Estilo tiene como objetivo mantener la
coherencia e integridad del diseño del producto, sin
importar quién esté a cargo de su administración o
actualización, ayudando a los desarrolladores a comprender
cómo debe verse el producto o previniendo errores cuando,
por ejemplo, otro equipo toma el proyecto.

7. GUÍAS DE ESTILO definición
Una buena Guía de Estilo debe cumplir con cuatro reglas
básicas: ser intuitiva, sencilla, informativa y
compatible con los estándares. De esta forma, las
interpretaciones arbitrarias quedan excluidas y sólo hay
espacio para información objetiva y de fácil uso.

10. COLOR guía de estilo
Definir colores principales,
secundarios y de fondo para
armonía y continuidad en la
comunicación.

11. TIPOGRAFÍA guía de estilo
Definir la familia de las
fuentes, el tamaño y el
color. Definir jerarquía,
tamaños y variaciones de
la tipografía dentro del
texto.

12. LENGUAJE guía de estilo
Definir el enfoque y tono
de la comunicación, el
nivel de formalidad, así
como también el
vocabulario controlado
empleado según las
audiencias.

13. IMÁGENES e ICONOGRAFÍA guía de estilo
Definir el tipo de imágenes
que utilizan (diversidad,
energía y personalidad),
los requerimientos
mínimos de tamaño y
especificaciones para
logos, marcas y el sistema
icónico.

14. BOTONES guía de estilo
Definir el tipo y
comportamiento de los
botones y menús de
navegación. Definir sus
directrices y apariencia
(colores, medidas, esquinas
redondeadas, etc.)

15. INTERACTIVIDAD guía de estilo
Definir la apariencia y
comportamiento de los
elementos interactivos o
complementarios de la
interfaz.

16. GRILLA guía de estilo
Definir la cuadrícula y el
diseño del producto
digital, determinando en
dónde se colocarán los
elementos principales.

17. Generador de Paletas de Color online
http://www.degraeve.com/color-palette/

18. Software online para Guías de Estilo
https://frontify.com/

19. AFFORDANCE definición
Directrices Visuales Google
Google Visual Assets Guidelines - Parte 1
Google Visual Assets Guidelines - Parte 2
Principios y especificaciones de Material Design
https://material.google.com/
iOS Human Interface Guidelines
https://developer.apple.com/library/ios/documentation/UserExperience/
Android User Interface Guidelines
https://developer.android.com/guide/practices/ui_guidelines/index.html
Windows Vista User Experience Guidelines
https://developer.microsoft.com/en-us/windows/desktop/design
Guías de la interfaz humana de GNOME
https://developer.gnome.org/hig/stable/

20. 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 (Concept Board).
- 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