Les meilleurs inspirations web design pour créer votre site internet

823 vues 11 minutes

Vous le savez, le design de votre site est primordial : l’apparence de vos pages sautera aux yeux de vos visiteurs, en une fraction de seconde seulement. Et, déterminera la première impression qu’ils auront de votre site.

Pas de doute : il vous faut donc créer un design absolument 👌

Pour vous aider à peaufiner l’apparence de vos pages web, nous vous proposons :

  • Une sélection des meilleures inspirations web design
  • Des techniques pour réaliser votre propre mise en page super facilement

Bienvenue dans l’univers passionnant du web design ! On embarque ! 

Mais avant toute chose, voyons quelques règles de base pour créer un site design.

Créer le design de son site internet : Les principes élémentaires

Avant de vous lancer, et en particulier si vous débutez, gardez bien en tête cette idée essentielle : toujours privilégier la clarté.

Avant tout, créer un design de site clair

Sur un site internet, votre objectif premier est de faire passer vos messages, vos valeurs et de convaincre et fidéliser vos visiteurs. 
Ceci, vous ne devez jamais le perdre de vue. Y compris, bien sûr, lors de l’élaboration du design de votre site web. Mais il n'est pas toujours simple d'établir sa charte graphique, pour vous aider, on vous dévoile quelques astuces. 

Comment clarifier son design ? 🎨

  • Ne pas utiliser plus de trois polices et couleurs différentes
  • Fractionner et structurer les pages à l’aide de paragraphes, de titres, mais aussi en utilisant des outils graphiques (bandes, lignes de séparation, images en pleine largeur d’écran, illustrations, fonds de couleurs pour créer des sections visuelles…)
  • Utiliser des éléments de navigation : header, menu, pied de page, boutons, liens…
  • Toujours rester mesuré, ne pas surcharger les pages : pas de pavés de texte trop longs, pas trop de visuels, pas trop d’animations ni de liens…

Créer un design web en accord avec votre marque

Deuxième impératif pour votre design : soyez cohérent avec vos valeurs.

Par exemple
Info play
Si vous gérez un studio de danse, utiliser de grosses polices massives et des couleurs très franches (bleu roi, rouge vif...) ne sera peut-être pas super évocateur. A l’inverse, des couleurs sobres (gris, rose pale, noir…) et une police fine et élégante seront tout à fait appropriées.

Votre design doit représenter votre marque en un clin d'œil. On n’y pense pas forcément mais on peut dire énormément de choses à travers le design d’un site.

Par exemple, si vous vendez des vêtements écologiques, une mise en page faisant la part belle aux teintes vertes (rappelant la végétation), beiges et ocres (suggérant la terre), avec des belles images de nature, évoquera cet aspect engagé.

👉 Parallèlement, un graphisme net et carré indiquera immédiatement le sérieux et le professionnalisme.

Web design pour son site web : Surfer sur les tendances

Le design, c’est aussi savoir être dans l’air du temps. Il faur donc que vous soyez à la page en vous tenant au courant des tendances webdesign.

Voici quelques tendances qui ont la cote ces temps-ci :

  • Le minimalisme et son opposé le maximalisme : En ce moment, il est de bon ton de donner dans les extrêmes, que ce soit avec un design épuré et discret, ou avec un design qui en impose !
  • Les animations et effets / l’interactivité : Plus ça va, plus les designs apparaissent animés d’une vie propre. Ils bougent, évoluent, se transforment au fil du scroll ou selon les mouvements de la souris, créant ainsi une relation, une interaction entre l’internaute et le site internet.
  • Les couleurs douces : Les couleurs pastel ont le vent en poupe, mais des teintes plus brutes peuvent aussi trouver leur place dans le paysage du web design actuel.
  • Les formes abstraites : Toujours plus de douceur, avec des formes organiques qui évoquent rondeur et sérénité.
  • L'asymétrie : Asymétrique, oui, mais toujours harmonieux. L’idée est d’attraper le regard sans le heurter.
  • Le rétro : On peut être ultra moderne tout en étant démodé, oui-oui ! Les années 80 notamment sont repassées sur le devant de la scène.
  • Le dessin vectoriel, la 3D : Le dessin assisté par ordinateur a encore toute sa place actuellement, dans les tendances web design.
  • Le "Hand-made" : On aime le côté personnalisé, fait-main, d’une police manuscrite ou d’un petit dessin griffonné dans un coin de l’écran.
  • Les textures : Par touches seulement (pour ne pas donner le tournis aux visiteurs), les fonds texturisés dynamisent une mise en page.

Inspiration web design pour son site web : Quelques exemples

Voici quelques exemples illustratifs de sites internet avec des design au top 🥇, créés sur notre plateforme. Vous pourrez y repérer aussi bien les tendances du moment, que l’application des principes fondamentaux.

