1 iconos diseño gráfico de la iu – imagenes definición pequeña imagen gráfica que representa...

1

Iconos

Diseño Gráfico de la IU – IMAGENES

DefiniciónPequeña imagen gráfica que representa unobjeto manipulable por el usuario.

Ventajas en el uso de iconos:• Requiere menos espacio que las palabras• Más rápido de reconocer para el usuario • En gral. significan lo mismo en varios idiomas

Características:• Extensión de archivo: GIF (el mejor) o PNG• Tamaños más usados: 16x16, 24x24, 32x32, 48x48 px

2

Diseño Gráfico de la IU – IMAGENES

Iconos - Características de una buena familia

• Simples y bien reconocibles

No se sabe si la “E” es de “Eliminar” o “Editar”

No se sabe si la “E” es de “Eliminar” o “Editar”

No se entienden y son muy complejos

No se entienden y son muy complejos

El texto dice “Subir Archivo” y la flecha está para abajo…

El texto dice “Subir Archivo” y la flecha está para abajo…

3

Diseño Gráfico de la IU – IMAGENES

Iconos - Características de una buena familia

• Un icono puede estar formado como máximo por 3 elementos

Estos 3 ejemplos están compuestos por más de 3 elementos. Son demasiado complejos, lo cual lleva a que cuando se achica el icono no se entienda

Estos 3 ejemplos están compuestos por más de 3 elementos. Son demasiado complejos, lo cual lleva a que cuando se achica el icono no se entienda

4

Iconos - Características de una buena familia

Diseño Gráfico de la IU – IMAGENES

• Todos lo iconos están en la misma posición y dirección

El icono de ayuda está en otra perspectiva

El icono de ayuda está en otra perspectiva

El icono del sobre está rotado

El icono del sobre está rotado

5

Iconos - Características de una buena familia

Diseño Gráfico de la IU – IMAGENES

• Usan la misma gama de colores

• Usan los mismos trazos

Los iconos de este menú no comparten ni la gama de colores ni las mismas características en los trazos

Los iconos de este menú no comparten ni la gama de colores ni las mismas características en los trazos

6

Iconos – Buenos Ejemplos

Diseño Gráfico de la IU – IMAGENES

7

Iconos – Buenos Ejemplos

Diseño Gráfico de la IU – IMAGENES

8

Iconos - Buenos Ejemplos

Diseño Gráfico de la IU – IMAGENES

9

Iconos – Buenos Ejemplos

Diseño Gráfico de la IU – IMAGENES

10

Iconos - Ejemplos

Diseño Gráfico de la IU – IMAGENES

11

Diseño Gráfico de la IU – IMAGENES

Iconos – Ejemplo Uso

12

Diseño Gráfico de la IU – IMAGENES

Iconos – Buenos Ejemplos

13

Iconos – Ejemplo Universia

Diseño Gráfico de la IU – IMAGENES

14

Diseño Gráfico de la IU – IMAGENES

Iconos – Ejemplo de uso

15

Diseño Gráfico de la IU – IMAGENES

Iconos – Ejemplo de uso

16

Diseño Gráfico de la IU – IMAGENES

Iconos – Ejemplo de uso

17

Diseño Gráfico de la IU – IMAGENES

Iconos – Ejemplo de uso

18

Diseño Gráfico de la IU – IMAGENES

Iconos – Ejemplo de uso

19

Diseño Gráfico de la IU – IMAGENES

Iconos – Ejemplo de uso

20

Diseño Gráfico de la IU – IMAGENES

Iconos – Ejemplo de uso