Diseno de iconos

8,682 views
8,485 views

Published on

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
8,682
On SlideShare
0
From Embeds
0
Number of Embeds
6,453
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Diseno de iconos

  1. 1. Diseño de íconos [ Informática e internet– 2011 ]
  2. 2. Diseño de íconos <ul><li>Icono: “Simplificación visual de un proceso complejo” Steve Caplin </li></ul><ul><li>Ventajas: </li></ul><ul><li>Bien diseñados pueden reconocerse más rápido que las palabras. </li></ul><ul><li>Ocupan menos espacio en la pantalla, </li></ul><ul><li>Permiten que la interfaz pueda ser usada en diferentes regiones con distintos idiomas. </li></ul><ul><li>Enriquecen visualmente la interfaz. </li></ul>
  3. 3. 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.
  4. 4. Diseño de íconos Categorías de los íconos
  5. 5. Diseño de íconos <ul><li>Categorías de los íconos </li></ul><ul><li>Í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. </li></ul><ul><li>Í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. </li></ul><ul><li>Iconos que muestran la acción: Otra forma de diseñar iconos es representando gráficamente el efecto antes y después de aplicarlo. </li></ul><ul><li>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 </li></ul>
  6. 6. Diseño de íconos <ul><li>Categorías de los íconos </li></ul><ul><li>Í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. </li></ul><ul><li>Í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. </li></ul><ul><li>Iconos que muestran la acción: Otra forma de diseñar iconos es representando gráficamente el efecto antes y después de aplicarlo. </li></ul><ul><li>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 </li></ul>
  7. 7. Diseño de íconos <ul><li>Producción de íconos </li></ul><ul><li>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, los iconos deben tener la extensión .ico </li></ul><ul><li>Los tamaños mas comunes son: 16 X 16, 32 X 32, 48 X 48 px </li></ul><ul><li>De todos modos, existen aplicaciones especiales para la creación de iconos para el sistema pc y mac: </li></ul><ul><li>MicroAngelo, o Icon Collector son conocidos editores shareware. </li></ul><ul><li>Icon Snatcher es un interesante programa --freeware-- capaz de extraer iconos de unas colecciones con la extensión .icl, exe o dll. Puede guardar los iconos como bmp, ico, o como gif, lo que lo hace muy útil para la creación de iconos para las páginas web. </li></ul><ul><li>Icon Edit: Es shareware. Se puede hacer copy paste desde illustrator </li></ul><ul><li>Photoshop: Podemos crear iconos y guardarlos con la extension bmp, luego renombramos la extensión por ico. </li></ul>
  8. 8. 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.
  9. 9. 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, marco y tamaño
  10. 10. Diseño de íconos Sistemas de íconos - Familias
  11. 11. Diseño de íconos <ul><li>Antialias: </li></ul><ul><ul><li>Gif: Mascara Png: Canal Alfa </li></ul></ul>
  12. 12. Diseño de íconos <ul><li>Desarrollo de íconos: </li></ul><ul><li>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. </li></ul><ul><li>• Cuida los detalles: Pequeñas diferencias en el diseño pueden crear grandes diferencias de cara al usuario. </li></ul><ul><li>Sencillo no es simple: Un icono debe comunicar de forma clara y para ello en algunas ocasiones es necesario añadir detalles. </li></ul><ul><li>No suponer: Se debe probar. </li></ul>
  13. 13. Diseño de íconos <ul><li>Desarrollo de íconos: </li></ul><ul><li>Sea iterativo: </li></ul>
  14. 14. 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
  15. 15. Diseño de íconos Desarrollo de íconos: Tres iteraciones para: Desarrollo y tecnología 2 Representan hardware y no software Representa: Tengo el poder
  16. 16. Diseño de íconos Desarrollo de íconos: Tres iteraciones para: Desarrollo y tecnología 3 <ul><li>Trueno y relámpago </li></ul><ul><li>Lo eléctrico es doloroso </li></ul><ul><li>Persona asesinada por la tecnología </li></ul><ul><li>Maquina de baile </li></ul><ul><li>Maquinaria destrozada por un rayo </li></ul><ul><li>Computadores y tecnología </li></ul>
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. Diseño de íconos Desarrollo de íconos: Iteraciones para: Software de dibujo técnico
  21. 21. Diseño de íconos <ul><li>Desarrollo de íconos: </li></ul><ul><li>Tarea: </li></ul><ul><li>Representar sistema de 5 acciones simples: </li></ul><ul><li>Inicio </li></ul><ul><li>Sonido (on y off) </li></ul><ul><li>Atrás </li></ul><ul><li>Adelante </li></ul><ul><li>Editar </li></ul><ul><li>Cerrar </li></ul><ul><li>Y una acción compleja: </li></ul>

×