inspiration-webdesign1.jpg

👉 Ce site internet de sophrologue (créé avec notre outil) présente un fond texturé un peu vintage tout à fait dans les tendances actuelles. Vous remarquerez également la sobriété de la présentation du site web permettant une grande clarté dans la transmission de l’information.

inspiration-webdesign2.jpg

👉 Cette page d’accueil d’un studio de photographie est un parfait exemple de présentation minimaliste, avec un choix de police original et marquant.

inspiration-webdesign3.jpg

👉 Ce joli site internet élaboré sur notre plateforme, a parfaitement choisi ses couleurs : les tons verts et bruns évoquent la nature, et le graphisme sobre reflète bien le sérieux et la fiabilité de cet e-commerçant, éleveur de viande biologique.

Lancez-vous, c'est gratuit !

inspiration-webdesign4.jpg

👉 Ce site associatif très réussi (que nous avons la chance de compter parmi nos utilisateurs) présente un design qui combine couleurs pastel (très en vogue actuellement) et dessins vectoriels. Cela lui confère une petite touche sympathique et conviviale, qui rassure et dédramatise juste ce qu’il faut, le côté “santé”.

inspiration-webdesign5.jpg

👉Un choix de polices, de couleurs et de graphisme parfait pour ce superbe site web de bijoux antiques : classe et élégance prédominent dès le premier coup d'œil avec ces fontes fines et aériennes, et ces textures beiges très discrètes et raffinées.

inspiration-webdesign6.jpg

👉 Ce site internet d’illustratrice (créé chez nous) montre un exemple chaleureux de dessins personnalisés. Cela permet de donner une impression un peu intimiste et rêveuse, tout en conservant le côté artistique.

inspiration-webdesign7.jpg

👉 Sur ce site vendant des produits de la ruche, vous remarquerez sur cette page d’accueil particulièrement efficace, que beaucoup d’informations essentielles sont données en très peu d’espace.

En un simple regard, vous savez que :

  • les produits sont français (avec le drapeau),
  • ils sont écologiques (mention “zéro déchet” dans le menu),
  • les vendeurs sont fiables et pros (le menu est bien clair, photos impeccablement soignées),
  • il s’agit d’une petite entreprise de dimension humaine, à l’écoute de sa clientèle (police manuscrite et petit dessin d’abeille fait à la main).

...Et maintenant, c’est à vous de prendre pinceaux et palettes ! 🎨

Comment créer un super design pour son site internet ?

Vous vous dites peut-être : “Ils sont bien jolis tous ces designs, mais je fais comment pour, moi aussi, en créer un qui me plait vraiment ?”.

Eh bien, ne vous inquiétez pas, avec de bons outils, vous y arriverez sans mal.
Laissez-nous vous expliquer comment. 👇

Comment faire un bon design de site avec SiteW ?

Sur notre plateforme, nous mettons à votre disposition des outils faciles à utiliser pour créer le design de vos rêves.

  • Pour créer le design général de votre site

Tout d’abord, vous pouvez partir d’une base (un gabarit de site, appelé “template”) qui correspond à vos besoins. Pour cela, sélectionnez le modèle de site qui vous convient au moment de l’inscription.

N’oubliez pas que vous pourrez tout modifier de A jusqu’à Z. Donc, une fois dans l’éditeur, cliquez sur l’onglet vert : c’est ici que vous pourrez gérer tous les paramètres liés à l’apparence de votre site.

  • Le fond du site et la zone de contenu

inspiration-webdesign

C’est dans cette section que vous pourrez modifier le fond du site (pour tout le site ou page par page). Vous pouvez aussi ajouter éventuellement une zone de contenu, c’est-à-dire un encart de couleur pour détacher plus clairement les éléments de votre site par rapport au fond.

👉 Le pied de page 
Cette section vous permet d’ajouter un footer personnalisé, applicable à toutes les pages de votre site ou différent pour chaque page.

👉 La barre mobile
Ce bouton vous permet de modifier la barre de menu mobile, selon vos besoins. Avec le Mobile First, Google privilégie les versions mobiles des sites internet, il est donc essentiel d’avoir un site parfaitement responsive, et de faciliter la navigation sur écrans portatifs.

👉 Dans la partie Eléments de l’onglet vert, vous pourrez personnaliser l’apparence de groupes d’éléments tels que

  • les liens,
  • les champs de texte,
  • les boutons,
  • les barres de recherche,
  • les fonds des modules,
  • l’inscription des membres,
  • l’affichage plein écran des images.

Cela vous permettra, et c’est essentiel, d’harmoniser le design de votre site dans son ensemble, en quelques clics seulement.

inspiration-webdesign8.jpg

