SlideShare une entreprise Scribd logo
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. 
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.
Olivier Dommange 
Organisation du contenu
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.
Olivier Dommange 
Analyse conceptuelle
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.
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’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.
Design 
Olivier Dommange
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
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 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.
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.
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.
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.
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.
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)
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'affrontent.
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.
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).
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.
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).
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
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.
Olivier Dommange 
http://www.linkedin.com/in/olivierdommange

Contenu connexe

Tendances

Les étapes de création d'un site web
Les étapes de création d'un site webLes étapes de création d'un site web
Les étapes de création d'un site web
Chris Gaillard
 
Les bases du responsive design
Les bases du responsive designLes bases du responsive design
Les bases du responsive design
Voyelle Voyelle
 
Le responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobilesLe responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobiles
Big5media
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-design
Olivier Soros
 
Prezi&cie
Prezi&ciePrezi&cie
Prezi&cie
lamarionita
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
Julien LE THUAUT
 
Création de site web : comment bien gérer son projet
Création de site web : comment bien gérer son projetCréation de site web : comment bien gérer son projet
Création de site web : comment bien gérer son projet
Lilian FOURCADIER
 
Endemik | Solutions interactives
Endemik | Solutions interactivesEndemik | Solutions interactives
Endemik | Solutions interactives
endemik
 
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursKit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Stéphanie Hertrich
 
Cahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALCahier de charges Site web DRUPAL
Cahier de charges Site web DRUPAL
Laribi Aicha
 
Modèle de cahier des charges web
Modèle de cahier des charges webModèle de cahier des charges web
Modèle de cahier des charges web
Forestier Mégane
 
2011 06 30 cahier des charges site internet by competitic
2011 06 30 cahier des charges site internet by competitic2011 06 30 cahier des charges site internet by competitic
2011 06 30 cahier des charges site internet by competitic
COMPETITIC
 
"Responsive Design" : Pourquoi et comment y aller ?
 "Responsive Design" : Pourquoi et comment y aller ? "Responsive Design" : Pourquoi et comment y aller ?
"Responsive Design" : Pourquoi et comment y aller ?
WebSchool Orléans
 
La gestion de projet web en 15 étapes
La gestion de projet web en 15 étapesLa gestion de projet web en 15 étapes
La gestion de projet web en 15 étapes
Rodolphe Finamore
 
Cahier des charges modèle gratuit - préparez votre projet web facilement !
Cahier des charges modèle gratuit - préparez votre projet web facilement !Cahier des charges modèle gratuit - préparez votre projet web facilement !
Cahier des charges modèle gratuit - préparez votre projet web facilement !
Valls y Machinant David - Auteur sur : Carrefourdesreussites.com
 
Le web dynamique
Le web dynamiqueLe web dynamique
Le web dynamique
Olivier Dommange
 
Webdesign, UX et UCD #1
Webdesign, UX et UCD #1Webdesign, UX et UCD #1
Webdesign, UX et UCD #1
Relax In The Air
 

Tendances (19)

Les étapes de création d'un site web
Les étapes de création d'un site webLes étapes de création d'un site web
Les étapes de création d'un site web
 
Les bases du responsive design
Les bases du responsive designLes bases du responsive design
Les bases du responsive design
 
Cms
CmsCms
Cms
 
Le responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobilesLe responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobiles
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-design
 
Prezi&cie
Prezi&ciePrezi&cie
Prezi&cie
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
 
Création de site web : comment bien gérer son projet
Création de site web : comment bien gérer son projetCréation de site web : comment bien gérer son projet
Création de site web : comment bien gérer son projet
 
Endemik | Solutions interactives
Endemik | Solutions interactivesEndemik | Solutions interactives
Endemik | Solutions interactives
 
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursKit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des Entrepreneurs
 
Cahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALCahier de charges Site web DRUPAL
Cahier de charges Site web DRUPAL
 
Modèle de cahier des charges web
Modèle de cahier des charges webModèle de cahier des charges web
Modèle de cahier des charges web
 
2011 06 30 cahier des charges site internet by competitic
2011 06 30 cahier des charges site internet by competitic2011 06 30 cahier des charges site internet by competitic
2011 06 30 cahier des charges site internet by competitic
 
"Responsive Design" : Pourquoi et comment y aller ?
 "Responsive Design" : Pourquoi et comment y aller ? "Responsive Design" : Pourquoi et comment y aller ?
"Responsive Design" : Pourquoi et comment y aller ?
 
La gestion de projet web en 15 étapes
La gestion de projet web en 15 étapesLa gestion de projet web en 15 étapes
La gestion de projet web en 15 étapes
 
