Comment créer les maquettes de son site web ?

Qu’est-ce qu’une maquette de site web ?

Désignée par mockup en anglais, la maquette d’un site est la représentation graphique de votre futur site web. C’est la représentation visuelle de l’idée que vous avez en tête, de la manière dont le site et ses différentes parties seront agencés.

Pourquoi faire une maquette avant de créer son site web ?

Lors de la création d’un site internet, il est absolument important de faire des maquettes. En effet, elle vous permet d’avoir une idée de votre futur site. Vous pouvez par la même occasion tester votre site avant de lancer la version définitive. Aussi, vous pouvez recueillir des avis sur la maquette, afin d’améliorer le site. Une maquette vous permet d’avoir un contenu structuré de votre futur site web.

De même, elle vous permet d’optimiser l’ergonomie et les conversions du site web. C’est l’une des raisons pour lesquelles il faut impérativement prendre son temps pour mener à bien une réflexion sur les parcours des utilisateurs. Cette réflexion a pour but d’augmenter votre taux de conversion et donc par conséquent vos ventes.

Quelles sont les étapes pour créer une maquette d’un site web ?

Pour créer vos maquettes, vous allez devoir passer par plusieurs étapes. En amont, il faut créer votre arborescence. En effet, il faut avoir une vue d’ensemble de votre futur site internet, afin d’identifier ce que l’on appelle des « modèles de page« . Cela correspond aux structures communes que l’on peut utiliser sur plusieurs pages. Par exemple, si vous avez 3 pages services, vous pourrez sûrement utiliser le même modèle graphique.

Il est important de noter que la conception de l’arborescence de votre site internet doit être conçue, en respectant les principes d’ergonomie. En effet, la navigation doit être facile, simple et intuitive. Vous devez donc prendre en compte les besoins de vos utilisateurs. Pour cela, vous pouvez vous appuyer sur les données terrains (entretien utilisateurs, Google Analytics).

Pour que la navigation de votre interface soit optimale, vous devez aussi vous appuyer sur votre stratégie SEO. Celle-ci permet notamment de concevoir une arborescence en hiérarchisant les pages. C’est-à-dire déterminer celles qui sont les plus importantes, ainsi que leurs rôles (contenus, informationnels, décisionnels ou transactionnels).

Étape 1 : création des wireframes des pages principales

C’est l’étape la plus importante. Il s’agit, en réalité, de l’organisation des parties qui composent votre page. Pour les faire, vous allez utiliser des outils de prototypage. Différent du zoning web, le wireframe permet de définir l’organisation des éléments et des formes sans travailler l’aspect visuel, le graphisme n’interviendra que plus tard. On se base davantage sur les standards et souhaits ergonomiques pour orienter la réflexion.

Les wireframes peuvent être construits avec les personnes en charge du référencement. En effet, les pages sont structurées, afin de répondre à l’intention utilisateur. C’est-à-dire qu’il faut déterminer les types d’informations et de contenus qu’il faut. Ces personnes fournissent donc les titres et les grandes idées que l’on doit retrouver sur la page. Mais il est intéressant aussi de s’appuyer sur les équipes marketing, afin de déterminer les éléments prioritaires.

Exemple : wireframe high fidelity

Étape 2 : création des composants, design system

Dès lors que vous avez conçu vos wireframes, nous vous conseillons de rapprocher l’ensemble des pages pour identifier l’ensemble des « composants graphiques » communs entre les pages. Par « composant », nous entendons tous les objets graphiques qui pourront être réutilisés :

• Boutons,
• Listes,
• Champs texte,
• Cards (découvrez ici un exemple),
• Formulaire,
• Authentification,
• …

Exemple : design system

Pour cela les webdesigners crées un design system. C’est ce que l’on appelait avant une charte graphique web. Les équipes techniques et design peuvent ainsi aller chercher des composants prêts à être utilisés. En général, vous retrouverez les éléments suivants :

