Image montrant un UX Designer en train de réaliser des wireframes Image montrant le poste de travail d'un UX Designer

Le maître mot lors du déroulement des étapes de design d’un site web, est la cohérence.

  • Cohérence dans l’arborescence de votre projet, vos différentes pages de contenu doivent être organisées de façon logique. Cette logique doit être comprise en un clin d’œil par l’utilisateur, il sera donc primordial de prendre en compte le propos du site web et le public visé.
  • Cohérence dans la navigation, l’utilisateur doit s’y retrouver immédiatement et ses choix de navigation doivent l’amener aux résultats souhaités rapidement et de façon fluide. Une grande part de l’expérience utilisateur se jouera ici.
  • Cohérence graphique bien sûr, qui implique de définir des codes et une charte qui sera appliquée de manière égale à l’ensemble de vos pages.

Pour assurer cette cohérence globale il faut éviter de commencer à travailler avant d’avoir en main tous les éléments et informations concernant le projet. L’ajout à la dernière minute d’une nouvelle page ou d’un nouvel onglet pourrait casser votre structure et vous ferait perdre un temps précieux en réorganisation. C’est pourquoi avant de commencer le prototypage assurez-vous d’avoir une bonne vision globale du projet.

Note : tout au long de cet article je m’appuierai sur le projet de refonte du site web de la société Algo Peinture. Algo Peinture est une marque bretonne qui produit une peinture naturelle en remplaçant les dérivés du pétrole par des algues provenant du littoral finistérien. Ce projet récemment mené par l’agence Useweb avait pour but de créer un site institutionnel doté d’une partie e-commerce permettant de vendre de la peinture en ligne. Consulter le site Algo Peinture

 

1.L’arborescence

 

Établir une arborescence complète de votre futur site web peut être un travail fastidieux mais il est indispensable si vous souhaitez avoir du recul sur le projet et faire de bons choix organisationnels. Votre architecture de base dépendra en grande partie de la nature même de votre site web. Vous aurez ainsi le choix entre regrouper votre contenu par cible d’utilisateur (quel est le public visé?), par tâche (exemple : acheter/vendre), par type de contenu, par zones géographiques, etc.

Ces premiers grands ensembles de contenu définissent vos rubriques de premier niveau. Il vous faudra ensuite définir vos sous rubriques (2nd niveau) et ainsi de suite jusqu’à classer tous les contenus disponibles sur votre site.

Extrait du document présentant l'arborescence du site Algo Peinture

Gardez à l’esprit qu’un site web et se construit généralement autour d’une ou deux fonctionnalités principales et d’une quantité variables d’informations en fonction du type de site (vitrine, institutionnel, etc.). Les informations ou les fonctionnalités doivent être accessibles quasi immédiatement. Evitez donc une arborescence trop complexe qui pourrait dégrader l'expérience de navigation et décourager votre internaute.

Certains outils simples existent qui permettent de créer des arborescences comme par exemple Microsoft Visio, un simple Word, ou encore certains outils en ligne comme www.draw.io ou Xmind.

IMPORTANT : Avant de définir votre rubriquage il est primordial de prendre en compte le référencement naturel de votre site. Nos spécialistes du Référencements sont à votre disposition pour vous accompagner sur ce sujet.

 

2.Les wireframes

 

Les wireframes ne sont pas des maquettes, ils ne servent en aucun cas à définir « habillage » du site mais bien à définir les zones de contenu (zone de texte, images, etc.), l’emplacement des différents éléments (boutons, progress bar, icônes, etc.). On appelle également cette étape le zoning ou encore maquette fil de fer pour les plus francophones d'entre nous.

Si votre étape d’arborescence à été bien réalisée vous constaterez qu’il sera plus simple de prendre chaque groupe de contenu, définit au préalable, pour les poser sur la page et ainsi leur définir un emplacement spécifique en respectant leur importance hiérarchique. Le wireframe est donc la première ébauche d’une mise en page et, même si aucun style n’est vraiment définit, chaque éléments posés sur la page doit être identifié pour ce qu’il est. On doit donc être en mesure de distinguer les zones de texte des zones d’image, les vidéos, les différents types de bouton, etc.

 

Extrait d'un wireframe réalisa au cours du projet Algo

 

Il existe de nombreux outils qui permettent de créer des wireframes. Adobe XD en est un très bon et intègre des UI kit (windows, android et IOS) et des templates (formats de document prédéfinis) qui vous aideront lors de vos créations. La force de XD est de permettre d’ajouter des interactions sur les éléments de la page et ainsi de proposer à son client un wireframe fonctionnel qui permettra de naviguer d’une page à l’autre et ainsi de tester et valider l'expérience de navigation et l'ergonomie.

Des outils en ligne comme Invision sont de bonnes alternatives à Adobe XD et vous offre en prime des outils collaboratifs plus poussés que ce que permet XD à l'heure actuel. Il s'agit toutefois d'un outil payant dans lequel il vous faudra investir en plus de votre suite creative. 

