01 03 web_expérientiel _ designer un site web

e-art sup | 3A & 3BDesign Interactif

Alexandre Rivauxarivaux@gmail.com

ixd.education

Web expérientiel — Designer un site/application

e-art sup | 3A & 3BDesign Interactif

Alexandre Rivauxarivaux@gmail.com

ixd.education

1. Introduction2. Zoning3. Wireframe4. Storyboard ou User Journey5. Maquette6. Bibliographie

e-art sup | 3A & 3BDesign Interactif

Alexandre Rivauxarivaux@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.

e-art sup | 3A & 3BDesign Interactif

Alexandre Rivauxarivaux@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

—

e-art sup | 3A & 3BDesign Interactif

Alexandre Rivauxarivaux@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

—

e-art sup | 3A & 3BDesign Interactif

Alexandre Rivauxarivaux@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

—

e-art sup | 3A & 3BDesign Interactif

Alexandre Rivauxarivaux@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

—

e-art sup | 3A & 3BDesign Interactif

Alexandre Rivauxarivaux@gmail.com

ixd.education

Bibliographie

e-art sup | 3A & 3BDesign Interactif

Alexandre Rivauxarivaux@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 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 Rivauxarivaux@gmail.com

ixd.education

Bon designInteractif ;)Pour toutes questions concernant la matière, les sujets ou le design; n’hésitez pas à me contacter.

arivaux@gmail.com