Les icônes, qui sont-elles ? Quels sont leurs pictos ? - Paris Web 2012

Comprendre les pictogrammes et utiliser les icônes lorsque l'on est web designer : Paris Web 2012

Transcript

1. Les icônes Qui sont-elles ? Quels sont leurs pictos ? Sébastien Desbenoit
2. « Bon jour ! » Sunrise designed by Adam Whitecro from The Noun Project Réagissez sur Twi er Desbenoit
3. Il était une fois
4. Les horribles Cerne es designed by Tim Berners-Lee
5. Et ils furent heureux tout au long de leur vie. Merci Denise Jacobs
6. Favicon Paris Web designed by Association Paris-Web
7. Folder designed by Sergio Calcara from The Noun Project
8. Floppy disk designed by Venkatesh Aiyulu
9. ?
10. pictogramme + style + contexte = icône Light bulb designed by The Noun Project
11. Light bulb designed by Jean-Philippe Cabaroc pictogramme + style + contexte = icône
12. Light bulb designed by Jean-Philippe Cabaroc + Person designed by Antonis Makriyannis from The Noun Project + adaptation pictogramme + style + contexte = icône
13. Les pictogrammes mais qu’est-ce que c’est ?
14. Des formes
15. qui transme ent des idées Cardiology designed by Luis Prado from The Noun Project
16. Les pictogrammes & l’histoire
19. Heraldic Eagle designed by David Liuzzo
21. Athletitcs pictogram - Tokyo 1964 designed by Yoshiro Yamashita
22. Emergency exit - ISO 7001 designed by Yukio Ota
23. Les pictogrammes & la qualité
24. Sècheresse designed by United Nation OCHA Équilibre graphique
25. Femme enceinte, Famille designed by United Nation OCHA Cohérence
26. Identi able Energie renouvelable designed by Luis Prado from The Noun Project
27. Lisibilité Avalanche designed by United Nation OCHA
28. Death Star designed by Andrew Forrester from The Noun Project (Contexte)
29. Light bulb designed by Jean-Philippe Cabaroc + Person designed by Antonis Makriyannis from The Noun Project + adaptation pictogramme + style + contexte = icône
30. Retour vers le web
31. Les icônes, c’est bien. Angel designed by Luis Prado from The Noun Project
32. Accélérer la compréhension Angel designed by Luis Prado from The Noun Project
33. « Reconnaître une image est plus facile que de lire un texte » Angel designed by Luis Prado from The Noun Project Norman (celui qui ne fait pas de vidéos), 1990
34. Favoriser la mémorisation Memory designed by Anne-Marie Nguyen from The Noun Project & Angel designed by Luis Prado from The Noun Project
35. Faciliter la navigation Shopping Cart designed by Ulrich Pohl from The Noun Project - Angel designed by Luis Prado from The Noun Project
36. Homogénéiser l’interface designed by UN - OCHA & Angel designed by Luis Prado from The Noun Project
37. Quelqu’un, quelque part, un jour, mais ce n’est pas la peine qu’il se dénonce. « Trop bien, me ons plein d’icônes ! »
39. Les icônes, c’est mal Devil designed by Luis Prado from The Noun Project
40. Devil designed by Luis Prado from The Noun Project « Me ons encore plus de contenu ! »
43. A ention aux raccourcis (conceptuels) Meringue designed by Allesandro Suraci from The Noun Project & Devil designed by Luis Prado from The Noun Project
44. Ceci n’est pas une licorne Meringue designed by Allesandro Suraci from The Noun Project & Devil designed by Luis Prado from The Noun Project
45. Le contexte, ce parachute Meringue, Cupcake, Gingerbread, Cookie designed by Allesandro Suraci from The Noun Project & Angel & Devil designed by Luis Prado from The Noun Project
46. Les étique es, ces parachutes (bis) Meringue, Cupcake, Gingerbread, Cookie designed by Allesandro Suraci from The Noun Project & Angel & Devil designed by Luis Prado from The Noun Project Cupcake Cookies Meringue Pain d’épices
47. Placer les étique es
48. étique e
49. étique e
50. étique e
51. Rythmer : oui ! Illustrer : non ! Paycheck from Icon nder & Devil designed by Luis Prado from The Noun Project
52. « Il y a quelqu’un ? quelqu’un ? quelqu’un ? quelqu’un ? » Devil designed by Luis Prado from The Noun Project
53. Paycheck from Icon nder & Angel & Devil designed by Luis Prado from The Noun Project Di érencier les icônes des illustrations
54. Cookbooks.com & Angel & Devil designed by Luis Prado from The Noun Project Di érencier les icônes des illustrations
55. Ce n’est pas le visuel qui fait l’icône, c’est l’usage Cookbooks.com & Angel & Devil designed by Luis Prado from The Noun Project
56. Incohérence : acte I Devil designed by Luis Prado from The Noun Project
57. « - Je t’aime. - Ce n’est pas réciproque. » Partager Share designed by Thomas Le Bas from The Noun Project & Devil designed by Luis Prado from The Noun Project
58. L’art de choisir ses icônes Share designed by Thomas Le Bas from The Noun Project & Devil designed by Luis Prado from The Noun Project 1. Signi cation 2. Choix 3. Test 4. Go / No Go
59. Les « packs » d’icônes
60. IT’S A TRAP
61. Les « packs » d’icônes
62. Incohérence : acte II Devil designed by Luis Prado from The Noun Project
63. « Un hipster dans mon peplum ? mais pourquoi ?» Meringue, Cupcake, Gingerbread, Cookie designed by Allesandro Suraci & Angel & Devil designed by Luis Prado
64. Pensez au style global ! Meringue, Cupcake, Gingerbread, Cookie designed by Allesandro Suraci & Angel & Devil designed by Luis Prado
65. Des icônes illisibles Paycheck from Icon nder & Devil designed by Luis Prado from The Noun Project
66. Travaillez en taille réelle ! Paycheck from Icon nder & Angel & Devil designed by Luis Prado from The Noun Project
67. Les polices d’icônes
68. Le SVG
69. Et pour les petits ? Share designed by Thomas Le Bas from The Noun Project
70. Universalité Angel designed by Luis Prado from The Noun Project
71. Barrière de la langue Translation designed by Jeremy Good from The Noun Project
72. Contexte socio-culturel Gangnam style designed by Arjun Mahanti from The Noun Project
73. Contexte psychique Mental health designed by Jack Biesek, Gladys Brenner, Margaret Faye, Healther Merri eld, Kate Keating, Wendy Olmstead, Todd Pierce, Jamie Cowgill & Jim Bolek
74. Une icône “forever alone” ? pensez alternatives Angel designed by Luis Prado from The Noun Project
75. Après l’orage Éclair designed by Riyalazi from The Noun Project
76. Home - page d’accueil
77. Rechercher Research designed by John Caserta from The Noun Project
78. Zoom ? Research designed by John Caserta from The Noun Project < >
79. Zoom ? Research designed by John Caserta from The Noun Project +
80. Listes ?
81. Paragraphe justi é ?
82. Montrer la navigation ?
83. Cheeseburger ?
84. Montrer la navigation ?
85. Géolocalisation
86. Télécharger ? Download designed by Unknown designer, Pedro Lalli, Cody Lawson, Adam Whitecro from The Noun Project
87. Enregistrer ? Floppy disk designed by Venkatesh Aiyulu & Download designed by Pedro Lalli, Cody Lawson, Adam Whitecro from The Noun Project
88. Ce qui compte, ce sont les utilisateurs
89. Nous avons besoin de standards.
90. ISO : 65+ / 10-
91. ANSI : 80+ / 10-
92. W3C : Ø
93. « Merci ! » Sébastien Desbenoit Quelques sources > Cognitive artifacts. DA Norman - 1991 > The design, understanding and usage of pictograms, Tijus, Barcenilla, Cambon de Lavale e and Meunier - 2007 > Pictograms – The New Sliced Bread in Icon Design, Jenny Gemmell - 2012 > We need a standard show navigation icon for responsive web design, Andy Clarke - 2012 Crédits > Texture de fond : Subtle Dark Vertical par Cody L. disponible sur subtlepa erns.com > Police : Rooney par Jan Fromm > Marie-Cécile Paccard, Nathalie Rosenberg pour la relecture & Thomas Zilliox pour le test dans le TGV
94. « Des questions ? » Sébastien Desbenoit
95. Les icônes Qui sont-elles ? Quels sont leurs pictos ? Sébastien Desbenoit