Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory

Introduisez les wireframes dans votre processus de design

by
Read Time:8 minsLanguages:
This post is part of a series called Design School for Developers.
Sketching and Your Design Workflow
Defining and Recognizing Colors

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

Après le croquis, il y a une dernière chose, sur laquelle vous devez travailler avant de commencer à designer (bien que, certes, tout cela fait partie du design). Le wireframing est essentiellement un guide visuel vers un site web qui vous permet de travailler la mise en pages sans penser à l’esthétique du projet.

À quoi un wireframe devrait ressembler variera énormément, selon celui à qui vous parlez. Vous avez beaucoup d’options lorsque vous créez des wireframes - de la façon dont vous affichez vos wireframes, au logiciel avec lequel vous les créez.

Lorsque vous créez vos wireframes, vous avez besoin de travailler avec la mise en pages et le contenu que vous avez précédemment organisé. L’idée d’un wireframe - comme un livrable au client ou juste comme une étape supplémentaire, que vous préférez prendre - doit être capable d’afficher la présentation visuelle et le flux d’une page de site web, avant de vous embourber avec les détails de design tels que la couleur, la typographie ou tout autres styles visuels.


Design de wireframes créatifs

La meilleure façon de passer à la création de wireframes digitaux pour votre projet est de passer directement de la phase esquisse. Dans cette section vous devriez déjà jouer avec la mise en pages, mais créer un wireframe digital est un moyen beaucoup plus professionnel de préciser vos idées sur la mise en pages et les flux de votre page web.

Lors du design de wireframes créatifs, vous voulez vous assurer que vous utilisez le contenu réel que vous avez organisé au début du projet. Personnellement, je préfère designer des wireframes qui manquent de tout ce qui pourrait influencer un client à penser que les décisions de design qui affectent l’apparence et le ressenti du projet sont prises. C’est pourquoi je m’assure toujours que je conçois un wireframe qui se concentre uniquement sur le contenu du projet et la façon dont le contenu est présenté sur la page.

An example wireframe created using the Balsamiq Desktop application.An example wireframe created using the Balsamiq Desktop application.An example wireframe created using the Balsamiq Desktop application.
Un exemple de wireframe créé à l’aide de l’application Balsamiq Desktop.

Qu'est-ce qui fait un bon wireframe ?

Un contenu bien écrit et affiché d'une manière qui soit utile et pertinente à ceux qui liront, entraînera toujours un meilleur design et une expérience en ligne. Un wireframe bien conçu est celui qui garde en mémoire que le contenu est la chose la plus importante sur la page et est favorable à l’affichage de ce contenu d’une manière qui est appropriée pour le projet et ses utilisateurs finaux.

L'étape de wireframing d’un projet sera fortement liée au moment où vous travailliez avec votre contenu au début du projet. Comme un bref exemple, à ce moment-là vous aurez travaillé dur pour faire en sorte que le contenu soit facile à lire grâce à la bonne utilisation des titres et des listes. Designer un bon wireframe signifie transporter ce contenu (en paragraphes, titres, listes et toute autre manière que vous avez choisie de formater le contenu) dans votre wireframe et en chercher comment vous pouvez commencer à créer des relations visuelles entre chaque élément du contenu, relier les points jusqu'à ce que vous ayez une représentation visuelle de ce à quoi ce contenu pourrait avoir l'air sur une page.

Designez avec des blocs

Afin de garder vos wireframes axés sur le contenu et sans design, travailler avec des blocs est une façon vraiment facile de sectionner les parties d’une page en des zones de contenu particulières.

En pratique cela signifie que si, par exemple, vous vouliez un en-tête standard en haut de la page, alors vous ajouteriez un bloc vers le haut de votre design de wireframe. Si, strictement par exemple, vous souhaitez ajouter une zone de logo et de navigation dans l’en-tête, alors vous placez des blocs supplémentaires pour ces éléments à l’intérieur de l’en-tête de votre design de wireframe.

Vous pouvez ensuite utiliser des blocs dans le reste du design de wireframe, continuant à sectionner des zones pour des éléments spécifiques du contenu.

Ne le prenez pas trop au pied de la lettre

Les blocs n’ont pas à être juste un carré monochrome littéral ou rectangle toutefois - une fois que vous avez une idée de votre mise en pages de base avec les blocs que vous avez ajouté, n’hésitez pas à utiliser votre contenu réel aux endroits dans lesquels il sera utile. Par exemple, utilisez la teneur réelle pour les éléments de navigation, une introduction à une page, les titres et ainsi de suite. Ceci aide comme vous pouvez commencer à voir visuellement le contenu fonctionner ensemble dans la mise en pages que vous créez.

Astuce : Étiquetez vos wireframes

Lorsque vous designez vos wireframes, assurez-vous toujours d'étiqueter les zones ou les sections que vous y placez. Bien que vous compreniez ce qu’un certain bloc désigne (en particulier lorsque le contenu réel n’est pas placé là), un client ou un collègue ne le peut pas, et vous devriez le rendre aussi clair que possible pour eux de comprendre ce qu’ils cherchent.


Tenez compte du flux

Lorsque vous designez vos wireframes, une chose à laquelle vous devriez penser est le flux de la page - regardez la façon dont le contenu se trouve sur la page et comment il coule d’une section de contenu à l’autre.

