Diseño Gráficopara pantalla

Diseño Visual

Interfase Gráfica de Usuario:

En mayor medida está compuesta por botones, gráficos, íconos y fondos.

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.

Tipos de interfases

Simulación o metafórica

Directa

Elementos de una GUI

1. Identidad visual

AFICHE

TRAILER

WEBSITE

2. Formato

Medios impresos

Medios digitales

2. Formatos Unidad de medida en pixeles

2. Iconos

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

2. Iconos Apple Macintosh

2. Iconos Window 8

2. Iconos Android

2. Iconos iOS

2. Iconos Window phone

2. Iconos

3. Botonesy menuesde 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

3. Botones y menues

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.

4. Tipografía

Con serif

Garamond

Bodoni

TimesCourier

Sin serif

Helvética

Gill Sans

Franklin

gothic

Ver pdf de tipografia y diseñadores

4. TipografíaA 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

4. TipografíaPixel fonts: tipografías para pantalla

4. Tipografía

https://www.google.com/fonts

Google fonts:

5. Color

• Es un fenómeno visual, físico y psicológico, captado y descifrado enrespuesta 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.

5. ColorCaracterí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 lamisma.

Brillo Luminosidad u oscuridad relativa del color y normalmente se expresa como un porcentaje comprendido entre 0% (negro) y 100% (blanco).

5. Color

A tener en cuenta:

• Hay colores reservados que se emplean de forma cuidadosa.

• Rojo• Amarillo• Verde

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.

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

6. Grilla de composición

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.