• 8 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 01/12/2023

Réalisez le zoning et le wireframe d'un site web

Après avoir délimité le périmètre fonctionnel et créé l'arborescence de votre site, vous et votre équipe aurez tous les éléments pour en faire des ébauches. Ces croquis, volontairement simplistes, serviront de document de référence par la suite, en phase de conception.

Dans le contexte d'un projet digital, vous entendrez et emploierez le terme "fidélité" pour décrire le niveau de ressemblance d'un livrable avec sa version finale attendue.

On distinguera les niveaux suivants :

  • Basse fidélité : à ce stade de brouillon, rien n'est figé et vous ne prendrez aucune esthétique en considération.

  • Moyenne fidélité : à ce stade intermédiaire, les choix majeurs ont déjà été validés mais l'esthétique n'est pas encore définitive.

  • Haute fidélité : à ce stade final, les maquettes ressemblent au pixel près à la version finale du produit. 

Toujours en phase de lancement, pour les besoins du cahier des charges, je vais maintenant vous montrer deux techniques très simples pour produire des maquettes basse et moyenne fidélité :

  • le zoning

  • et le wireframing

Organiser les pages de votre site avec le zoning

Le zoning est une technique de maquettage basse fidélité qui permet d'organiser le contenu d'une page web en la divisant en différentes zones

À terme, ces différentes zones pourront chacune contenir plusieurs éléments graphiques, mais à ce stade vous allez volontairement les omettre pour vous concentrer sur le découpage, l'organisation, la structure de vos pages.

Comment faire un zoning concrètement ?

Comme souvent, il y a plusieurs façons de faire.

Une première façon "artisanale" (papier/crayon) pour brainstormer :

Zoning fait à la main
Zoning d'une page d'accueil fait à la main

Et une autre façon, avec un éditeur graphique, plus propre et plus présentable :

Zoning réalisé avec un éditeur graphique
Zoning réalisé avec un éditeur graphique

Pour cette dernière, je vous invite donc à suivre les étapes suivantes :

  1.  Pour chaque page listée dans votre arborescence, préparez 3 canevas, un pour chaque support (mobile 320 x 480 px, tablette 768 x 1024 px , ordinateur 1280 x 800 px).

  2. Sélectionnez deux nuances de gris.

  3. En commençant par les versions mobiles, avec votre première nuance de gris, créez des rectangles pour représenter les éléments persistants d'une page à l'autre, par exemple une navigation principale, un fil d'ariane ou un footer.

  4. Avec votre deuxième nuance de gris, créez des rectangles pour représenter les éléments contextuels de chaque page en vous appuyant sur votre impact mapping.

  5. Répétez la 4e étape pour toutes les pages listées dans l'arborescence. 

Placer tous les éléments qui composent le site avec le wireframing

 Un wireframing (ou maquette fil de fer en français) est une technique utilisée pour créer des versions basse/moyenne fidélité d'un livrable.

Vous l'avez peut-être déjà compris, le wireframing permet d'ajouter une couche de détail à vos maquettes. Si vous partez d'un zoning bien fait, tout ce que vous aurez à faire, c'est remplacer vos zones par les éléments qui les composent.

Maquette fil de fer d'une page d'accueil mobile
Maquette fil de fer d'une page d'accueil mobile
Maquette fil de fer d'une page d'accueil (ordinateur)
Maquette fil de fer d'une page d'accueil (ordinateur)

Documenter la partie "conception graphique" du cahier des charges

Cette section a pour but de préciser, dans ses grandes lignes, la direction artistique du projet. 🎨

Dans la majorité des cas, cette responsabilité reviendra à votre graphiste/designer. Il n'y a donc pas lieu de la commenter en détail dans ce cours.

Aperçu d'une synthèse de conception graphique
Aperçu d'une synthèse de conception graphique

Le passage de basse à moyenne puis haute fidélité

Passage de basse à moyenne puis haute fidélité de la page d'accueil de l'Hôtel Paradis
Passage de basse à moyenne puis haute fidélité de la page d'accueil de l'Hôtel Paradis

En résumé

Vous avez désormais tout ce qu'il vous faut pour finaliser les spécifications fonctionnelles de votre site web. Il ne vous reste plus qu'à faire traduire ces spécifications fonctionnelles en spécifications techniques et vous aurez un cahier des charges complet, prêt à être exécuté.

On va s'en occuper au prochain chapitre ! 😀

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous
Exemple de certificat de réussite
Exemple de certificat de réussite