1 iconos diseño gráfico de la iu – imagenes definición pequeña imagen gráfica que representa...
TRANSCRIPT
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