Correctement \u00e9tablie, elle aide vos webdesigners \u00e0 r\u00e9aliser une interface efficace, professionnelle et li\u00e9e \u00e0 vos objectifs. Alors, comment cr\u00e9er une maquette de site web ? Voici les 14 \u00e9tapes \u00e0 suivre ! Vous pouvez \u00e9galement demander \u00e0 votre prestataire d’inclure la maquette dans le devis de votre site internet<\/a>.<\/p>\n Un mood board est une collection de tous les diff\u00e9rents \u00e9l\u00e9ments de design que vous souhaitez ajouter \u00e0 votre site web\u00a0: palette de couleurs<\/a>, graphiques, typographie, styles vid\u00e9o, etc. Le mood board vous aide \u00e0 concervoir la maquette du site web en donnant des pistes cr\u00e9atives.<\/p>\n Comme l\u2019indique son nom, il vous aide \u00e0 concevoir une maquette qui vous ressemble personnellement et valorise vos engagements. Commencez par d\u00e9terminer la hi\u00e9rarchie de votre contenu \u00e0 l’aide de blocs et de grilles. Ne vous concentrez pas sur le contenu lui-m\u00eame, mais sur la fa\u00e7on dont il sera pr\u00e9sent\u00e9 pour qu\u2019il retienne l\u2019attention des visiteurs. Ensuite, r\u00e9fl\u00e9chissez \u00e0 l’ordre des informations que vous souhaitez pr\u00e9senter \u00e0 vos visiteurs, de haut en bas, de gauche \u00e0 droite. D\u00e9signez l’emplacement des liens, des boutons<\/a> et des ic\u00f4nes, ainsi que les flux d’utilisateurs. Le flux d’utilisateurs d\u00e9signe le chemin ou le parcours d’un utilisateur au cours d’une session de navigation sur votre site web. Ce parcours comprend le point d’entr\u00e9e sur le site, tous les points d’interaction (comme les pages visit\u00e9es et les boutons sur lesquels il a cliqu\u00e9 jusqu’\u00e0 la transaction finale), et le point de sortie. Accordez une attention particuli\u00e8re \u00e0 la conception de vos \u00e9l\u00e9ments de navigation et de vos appels \u00e0 l’action<\/a>. Ils doivent \u00eatre clairs, faciles \u00e0 comprendre et en caract\u00e8res gras. Un sitemap r\u00e9pertorie toutes les pages de votre site web et indique comment les visiteurs se rendront \u00e0 chaque page \u00e0 partir de la page d’accueil. Il existe deux principaux types de plans de site\u00a0:<\/p>\n Ici, il s’agit d’une repr\u00e9sentation graphique de toutes vos pages web dans un ordre hi\u00e9rarchique. Le sitemap visuel vous permet de concevoir la mani\u00e8re dont les utilisateurs navigueront vers chaque page et vous aide \u00e0 \u00e9laborer une strat\u00e9gie pour chacune d\u2019elle. Un plan de site XML est une repr\u00e9sentation textuelle de toutes vos pages web et de leurs relations. Son objectif est d\u2019aider les moteurs de recherche \u00e0 comprendre la structure de votre site, \u00e0 l\u2019explorer et \u00e0 indexer toutes vos pages. Son importance est capitale pour votre SEO.<\/p>\n Une fois votre sitemap termin\u00e9, vous aurez une id\u00e9e du nombre de pages \u00e0 cr\u00e9er pour votre site web et de la mani\u00e8re dont les utilisateurs navigueront vers chacune d’elles. L’\u00e9tape suivante consiste \u00e0 zoomer sur chaque page et \u00e0 commencer \u00e0 en dessiner toutes les caract\u00e9ristiques. C’est ce que l’on appelle le “wireframing”. La couleur<\/a> joue un r\u00f4le important sur votre site web. Elle impacte la prise de d\u00e9cision des visiteurs. Trouvez des id\u00e9es de coloris assortis sur notre outil gratuit PaletteDeCouleur.net<\/a><\/strong><\/p><\/blockquote>\n En plus d\u2019\u00eatre partie int\u00e9grante de votre charte graphique, et donc de votre image de marque, la typographie\u00a0:<\/p>\n Toutefois, un trop grand nombre de polices de caract\u00e8res peut provoquer des conflits et donner lieu \u00e0 une exp\u00e9rience discordante. En r\u00e8gle g\u00e9n\u00e9rale, vous ne devez pas avoir plus de deux ou trois polices dans votre design. Le contenu est central dans la conception du site web. Qu’il s’agisse d’une vid\u00e9o de pr\u00e9sentation de l\u2019entreprise, d’animations montrant le fonctionnement d’un produit\/service ou d\u2019un t\u00e9moignage client<\/a>, chaque \u00e9l\u00e9ment doit communiquer un message ou raconter une histoire. Lorsqu’il s’agit d’images<\/a>, la qualit\u00e9 est essentielle. N’oubliez pas que votre maquette doit refl\u00e9ter le plus fid\u00e8lement possible votre produit final, surtout si vous devez la pr\u00e9senter \u00e0 votre client ou sup\u00e9rieur avant validation. Ces derniers ont besoin d\u2019avoir un aper\u00e7u fid\u00e8le du site qui sera con\u00e7u. \u00c0 lire aussi :\u00a0Comment cr\u00e9er un logiciel\u00a0? 7\u00a0\u00e9tapes \u00e0 suivre<\/a><\/p><\/blockquote>\n L’espace blanc, \u00e9galement appel\u00e9 \u00ab\u00a0espace n\u00e9gatif\u00a0\u00bb, favorise la compr\u00e9hension de la maquette (et de l\u2019interface). Il peut vous aider \u00e0 attirer et guider l’attention de l’utilisateur ou \u00e0 \u00e9tablir des relations entre les \u00e9l\u00e9ments. Un wireframe repr\u00e9sente l’esth\u00e9tique statique de chaque \u00e9l\u00e9ment web, mais pas leurs fonctions. Pour cr\u00e9er un mod\u00e8le fonctionnel dans lequel vous pouvez naviguer, vous avez besoin d’un prototype. Une fois que la conception graphique de votre maquette de site web est au point, il est temps d’y ajouter des interactions. Une maquette doit \u00eatre cliquable, sinon elle sera beaucoup moins efficace pour communiquer des id\u00e9es aux parties prenantes, pour les tests utilisateurs et la collaboration avec les d\u00e9veloppeurs. Cr\u00e9er une maquette de site web est primordial pour mener \u00e0 bien votre projet et communiquer clairement avec les clients (ou sup\u00e9rieurs), ainsi que votre \u00e9quipe. En plus de donner vie \u00e0 vos id\u00e9es, cette bonne pratique permet de r\u00e9duire les co\u00fbts et d\u2019obtenir un site internet 100% conforme \u00e0 ses attentes.<\/p>\n1. Cr\u00e9er un mood board pour votre maquette de site web<\/h2>\n
\n![\"Cr\u00e9er](\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2021\/09\/1.creer_maquette_site_web_moodboard-1024x683.png\")
<\/p>\n2. D\u00e9finir la mise en page et la structure de la maquette du site web<\/h2>\n
\nEn termes de mise en page, l’approche “mobile-first” vous aidera \u00e0 prioriser les \u00e9l\u00e9ments les plus importants \u00e0 inclure dans votre maquette.
\nPour la structure, il s\u2019agit de d\u00e9terminer comment seront dispos\u00e9es les diff\u00e9rentes pages du site\u00a0: page d\u2019accueil, de contact, de fiche produit optimis\u00e9e<\/a>, etc.<\/p>\n3. D\u00e9terminer la hi\u00e9rarchie des informations<\/h2>\n
\nVeillez \u00e0 ce que votre maquette soit intentionnellement d\u00e9pouill\u00e9e, mais qu’elle pr\u00e9sente une hi\u00e9rarchie visuelle suffisante pour susciter des r\u00e9actions constructives.<\/p>\n4. Cartographier le flux d\u2019utilisateurs<\/h2>\n
\nVotre maquette doit identifier ces diff\u00e9rents points et les r\u00e9pertorier. Ce qui va vous aider pour la prochaine \u00e9tape\u2026<\/p>\n5. Placer les boutons de navigation et d\u2019appels \u00e0 l’action<\/h2>\n
\nLa hi\u00e9rarchie visuelle, comme le placement d’\u00e9tiquettes \u00e0 c\u00f4t\u00e9 des champs pertinents et le regroupement de sujets connexes, peut am\u00e9liorer la lisibilit\u00e9 de votre maquette.
\nVeillez \u00e0 r\u00e9fl\u00e9chir \u00e0 diff\u00e9rents concepts de boutons, \u00e0 leur taille, \u00e0 leur ombre et \u00e0 la mani\u00e8re dont ils seront utilis\u00e9s.<\/p>\n6. Cr\u00e9er un sitemap<\/h2>\n
Sitemap visuel<\/h3>\n
\n![\"Cr\u00e9er](\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2021\/09\/2.creer_maquette_site_web_sitemap-1024x643.jpg\")
<\/p>\nSitemap XML<\/h3>\n
7. Concevoir un wireframe<\/h2>\n
\nUn wireframe<\/a> est la repr\u00e9sentation la plus \u00e9l\u00e9mentaire du site web entier. Il s’agit de diagrammes simples qui d\u00e9crivent les positions relatives de tous les \u00e9l\u00e9ments de chaque page web (images, texte, vid\u00e9os, etc.).
\n![\"Concevoir](\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2021\/09\/3.creer_maquette_site_web_wireframe.png\")
\nCes \u00e9l\u00e9ments sont g\u00e9n\u00e9ralement en noir et blanc pour \u00e9viter toute distraction. Ils vous permettent de vous concentrer sur la finalisation de l’architecture du site web, avant de passer \u00e0 un travail de conception plus d\u00e9taill\u00e9.
\nCommencez par une esquisse sur papier avant d\u2019utiliser un de nos outils pour r\u00e9aliser facilement un wireframe<\/a>.<\/p>\n8. D\u00e9cider des couleurs de la maquette du site<\/h2>\n
\nCommencez par la couleur primaire, celle qui sera majoritaire sur votre site. Elle doit refl\u00e9ter l\u2019image de votre entreprise et la voix de votre marque.
\nEnsuite, passez \u00e0 la couleur secondaire. Attention, il ne s\u2019agit pas d\u2019une variation de votre couleur primaire, mais une teinte qui va apporter du contraste aux \u00e9l\u00e9ments importants de vos pages.
\nG\u00e9n\u00e9ralement, les couleurs secondaires se retrouvent sur :<\/p>\n\n
9. Choisir la typographie<\/h2>\n
\n
\nLe simple fait d’alterner la taille et le format (gras, italique) de votre police permet de cr\u00e9er un contraste et une hi\u00e9rarchie.<\/p>\n10. Int\u00e9grer le contenu \u00e0 la maquette de site web<\/h2>\n
\nPlacez le contenu disponible dans la maquette pour visualiser son int\u00e9gration et v\u00e9rifier qu\u2019il s\u2019harmonise avec le design g\u00e9n\u00e9ral. Si ce n\u2019est pas le cas, il faudra s\u00fbrement revoir le contenu, modifier l\u2019organisation de la page ou rajouter une section suppl\u00e9mentaire.<\/p>\n11. D\u00e9terminer la position et le style des visuels<\/h2>\n
\nVeillez \u00e0 ce que les images soient coh\u00e9rentes, uniques et bien agenc\u00e9es, afin qu’elles n’interf\u00e8rent pas avec les \u00e9l\u00e9ments de navigation ou de conversion.<\/p>\n12. Int\u00e9grer de l\u2019espace blanc<\/h2>\n
\nUne fois que vous avez cr\u00e9\u00e9 la maquette du site web, prenez du recul et examinez votre conception. Y a-t-il une quantit\u00e9 appropri\u00e9e d’espace blanc entre les \u00e9l\u00e9ments ?
\nUtilisez les espaces blancs de mani\u00e8re coh\u00e9rente pour apporter de la simplicit\u00e9 \u00e0 votre conception, comme dans cet exemple\u00a0:
\n![\"Int\u00e9grer](\"https:\/\/www.codeur.com\/blog\/wp-content\/uploads\/2021\/09\/4._creer_maquette_site_web_espace-724x1024.jpg\")
<\/p>\n13. Passer \u00e0 un prototype<\/h2>\n
\nLes prototypes vous permettent de vous concentrer sur la conception du flux de travail de votre site web afin de garantir aux utilisateurs une exp\u00e9rience ergonomique.<\/p>\n14. Ajouter de l’interaction<\/h2>\n
\nLorsque vous ajoutez des interactions \u00e0 votre maquette de site web, concentrez-vous sur la navigation de base dans le produit, et non sur ses fonctions avanc\u00e9es. L\u2019objectif est de tester la navigation, pour v\u00e9rifier la fluidit\u00e9 du parcours utilisateur et \u00e9ventuellement d\u00e9tecter des points bloquants.<\/p>\nCr\u00e9ez votre maquette de site web d\u00e8s maintenant<\/h2>\n