des icônes et des interfaces

69
Des icônes et des interfaces Desbenoit - #Dgk15Lyon

Upload: sebastien-desbenoit

Post on 25-Jun-2015

304 views

Category:

Technology


1 download

DESCRIPTION

Le support de ma présentation sur les icônes et leurs usages au digika'apéro / La Cuisine du Web du Mardi 12 mars 2013 à la Brasserie du Square à Lyon 6.

TRANSCRIPT

Page 1: Des icônes et des interfaces

Des icônes et des interfaces Desbenoit - #Dgk15Lyon

Page 2: Des icônes et des interfaces

Desbenoit - #Dgk15Lyon

Page 3: Des icônes et des interfaces

Meeting designed by Julie!a Felix from The Noun Project

Page 4: Des icônes et des interfaces

Bridge designed by Tarah Soljan from The Noun Project

Page 5: Des icônes et des interfaces

Bridge designed by Tarah Soljan from The Noun Project

Page 6: Des icônes et des interfaces

LightBulb designed by Jean-Philippe Cabaroc from The Noun Project

Page 7: Des icônes et des interfaces

LightBulb designed by Jean-Philippe Cabaroc from The Noun Project

Page 8: Des icônes et des interfaces

LightBulb designed by Jean-Philippe Cabaroc from The Noun Project

Icône = Pictogramme + Style + Contexte

Page 9: Des icônes et des interfaces

Les icônes, c’est bien.

Angel designed by Luis Prado from The Noun Project

Page 10: Des icônes et des interfaces

Accélérer la compréhension

Angel designed by Luis Prado from The Noun Project

Page 11: Des icônes et des interfaces

« 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

Page 12: Des icônes et des interfaces

Angel designed by Luis Prado from The Noun Project

Page 13: Des icônes et des interfaces

Favoriser la mémorisation

Memory designed by Anne-Marie Nguyen from The Noun Project & Angel designed by Luis Prado from The Noun Project

Page 14: Des icônes et des interfaces

Memory designed by Anne-Marie Nguyen from The Noun Project & Angel designed by Luis Prado from The Noun Project

Page 15: Des icônes et des interfaces

Faciliter la navigation

Shopping Cart designed by Ulrich Pohl from The Noun Project - Angel designed by Luis Prado from The Noun Project

Page 16: Des icônes et des interfaces

Shopping Cart designed by Ulrich Pohl from The Noun Project - Angel designed by Luis Prado from The Noun Project

Page 17: Des icônes et des interfaces

Shopping Cart designed by Ulrich Pohl from The Noun Project - Angel designed by Luis Prado from The Noun Project

Page 18: Des icônes et des interfaces

Homogénéiser l’interface

designed by UN - OCHA & Angel designed by Luis Prado from The Noun Project

Page 19: Des icônes et des interfaces

designed by UN - OCHA & Angel designed by Luis Prado from The Noun Project

Page 20: Des icônes et des interfaces

Bridge designed by Tarah Soljan from The Noun Project

Page 21: Des icônes et des interfaces

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 ! »

Page 22: Des icônes et des interfaces
Page 23: Des icônes et des interfaces

Bridge designed by Tarah Soljan from The Noun Project

Page 24: Des icônes et des interfaces

Les icônes, c’est mal.

Devil designed by Luis Prado from The Noun Project

Page 25: Des icônes et des interfaces
Page 26: Des icônes et des interfaces
Page 27: Des icônes et des interfaces

Ce n’est pas indispensable.

Devil designed by Luis Prado from The Noun Project

Page 28: Des icônes et des interfaces

Meringue designed by Allesandro Suraci from The Noun Project & Devil designed by Luis Prado from The Noun Project

Page 29: Des icônes et des interfaces

Une icône n’est pasune illustration.

Devil designed by Luis Prado from The Noun Project

Page 30: Des icônes et des interfaces

Devil designed by Luis Prado from The Noun Project

Page 31: Des icônes et des interfaces

Le concept

Devil designed by Luis Prado from The Noun Project

Page 32: Des icônes et des interfaces

“It’s a trap”

Page 33: Des icônes et des interfaces

Les pièges du sens

Devil designed by Luis Prado from The Noun Project

Page 34: Des icônes et des interfaces

Devil designed by Luis Prado, Plam Tree designed by Jouko Luhola from The Noun Project

Page 35: Des icônes et des interfaces

Me!re les icônes dans le bon sens