Cahier des charges modèle gratuit - préparez votre projet web facilement !
Cahier des charges modèle gratuit - préparez votre projet web facilement !Cahier des charges modèle gratuit - préparez votre projet web facilement !
Cahier des charges modèle gratuit - préparez votre projet web facilement !
 
Le web dynamique
Le web dynamiqueLe web dynamique
Le web dynamique
 
Webdesign, UX et UCD #1
Webdesign, UX et UCD #1Webdesign, UX et UCD #1
Webdesign, UX et UCD #1
 
Cv2015
Cv2015Cv2015
Cv2015
 

Similaire à Webdesign sites web et mobiles-methodes-realisation-outils

Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Mohammed JAITI
 
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...
Microsoft
 
Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015
Vincent Pereira
 
Qu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxQu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docx
Georges59
 
Introduction Gestion Projet web
Introduction Gestion Projet webIntroduction Gestion Projet web
Introduction Gestion Projet web
guest6d3f53
 
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
Actency
 
Vanessa i ref_2014
Vanessa i ref_2014Vanessa i ref_2014
Vanessa i ref_2014
Vanessa Ilmany
 
Optimiser son workflow frontend
Optimiser son workflow frontendOptimiser son workflow frontend
Optimiser son workflow frontend
Louis Chenais
 
Webtreendsgab
WebtreendsgabWebtreendsgab
Webtreendsgab
Gabriel Desilets
 
introduction à la gestion de projet
introduction à la gestion de projetintroduction à la gestion de projet
introduction à la gestion de projet
laureno
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphique
Idean France
 
Presentation inochi réalisations / développement - Accompagnateur Web
Presentation inochi réalisations / développement - Accompagnateur WebPresentation inochi réalisations / développement - Accompagnateur Web
Presentation inochi réalisations / développement - Accompagnateur Web
INOCHI
 
Design Trends
Design TrendsDesign Trends
Design Trends
Hannah Sellam
 
Introduction à la gestion de projet
Introduction à la gestion de projetIntroduction à la gestion de projet
Introduction à la gestion de projet
laureno
 
Staelens cv 2019 word
Staelens cv 2019 wordStaelens cv 2019 word
Staelens cv 2019 word
Staelens Pierre-Henry
 
Créer un site internet ou un blog
Créer un site internet ou un blogCréer un site internet ou un blog
Créer un site internet ou un blog
Séverine Alix
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
USERADGENTS
 
Atelier Web et Mobile Design partie I, introduction au web design, Outils du ...
Atelier Web et Mobile Design partie I, introduction au web design, Outils du ...Atelier Web et Mobile Design partie I, introduction au web design, Outils du ...
Atelier Web et Mobile Design partie I, introduction au web design, Outils du ...
Ahmed BACHIR CHERIF
 
2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL
 
HTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignHTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web Design
Frédéric Harper
 

Similaire à Webdesign sites web et mobiles-methodes-realisation-outils (20)

Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
 
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...
 
Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015
 
Qu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxQu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docx
 
Introduction Gestion Projet web
Introduction Gestion Projet webIntroduction Gestion Projet web
Introduction Gestion Projet web
 
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
 
Vanessa i ref_2014
Vanessa i ref_2014Vanessa i ref_2014
Vanessa i ref_2014
 
Optimiser son workflow frontend
Optimiser son workflow frontendOptimiser son workflow frontend
Optimiser son workflow frontend
 
Webtreendsgab
WebtreendsgabWebtreendsgab
Webtreendsgab
 
introduction à la gestion de projet
introduction à la gestion de projetintroduction à la gestion de projet
introduction à la gestion de projet
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphique
 
Presentation inochi réalisations / développement - Accompagnateur Web
Presentation inochi réalisations / développement - Accompagnateur WebPresentation inochi réalisations / développement - Accompagnateur Web
Presentation inochi réalisations / développement - Accompagnateur Web
 
Design Trends
Design TrendsDesign Trends
Design Trends
 
Introduction à la gestion de projet
Introduction à la gestion de projetIntroduction à la gestion de projet
Introduction à la gestion de projet
 
Staelens cv 2019 word
Staelens cv 2019 wordStaelens cv 2019 word
Staelens cv 2019 word
 
Créer un site internet ou un blog
Créer un site internet ou un blogCréer un site internet ou un blog
Créer un site internet ou un blog
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
 
Atelier Web et Mobile Design partie I, introduction au web design, Outils du ...
Atelier Web et Mobile Design partie I, introduction au web design, Outils du ...Atelier Web et Mobile Design partie I, introduction au web design, Outils du ...
Atelier Web et Mobile Design partie I, introduction au web design, Outils du ...
 
2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet2UNL - Le Kit documentaire de conception pour simplifier la communication projet
2UNL - Le Kit documentaire de conception pour simplifier la communication projet
 
HTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignHTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web Design
 

Webdesign sites web et mobiles-methodes-realisation-outils

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