Le document traite des étapes et méthodes de création d'interfaces web, en mettant l'accent sur le rôle du webdesigner dans la conception et l'organisation des contenus. Différentes stratégies de design comme la dégradation élégante et l'amélioration progressive sont explorées pour répondre aux besoins des utilisateurs sur divers supports, notamment mobiles. Enfin, des outils et ressources pour le design, comme les maquettes fil de fer et les mockups, sont présentés pour faciliter le processus créatif.

1. Sites Web et Mobiles
Méthodes, réalisation et outils
Webdesign
Olivier Dommange

2. Olivier Dommange
Les étapes de création
des interfaces

3. Olivier Dommange
Stratégie de communication

4. Olivier Dommange
Stratégie de communication
Définir la stratégie dans laquelle l’outil de
communication s’inscrit.
Promouvoir, former et/ou informer auprès
du groupe ciblé.
Le Webdesigner :
Ses objectifs : Comprendre la cible et le langage (verbal et visuel) à employer.
Situer l’outil de communication à concevoir.
Ce dont-il a besoin :
Participer aux briefings.
Consulter le plan directeur de communication (s’il existe).
Se documenter sur ce qui se fait en la matière et auprès des
concurrents.
Etroite collaboration avec les pros du marketing et de la
technique.

5. Olivier Dommange
Organisation du contenu

6. Olivier Dommange
Organisation du contenu
Conceptualiser et organiser le
contenu. Envisager les niveaux de
navigations du site.
Le Webdesigner :
Ses objectifs : Figurer les modes de navigations entre les
contenus (pages, outils et textes). Comprendre l’échelle de
priorité des contenus.
Ce dont-il a besoin :
Participer aux brainstormings.
Collaborer avec l’architecte d’information.

7. Olivier Dommange
Analyse conceptuelle

8. Olivier Dommange
Analyse conceptuelle
Décrire les interfaces et les outils.
Associer les contenus, définir les
spécifications techniques et
graphiques qu'elle comportent.
Le Webdesigner :
Ses objectifs : Disposer des informations narratives,
graphiques et techniques (supports, outils et technologies)
qui permettront d’établir la composition des interfaces.
Ce dont-il a besoin :
Disposer des documents suivants (synopsis, scénario et
spécifications techniques).
Collaborer avec le scénariste.

9. Olivier Dommange
Ergonomie et sémantique

10. Olivier Dommange
Ergonomie et sémantique
Définir la disposition et la
composition de l’interface, des
outils et l’emplacement de la
navigation.
Le Webdesigner :
Ses objectifs : Organiser la composition des interfaces du
site. Réaliser un prototype graphique (wireframes -
maquette fil de fer), des interfaces selon les indications
techniques.
Ce dont-il a besoin :
Consulter les scénarios et découpages techniques (s’ils
existent).
Collaborer avec le spécialiste UX.

11. Design
Olivier Dommange

12. Olivier Dommange
Design
Rendre agréable et attrayant,
les interfaces de l’outil. Produire
le contenu graphique.
Le Webdesigner :
Ses objectifs : OValoriser visuellement le contenu.
Faciliter la navigation grâce à des repères
graphiques (icônes). Respecter l'image de
l'institution.
Ce dont-il a besoin :
Consulter les charte graphiques existantes

13. Olivier Dommange
Maquette fil de fer
Wireframe

14. Olivier Dommange
La maquette fil de fer – Les grilles
Les grilles
Déclinaison pour les mobiles.
En lien avec certains framework CSS.
Servira tout au long du design de
l’interface.
Il existe des grilles dont les références
varient en terme de largeur des
colonnes et des gouttières.

15. Olivier Dommange
La maquette fil de fer – wireframe
La maquette fil de fer
Prototype graphique
Composition : Posée sur une grille, la
maquette est composés de zones et
de contenus (fictifs) simulant la mise
en page et les outils définitifs.
Objectif : Simuler le fonctionnement
des outils et confirmer les exigences
de l'interface utilisateur. Rassembler
l’équipe de production et le client
autour d’une vision commune de
l’interface et des outils.

16. Olivier Dommange
Maquette fil de fer
Le schéma des navigations
Prototype graphique
Composition : Assemblage des
maquettes fil de fer, liées entre elles.
Objectif : Présenter l’utilité des outils
dans le cadre de la navigation.

