Sites Web et Mobiles 
Méthodes, réalisation et outils 
Webdesign 
Olivier Dommange
Olivier Dommange 
Les étapes de création 
des interfaces
Olivier Dommange 
Stratégie de communication
Olivier Dommange 
Stratégie de communication 
Définir la stratégie dans laquelle l’outil de 
communication s’inscrit. 
Pro...
Olivier Dommange 
Organisation du contenu
Olivier Dommange 
Organisation du contenu 
Conceptualiser et organiser le 
contenu. Envisager les niveaux de 
navigations ...
Olivier Dommange 
Analyse conceptuelle
Olivier Dommange 
Analyse conceptuelle 
Décrire les interfaces et les outils. 
Associer les contenus, définir les 
spécifi...
Olivier Dommange 
Ergonomie et sémantique
Olivier Dommange 
Ergonomie et sémantique 
Définir la disposition et la 
composition de l’interface, des 
outils et l’empl...
Design 
Olivier Dommange
Olivier Dommange 
Design 
Rendre agréable et attrayant, 
les interfaces de l’outil. Produire 
le contenu graphique. 
Le We...
Olivier Dommange 
Maquette fil de fer 
Wireframe
Olivier Dommange 
La maquette fil de fer – Les grilles 
Les grilles 
Déclinaison pour les mobiles. 
En lien avec certains ...
Olivier Dommange 
La maquette fil de fer – wireframe 
La maquette fil de fer 
Prototype graphique 
Composition : Posée sur...
Olivier Dommange 
Maquette fil de fer 
Le schéma des navigations 
Prototype graphique 
Composition : Assemblage des 
maque...
Olivier Dommange 
Maquette fil de fer - mockups 
Les mockups 
Mise en scène des outils de communication 
Composition : Mis...
Olivier Dommange 
Maquette fil de fer - mockups 
Les mockups 
Outils et fonctions sur mobile 
Composition : Simulation des...
Olivier Dommange 
Maquette fil de fer 
Quelques outils 
En ligne : 
https://wireframe.cc 
Logiciels 
Balsamic 
http://bals...
Olivier Dommange 
Méthodes de réalisation 
Dégradation élégante / Amélioration progressive
Olivier Dommange 
Méthodes de réalisation (workflow) 
2 méthodes de conception et de transformation des interfaces s'affro...
Olivier Dommange 
Dégradation élégante 
Dégradation élégante (gracefull degradation) 
Consiste à décliner une interface de...
Olivier Dommange 
Dégradation élégante 
Dégradation élégante (gracefull degradation) 
Consiste à décliner une interface de...
Olivier Dommange 
Amélioration progressive (mobile first) 
L'amélioration progressive (progressive enhancement) 
Démarrer ...
Olivier Dommange 
Amélioration progressive (mobile first) 
L'amélioration progressive (progressive enhancement) 
Démarrer ...
Olivier Dommange 
Amélioration progressive (mobile first) 
Site « one page » 
Une conséquence de l'amélioration progressiv...
Olivier Dommange 
Méthodes de travail 
Par quel côté prendre le problème ? 
Depuis la conception, et selon les véritables ...
Olivier Dommange 
http://www.linkedin.com/in/olivierdommange
Prochain SlideShare
Chargement dans…5
×

Webdesign sites web et mobiles-methodes-realisation-outils

959 vues

Publié le

Méthodes et stratégies de conception sites Web et mobiles. Processus de conception présentant la maquette de fil de fer (wireframe), mockups jusqu'au design. Présentation des objectifs et du rôle du Webdesigner à chacun des étapes. Rapports entre la dégradation élégante (gracefull degradation) et amélioration progressive (progressive enhancement - mobile first).

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

Aucun téléchargement
Vues
Nombre de vues
959
Sur SlideShare
0
Issues des intégrations
0
Intégrations
17
Actions
Partages
0
Téléchargements
32
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Webdesign sites web et mobiles-methodes-realisation-outils

  1. 1. Sites Web et Mobiles Méthodes, réalisation et outils Webdesign Olivier Dommange
  2. 2. Olivier Dommange Les étapes de création des interfaces
  3. 3. Olivier Dommange Stratégie de communication
  4. 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. 5. Olivier Dommange Organisation du contenu
  6. 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. 7. Olivier Dommange Analyse conceptuelle
  8. 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. 9. Olivier Dommange Ergonomie et sémantique
  10. 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. 11. Design Olivier Dommange
  12. 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. 13. Olivier Dommange Maquette fil de fer Wireframe
  14. 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. 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. 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. 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. 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. 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. 20. Olivier Dommange Méthodes de réalisation Dégradation élégante / Amélioration progressive
  21. 21. Olivier Dommange Méthodes de réalisation (workflow) 2 méthodes de conception et de transformation des interfaces s'affrontent.
  22. 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. 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. 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. 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. 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. 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. 28. Olivier Dommange http://www.linkedin.com/in/olivierdommange

×