• Composants UI et patterns
• Principes visuels autour de la typographie
• Palettes des couleurs et règles associées
• Iconographie et imagerie
• Grilles pour structurer les éléments, espaces, etc. (Grid layout)
• Principes de communication de la marque (langage, ton…)
• Éléments réutilisables de l’interface utilisateur (UI)

La construction d’un Design system offre de nombreux avantages. Cette solution permet notamment de faciliter le travail des équipes techniques et marketing. Le but est d’avoir quelque chose de cohérent et donc une meilleure expérience pour les utilisateurs et les clients.

Étape 3 : création des maquettes web et interactions

Enfin vous pourrez procéder à la création des maquettes graphiques pour l’ensemble de vos pages. Il s’agit là d’assembler les différents composants, afin de structurer vos pages. Évidemment vous devrez réajuster en fonction de vos contenus.

Lors de cette dernière étape, le designer procédera aussi à toute la phase d’interaction. En effet, il va mettre place toutes les actions aux clics, survols, défilement… Donc par exemple il devra créer une action pour qu’au clic sur le bouton « contactez-nous », cela vous renvoie vers la page contact. Le but de la maquette est de concevoir la future interface et de pouvoir la tester comme si c’était un site internet réel.

Vous l’aurez compris ces étapes sont complexes et demande un savoir-faire. C’est pourquoi il est préférable de faire confiance à des professionnels. Pour cela vous pouvez faire confiance à notre agence web, qui accompagne les entreprises dans leur création site internet à Nantes, Angers et toute la région Pays de Loire .

Trouver un outil de maquettage

Il existe plusieurs outils de prototypage, que vous pouvez utiliser pour votre interface tels que Invision, Figma ou encore Sketch. Mais ce qui nous intéresse ici, c’est Adobe XD et Proto.io.

Le premier a une interface ergonomique et des fonctionnalités très performantes. Adobe XD permet de créer des prototypes et des interactions. Il permet l’intégration facile des logiciels comme Photoshop et After Effects. Après avoir lancé sa plateforme, Adobe a pris une place importante sur le marché et a permis à certaines applications de s’intégrer. Il est aujourd’hui dans le top 3 des outils de prototypage.

Quant au deuxième, il permet de créer des prototypes pour les mobiles. Proto.io permet à ses utilisateurs de s’adapter au prototypage des sites web. Il est simple et la qualité des interfaces proposées est meilleure. Il est également utilisable sur les smartphones.

Créer des éléments graphiques

Ici, vous devez définir les couleurs du site, la police, la taille, les éléments graphiques…

1 – Choix des couleurs

Certaines analyses ont montré que la couleur est un élément qui attire et incite les clients à réagir. Donc l’aspect couleur de votre interface web doit être pris au sérieux. En plus, bien qu’elle ne soit pas objective, la couleur agit sur les émotions et influence les comportements ou les prises de décision. Il est quand même important de connaître les significations de chaque couleur afin de les utiliser.

Vous connaissez la signification de chaque couleur, alors vous pouvez choisir celles de votre interface. En le faisant, vous devez être sûre que les couleurs choisies répondent aux attentes des clients

2 – La typographie

Les polices d’un site internet expriment les valeurs et l’identité de votre entreprise. C’est un élément important dans l’esprit des visiteurs du site. Tout d’abord, le choix de police pour un site web n’est pas une chose simple pour les graphistes. Un mauvais choix peut ne pas attirer d’audience. Il faut que cette dernière reste lisible.

Google Fonts

Pour votre site, vous pouvez utiliser au maximum 3 polices. Il est conseillé de faire référence à Google Fonts pour voir les polices disponibles. Les raisons de ce choix ? En voici quelques-unes :

• Polices Open Source
• Possibilité de télécharger les polices
• Intégration rapide sur un site

Certains critères entrent en ligne de compte pour le choix de la taille des polices. La lisibilité est la plus importante car il faut des textes lisibles et aérés ; une résolution adaptée au type d’écran. Ensuite, nous avons la flexibilité et la diversité qui sont très utiles pour la hiérarchisation des pages du site.

Enfin, la compatibilité qui permet aux polices de votre site de garder leur qualité sur n’importe quel navigateur ou système d’exploitation.