Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Wireframing
Webdesign

Guide du Débutant au Wireframing

by
Length:LongLanguages:
This post is part of a series called UX Foundations.
First Steps in Your User Experience Workflow: Nascent UX
A Beginner’s Guide to Wireframing in Omnigraffle

French (Français) translation by Benoit Benedetti (you can also view the original English article)

Le Wireframing(Maquettage) est une étape importante dans tout processus de conception d'interface. Il permet principalement de définir la hiérarchie de l'information de votre design, pour élaborer plus simplement la mise en page selon le fil conducteur que vous désirez être suivi par un utilisateur. Si vous n'aviez jamais utilisé de wireframe, c'est le moment de vous y mettre..

A simple wireframe

Cela ressemble à un plan d'architecte; vous devez voir un tel schéma noir et blanc à deux dimensions pour comprendre comment construire une maison. De la même manière pour une conception d'interface, vou ne pouvez pas commencer par créer vos calques de pixels sous photoshop, ou écrire des blocs de code, sans savoir où positionner les différentes informations.

Plus en détails, une maquette est aussi très utile pour savoir comment un utilisateur va interagir avec l'interface. Par exemple, les maquettes peuvent contenir les différents états des boutons ou les comportements des menus.

un exemple simple de wireframe donnant un aperçu du survol d'un menu ce qui permet d'éviter les malentendus

Le maquettage est important car il permet au designer de planifier la mise en page et les interactions d'une interface sans être distrait par les choix de couleurs, de polices ou même de contenu. J'aime expliquer à mes clients que si une personne ne peut s'y retrouver sur une maquette en noir et blanc, les couleurs choisies n'auront aucune importance. L'utilité d'un bouton doit être prévaloir avant de même de savoir s'il est tout brillant ou d'une couleur vive.

Tout comme pour les fondations d'une maison, celles-ci doivent être fondamentalement solides avant de vous décider ou non à lui donner une couche de peinture hors de prix.

Étape 1: Trouver l'Inspiration

Avant d'aller plus loin, une image valant mille mots, jetez un œil à I ♥ wirefames. Vous aurez un rapide aperçu et une compréhension visuelle de la manière selon laquelle d'autres designers gérent leur processus de maquettage.S

I Heart Wireframes

Vous pouvez aussi ajouter à votre navigateur ce petit bookmarklet très utile, Wirify qui vous permet de voir une version "maquettée" de n'importe quel site web existant.

cnncom avec wirify

Si vous prenez l'habitude d'observer les maquettes d'autres designers ou sites, vous aurez petit à petit une vision mentale de l'intérêt de l'utilisation d'une maquette pour organiser l'information à l'écran.

Étape 2: Concevoir Votre Processus

Le design est un processus personnel, c'est pourquoi chaque designer aborde de manière différente le wireframing et sa transposition en code ou en visuels . À vous de trouver le processus qui mettra en valeur vos points forts et avec lequel vous êtes le plus à l'aise. Ci-dessous, un diagramme des processus les plus courants:

Processus de Wireframes

37signals est connu pour promouvoir l'utilisation de croquis et passer tout de suite au code, même s'il semble que certains de leurs designers incluent également l'utilisation de maquettes visuelles dans leur processus.

Pour ma part, j'ai connu tellement de cycles design=>code, pour avoir fini par adopter un processus quelque peu simplifié. C'est une étape à laquelle tout le monde ne prête pas attention, mais je n'oublie pas de penser à tout framework html/css que je souhaite utiliser dans le projet.

Par exemple, j'ai eu pour habitude de créer des tas de sites avec Blueprint, ainsi je configurais à la fois mes maquettes et Blueprint suivant la même grille à 12 colonnes. Cela accélère considérablement les temps de prototypage et développement, au lieu d'avoir à écrire la largeur de chaque élément dans ma feuille de style css, ils sont maintenant pré-définis sur une largeur de une à douze colonnes. J'utilise désormais cssgrid à la place, pour son support du design responsive, mais il est également configuré sur une grille à 12 colonnes que vous pouvez télécharger sous la forme d'un template photoshop.

the 12-column cssgrid template

Comme je l'ai dit, c'est à vous de décider avec quel processus vous êtes à l'aise. Parfois, vous aurez peut-être à faire plusieurs essais avant de réaliser quel est le procédé le plus efficace. Certaines personnes sont à l'aise en croquis et préfèrent ne pas utiliser du tout d'outil de wireframing. D'autres designers peuvent vouloir prévoir autant d'étapes que possible pour minimiser les écarts, ou leur permettre de réfléchir à chaque itération dès que le design commence à prendre forme.

Vous allez peut-être développé tout seul votre propre processus personnel, mais pour l'intérêt de ce tutorial je vais utiliser ma méthode à titre d'exemple:

La raison pour laquelle j'utilise Illustrator comme outil de maquettage tient à trois raisons:

  1. Styles – vous pouvez enregistrer les styles des objets et polices et les ré-utiliser, tout comme en CSS.
  2. Il est très simple de modifier, déplacer et redimensionner plusieurs objets.
  3. Il permet de passer ensuite facilement sous Photoshop.

