01 03 web_expérientiel _ designer un site web

1. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Web expérientiel
—
Designer un
site/application

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. 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. 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. 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. 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. 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. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Bibliographie

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. 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