dise o de conos
Download
Skip this Video
Download Presentation
Diseño de íconos

Loading in 2 Seconds...

play fullscreen
1 / 21

Diseño de íconos - PowerPoint PPT Presentation


  • 168 Views
  • Uploaded on

Diseño de íconos. [ producción digital – 2012 ]. Diseño de íconos. Icono: “Simplificación visual de un proceso complejo” Steve Caplin. Ventajas: Bien diseñados pueden reconocerse más rápido que las palabras. Ocupan menos espacio en la pantalla,

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Diseño de íconos' - melissa-french


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
dise o de conos

Diseño de íconos

[ producción digital – 2012 ]

dise o de conos1
Diseño de íconos

Icono: “Simplificación visual de un proceso complejo”Steve Caplin

  • Ventajas:
  • Bien diseñados pueden reconocerse más rápido que las palabras.
  • Ocupan menos espacio en la pantalla,
  • Permiten que la interfaz pueda ser usada en diferentes regiones con distintos idiomas.
  • Enriquecen visualmente la interfaz.
dise o de conos2
Diseño de íconos

Metas:

1. Reconocer: Que tan rápida y correctamente el significado del icono puede ser reconocido.

2. Recordar: Que tan bien el significado del icono puede se recordado una vez que se ha aprendido.

3. Discriminar: Que tan bien un icono puede ser diferenciado de los otros.

dise o de conos3
Diseño de íconos

Categorías de los íconos

dise o de conos4
Diseño de íconos
  • Categorías de los íconos
  • Íconos que representan objetos:Estos son muy fáciles de diseñar. Las propiedades de los objetos pueden también representarse fácilmente, por ejemplo: la textura del objeto, el grosor de una línea, el tipo de letra etc.
  • Íconos tipo ejemplo, representan acciones o comandos:El icono comando puede representarse por un objeto que sea utilizado en el mundo real para ejecutar esta acción. Unas tijeras pueden servir para cortar alguna parte seleccionada, una brocha para pegar la parte cortada, una lupa para hacer un acercamiento a una imagen.
  • Iconos que muestran la acción: Otra forma de diseñar iconos es representando gráficamente el efecto antes y después de aplicarlo.
  • Iconos simbólicos: También es posible mostrar una acción con representaciones más abstractas, en las cuales se puede depender de conceptos específicos culturales para su comprensión.Los iconos no necesariamente tienen que ser reconocidos. Estos iconos tal vez no representen nada pero una vez memorizados podrán ser recordados y discriminados
dise o de conos5
Diseño de íconos
  • Categorías de los íconos
  • Íconos que representan objetos:Estos son muy fáciles de diseñar. Las propiedades de los objetos pueden también representarse fácilmente, por ejemplo: la textura del objeto, el grosor de una línea, el tipo de letra etc.
  • Íconos tipo ejemplo, representan acciones o comandos:El icono comando puede representarse por un objeto que sea utilizado en el mundo real para ejecutar esta acción. Unas tijeras pueden servir para cortar alguna parte seleccionada, una brocha para pegar la parte cortada, una lupa para hacer un acercamiento a una imagen.
  • Iconos que muestran la acción: Otra forma de diseñar iconos es representando gráficamente el efecto antes y después de aplicarlo.
  • Iconos simbólicos: También es posible mostrar una acción con representaciones más abstractas, en las cuales se puede depender de conceptos específicos culturales para su comprensión.Los iconos no necesariamente tienen que ser reconocidos. Estos iconos tal vez no representen nada pero una vez memorizados podrán ser recordados y discriminados
dise o de conos6
Diseño de íconos
  • Producción de íconos
  • Los iconos para computador tienen limitantes de numero de colores y de tamaño de acuerdo al sistema operativo en donde se instalen. En pc, actualmente los iconos pueden tener la extensión .png
  • Los tamaños mas comunes son: 16 X 16, 32 X 32, 48 X 48 px
  • Existen aplicaciones especiales para la creación de iconos para el sistema pc y mac:
  • MicroAngelo, o Icon Collector son conocidos editores shareware.
  • Favicon generator: Herramienta online para crear favicons: http://www.favicon.cc/
  • Icon Edit: Es shareware. Se puede hacer copy paste desde illustrator
dise o de conos7
Diseño de íconos

Conceptos: Familiaridad

Los iconos tienden a representar objetos simples y aveces anticuados para lograr mayor familiaridad con el usuario y dan la sensación de estar a nuestro alcance.

dise o de conos8
Diseño de íconos

Sistemas de íconos - Familias

Los sistemas de iconos logran dar unidad y coherencia a los distintos iconos de una aplicación y pagina al tiempo que facilitan su comprensión.

La unidad se da por alguna de estas características: trazo, color, marco y tamaño

dise o de conos9
Diseño de íconos

Sistemas de íconos - Familias

dise o de conos10
Diseño de íconos
  • Antialias:
    • Gif:Mascara Png:Canal Alfa
dise o de conos11
Diseño de íconos
  • Desarrollo de íconos:
  • Procura ofrecer variaciones: Dentro de una misma idea e ideas opuestas dentro del mismo concepto para que el usuario pueda identificar ventajas de unos frente a otros.
  • • Cuida los detalles: Pequeñas diferencias en el diseño pueden crear grandes diferencias de cara al usuario.
  • Sencillo no es simple: Un icono debe comunicar de forma clara y para ello en algunas ocasiones es necesario añadir detalles.
  • No suponer: Se debe probar.
dise o de conos12
Diseño de íconos
  • Desarrollo de íconos:
  • Sea iterativo:
dise o de conos13
Diseño de íconos

Desarrollo de íconos:

Tres iteraciones para: Desarrollo y tecnología

Se probaron con cinco usuarios bajo el metodo de pensar en voz alta (Think Aloud)

1

Representan mas el producto finalizado que la fase de desarrollo.

El trabajador connota: En construcción

dise o de conos14
Diseño de íconos

Desarrollo de íconos:

Tres iteraciones para: Desarrollo y tecnología

2

Representan hardware y no software

Representa: Tengo el poder

dise o de conos15
Diseño de íconos

Desarrollo de íconos:

Tres iteraciones para: Desarrollo y tecnología

3

  • Trueno y relámpago
  • Lo eléctrico es doloroso
  • Persona asesinada por la tecnología
  • Maquina de baile
  • Maquinaria destrozada por un rayo
  • Computadores y tecnología
dise o de conos16
Diseño de íconos

Desarrollo de íconos:

Iteraciones para: Productos y soluciones

La caja es bueno pero representa hardware.

El hombre levantando es fuerza y poder y es complejo

Computadores e ideas. Colores de SUN Micosystems

dise o de conos17
Diseño de íconos

Desarrollo de íconos:

Iteraciones para: Software de dibujo técnico

Escuadra es clara,

con transportador

se vuele confusa

Las lineas del compas

Son muy delgadas

La cinta confusa, el lapiz

muy grueso

Doble transportador

Underground

dise o de conos18
Diseño de íconos

Desarrollo de íconos:

Iteraciones para: Software de dibujo técnico

El metro es difícil de

combinar con otros

El hombre muy comun

dise o de conos19
Diseño de íconos

Desarrollo de íconos:

Iteraciones para: Software de dibujo técnico

dise o de conos20
Diseño de íconos
  • Desarrollo de íconos:
  • Ejercicio por definir
ad