01 03 web_expérientiel _ designer un site web

480 vues

Publié le

01 03 web_expérientiel _ designer un site web

Publié dans : Design
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
480
Sur SlideShare
0
Issues des intégrations
0
Intégrations
13
Actions
Partages
0
Téléchargements
13
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

01 03 web_expérientiel _ designer un site web

  1. 1. e-art sup | 3A & 3B Design Interactif Alexandre Rivaux arivaux@gmail.com ixd.education Web expérientiel — Designer un site/application
  2. 2. e-art sup | 3A & 3B Design Interactif Alexandre Rivaux arivaux@gmail.com ixd.education 1. Introduction 2. Zoning 3. Wireframe 4. Storyboard ou User Journey 5. Maquette 6. Bibliographie
  3. 3. e-art sup | 3A & 3B Design Interactif Alexandre Rivaux arivaux@gmail.com ixd.education Qu’est-ce qu’une API — Tout projet digital necessite une conception en amont. Ouvrir photoshop et se lancer dans la réalisation d’un site internet c’est oublier l’importance de la conception et de l’ergonomie. C’est comme comme écrire une histoire sans en avoir le pitch et le scenario.
  4. 4. e-art sup | 3A & 3B Design Interactif Alexandre Rivaux arivaux@gmail.com ixd.education Zoning Le zoning découpe l’interface en différente zones de contenu afin d’établir les niveaux de lecture. Le zoning est un précoupage sous forme de blocs simples permettant de poser la manière dont le contenu sera agencé. C’est l’organisation générale de la page. Les blocs, composés en niveau de gris permettent d’ indiquer l’importance de la zone de contenu dans la lecture du site. Zoning —
  5. 5. e-art sup | 3A & 3B Design Interactif Alexandre Rivaux arivaux@gmail.com ixd.education Wireframe Le wireframe s’appuie sur le zoning et précise le contenu de chaque bloc. Il structure l’interface et permet de mettre en place l’ergonomie. À cette étape aucun élément de design n’est mis en place. Les UX et UI designers se concentrent sur l’ergonomie du site ou de l’application. Le wireframe permet de tester la pertinence de l’interface et l’ergonomie. Wireframe —
  6. 6. e-art sup | 3A & 3B Design Interactif Alexandre Rivaux arivaux@gmail.com ixd.education Storyboard ou User Journey Le user journey est le parcours utilisateur. Il indique pas à pas la manière dont l’utilisateur va naviguer dans le site et l’experience vécue. Il permet de mettre en pratique l’ ergonomie et réveler l’ensemble des enchainements possibles. Le user journey comprend l’ensemble des écrans prévues pour les site ainsi que leur points d’entrées et sorties. Storyboard —
  7. 7. e-art sup | 3A & 3B Design Interactif Alexandre Rivaux arivaux@gmail.com ixd.education Maquette La maquette est l’expression graphique du site ou de l’ application. L’ensemble de maquettes regroupe l’ ensemble des pages du site ou de l’application. La maquette intègre la dimension de design graphique et respecte la chartes graphique web mise en place en amont pour le projet. Maquette —
  8. 8. e-art sup | 3A & 3B Design Interactif Alexandre Rivaux arivaux@gmail.com ixd.education Bibliographie
  9. 9. e-art sup | 3A & 3B Design Interactif Alexandre Rivaux arivaux@gmail.com ixd.education Bibliographie Global Les différences entre zoning, wireframe, mockup et prototype : http://marcdezordo.me/les-differences-entre-zoning-wireframe-mockup-et-prototype/ Zoning, storyboard, wireframe et prototype : http://www.ergognome.com/conception/differences-entre-zoning-storyboard-wireframe- prototype/ Zoning, wireframe, maquettage, prototype… les meilleures pratiques http://blog.clever-age.com/fr/2010/06/18/maquettage-et-prototypage-le-tour-des-notions-et- des-outils/ Bibliographie —
  10. 10. e-art sup | 3A & 3B Design Interactif Alexandre Rivaux arivaux@gmail.com ixd.education Bon design Interactif ;) Pour toutes questions concernant la matière, les sujets ou le design; n’hésitez pas à me contacter. arivaux@gmail.com

×