Principios de diseño para GUI

1. Diseño Gráfico
para pantalla

2. Diseño Visual

3. Interfase Gráfica de Usuario:
En mayor medida está compuesta por botones,
gráficos, íconos y fondos.

4. Una interfase de usuario …
… de un sistema consiste de aquellos
aspectos del sistema con los que el
usuario entra en contacto,
físicamente, perceptivamente o
conceptualmente.

5. Tipos de interfases

6. Simulación o metafórica

7. Directa

8. Elementos de una GUI

9. 1. Identidad visual

10. AFICHE

11. TRAILER

12. WEBSITE

13. 2. Formato
Medios impresos
Medios digitales

14. 2. Formatos Unidad de medida en pixeles

15. 2. Iconos
Los iconos son un
método rápido y
visual para
expresar ideas y
comunicar
información.

16. 2. Iconos Apple Macintosh

17. 2. Iconos Window 8

18. 2. Iconos Android

19. 2. Iconos iOS

20. 2. Iconos Window phone

21. 2. Iconos

22. 3. Botones
y menues
de
navegación
Es necesario recordar
que los botones no
tienen solamente un
estado. Por lo general se
diseña el estado
«normal», pero también
pueden estar
presionados o
deshabilitados

23. 3. Botones y menues

24. 4. Tipografía
Como en cualquier
diseño, el objetivo de la
tipografía es conseguir
que el texto se lea con
claridad. Esto se logra
no solo con una
adecuada elección de la
fuente, sino también
gestionando su tamaño,
separación entre líneas,
ancho de columnas y
contraste visual con el
fondo.

25. 4. Tipografía
Con serif
Garamond
Bodoni
Times
Courier
Ver pdf de tipografia y
diseñadores
Sin serif
Helvética
Gill Sans
Franklin
gothic

26. 4. Tipografía
A tener en cuenta:
• Función: Títulos o texto
• Para párrafos poner entre 8 a 12 palabras
por renglón
• Interlineado que facilite la lectura,
diferencia de 2 puntos entre tamaño e
interlineado, por ejemplo 12pt va con 14pt
de interlineado
• En general se usan textos cortos y luego en
en segundo paso el texto extendido
• Tamaños sugeridos: títulos 34 px y textos
no menos de 14px

27. 4. Tipografía
Pixel fonts: tipografías para pantalla

28. 4. Tipografía
https://www.google.com/fonts
Google fonts:

29. 5. Color
• Es un fenómeno visual, físico y psicológico, captado y descifrado en
respuesta a las longitudes de onda de la luz.
La sensación de color procede de la propiedad de los objetos para absorber
y una parte de las radiaciones coloreadas de la luz blanca y reflejar otra.
Por lo tanto un objeto negro absorbe todas las radiaciones, mientras que
otro blanco reflejará todas. La sensación de color se observa entonces
debido a que hay una sustracción de una parte de la luz blanca.

30. 5. Color
Características del color
Tono: Color reflejado o transmitido a través de un objeto. Se mide
como una posición en la rueda de colores estándar y se expresa en
grados, entre 0° y 360°. Normalmente, el tono se identifica por el
nombre del color, como rojo, naranja o verde.
Saturación A veces denominada cromatismo, es la fuerza o pureza del
color. La saturación representa la cantidad de gris que existe en
proporción al tono y se mide como porcentaje comprendido entre 0%
(gris) y 100% (saturación completa). En la rueda de colores estándar, la
saturación aumenta a medida que nos aproximamos al borde de la
misma.
Brillo Luminosidad u oscuridad relativa del color y normalmente se
expresa como un porcentaje comprendido entre 0% (negro) y 100%
(blanco).

31. 5. Color
A tener en cuenta:
• Hay colores reservados que se emplean de
forma cuidadosa.
• Rojo
• Amarillo
• Verde

32. 5. Color Como fondo:
Usar colores neutros para el fondo de la pantalla (gris, beige, arena, azul)
No usar blanco y negro dado que dan mucho resplandor
Los colores de fondo deben ser contrastantes con los demás elementos
El uso de diferentes colores de fondo puede ser utilizado para diferenciar
o agrupar procesos.

33. 6. Grilla de composición
La grilla o retícula —grid en inglés— es la estructura
invisible sobre la cual se apoyan todos los elementos
visuales. Su función es la de separar cada uno de los
componentes de la interfaz en un espacio ordenado,
organizando los sitios que quedarán en blanco y
aquellos que contendrán formas

34. 6. Grilla de composición

35. 7. Análisis
1. Qué tipo de interfase utiliza?
2. Qué formato utiliza? en la pc y en el celular se comporta de la misma
manera?
3. Qué tipo de íconos posee?
4. Cuántos estados poseen sus botones?
5. Cuantos menues posee, se encuentran jerarquizados? de qué manera?
6. En relación a la tipografía, cuantas y cuales fuentes utiliza?
7. Qué características poseen? de color? tamaño? diferencian para títulos
y texto? de qué manera?
8. En relación al color, cuántos colores posee? qué tipo de contraste
tuiliza? cuantos tonos aparecen? El fondo es homogéneo?
9. Dibuje y especifique la grilla constructiva.