Cependant, j'utilise d'autres outils en fonction des besoins du projet en cours. Je vais briévement présenter dans la suite certains outils populaires, leurs points forts et leurs faiblesses.

Étape 3: Choisir Ses Outils

Voici quelques outils populaires dans aucun ordre en particulier:

Balsamiq

Balsamiq est devenu populaire car les maquettes produites avec Balsamiq ressemblent à des croquis, rendant évident que la maquette est un travail en cours de développement plutôt q'un produit non fini. Balsamiq possède également une importante bibliothèque de composants réutilisables que vous pouvez glisser et déposer très simplement pour réaliser vos maquettes.

Maquette Balsamiq Exemple depuis le site web de Balsamiq

Vous pouvez aussi l'utiliser depuis n'importe quel système, grâce à des versions desktop disponibles pour Mac, Windows et Linux, ainsi qu'une version web si vous préférez travailler dans le cloud. Des applications tiers comme iMockups pour iOS supporte également les formats d'exportation de Balsamiq.

Omnigraffle

Un ancien favori sous Mac, Omnigraffle a également une large bilbliothèque de composants ré-utilisables contribués par sa communauté utilisateurs; Graffletopia.

youll like omnigraffle if you enjoy using beautiful stencils like this one

Originellement développé comme logiciel de diagrammes, Omnigraffle possède également des fonctionnalités avancées comme la mise en page automatique, le support des objets de style personnalisés, les guides intelligents et outils graphiques. Certaines de ces fonctionnalités sont également disponibles dans la suite Adobe CS, mais si vous n'avez pas la suite CS, Omnigraffle offre une alternative bon marché(~$100) pour réaliser des maquettes détaillées.

Axure

Faisant figure de patriarche des outils de wireframing, Axure a été un des premiers outils de wireframing/prototypage de niveau professionnel. Encore récemment, il était disponible sous Windows. Je n'ai personnellement pas beaucoup d'expérience dans son utilisation, mais il est très largement répandu dans la profession.

Flairbuilder

Nouveau venu, Flairbuilder est très orienté interactivité.

from show  hide to if-else interactions

Il a aussi une important librairie de composants, il supporte les pages maître et vous pouvez exporter le prototype et le mettre en ligne.

Applications en ligne

Si les applications de bureau ne sont pas votre tasse de thé, il existe des outils comme mockflow, hotgloo et mockingbird.

Keynote/Powerpoint

Keynotopia "transforme votre application de présentation favorite en le meilleur outil de prototypage rapide pour créer des maquettes d'application mobile, web et bureau". Pour les utilisateurs non-mac, n'ayez crainte, Keynotopia propose également des modèles powerpoint.

Je vous le recommande chaudement si vous avez besoin de maquetter ou prototyper rapidement des applications mobiles. Une alternative intéressante Keynote Kungfu.

Adobe CS

Pour ceux d'entre vous déjà familiers avec la suite d'Adobe, Fireworks, Illustrator et Indesign sont des outils de wireframing très capables avec leurs forces et faiblesses.

Fireworks

Vous pouvez réaliser de A à Z le processus de design sous Fireworks, de la maquette au visuel complet. Fireworks prend en charge les pages maîtres (à considérer comme des pages modèles réutilisables où chaque modification sur le modèle maître peut être appliqué automatiquement sur les pages enfant), les bibliothèques d'éléments et vous pouvez faire des prototypes interactifs avec Fireworks relativement rapidement.

Illustrator

C'est un de mes outils préférés car je suis déjà à l'aise avec Illustrator et je suis sûr que beaucoup de designers ici présents sont familiers avec également. J'utilise Illustrator quand je dois réaliser rapidement des maquettes, maquettes qui peuvent être complexes, mais qui ne nécessitent pas d'interactivité.

Qu'est-ce qui en fait un favori? La capacité à exporter vers Photoshop des PSD aux calques modifiables, le support du copier/coller, et une gestion avancée de la typographie avec des styles de caractères que vous pouvez sauver, éditer et réutiliser, comme avec du CSS.

Indesign

Des points forts similaires à Illustrator avec une gestion encore plus avancée des styles typographiques, très bon support des pages maîtres et la récente capacité à faire des prototypes interactifs.

Connaissez-vous vu les possibilités d'interactivité d'InDesign

Je me tourne ves Indesign quand je dois faire des prototypes composés de plusieurs pages interactives qui doivent êtres le plus fidèles possible. Le seul frein pour moi est le faible support pour l'export vers Photoshop des éléments visuels.

ProtoShare

"Prototypages Puissants Extrémement Simples." Récemment sortie en version 9 avec une nouvelle palette wysiwyg. À tester.

Étape 4: Élaborer une grille

Il y a beaucoup de théorie derrière les systèmes de grille, mais pour ne pas rentrer trop dans les détails, je vous le présenterais comme "un moyen simple et structuré de mettre en page les éléments".

J'utilise Illustrator pour ce tutoriel mais les étapes peuvent être appliquées avec n'importe lequel de vos outils.

