Webdesign sites web et mobiles-methodes-realisation-outils
-
Upload
olivier-dommange -
Category
Design
-
view
273 -
download
0
Transcript of Webdesign sites web et mobiles-methodes-realisation-outils
Sites Web et MobilesMéthodes, réalisation et outils
Webdesign
Oliv
ier D
omm
ange
Oliv
ier D
omm
ange
Les étapes de créationdes interfaces
Oliv
ier D
omm
ange
Stratégie de communication
Oliv
ier D
omm
ange
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é.
Ses objectifs : Comprendre la cible et le langage (verbal et visuel) à employer. Situer l’outil de communication à concevoir.
Le Webdesigner :
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.
Oliv
ier D
omm
ange
Organisation du contenu
Oliv
ier D
omm
ange
Organisation du contenu
Conceptualiser et organiser le contenu. Envisager les niveaux de navigations du site.
Ses objectifs : Figurer les modes de navigations entre les contenus (pages, outils et textes). Comprendre l’échelle de priorité des contenus.
Le Webdesigner :
Ce dont-il a besoin :
Participer aux brainstormings.
Collaborer avec l’architecte d’information.
Oliv
ier D
omm
ange
Analyse conceptuelle
Oliv
ier D
omm
ange
Analyse conceptuelle
Décrire les interfaces et les outils. Associer les contenus, définir les spécifications techniques et graphiques qu'elle comportent.
Ses objectifs : Disposer des informations narratives, graphiques et techniques (supports, outils et technologies) qui permettront d’établir la composition des interfaces.
Le Webdesigner :
Ce dont-il a besoin :
Disposer des documents suivants (synopsis, scénario et spécifications techniques).
Collaborer avec le scénariste.
Oliv
ier D
omm
ange
Ergonomie et sémantique
Oliv
ier D
omm
ange
Ergonomie et sémantique
Définir la disposition et la composition de l’interface, des outils et l’emplacement de la navigation.
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.
Le Webdesigner :
Ce dont-il a besoin :
Consulter les scénarios et découpages techniques (s’ils existent).
Collaborer avec le spécialiste UX.
Oliv
ier D
omm
ange
Design
Oliv
ier D
omm
ange
Design
Rendre agréable et attrayant, les interfaces de l’outil. Produire le contenu graphique.
Ses objectifs : OValoriser visuellement le contenu. Faciliter la navigation grâce à des repères graphiques (icônes). Respecter l'image de l'institution.
Le Webdesigner :
Ce dont-il a besoin :
Consulter les charte graphiques existantes
Oliv
ier D
omm
ange
Maquette fil de ferWireframe
Oliv
ier D
omm
ange
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.
Oliv
ier D
omm
ange
La maquette fil de fer – wireframe
La maquette fil de ferPrototype 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.
Oliv
ier D
omm
ange
Maquette fil de fer
Le schéma des navigationsPrototype 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.
Oliv
ier D
omm
ange
Maquette fil de fer - mockups
Les mockupsMise 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.
Oliv
ier D
omm
ange
Maquette fil de fer - mockups
Les mockupsOutils 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.
Oliv
ier D
omm
ange
https://wireframe.cc
http://balsamiq.comhttp://pencil.evolus.vnhttp://www.axure.com
Maquette fil de fer
Quelques outils
En ligne :
LogicielsBalsamicPencilAxureAdobe (Fireworks, Illustrator, Indesign ou Photoshop)
Oliv
ier D
omm
ange
Méthodes de réalisationDégradation élégante / Amélioration progressive
Oliv
ier D
omm
ange
Méthodes de réalisation (workflow)
2 méthodes de conception et de transformation des interfaces s'affrontent.
Oliv
ier D
omm
ange
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.
Oliv
ier D
omm
ange
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).
Oliv
ier D
omm
ange
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.
Oliv
ier D
omm
ange
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).
Oliv
ier D
omm
ange
http://www.mooncampapp.com
http://teamtreehouse.comhttp://aya.io/ericd
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 :
Quelques exemples de sites :
le paralaxe le chargement progressif le menu fixe
Oliv
ier D
omm
ange
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.
http://www.linkedin.com/in/olivierdommange
Olivier Dommange