Toujours chez Adobe, le logiciel de dessin vectoriel Illustrator, couplé à des templates d’interface, est une alternative puissante même s’il ne propose pas d’interactivité. Des sites comme Webalys proposent bon nombre d’éléments vectoriels, templates et icônes qui permettent de gagner en temps et en efficacité.

Chez Microsoft on trouve l’équivalent de XD avec Blend qui propose les mêmes fonctionnalités, interactivité comprise. Blend en version light est gratuit et proposé en téléchargement avec Visual Studio.

Balsamiq est un outil intéressant qu’il faut évoquer ici car propose un grand nombre de templates.

Enfin il existe de nombreux outils gratuits en ligne qui permettent de faire des choses très propres comme par exemple Wirify, Moqups ou encore Mocking Bird.

 

3.La charte graphique

 

Imaginons que je vous propose deux jeux vidéos au concept identique : préférerez-vous jouer au jeu bien fait mais sans originalité graphique où à celui qui vous offre une expérience visuelle inédite? (question purement rhétorique évidemment).

Pour votre site web le constat est le même. Que votre projet soit basé sur un concept révolutionnaire ou qu’il s’agisse d’un simple site vitrine qui présente votre activité, se distinguer de la masse par le style c’est attirer l’attention sur vous et donc générer plus de traffic entrant tout en augmentant votre notoriété.

Avant de vous jeter dans l’arène en étalant de la peinture partout sur vos beaux wireframes tout propres je vous propose de passer par une étape intermédiaire, la mood board. Une mood board ou « planche de tendance », c’est un support où nous allons pouvoir jeter en vrac tout les éléments graphiques qui vont faire de notre site web un produit fini. Nuancier de couleur, polices de caractère, icônes, boutons, échantillons d’images, autant d’éléments qui définiront véritablement l’identité graphique de site.

 

Planche de tendance du projet Algo Peinture

 

Voilà une étape sympa et créative où vous allez pouvoir trouver le style qui vous convient, icône flat ou avec effets ? aplats de couleur, dégradés ou textures ? Une fois vos choix graphiques posés essayez de bien catégoriser les différents éléments que vous allez créer. D’une part les éléments de navigations actifs (les boutons) et d’autre part les éléments purement informatifs (pictogramme, flèches, etc.). Une dernière catégorie moins importante est constituée d’éléments décoratifs, qui ne servent qu’à ajouter une plu value sur le design mais n’ont pas de rôle fonctionnel dans l’application.

Il n’existe que deux manières de dissocier ces éléments au sein du site : le contexte et le design.

Une icône peut potentiellement avoir un rôle de bouton ou uniquement d’indication. L’utilisateur doit être capable de comprendre quelle est la nature d’un élément simplement en fonction du contexte.

Exemple : si une icône apparaît sur une barre d’outil contenant uniquement des boutons il y a fort à parier que mon icône soit également un bouton. Pourtant parfois le contexte ne suffit pas à comprendre la nature d’un élément. Dans ce cas il est important que le design de l’élément soit un indice sur sa nature. Cet indice peut être donnée par la couleur, la forme du conteneur, la typographie, etc.

Il existe beaucoup de sites qui proposent des banques d’icônes gratuites (The noun project, iconMonstr, etc). Des outils comme Metro Studio permettent aussi de personnaliser et générer ses icônes à partir d’une banque très fournies. Vous trouverez aussi des outils en ligne pour bien choisir vos couleurs et créer les bonnes associations (Adobe Kuler, Flat UI colors, etc.)

La cible et la thématique du site sont des données primordiales à prendre en compte lors de vos choix graphiques. C’est ce qui va définir la direction artistique de votre projet. Si vous hésitez, si vous manquez d’inspiration ou encore si vous ne savez pas quel style appliquer à une thématique liée à votre projet, il est conseillé de faire un peu de veille avant de se lancer. De nombreux sites internet n’atteignent pas leurs cibles à cause d’une direction artistique hasardeuse. Par exemple un site sportif qui emprunterait sans le vouloir aux codes du luxe (typo manuscrite, couleurs noires et or, etc.) pourrait bien passer à coté de son public. Au contraire, plus la thématique de votre site transparaît à travers le design plus vous aurez des chances de toucher votre cible.

Sortir un peu la tête de son projet pour consulter d’autres sites ne peut être que bénéfique. Cela vous permettra de voir ce qui se fait chez le concurrent et de vérifier que vous usez des bons codes. Certains sites permettent de booster l’inspiration tels que pttrns.com ou uxarchive.com,vous pourrez y trouver des centaines d’interfaces archivés par catégories. Certains agrégateur de contenus tels que Dribbble, ou Pinterest sont également assez riches en matière d’UI.

 

Capture d'écran de la plateforme dribbble.com

 

Enfin, essayez de penser dés maintenant aux différentes transitions et animations qui interviendront dans votre site. Quelle transitions choisirez vous entre deux pages ? Entre deux rubriques ? Quelles seront les réactions des boutons au survol ? Au clic? Gardez à l’esprit que c’est par toutes ces petites choses, qui peuvent vous paraître insignifiantes, que votre site se démarquera de ses concurrents. Il est donc conseillé de personnaliser vos animations et ce en cohérence avec la thématique de votre projet et donc en harmonie avec vos premiers éléments de chartes.

