Le wireframing est une étape importante dans la création d’un site web sur mesure, qui consiste à concevoir la maquette « fonctionnelle » du site. A la différence d’une maquette graphique, un wireframe fait complètement abstraction de l’aspect graphique et design du site, pour se concentrer sur l’ergonomie. La réalisation d’une maquette fonctionnelle est une excellente occasion pour optimiser l’expérience utilisateur du site en projet. Nous avons réalisé ce guide complet afin de vous donner les clés pour réaliser une maquette de site web dans les règles de l’art.
Petite remarque avant de commencer : Avez-vous besoin d’un site web entièrement sur mesure ? Si la réponse est non, vous n’avez peut-être pas besoin de passer par l’étape « wireframing ».Vous trouverez sur le web des milliers de « templates » de sites, dont certains gratuits, prêts à l’emploi. Voici des exemples de templates de sites personnalisables (Envato) :
Le wireframing n’a d’intérêt que si vous souhaitez créer un site sur mesure, très personnalisé, répondant à des attentes très précises. Voici à quoi ressemble une maquette fonctionnelle très basique :
Une maquette fonctionnelle a la même fonction qu’un plan d’architecte. On ne peut pas construire une maison en 3D sans en avoir conçu au préalable le plan, en 2D et et en noir et blanc. De la même manière, il n’est pas possible de créer des motifs sur PhotoShop et d’écrire des lignes de code sans savoir à l’avance où ces motifs et lignes de code doivent se placer sur le site.
A un niveau plus avancé, un modèle fonctionnel permet de déterminer la manière dont les utilisateurs interagiront avec l’interface. Un wireframe peut par exemple indiquer le fonctionnement d’un menu.
Le wireframing est une étape importante dans la mesure où elle permet à un designer de construire la mise en page et les modèles d’interaction sans être distrait par les couleurs ou les polices. La maquette fonctionnelle permet de se focaliser sur les aspects ergonomiques, en évacuant toutes les considérant d’ordre esthétique. Entrons dans le vif du sujet : voici les 9 étapes à suivre pour réaliser une maquette fonctionnelle.
Pour compléter la lecture de ce guide complet, nous vous invitons à découvrir les 8 règles d’or d’ergonomie web à connaître avant de créer votre site internet.
Étape #1 : trouver des sources d’inspiration
Toutes les créations – artistiques ou non – sont inspirées de travaux ou de réflexions antérieurs. On ne part jamais de zéro. Avant même de commencer à mettre les mains dans le cambouis et à construire votre maquette, nous vous conseillons de faire quelques recherches sur internet et de partir à la recherche de sources d’inspiration. Sans surprise, les meilleures ressources sont en anglais. Jetez un oeil par exemple à Wireframes Linowski, ou à I ♥ wirefames. Vous y découvrirez plein d’exemples de maquettes et des réflexions autour de wireframing qui vous permettront de mieux saisir le fonctionnement du process.
En parallèle, nous vous recommandons vivement d’utiliser le plugin Wirify (payant), qui permet de visualiser les sites web sur lesquels vous naviguez sous forme de maquette fonctionnelle.
Observer et analyser la manière dont sont construits les autres sites web vous permettra d’alimenter votre propre réflexion et d’identifier les bonnes pratiques en matière de wireframing.
Étape #2 : définir le process de création
Le design est un process organique dans la mesure où chaque étape est reliée aux étapes précédentes et déterminée par elles. Les designers peuvent adopter des process différents et envisager l’étape du wireframing différemment dans ses relation avec le résultat final (graphisme et code). Vous devez trouver le process le plus adapté à votre manière de travailler et le plus confortable pour vous. Voici quelques exemples de process :
Dans tous les cas, la dernière étape est celle du code, de la programmation informatique. C’est au niveau des étapes antérieures que les approches varient. Pour certains, un simple croquis suffit avant de passer au code. Pour la plupart des designers, le wireframing est une étape incontournable, parfois précédé de la création d’un croquis.
Pour gagner du temps dans la conception de votre site web, nous vous conseillons d’utiliser un framework css, de type Blueprint ou CSSgrid. Cela vous permettra de construire vos différentes maquettes fonctionnelles à partir d’une même grille de départ. Nous avons opté ici pour une grille css en 12 colonnes. Cette grille, qui divise l’espace d’affichage, vous évitera d’avoir à définir la largeur de chaque élément dans vos feuilles de style css. Nous avons construit cette grille en 12 colonnes, dans l’exemple, à partir du logiciel CSSgrid (qui a le mérite de supporter le responsive design). Cette grille, une fois construite, peut être exportée en tant que template Photoshop.
Encore une fois, vous êtes libre de choisir votre process de création. Vous devrez d’ailleurs peut-être essayer plusieurs process avant d’identifier celui avec lequel vous vous sentez le plus à l’aise. Certains réussissent à se contenter d’une esquisse (d’un zoning de base) avant de passer au code, en zappant complètement l’étape de wireframing. D’autres designers préfèrent intégrer le maximum d’étapes dans le processus pour pouvoir réaliser plus d’itérations. Vous finirez par trouver le vôtre. Dans ce guide complet, nous allons suivre le process suivant :
Pour le travail de wireframing, nous allons utiliser le logiciel Adobe Illustrator. Pourquoi ce choix ? Il y a trois raisons :
- Il est possible de sauvegarder des styles pour les réutiliser ultérieurement, comme en CSS.
- Il est facile de modifier, de déplacer ou d’agrandir les éléments.
- Il est très facile de basculer d’Illustrator à PhotoShop.
Il existe d’autres outils qu’Illustrator, dont nous allons parlé dans un instant.
Étapes #3 : choisir les outils
Dans ce guide complet, on ne s’intéresse qu’au wireframing réalisé via des logiciels dédiés, et pas au maquettage papier (qui reste pourtant encore relativement fréquent !). Voici quelques uns des outils les plus populaires pour faire du wireframing :
Balsamiq
Si Balsamiq est devenu si populaire, ce n’est pas sans rapport avec le mode de présentation utilisé. Les wireframes sont présentés comme des esquisses, ce qui créé une expérience utilisateur très agréable. Balsamiq dispose aussi d’une bibliothèque de composants très fournies, très faciles à intégrer dans vos maquettes fonctionnelles facilement (simple glisser-déposer). Balsamiq est l’un des outils les plus faciles d’accès et les plus intuitifs. Le logiciel est payant, mais vous pouvez bénéficier d’une période d’essai gratuite de 30 jours.
Balsamiq est disponible sur tous les supports (Mac Windows, Linux) et propose une version web qui vous permet de travailler dans le cloud (SaaS). Les applications tierces comme iMockups (pour la création d’applications iOS) supportent le format Balsamic.
Vous souhaitez traduire le contenu de votre site ? Découvrez notre guide complet sur la traduction d’un site web : coût, choix prestataires et organisation du projet.
Omnigraffle
Omnigraffle propose lui aussi une bibliothèque très riches de composants, alimentée par les contributions des utilisateurs du logiciel (Graffletopia).
Omnigraffle, dans la mesure où il s’agit à la base d’un logiciel de création de diagrammes, dispose de fonctionnalités plus complexes que Balsamic, comme par exemple des outils de création de graphiques ou un gestion avancé de styles, mais fonctionne aussi sur le modèle du glisser-déposer. Précision importante : Omnigraffle n’est supporté que par Mac OX. Omnigraffle est intéressant si vous souhaitez créer des wireframes très détaillés.
Axure
Axure est l’un des tous premiers logiciels de wireframing professionnel. Jusqu’à récemment, il n’était disponible que sous Windows. Personnellement, nous ne l’avons pas testé, mais il reste encore l’un des logiciels les plus utilisés à travers le monde.
Flairbuilder
Flairbuilder est un outil de maquettage beaucoup plus récent qu’Axure, disponible en version Mac et Windows. Il dispose lui aussi d’une riche bibliothèque de composants, intégrables sur la maquette par glissé-déposé. Son point fort : la gestion de l’interactivité (clic double, survol avec la souris, événements personnalisables…). Il intègre, comme Balsamic, le système des calques (layers) qui permet de construire les maquettes en plusieurs étapes et de regrouper les composants.
Le petit conseil de La Fabrique du net
Si vous préférez travailler avec des applications en ligne, nous vous conseillons des logiciels comme Mockflow, Hotgloo ou encore Mockingbird.
Keynote/Powerpoint
Keynotopia est un logiciel de maquettage qui a pour particularité de fusionner Keynote et Powerpoint. Un outil qui vaut le détour et qui, en tous cas, convient très bien pour le wireframing d’applications mobile. Dans le même genre, citons aussi Keynote Kungfu.
Adobe CS
Pour ceux qui sont déjà familiers de la suite Adobe, Fireworks, Illustrator et Indesign sont des outils tout à fait pertinents pour créer des wireframes. Chacun d’entre eux a ses points forts et ses faiblesses :
- Vous pouvez travailler sur Fireworks tout au long du process de design, des wireframes basiques à la création de la version graphique du site. Fireworks supporte les « master pages » (pages qui peuvent être utilisées comme templates pour décliner des pages filles), propose une belle bibliothèque de templates et permet de créer des maquettes interactives en relativement peu de temps.
- Illustrator est l’outil que nous allons utiliser dans ce guide complet. Il permet de créer des maquettes fonctionnelles d’un haut niveau de complexité dans y passer trop de temps, et sans besoin d’interactivité. Ses points forts : la possibilité d’exporter au format PhotoShop, de copier-coller des éléments sur PhotoShop et la gestion des typographies.
- Indesign est un logiciel de mise en page qui dispose des mêmes qualités qu’Illustrator. Il permet même d’aller encore plus loin dans la gestion des typographies, des styles et des « master pages ». Son petit plus sur Illustrator : les fonctionnalités interactives. Son point faible : l’export vers PhotoShop, pour le design visuel, n’est pas parfait.
Sur le sujet du choix des outils, nous vous conseillons la lecture de ce top 10 (en français).
Étape 4 : créer une grille de composition
La grille, encore une fois, permet de structurer le contenu de votre mise en page, en créant des repères horizontaux et verticaux. La grille sert de soubassement à la structure de votre maquette, joue le rôle d’armature et permet de positionnement plus adéquatement et plus facilement les différents éléments du wireframe. Nous avons utilisé Illustrator dans ce guide, mais le process est toujours similaire. Dans un premier temps, vous devez définir la taille du document. Dans le cas présent, nous avons choisi : 1280 x 900.
Nous importons ensuite dans le document la grille construite sur Cssgrid (cf. supra). Vous pouvez aussi, si vous préférez, télécharger une grille toute prête sur internet.
100% gratuit - 3 min
Étape 5 : définir la mise en page
Une fois que vous avez votre grille, vous devez déterminer la mise en page de votre interface en intégrant sur votre document des blocs. C’est là que commence le travail créatif. Pensez toujours à vous placer dans la tête de vos futurs utilisateurs : quelles sont les informations importantes à mettre en avant ? Les informations les plus importantes doivent être positionnées en haut (en haut à gauche).
Cette mise en page est très classique, utilisée par des milliers d’entreprises. Vous pouvez vous montrer plus créatif, tout en gardant à l’esprit la hiérarchisation des informations :
Voici un exemple de mise en page pour une interface de type « blog », comprenant notamment des blocs de publicité :
Étape 6 : hiérarchiser les informations à l’aide de la typographie
Ça y est, vous êtes satisfait de la manière dont sont agencés les blocs. Vous devez maintenant passer à l’étape suivante : choisir et définir les typographies. En gardant toujours à l’esprit que les informations que vous souhaitez faire passer en priorité à vos utilisateurs doivent être claires et lisibles, même si votre maquette est en noir et blanc. Dans un premier, vous pouvez rester une seule police de caractères et jouer seulement sur la taille des caractères pour hiérarchiser les différents niveaux d’information.
N’ayez pas peur d’expérimenter, de multiplier les itérations. Car il sera ensuite difficile de revenir en arrière. Dans l’exemple ci-dessous, nous avons souhaité mettre en avant les screenshots. Nous avons aussi intégré des blocs noirs :
Découvrez tous nos conseils sur la manière de choisir la police de caractères de votre site web.
Étape 7 : utiliser un nuancier de gris
Utiliser un nuancier de gris vous permettra de régler l’impact visuel de chacun de vos éléments sans utiliser de couleurs. Le nuancier vous permettra d’affiner la hiérarchie visuelle et de vous rapprocher un peu plus du rendu final.
Découvrez notre guide complet sur l’accessibilité web (et l’art de rendre un site web utilisable par vraiment tout le monde).
Étape 8 : créer un wireframe en haute définition
Cette étape est facultative. Une maquette fonctionnelle HD est tout simplement une maquette comprenant le maximum de détails possible, et donc plus de détails qu’une maquette simple. Mais cela reste néanmoins une maquette, dans le sens où restent absents les détails visuels. La maquette HD peut être réalisée à partir de la maquette de base. A cette étape, vous pouvez détailler la taille des caractères :
Ou même ajouter des couleurs à votre maquette fonctionnelle :
La conception d’une maquette HD permet de gagner beaucoup de temps à l’étape du code et de la création graphique. Tout aura été déterminé avec précision à l’avance. Faites vos itérations directement dans votre logiciel de wireframing, plutôt qu’après coup (dans PhotoShop).
Remarque : parfois, il est préférable de ne pas trop détailler le wireframe, voire de ne pas créer de maquette HD, car certains détails d’interaction ne peuvent pas être communiqués sur une image plane. Encore une fois, le process est adaptable.
Découvrez tous nos conseils pour choisir les couleurs de votre site internet (Impact psychologique et exemples).
Étape 9 : créer la maquette graphique
Une fois la maquette fonctionnelle prête (wireframe), il est temps de passer au travail de conception de la maquette graphique. Lorsque la maquette fonctionnelle a été conçue sous Illustrator, il est très facile de basculer sur PhotoShop pour réaliser la maquette graphique.
Voici un exemple de wireframe transformé en maquette graphique. Le squelette du wireframe est pratiquement resté intact, même si quelques ajustements visuels ont été faits :
Nous arrivons au terme de ce guide complet sur le wireframing. On espère que cela vous a donné envie de créer votre propre maquette fonctionnelle. N’hésitez pas à tester, à itérer, à réitérer : c’est le secret de la réussite. Prenez aussi le temps d’essayer plusieurs outils et plusieurs process. Travailler avec des outils et des process avec lesquels vous vous sentez à l’aise vous fera gagner des heures de travail.
Si les sujets de la conception et du design web vous intéressent, je vous invite fortement à parcourir ces articles :
Laisser un commentaire