Devil designed by Luis Prado from The Noun Project

Page 36: Des icônes et des interfaces

Compass designed by William Hollowell from The Noun Project

Page 37: Des icônes et des interfaces

Crash test dummy designed by Luis Prado from The Noun Project

Les indispensables

tests

Page 38: Des icônes et des interfaces

Crash test dummy designed by Luis Prado from The Noun Project

Présenter le contexte

Page 39: Des icônes et des interfaces

Crash test dummy designed by Luis Prado from The Noun Project

Une interface avecdes pictogrammes

sans libellés

Page 40: Des icônes et des interfaces

Crash test dummy designed by Luis Prado from The Noun Project

Montrer 10 secondes

Page 41: Des icônes et des interfaces

Crash test dummy designed by Luis Prado from The Noun Project

Collecter les réponses

Page 42: Des icônes et des interfaces

Crash test dummy designed by Luis Prado from The Noun Project

Demander à nouveauavec la maque!e

sous les yeux

Page 43: Des icônes et des interfaces

Happiness designed by Mailchimp from The Noun Project

Les bons

choix

Page 44: Des icônes et des interfaces

Happiness designed by Mailchimp from The Noun Project

Page 45: Des icônes et des interfaces

Happiness designed by Mailchimp from The Noun Project

ISO 7001

Page 46: Des icônes et des interfaces

Happiness designed by Mailchimp & Thinking designed by factor[e] design initiative from The Noun Project

+ 65

- 10

Page 47: Des icônes et des interfaces

Happiness designed by Mailchimp from The Noun Project

Page 48: Des icônes et des interfaces

Happiness designed by Mailchimp & Parachute designed by Stephen Robert Hemenway from The Noun Project

Page 49: Des icônes et des interfaces

Happiness designed by Mailchimp from The Noun Project

étique!e

Page 50: Des icônes et des interfaces

Happiness designed by Mailchimp from The Noun Project

étique!e

Page 51: Des icônes et des interfaces

Happiness designed by Mailchimp from The Noun Project

étique!e

Page 52: Des icônes et des interfaces

Cannonball designed by Luis Martins from The Noun Project

Préparons

notre saut

Page 53: Des icônes et des interfaces

Cannonball designed by Luis Martins from The Noun Project

Cohérence

Page 54: Des icônes et des interfaces

Cannonball designed by Luis Martins, Hispter designed by RoseMary Wannan, Roman designed by Kelly Kieran, Colliseum designed by Marc Macrory from The Noun Project

Page 55: Des icônes et des interfaces

Cannonball designed by Luis Martins from The Noun Project

Icônes vectorielles

Page 56: Des icônes et des interfaces

Fonts designed by Andre J. Young, Vector designed by Arthur Schmi! from The Noun Project

Page 57: Des icônes et des interfaces

Cannonball designed by Luis Martins from The Noun Project

Icônes pixellisées

Page 58: Des icônes et des interfaces

Happy designed by Michael Rowe & Cannonball designed by Luis Martins from The Noun Project

Page 59: Des icônes et des interfaces

Cannonball designed by Luis Martins from The Noun Project

Alors ?

Page 60: Des icônes et des interfaces

Happy designed by Michael Rowe & Happiness designed by Mailchimp & Cannonball designed by Luis Martins from The Noun Project

Page 61: Des icônes et des interfaces

Le grand saut

Page 62: Des icônes et des interfaces
Page 63: Des icônes et des interfaces
Page 64: Des icônes et des interfaces
Page 65: Des icônes et des interfaces
Page 66: Des icônes et des interfaces
Page 67: Des icônes et des interfaces

Des icônes et des interfaces Desbenoit - #Dgk15Lyon

« Merci ! »

Page 68: Des icônes et des interfaces

Des icônes et des interfaces Desbenoit - #Dgk15Lyon

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

Remerciements express > Alice & Annabelle > ThinkInnovation : Marie-Cécile Paccard, Guillaume Verrier & Markus Gramlich > La cuisine du web / Digikaa : Fabien Tersoglio et les organisateurs de ce moment > Le train de 13h37 : Marie Alhomme, Corinne Schillinger, Philippe Alhomme, Loic Mathaud, Jérémie Patonnier > Smashing Magazine : Vitaly Friedman > WebPlatform : Chris Mills & Doug Shepers

Page 69: Des icônes et des interfaces

Des icônes et des interfaces Desbenoit - #Dgk15Lyon