Enfin, la partie Style général vous permet de déterminer les grandes lignes de votre design de site.

👉 Le choix de vos couleurs

inspiration-webdesign9.jpg

En cliquant sur ce bouton, vous pourrez créer votre propre palette de couleurs pour l’ensemble de votre site, ou appliquer l’une des combinaisons de teintes que nous proposons. Encore une fois dans le but de garantir l’harmonie la plus parfaite pour votre site.

👉 La sélection des polices

inspiration-webdesign10.jpg

Choisissez vos polices d'écriture en fonction des types de texte présents sur votre site (Textes principaux, Titres, Menus, Liens et boutons). Chaque style de fonte est personnalisable en termes de taille, de hauteur et d’espacement.

Vous aurez accès à un aperçu de toutes les variations de polices en cliquant sur le bouton Gérer les polices.

👉 L’ajout de transitions et d’effets (boutons Transitions et Extra)

On l’a vu, les animations et les effets sont très en vogue actuellement. Sans en abuser non plus, il est donc intéressant de jeter un œil à ces possibilités.

Le bouton Transitions vous permettra d’ajouter des animations entre les pages. Tandis qu’en cliquant sur Extra, vous aurez la possibilité de mettre en place des effets reliés à la saisonnalité (animations d'Halloween ou de Saint Valentin, par exemple).

👉 La feuille de style

Ce bouton permet aux utilisateurs les plus avancés de personnaliser la feuille de style à leur guise, afin de réaliser leurs rêves de design les plus fous.

👉 La protection des contenus

Ce serait dommage de vous faire piquer votre beau design ! Protégez tous les fichiers de votre site en un seul clic, contre la copie et le vol.

Ajouter des éléments de design spécifiques

C’est sur l’onglet bleu que vous trouverez tous les outils graphiques qui vous serviront à mettre votre information en valeur sur vos pages.

  • Le module Image

Tout d’abord, vous pourrez utiliser les modules de base comme les modules Image, Galerie et Vidéo, sur lesquels il est possible d’appliquer l’option pleine largeur d’écran. Vous pouvez aussi vous en servir comme fond de section visuelle ou comme fond d’écran, ou encore pour agrémenter votre page d’accueil.

  • Le module Galerie permet différents styles d’affichage et d’animation.

inspiration-webdesign11.jpg

  • Le module Carte peut également être affiché sur toute la largeur d’écran et être personnalisé en partie. Pratique pour votre footer, par exemple.

inspiration-webdesign12.jpg

  • Le module Bouton vous permet de créer ce que l’on appelle des Appels à l’action (CTA).

Il s’agit de liens incitant le visiteur à réaliser des actions spécifiques (achat, visionnage, téléchargement, lecture, etc). Un indispensable de votre stratégie digitale !

  • Le module Widget, vous offrira diverses possibilités telles que l’ajout de titres spéciaux (titres-rubans ou titres personnalisés), ainsi que de lignes de séparation texturées et personnalisables.

inspiration-webdesign13.jpg

👉 Ensuite, la section Design vous permet d’insérer des outils graphiques spécifiques.

inspiration-webdesign14.jpg

  • Le module Icône vous permet d’ajouter une icône personnalisée (couleurs, taille, bordure, ombre, espacement, marges, arrondi…)

inspiration-webdesign15.jpg

  • Le module Illustration vous donne la possibilité d’ajouter une illustration de type dessin vectoriel (or, nous l’avons vu plus haut, ils sont dans le vent en ce moment), en un rien de temps. Vous pourrez en personnaliser la couleur.

inspiration-webdesign16.jpg

  • Avec le module Bande, vous insérez des bandes servant à diviser et fragmenter vos pages, soit pour créer des fonds de sections visuelles, soit pour séparer deux parties de votre page. Il y a trois styles de bandes personnalisables : Droite, Vague ou Inclinaison.

inspiration-webdesign17.jpg

  • Avec le module Forme, vous intégrez différentes formes géométriques ou organiques, que vous pourrez configurer en termes de couleurs, de bordures, d’ombre… 
N'oubliez pas
Info def
Pour chaque module quel qu’il soit, vous avez la possibilité de cliquer sur l’onglet vert et d’appliquer un style prédéfini personnalisable ou de créer un nouveau style.

Vous avez maintenant de l’inspiration pour concevoir un design de site au top niveau.

...Vous allez faire des envieux ! A bientôt sur le web ! 👋

Frédérique Biau
Rédactrice et traductrice
Rédactrice passionnée depuis des années, je fouille le web et parcoure les actualités pour vous produire un contenu de qualité.

Dernière mise à jour : 28 mai 2022

Quoi de neuf ?
Les dernières mises à jour et nouveautés sur notre outil, après un décryptage poussé auprès de nos développeurs.