Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Icones à Blend Web Mix

Icones à Blend Web Mix

Le support de ma conférence lors de Blend Web Mix 2014 à Lyon.

Sébastien Desbenoit

October 29, 2014
Tweet

More Decks by Sébastien Desbenoit

Other Decks in Design

Transcript

  1. Icônes
    Desbenoit

    View Slide

  2. Desbenoit

    View Slide

  3. Desbenoit

    View Slide

  4. Desbenoit

    View Slide

  5. Desbenoit
    Voyage dans
    les différents types
    de signe

    View Slide

  6. Desbenoit

    View Slide

  7. Desbenoit

    View Slide

  8. Desbenoit

    View Slide

  9. Desbenoit
    !

    View Slide

  10. Desbenoit
    ✝ ☪ ✡

    View Slide

  11. Desbenoit

    View Slide

  12. Desbenoit

    View Slide

  13. Desbenoit

    View Slide

  14. Desbenoit
    Pourquoi les icônes ?

    View Slide

  15. Desbenoit
    Menu ☰

    View Slide

  16. Desbenoit

    View Slide

  17. Desbenoit
    écrit + visuel = ♥

    View Slide

  18. Desbenoit

    View Slide

  19. Desbenoit

    View Slide

  20. Desbenoit
    Le contexte

    View Slide

  21. Desbenoit

    View Slide

  22. Desbenoit

    View Slide

  23. Desbenoit

    View Slide

  24. Desbenoit

    View Slide

  25. Desbenoit

    View Slide

  26. Desbenoit

    View Slide

  27. View Slide

  28. Desbenoit
    Le pictogramme

    View Slide

  29. Desbenoit

    View Slide

  30. Desbenoit

    View Slide

  31. Desbenoit

    View Slide

  32. Desbenoit

    View Slide

  33. Desbenoit

    View Slide

  34. Desbenoit
    Choisir un
    pictogramme

    View Slide

  35. Desbenoit
    - ISO (Standards)
    - OCHA (sur theNounProject)
    - Parc Naturel Américain

    View Slide

  36. Desbenoit
    Pensez usages

    View Slide

  37. Desbenoit
    Le style

    View Slide

  38. Desbenoit
    L’intégration
    technique
    passe avant tout

    View Slide

  39. Desbenoit
    Signalétique
    Distance de lecture / 200
    = hauteur du signe

    Web
    Distance de lecture / 50
    = hauteur du signe

    View Slide

  40. Desbenoit

    View Slide

  41. Desbenoit
    Quel style ?

    Reconnaitre avant tout.

    View Slide

  42. Desbenoit
    Menu ☰

    View Slide

  43. Icônes
    Desbenoit

    View Slide

  44. Bibliographie
    Desbenoit
    • Otto Neurath - « Basic by Isotype » - 1937 ;
    • Douglas Nelson, Valerie Reed, John Walling - « Pictorial superiority effect », Journal of
    Experimental Psychology: Human Learning and Memory, Vol 2(5), 523-528 - 1976 ;
    • ANSI Z535.3 - « Criteria for Safety Symbols » - 1985.
    • Françoise Gicquiaud, Véronique Maillochon - « Pratiquer la communication par
    pictogrammes et micro-ordinateur chez l’infirme moteur d’origine cérébrale sans
    langage articulé », Éd. F. Gicquiaud - 1988 ;
    • Sven Blankenberger, Klaus Hahn - « Effects of icon design on human- computer
    interaction », International Journal Man-Machine Studies, 35 - 1991 ;
    • Marina Duhamel - « Un demi-siècle de signalisation routière en France 1894-1946 »,
    AMC Éditions Presses de l’École nationale des Ponts et chaussées - 1994 ;
    • William Horton - « The Icon Book », New York : John Wiley and Sons - 1994 ;
    • Adrian Frutiger - « L’homme et ses signes », Atelier Perrousseaux - 1999 ;
    • Susan Wiedenbeck - « The use of icons and labels in an end user application program:
    an empirical study of learning and retention », Behaviour & Information technology -
    1999 ;
    • Eric Brangier, Guillaume Gronier - « Conception d’un langage iconique pour grands
    handicapés moteurs aphasiques », Université de Metz - 2000 ;
    • Brigitte Cambon de Lavalette - « La signalétique dans le réseau des déplacements
    routiers : histoire et fonction », Actes INRETS n°73 - 2001 ;
    • ISO 9186-1:2007 - « Graphical symbols – Test method » - 2007.
    • Victor Kaptelinin, Mary P. Czerwinski (2007) - « Introduction: The Desktop Metaphor and
    New Uses of Technology », pg 2 ff. in « Beyond the Desktop Metaphor: Designing
    Integrated Digital Work Environments », MIT Press - 2007 ;
    • Charles Tijus, J. Barcenilla, Brigitte Cambon de Lavalette, Jean-Guy Meunier - « The
    Design, Understanding and Usage of Pictograms », Studies in Writing - 2007 ;
    • Emmanuelle Bordon, Jean-Pierre Sautot, Pascal Vaillant - « Interprétation de
    pictogrammes : genèse d’une compétence » - 2008 ;
    • Pascal Vaillant - « Interaction entre modalités sémiotiques : de l’icône à la langue »,
    Thèse Paris XI - 1997 ;
    • « Signs for all time », Highlighting Japan - mars 2009 ;
    • Julia Turner - « The Secret Language of Signs », Slate.com - 2010 - http://
    www.slate.com/articles/life/signs/2010/03/the_secret_language_of_signs.html ;
    • Jean-François Nogier, Jules Leclerc, Thierry Bouillot - « Ergonomie des interfaces »,
    Dunod - 2011 ;
    • Lisa Fontaine, Oscar Fernández, David Middleton - « Universal Symbols in Health Care:
    Symbol Design Research Report », Hablamos Juntos - 2010 ;
    • ISO 7010:2011 - « Symboles graphiques - Couleurs de sécurité et signaux de sécurité -
    Signaux de sécurité enregistrés » -2011 ;
    • Jon Hicks - « The Icon Handbook », Five Simple Steps - 2011 ;
    • Peter Steen Høgenhaug - « Usability in Icons » - 16 mai 2011 - http://stiern.com/articles/
    usability/usability-in-icons ;
    • Chrysoula Gatsou, Anastasios Polits, Dimitrios Zevgolis - « The Importance of mobile
    interface icons on user interaction », International Journal of Computer Science and
    Applications, ! Technomathematics Research Foundation - 2012 ;
    • Jérémie Patonnier - « Un pixel n’est pas un pixel », Le train de 13h37 - 2 octobre 2012 -
    http://letrainde13h37.fr/21/un-pixel-nest-pas-un- pixel ;
    • Brian Suda - « The Era of Symbol Fonts », A List Apart - 12 mars 2013 - http://
    alistapart.com/article/the-era-of-symbol-fonts ;
    • Jesse Hicks - « 40 years of icons: the evolution of the modern computer interface », The
    Verge - 21 mars 2013 -http://www.pictogram.se.

    View Slide