17. Olivier Dommange
Maquette fil de fer - mockups
Les mockups
Mise en scène des outils de communication
Composition : Mise en scène des outils
sur des supports ou dans un contexte
d’utilisation.
Objectif : Valoriser les outils et donner
une impression du résultat final.

18. Olivier Dommange
Maquette fil de fer - mockups
Les mockups
Outils et fonctions sur mobile
Composition : Simulation des outils de
navigation, des formulaires et des
fonctions
Objectif : Simuler le fonctionnement de
l’outil selon ceux proposés sur les OS
des appareils.

19. Olivier Dommange
Maquette fil de fer
Quelques outils
En ligne :
https://wireframe.cc
Logiciels
Balsamic
http://balsamiq.com
Pencil
http://pencil.evolus.vn
Axure
http://www.axure.com
Adobe (Fireworks, Illustrator, Indesign
ou Photoshop)

20. Olivier Dommange
Méthodes de réalisation
Dégradation élégante / Amélioration progressive

21. Olivier Dommange
Méthodes de réalisation (workflow)
2 méthodes de conception et de transformation des interfaces s'affrontent.

22. Olivier Dommange
Dégradation élégante
Dégradation élégante (gracefull degradation)
Consiste à décliner une interface de site pour les supports mobiles.
Motif : A l’apparition des mobiles (2007), il a
fallut adapter les sites aux nouveaux supports.
Le responsive design permet de redéfinir
l’importance des contenus.
Résultat : Elimination et/ou remplacement de
certains outils et contenus, conditionné par une
utilisation pratique sur mobile.

23. Olivier Dommange
Dégradation élégante
Dégradation élégante (gracefull degradation)
Consiste à décliner une interface de site pour les supports mobiles.
Avantages / inconvénients :
Les Webdesigners ont été habitués au design pour
des navigateurs. Ils sont souvent plus à l’aise avec
cette méthode.
Les outils des mobiles passent au second plan.
L’attention est davantage portée sur les outils Web
et en ligne et peu sur les outils mobiles (contact,
téléphone, géolocalisation).

24. Olivier Dommange
Amélioration progressive (mobile first)
L'amélioration progressive (progressive enhancement)
Démarrer la conception des outils par ceux des mobiles. Aussi appelé Mobile First.
Motif : Les supports mobiles imposent plus de
contraintes et ils seront de plus en plus
nombreux à être utilisés pour consulter Internet,
inversant ainsi les tendances.
Résultat : Réflexion orientée sur le support
mobile, ses ressources et son utilisation.
Augmentation et remplacement des outils pour
les autres supports en fonction de l’utilisation
prévue.

25. Olivier Dommange
Amélioration progressive (mobile first)
L'amélioration progressive (progressive enhancement)
Démarrer la conception des outils par ceux des mobiles. Aussi appelé Mobile First.
Avantages / inconvénients :
Impose plusieurs contraintes au designer (écran petit, moins de
ressources).
Le chargement d’un site est plus rapide. L’attention est davantage
portée sur les contraintes mobiles.
La priorité des contenus est définie dès le départ et entretenue par une
réflexion sur l’optimisation des outils sur mobile. Plus facile pour la
création de la maquette fil de fer (wireframe).
Etablir le code HTML d’abord pour le mobile facilite le positionnement
des zones de contenus en CSS (responsive).

26. Olivier Dommange
Amélioration progressive (mobile first)
Site « one page »
Une conséquence de l'amélioration progressive.
Ce mode de mise en page correspond à la navigation sur supports
mobiles.
De cette tendance sont apparus des effets sophistiqués tels que :
le paralaxe
le chargement progressif
le menu fixe
Quelques exemples de sites :
http://www.mooncampapp.com
http://aya.io/ericd
http://teamtreehouse.com

27. Olivier Dommange
Méthodes de travail
Par quel côté prendre le problème ?
Depuis la conception, et selon les véritables besoins identifiés d’un projet :
Evaluer les contenus et outils à mettre en place pour les supports mobiles
comme pour les navigateurs de bureau.
Connaître les contraintes et les ressources des supports pour en tirer avantage.
Mener une réflexion parallèle pour chaque support et mettre en évidence les
points de convergence dans le projet.

28. Olivier Dommange
http://www.linkedin.com/in/olivierdommange