Des sites comme guifff.com ou le tumblr ui-animations vous aiderons à trouver l’inspiration en matière d’animation.

L’habillage de votre site web ne requiert pas obligatoirement une charte graphique à proprement parlé. Toutefois un petit document qui récapitule les principales règles graphiques est loin d’être superflu, surtout si vous travaillez en binôme avec un développeur qui sera chargé de l’intégration de votre créa. Voici les principaux points qu’il vous faudra traiter dans ce doc :

- Typographie. Quelles polices utiliser ou et quand ? Quel style (light, regular, etc.) ? Quel taille ?
- Couleurs. Quel code couleur appliquer dans quelles circonstances ?
- Eléments graphiques. Listing des éléments graphiques, icônes et autres, lesquels utiliser et où ?
- Règle de mise en page, grille, placement des éléments.

Une façon efficace de réunir ces informations sera de commenter quelques pages de maquettes représentatives de l’app en pointant les règles graphiques importantes.

Mais pour ce faire encore faut il avoir des maquettes…

 

4.Les maquettes

 

La phase de maquettage est une des plus sympathique pour le designer car elle représente l’aboutissement de la partie graphique du projet. C’est là que l’on voit se dessiner précisément pour la première fois ce à quoi ressemblera le site en définitive. En revanche pour certains dont ce n'est pas le métier et designant eux-même leurs site web, cette étape se fera parfois dans la douleur.

A ces derniers je promet que si les différentes étapes de la création ont été réalisées avec soin, le maquettage leur semblera aussi facile qu’une peinture au numéro. Toute la structure de l’app est déjà là, les choix hiérarchiques sont fait, les zones de contenus placées et définit, les éléments graphiques choisit créés et validés. Tout ce qu’il vous reste à faire c’est prendre ces éléments et les placer selon le zoning définit.

 

Maquettes du site Algo Peinture : Homepage et page interne.

 

Si vous avez la chance de travailler avec un seul outil pour créer à la fois wireframes, moodboard et maquettes, vous aurez l’opportunité intéressante de reprendre vos fichiers et de remplacer simplement les éléments filaires du mockup par ceux de votre moodboard. Pour ma part je travaille toutes ces étapes sous Adobe Illustrator, en vectoriel, ce qui me permet de ne pas me préoccuper des éventuelles problématiques de redimensionnement d’image d’un plan de travail à l’autre.

Concernant les autres outils de création, voici la liste des plus notables :

Adobe Photoshop, Gimp, Microsoft Expression Design (vectoriel), Paint.Net, Inkscape (vectoriel), etc. Notons l'arrivé sur le marché d'un petit nouveau prometteur du nom d'Affinity Design.

 

5.Le découpage

 

La phase de découpage n’est pas la plus fun qui soit mais elle est indispensable à l’intégration des maquettes en html/css. Je ne m’attarderai pas sur cette étape, sachez simplement que si vous travaillez avec Photoshop ou Illustrator, il existe des scripts qui permettent d’automatiser l’export de tout les éléments de vos maquettes en sprites png. Leur usage nécessite de travailler la maquette avec une méthodologie un peu particulière, mais vous gagnerez un temps précieux à l’export. De plus ces scripts vous permettront de nommer automatiquement tout vos sprites à partir des intitulés de calques. Un nommage propre facilitera beaucoup le travail de l’intégrateur.

Il est intéressant de noter qu'il existe aussi certains outils en lignes pour faciliter le transfert d'informations entre le designer et l'intégrateur. Zeplin est un exemple d'outil performant qui permet à l'intégrateur de récupérer toutes les informations à partir d'une maquette au format sketch ou photoshop. Pour le découpage, des outils en ligne existent également comme par exemple McRabbit Slicy qui découpe automatiquement les assets graphiques d'une maquette photoshop.

 

Conclusion

 

Outre le fait d’organiser et de faciliter votre travail ainsi que le workflow avec vos collaborateurs, cette méthode de travail composée d’étapes bien distinctes est compatible avec le travail en collaboration avec un client. Cela vous permettra de valider le projet avec lui étapes par étapes et d’éviter trop d'aller retour de correctifs qui pourraient ralentir le projet.

Prenez le temps pour vous poser les bonnes questions à la fin de chaque étape de création :

- Mon architecture est elle objectivement logique ? peut-on la comprendre sans connaître le projet ?
- La structure de mes pages et mes groupes de contenus reflètent ils bien l’architecture de mon site internet ?
- Le style graphique que j’ai choisis est il cohérent avec la thématique de mon projet ?
- Mes éléments graphiques sont ils facilement interprétable ?

Posez vous sans arrêt la question de la cohérence. Enfin n’hésitez pas à mettre votre site en situation en la faisant tester par vos amis, vos collègues, vos grands parents, etc. Il n’y a que de cette façon que vous pourrez vous assurer que votre application est abordable et compréhensible par un large panel d’utilisateurs.

Avez-vous besoin d'une prestation de design ? Prenons contact