D'abord, déterminez une taille de document. J'ai utilisé 1280 x 900 car je vais utiliser cssgrid qui va permettre à mon site de passer des résolutions mobiles jusqu'à un maximum de 140 pixels facilement.

Placez le modèle cssgrid téléchargé dans votre document.

Astuce:

Il existe beaucoup de modèles de grille disponibles au téléchargement, mais si cela vous intéresse de personnaliser le votre, jetez un œil à responsify.it.

Étape 5: Determiner la Mise en Page Avec des Boîtes

Commencez par dessiner vos boîtes sur la grille. Pensez à l'ordre dans lequel vous voulez présenter les informations à vos visiteurs. Partir du haut vers le bas est le plus simple, suivi par la gauche vers la droite. Ci-dessous un exemple de maquette qui a une mise en page régulièrement utilisée de nos jours par des sociétés de webdesign:

Parfois, suivant vos objectifs ou l'entité pour laquelle vous travaillez, vous pouvez être créatif dans votre mise en page, tout en gardant à l'esprit l'arrangement de l'affichage des informations. Voici un exemple réel d'un de mes clients pour lequel je suis sorti des mises en page conventionnelles utilisées par les sociétés de webdesign:

Voici une mise en page pour un blog, avec des encarts publicitaires judicieusement placés et des instructions claires pour le client:

Étape 6: Definir La Hiérarchie de L'information Avec la Typographie

Une fois que vous êtes satisfait par la disposition de vos boîtes, commencez à y insérer du contenu pour vous rendre compte si l'information est bien structurée. La règle d'or est toujours la même: L'information affichée à votre audience doit être claire, même dans une maquette noire est blanche.

Utiliser simplement différentes tailles de polices est un bon début pour différencier les différents niveaux d'information.

N'ayes pas peur d'expérimenter à ce stade. Parfois, alors que vous ajoutez des détails, vous réaliserez peut-être que le design original ne fonctionne pas comme prévu. C'est là l'intérêt du processus de maquettage: faire autant d'itérations que possible pour affiner et trouver la meilleure façon de présenter l'information à communiquer.

Dans l'exemple ci-dessous, j'avais décidé que je désirais que les captures d'écran aient plus d'impact et j'ai également commencé à utiliser des boîtes noires pour indiquer quelles seraient les zones qui auraient le plus d'importance pour ce site web:

Step 7: Réglages Fins à l'aide de Niveaux de Gris

Utiliser toute la palette des niveaux de gris peut vous aider à déterminer l'impact visuel de vos éléments sans avoir à choisir une palette de couleurs. En fait, cela pourra vous aider plus tard pendant le processus de conception visuelle.

Étape 8: Maquette Haute-définition

C'est une étape optionnelle, mais si vous aimez procéder par étapes c'est une méthode à considérer. Faire une maquette haute définition signifie simplement ajouter autant de détails que possible, sans aller trop dans les détails graphiques. Ça peut être par exemple remplir la maquette avec le texte final et essayer de déterminer la taille de police idéale:

Cela peut aussi faire intervenir les couleurs:

L'idée générale est qu'une fois au stade graphique ou du code, vous voulez être en mode finition et non plus en mode expérimentation. Effectuez ainsi vos cycles d'itération (feedback <-> wireframing) aussi vite que possible dans une appplication de wireframing avec laquelle vous êtes confortable, plutôt que de déplacer calques et pixels dans photoshop.

Ceci étant dit, dans certains cas il sera plus approprié de ne pas s'attarder aux détails et de passer directement au stade du propotypage interactif(à la 37signals). L'argument de cette approche est que certains détails d'interaction ne peuvent être reproduits fidélement sur une image plane.

Si vous travaillez avec une équipe de développeurs, vous voudrez peut-êter passer les maquettes validées aux développeurs pour coder la structure de base pendant que vous travaillez sur le visuel.

Étape 9: Transposer une Maquette en un Visuel

Décrite plus haut, la raison pour laquelle je préfère utiliser Illustrator pour le maquettage est que je peux l'exporter en .psd avec la plupart des calques éditables. Une fois dans Photoshop je n'aurai pas trop à modifier les polices de caractères (Photoshop a une gestion inférieure des caractères, même s'il y a eu un mieux dans CS6):

Photoshop Export Options

Voici l'exemple d'une maquette convertie en visuel. Le squelette de la maquette est quasi-identique, même si quelques ajustements visuels ont été apportés. Vous pouvez également voir ce site en réel:

Webwise 2010

Conclusion

Ici s'achève ce tutoriel. J'espère qu'il vous à donner de l'inspiration! Comme dans tout processus de design, n'ayez pas peur de multiplier les itérations.

Aussi, prenez le temps de tester différents outils et processus. Vous vous rendrez compte que le temps investi en valait la peine une fois trouvée une méthode qui vous sera intuitive.

N'hésitez pas à poser vos questions dans les commentaires, merci de votre attention!

Ressources Additionnelles

Si vous désirez en savoir encore plus sur le wireframing, vous devriez vous intéresser à ces ressources.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.