Embed Size (px)
Citation preview
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
ixd.education
Web expérientiel — Designer un site/application
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
ixd.education
1. Introduction2. Zoning3. Wireframe4. Storyboard ou User Journey5. Maquette6. Bibliographie
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
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.
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
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
—
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
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
—
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
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
—
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
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
—
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
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 pratiqueshttp://blog.clever-age.com/fr/2010/06/18/maquettage-et-prototypage-le-tour-des-notions-et-des-outils/
Bibliographie
—
e-art sup | 3A & 3BDesign Interactif
Alexandre [email protected]
ixd.education
Bon designInteractif ;)Pour toutes questions concernant la matière, les sujets ou le design; n’hésitez pas à me contacter.