Le but ici est de s’assurer que le contenu se lit correctement et que votre œil se déplace avec fluidité d’une section à l’autre. Ceci est particulièrement important quand vous avez des pages avec énormément de contenu- les utilisateurs doivent être en mesure de se déplacer facilement d’une section à l’autre, sans que ce soit une expérience choquante. Si les pages sont trop chargées et n’ont pas le bon type de flux appliqué, les utilisateurs vont ignorer ce qui semble difficile à comprendre ou un processus difficile à suivre.

Une idée est de penser à ce que vous feriez intuitivement lors de la navigation d’un site web - commencer en regardant vers le logo et l’en-tête, puis vers le bas pour le titre principal et après le contenu principal, se déplacer progressivement vers une barre latérale, et ainsi de suite.


Design responsive et wireframes

Lorsque vous designez un site web, il est presque impossible de créer un wireframe distinct pour chaque étape à laquelle le site pourrait changer, à quoi il ressemble ou comment ils s'ajuste dans son ensemble. Au lieu de cela, ayant précédemment pensé au flux de votre design et contenu, vous pouvez chercher un flux adapté au design de wireframe.

Il s’agissait d’une astuce que j’ai ramassée du du talk de Sarah Parmenter au Responsive Day Out, où Sarah a expliqué comment ajouter des numéros à ses wireframes aident un client à comprendre comment le contenu et les éléments peuvent s'empiler lorsque sur un écran plus petit. C’est vraiment utile car cela va aider un client à commencer à comprendre la hiérarchie de contenu, également, ce qui signifie que vous pouvez commencer à regarder des écueils possibles ou les défis lorsque vous travaillez avec responsive très tôt dans le projet - quelque chose qui peut vous faire économiser beaucoup de temps plus tard dans le projet.


Applications et outils

Lors du design de wireframes, vous avez un montant ridicule de choix quand il s’agit du logiciel que vous pouvez utiliser. Personnellement, je pense qu’il y a trois choix concrets qui semblent plus populaires, en particulier dans l’industrie du web.

Logiciel de graphisme (Photoshop, etc).

Lorsque vous designez un wireframe, peut-être la solution la plus simple est de travailler avec une application de création graphique avec laquelle vous êtes déjà familier - ou au moins avez utilisé un peu avant. Autrement dit, il y a peu ou aucune courbe d’apprentissage, pour que vous puissiez vous lancer dans le design de vos wireframes un peu plus rapidement.

La meilleure façon de concevoir avec votre logiciel graphique est d’utiliser les outils de forme et de texte, en utilisant ceux-ci pour créer vos blocs de base, mais aussi des zones spécifiques avec le contenu réel. N’oubliez pas d’étiqueter vos blocs de wireframe à l’aide de l’outil texte, comme vous avancez.

Keynote et Powerpoint

Cela peut être une surprise pour certains, comme Keynote et Powerpoint sont généralement utilisés pour créer des présentations. Cependant, ce sont des outils très puissants et facile à utiliser pour créer d’autres choses, y compris les wireframes. En utilisant les outils par défaut qui sont disponibles dans les applications elles-mêmes, vous pouvez facilement créer des wireframes d'apparence professionnelle vraiment rapidement.

Balsamiq Mockups

Ma préférence personnelle, Balsamiq Mockups est une application qui est dédiée à la création de wireframes. Ce soft simplifie vraiment le design de vos wireframes et a beaucoup de ressources à votre disposition pour rapidement faire glisser et déposer les éléments que vous souhaitez placer.

Une chose que j’aime sur Balsamiq Mockups, c’est qu’il utilise un style brouillon, esquissé qui se prête vraiment à montrer que les wireframes sont exactement cela - une idée de la mise en pages qui pourrait se traduire ensuite par un design approprié. Vous avez la possibilité de choisir entre une sensation plus standard pour les wireframes ainsi que la finition esquissée, si vous sentez qu'un client serait plus réceptif à ça.

Ressource pratique : Kits UI

Avec l’introduction des kits d’interface utilisateur, il est également très facile de commencer à concevoir des wireframes plus complexes sur une variété d’applications. De kits complets, vous pouvez télécharger pour les utiliser comme PSD dans Photoshop, pour des ensembles qui vous aideront à créer des wireframes dans Keynote beaucoup plus facile - il y a quelque chose là pour vous aider.


Devoirs

  • Jouer avec les trois types de façons dont vous pouvez faire des wireframes, ainsi vous pouvez décider ce qui convient à votre style de travail et avoir un meilleur flux de travail. L’idée ici est de vous laisser juste un peu de temps pour vous familiariser avec les différentes applications qui sont disponibles quand vous faites du wireframing et voir lequel vous convient le mieux.
  • Une fois que vous avez trouvé quelle solution de wireframing vous préférez, commencez à créer et designer vos wireframes. N’oubliez pas de commencer simple, construire votre mise en pages et les composants pour représenter la mise en pages.
  • Une fois que votre wireframe est terminé, créez une copie de celui-ci et commencez à penser au « flux responsive » et comment chacun des éléments peut s'empiler lorsque la fenêtre d’affichage du site commence à devenir plus petite.
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.