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