Presentación realizada en el #webcat Barcelona de Enero del 2012 Autora: Glòria Langreo (@glorialangreo)

1. Cocinando Iconos
(para todos los públicos)
GLÒRIA LANGREO
@glorialangreo
gloria.langreo@gmail.com

2. Necesitamos un... SÍMBOLO ICONO PICTOGRAMA
IDEOGRAMA
ARBITRARIOS

3. Pictograma
Símbolo que se parece a un objeto físico
Trasciende al idioma
Jiahu (china) 7000ac
Ideograma
Símbolo que representa una idea

4. Símbolos arbitrarios
Se asumen por convención
Pictos © Glyphish ©

5. Símbolos arbitrarios
Se asumen por convención
Arbitrarios
(Por caducidad)
Pictos © Glyphish ©

6. Iconos
Favicons
Picogramas,
Ideogramas,
Símbolos arbitrarios
Iconos de
Emoticonos
aplicaciones

7. Pictogramas, Ideogramas, Símbolos
Informan, traducen, advierten, y nos ayudan a encontrar el camino

8. El abuelo
Gerd Arntz, (1900-1988)
w/ Otto Neurath (1882-1945)
Isotipos
Asuntos sociales en discusión
relacionados con la vivienda, la salud y
la economía después de la I Guerra
Mundial

9. El padre
Norm Cox, 1982
Xerox Star «8010 Star Information System»

10. La madre
Susan Kare, 1984
Mac OS classic

11. Decorativos JoliCloud ©

12. Guiar al usuario No hacer pensar
Skype ©

13. Manos a la obra

14. Metáfora Encontrar un concepto que represente la idea o la acción
Google Images Google ©
The noun project The Noun Project ©
Diccionario de
Símbolos
Juan Eduardo Cirlot
Ed. Siruela
Ed. Siruela © Icon Finder Icon Finder ©

15. Convenciones
¿Existe una convención? ¡Úsala!
VS

16. El contexto

17. Ilustración: Arthur van Kruining ©
El contexto

18. El contexto
Cheesecake pudding gingerbread.
Chocolate bar icing marzipan candy canes
sesame snaps tart topping. Wafer muffin
pudding oat cake ice cream tart. Dessert
dragée tart powder liquorice liquorice.
Pastry croissant gummi bears biscuit
gummies gummi bears gingerbread. Jelly-
o dessert chocolate bar carrot cake.
Gummies macaroon dessert sugar plum
dragée. Cupcake wafer bonbon jelly beans
apple pie. Pudding oat cake gingerbread
tiramisu. Sugar plum gummies lollipop. - más contenido
Tootsie roll tootsie roll toffee faworki - suscribirse, unirse a un grupo
- añadir
sugar plum pastry icing cookie - suma
marshmallow. Marshmallow cookie ice - crear
- ...
cream sweet dessert.
Leer más
Youtube © Google © Spotify ©

19. Susan Kare ©
Sketch

20. Iconos contiguos
Diseña los iconos al lado de sus compañeros, para asegurar su coherencia
VS
Pictos ©

21. Estética
VVAA http://iosicongallery.com/ ©
VS
Microsoft ©
Metro UI MAC OS
Content first Mundo Real™

22. El color importa
Puede cambiar el significado de un símbolo

23. El color importa
Puede cambiar el significado de un símbolo
Consistencia
Un único símbolo por cada concepto.
Lanyrd ©

24. Testear
Renfe ©
- Corre hacia la izquierda y hacia abajo
- Dibuja unas líneas con el martillo láser en el cistal
- Acarícialo hacia ambos lados con la mano derecha
- Arrastra la pared con fuerza

25. Testear con tanta gente como puedas

26. Testear con diferentes culturas
Bandera de Irán
Chilocco Indian Agricultural School, United States Department of
the Interior ©

27. Sobreuso
Renfe ©

28. Sobreuso
Renfe ©

29. Sobreuso esconder
Twitter ©
Imagen: Laura Junger & Xaver Xylophon ©
Player: Vimeo ©

30. Sobreuso reducir color
Flickr ©
Google ©

31. Sobreuso Estilos del mismo icono dependiendo de la relevancia
Facebook ©
Google ©

32. Medidas
Estándares 16x16, 32x32, 64x64, etc.
Morcha ©

33. Medidas
Otros 16x16 (favicon), 57x57 (iPhone) 72x72 (iPad),114x114 (iPhone 4)
Mailchimp ©

34. Medidas
No escalar, reinterpretar
Mailchimp ©
El Butano Popular ©

35. ¡Gracias!
GLÒRIA LANGREO
@glorialangreo
gloria.langreo@gmail.com

36. Todas las imagenes que acompañan la presentación son obra de Gerd Arntz