les icônes : qui sont-elles ? quelles sont leurs pictos ?
DESCRIPTION
Comprendre les pictogrammes et utiliser les icônes lorsque l'on est web designer : Paris Web 2012TRANSCRIPT
Les icônesQui sont-elles ? Quels sont leurs pictos ?
Sébastien Desbenoit
« Bon jour ! »
Sunrise designed by Adam Whitecro! from The Noun Project
Réagissez sur Twi!er Desbenoit
Il était une fois
Les horribles Cerne!es designed by Tim Berners-Lee
Et ils furent heureux toutau long de leur vie.
Merci Denise Jacobs
Favicon Paris Web designed by Association Paris-Web
Folder designed by Sergio Calcara from The Noun Project
Floppy disk designed by Venkatesh Aiyulu
?
pictogramme+ style+ contexte= icône
Light bulb designed by The Noun Project
Light bulb designed by Jean-Philippe Cabaroc
pictogramme+ style+ contexte= icône
Light bulb designed by Jean-Philippe Cabaroc + Person designed by Antonis Makriyannis from The Noun Project + adaptation
pictogramme+ style+ contexte= icône
Les pictogrammesmais qu’est-ce que c’est ?
Des formes
qui transme!ent des idées
Cardiology designed by Luis Prado from The Noun Project
Les pictogrammes& l’histoire
Heraldic Eagle designed by David Liuzzo
Athletitcs pictogram - Tokyo 1964 designed by Yoshiro Yamashita
Emergency exit - ISO 7001 designed by Yukio Ota
Les pictogrammes& la qualité
Sècheresse designed by United Nation OCHA
Équilibre graphique
Femme enceinte, Famille designed by United Nation OCHA
Cohérence
Identi"able
Energie renouvelable designed by Luis Prado from The Noun Project
Lisibilité
Avalanche designed by United Nation OCHA
Death Star designed by Andrew Forrester from The Noun Project
(Contexte)
Light bulb designed by Jean-Philippe Cabaroc + Person designed by Antonis Makriyannis from The Noun Project + adaptation
pictogramme+ style+ contexte= icône
Retourvers le web
Les icônes, c’est bien.
Angel designed by Luis Prado from The Noun Project
Accélérer la compréhension
Angel designed by Luis Prado from The Noun Project
« 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
Favoriser la mémorisation
Memory designed by Anne-Marie Nguyen from The Noun Project & Angel designed by Luis Prado from The Noun Project
Faciliter la navigation
Shopping Cart designed by Ulrich Pohl from The Noun Project - Angel designed by Luis Prado from The Noun Project
Homogénéiser l’interface
designed by UN - OCHA & Angel designed by Luis Prado from The Noun Project
Quelqu’un, quelque part, un jour, mais ce n’est pas la peine qu’il se dénonce.
« Trop bien, me!onsplein d’icônes ! »
Les icônes, c’est mal
Devil designed by Luis Prado from The Noun Project
Devil designed by Luis Prado from The Noun Project
« Me"ons encoreplus de contenu ! »
A"ention aux raccourcis(conceptuels)
Meringue designed by Allesandro Suraci from The Noun Project & Devil designed by Luis Prado from The Noun Project
Ceci n’est pas une licorne
Meringue designed by Allesandro Suraci from The Noun Project & Devil designed by Luis Prado from The Noun Project
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
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
Placer les étique"es
étique"e
étique"e
étique"e
Rythmer : oui !Illustrer : non !
Paycheck from Icon"nder & Devil designed by Luis Prado from The Noun Project
« Il y a quelqu’un ? quelqu’un ?
quelqu’un ? quelqu’un ? »
Devil designed by Luis Prado from The Noun Project
Paycheck from Icon"nder & Angel & Devil designed by Luis Prado from The Noun Project
Di#érencier les icônesdes illustrations
Cookbooks.com & Angel & Devil designed by Luis Prado from The Noun Project
Di#érencier les icônesdes illustrations
Ce n’est pas le visuel quifait l’icône, c’est l’usage
Cookbooks.com & Angel & Devil designed by Luis Prado from The Noun Project
Incohérence : acte I
Devil designed by Luis Prado from The Noun Project
« - 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
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"cation2. Choix 3. Test 4. Go / No Go
Les « packs » d’icônes
IT’S A TRAP
Les « packs » d’icônes
Incohérence : acte II
Devil designed by Luis Prado from The Noun Project
« Un hipster dans mon peplum ?
mais pourquoi ?»Meringue, Cupcake, Gingerbread, Cookie designed by Allesandro Suraci & Angel & Devil designed by Luis Prado
Pensez au style global !
Meringue, Cupcake, Gingerbread, Cookie designed by Allesandro Suraci & Angel & Devil designed by Luis Prado
Des icônes illisibles
Paycheck from Icon"nder & Devil designed by Luis Prado from The Noun Project
Travaillez en taille réelle !
Paycheck from Icon"nder & Angel & Devil designed by Luis Prado from The Noun Project
Les polices d’icônes
Le SVG
Et pour les petits ?
Share designed by Thomas Le Bas from The Noun Project
Universalité
Angel designed by Luis Prado from The Noun Project
Barrière de la langue
Translation designed by Jeremy Good from The Noun Project
Contexte socio-culturel
Gangnam style designed by Arjun Mahanti from The Noun Project
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
Une icône “forever alone” ?
pensez alternatives
Angel designed by Luis Prado from The Noun Project
Après l’orage
Éclair designed by Riyalazi from The Noun Project
Home - page d’accueil
Rechercher
Research designed by John Caserta from The Noun Project
Zoom ?
Research designed by John Caserta from The Noun Project
< >
Zoom ?
Research designed by John Caserta from The Noun Project
+
Listes ?
Paragraphe justi$é ?
Montrer la navigation ?
Cheeseburger ?
Montrer la navigation ?
Géolocalisation
Télécharger ?
Download designed by Unknown designer, Pedro Lalli, Cody Lawson, Adam Whitecro# from The Noun Project
Enregistrer ?
Floppy disk designed by Venkatesh Aiyulu & Download designed by Pedro Lalli, Cody Lawson, Adam Whitecro# from The Noun Project
Ce qui compte, ce sont les utilisateurs
Nous avons besoinde standards.
ISO : 65+ / 10-
ANSI : 80+ / 10-
W3C : Ø
« 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
« Des questions ? »
Sébastien Desbenoit
Les icônesQui sont-elles ? Quels sont leurs pictos ?
Sébastien Desbenoit