Exemple de design pour son site web

Mis à jour le 3 Juin 2022 par Zakaria
Une personne préparant des exemples de design pour son futur site web

Vous avez comme projet d’assurer votre présence en ligne et vous êtes à la recherche d’exemple de design de site web avant de vous lancer ?

Vous avez bien raison, car on sait que tout se joue lors de la première impression (vos visiteurs).

Il est donc très important pour vous de porter une grande attention au visuel de votre site.

En effet, si ce dernier est attractif, convaincant visuellement, il est facile de retenir les internautes qui sont arrivés dessus (l’inverse est malheureusement vrai).

Sur le marché de la conception de site internet, deux options s’offrent généralement à vous :

  1. Partir sur un template
  2. Partir sur une maquette graphique

Je vais vous présenter ici ces deux méthodes et notamment celle que je recommande le plus à mes clients.

Sachez que les deux vous permettent d’obtenir un excellent résultat si le travail de conception est correctement réalisé.

Généralités sur le design d’un site web pour bien choisir son exemple

Avant de vous présenter les solutions qui s’offrent à vous, il est important de nous arrêter brièvement sur quelques généralités autour de la question du design pour son site web.

Comprenez ici par design tout ce qui a trait à l’apparence visuelle d’un site internet.

Cela comprend donc divers éléments cruciaux tels que :

  • Les couleurs
  • Les typographies
  • L’ambiance
  • L’agencement des éléments
  • L’image de marque (branding)
  • Contenu visuel (images, photos, vidéos)

Avant donc de se lancer à la recherche d’exemple de design à implémenter pour votre site, il convient de bien préparer en amont les grandes lignes du design qui colle le mieux avec vos objectifs, vos préférences, votre marque, entreprise ou société.

Cela vous permet en quelques sortes de définir un cahier des charges ou une charte graphique à respecter.

La liste précédemment présentée (non exhaustive) vous permet d’ores et déjà d’avoir une idée des points importants sur lesquels vous devez vous pencher.

En procédant à cette étape de préparation, vous avez les idées beaucoup plus claires dans vos recherches de designs et cela vous permet d’aller droit au but.

Exemple de design pour son site web : deux possibilités

Une personne devant implémenter soit un template soit une maquette graphique pour son site web

Comme dit précédemment, lorsque vous souhaitez choisir un design pour votre site internet, deux grandes possibilités s’offrent à vous : template ou maquette graphique.

La question qu’il convient de se poser désormais est la suivante : est-ce que je souhaite partir d’une base existante ou d’une base vierge pour le design de mon site ?

Là où beaucoup pourraient penser que partir d’une base vierge est forcément meilleur, détrompez-vous.

Il est tout à fait possible d’obtenir d’excellents résultats en optant pour la solution template.

Concrètement, cette dernière vous permet de partir d’un exemple, un modèle existant mis à disposition et préalablement conçu par un web designer (le plus souvent).

Cet exemple existant est normalement 100% personnalisable, c’est-à-dire qu’il est possible de tout modifier.

Ainsi, l’objectif que vous devez avoir est d’adapter cette base (le template) à votre cahier des charges, charte graphique préalablement réalisée.

De son côté, la maquette graphique vous permet de partir d’une base totalement vierge afin de construire un design unique.

Généralement pour ce type de besoin, il convient de faire appel à un professionnel en graphisme afin de pouvoir réaliser ce travail.

Voyons désormais plus en détail ces deux options.

La solution template

Pour définir la solution template (EN), sachez avant tout qu’il existe diverses appellations pour désigner ce procédé.

Cependant, toutes veulent généralement dire la même chose.

Vous pouvez par exemple trouver comme autres désignations :

  • Thème (FR)
  • Theme (EN)
  • Layout (EN)

Il faut cependant faire attention au contexte utilisé pour termes.

S’ils sont utilisés pour parler de thème WordPress alors ils ne font pas référence à du design à proprement parler.

C’est une confusion assez répandue sur le web et à laquelle il convient de faire attention d’autant plus que le franglais est courant dans ce milieu.

Pour cet article, c’est le terme « template » que j’utilise pour parler de design.

C’est le plus simple et également pour une meilleure compréhension par tous.

Si ces appellations ci-dessus font allusion au web design et que c’est ce que vous recherchez alors dans ce cas, c’est bon 🙂

L’implémentation d’un template

Comme dit précédemment donc, la solution template permet de partir d’une base existante, mais comment cela se passe-t-il concrètement ?

À partir des attentes en matière de visuel, la personne qui conçoit le site, généralement un webmaster professionnel (ou vous-même si vous en avez les capacités), explore les différentes possibilités pour trouver un exemple de design se rapprochant le plus possible de l’objectif.

Diverses plateformes permettent justement de proposer gratuitement ou à la vente des templates prêts à être installés sur le site web (WordPress par exemple) en vue d’être personnalisés.

Notez cependant que certains thèmes incluent déjà un design par défaut.

Il est donc possible que celui-ci corresponde à vos attentes (pas besoin donc d’implémenter un template).

La personnalisation d’un template

L’objectif de la personnalisation d’un template est d’adapter au maximum ce dernier à vos besoins, goûts, attentes en travaillant :

  • Les titres, textes et autres contenus textuels
  • Les contenus visuels (images, photos, vidéos)
  • Les couleurs (en remplaçant par votre palette de couleurs par exemple)
  • L’agencement des pages

Le but ici est de personnaliser au maximum le template afin que le rendu final de votre site soit intégralement à votre image, mais également unique.

Ce qui est très intéressant ici est que cette solution vous évite de partir de zéro en partant d’une base qui se rapproche déjà de vos objectifs.

La possibilité la plus connue est de sélectionner son template depuis une banque de template (oui, c’est tellement logique).

Tout comme il existe des banques d’images, d’icônes, de logos, etc., il existe aussi des banques de templates.

Elles vous offrent un choix considérable d’exemple de site internet.

Pour accéder à ces banques spécialisées, vous pouvez soit partir directement d’un thème CMS (WordPress par exemple),  soit d’une marketplace.

Template à partir du CMS WordPress

Pour se faire, il faut au préalable s’équiper d’un thème WordPress (je considère pour cet article que vous utilisez ce CMS).

Beaucoup de thèmes WordPress proposent d’implémenter en quelques clics des templates (designs) professionnels sur votre site.

Vous comprenez ici l’importance de la distinction à faire entre thème et design que nous avons vu.

Notez toutefois que pour avoir un large choix d’exemples, il faut très souvent opter pour un thème premium.

Avec un thème gratuit, il est tout de même possible d’installer un template, mais vous êtes très vite limités en choix.

En plus de cela, les templates disponibles risquent d’être installés sur de très nombreux sites, ce qui est problématique pour se démarquer.

En bref, autant investir quelques dizaines d’euros sur un thème premium pour avoir accès à un large choix de templates premium.

Pour l’aspect technique de cette solution, il n’y a rien de très compliqué.

Depuis un tableau de bord WordPress, il est très simple d’accéder à la bibliothèque de template proposée par son thème installé.

Toutefois, la procédure d’implémentation peut varier d’un thème à l’autre.

Cependant, cette procédure est relativement similaire et simple, peu importe le thème.

Template à partir d’une marketplace

L’autre possibilité pour vous procurer un template c’est de passer par une marketplace (place de marché).

Alors ici l’idée n’est pas d’aller vous rendre sur le célèbre site e-commerce Amazon, mais plus sur des sites spécialisés dans la vente de templates.

L’un des plus connus est Themeforest, mais il en existe d’autres et je vais justement vous en présenter une un peu plus loin dans cet article.

Là aussi, vous avez l’embarras du choix sur les exemples disponibles à l’achat.

N’hésitez pas, avant d’acheter, à consulter les avis client, la version de démo, etc.

L’outil Divi qui propose une bibliothèque d’exemple de design pour son site web

Impossible pour moi de parler de banques de templates sans vous parler d’un outil fabuleux qui permet la conception de magnifiques sites internet professionnels : Divi.

Divi est un thème WordPress premium d’une grande qualité et permettant d’immenses possibilités.

C’est d’ailleurs l’un des thèmes les plus populaires au monde et vous devriez vite comprendre pourquoi.

Les packs layout de Divi

Quel rapport entre Divi et les banques de templates me direz-vous ?

L’avantage considérable de Divi est que ce thème propose sa propre bibliothèque de templates (appelé layouts chez Divi).

Laissez-moi d’ores et déjà vous dire que le choix est impressionnant !

Bibliothèque des packs layout proposés par le thème Divi

Aperçu de la bibliothèque des packs layout proposés par le thème Divi

Des designs pour tous les domaines

De plus, les designs proposés par Divi sont proposés sous forme de packs regroupant les pages principales d’un site web classique (vitrine, e-commerce, blog, portfolio, etc.) tels que :

  • Atterrissage (landing page)
  • Accueil
  • Services
  • Boutique
  • Blog
  • Contact

Ainsi, cela vous permet d’avoir un site avec des pages en totale harmonie entre elles.

Cependant, vous pouvez également faire le choix d’opter que pour une page ou deux d’un pack (rien ne vous oblige à utiliser toutes celles qui sont proposées).

Un autre atout considérable de la banque de templates de Divi est qu’elle propose des templates adaptés à la plupart des secteurs d’activité !

Ainsi, que vous soyez médecin, architecte, freelance, artisan, plombier, chauffagiste, boulanger, chauffeur, restaurateur ou même une grande société, il est pratiquement impossible que vous ne trouviez pas votre bonheur avec un design correspondant parfaitement à votre activité et à vos goûts.

Pour toutes ces raisons, j’utilise quotidiennement le thème Divi pour les sites web de mes clients.

Il est en effet adapté et permet de répondre à pratiquement tous les besoins.

Que vous ayez besoin d’une simple installation de Divi (avec accès à la bibliothèque de templates) ou bien même que je m’occupe de la réalisation de votre site à partir de ce thème.

Je vous invite à consulter mes prestations comprenant ce fabuleux thème (sans supplément et à vie).

L’alternative maquette graphique pour le design de son site

Bien que la solution template présente de nombreux avantages, il est possible que vos attentes soient plus poussées et que vous ayez un besoin très spécifique.

Dans ce cas, il est peut-être plus judicieux pour vous de vous tourner vers l’élaboration d’une maquette graphique.

Celle-ci est généralement réalisée par un graphiste professionnel.

L’intérêt de ce genre de maquette est que vous pouvez exposer à votre prestataire qui s’occupe de la concevoir (ou vous-même si vous en avez la capacité) toutes vos attentes en matière de design et cela sans aucune contrainte !

En effet, en optant pour cette alternative vous n’avez pas à vous adapter à un modèle existant et vous pouvez laisser libre cours à votre imagination.

Notez cependant que rien de vous empêche ne vous inspirer de sites existants qui vous plaisent afin de nourrir votre réflexion avec quelques idées de visuels.

Il est recommandé de réaliser une maquette pour les pages principales au minimum et une fois cette dernière terminée, il ne reste plus qu’à la transformer en site internet (on parle d’intégration web).

Les pages secondaires quant à elles peuvent facilement être conçus en s’inspirant du design des pages principales (si elles ne sont pas maquettées).

Avis sur la solution à retenir pour l’exemple de design de son site web

Je trouve personnellement que les deux solutions qui s’offrent à nous permettent d’obtenir de très beaux résultats visuels et professionnels.

Je recommande toutefois de privilégier la solution template qui en réalité convient pour la plupart des besoins.

De plus cette solution à l’avantage d’être plus économique.

Elle permet en effet de partir sur une base existante préalablement réalisée par un web designer.

Si votre besoin est cependant très spécifique, que vous sachez exactement ce que vous souhaitez et que le sur mesure demeure la seule solution, tournez-vous dans ce cas vers la réalisation d’une maquette graphique.

Certes, cela risque d’être plus onéreux, mais le rendu final de votre site sera à la hauteur de votre investissement !

Favicon Baleez

Zakaria, développeur web & fondateur de Baleez

Quelques mots de l’auteur…

Quand je ne suis pas sur un projet client, j’aime beaucoup préparer des articles de blog de qualité pour mes lecteurs 🙂

Bannière pour rediriger vers la page des prestations
Bannière pour rediriger vers la page Divi
Bannière pour rediriger vers la page de contact
Bannière pour rediriger vers l'inscription à la newsletter
Accueil » WordPress » Exemple de design pour son site web

Découvrez d’autres articles qui peuvent vous intéresser

Exprimez-vous

0 commentaires

Soumettre un commentaire

Votre adresse IP ne sera pas collectée
Vous pouvez renseigner votre prénom ou votre pseudo si vous êtes un humain 😉

Devanture E-Book

Inscrivez-vous à la newsletter pour recevoir votre E-Book gratuit !

Votre adresse e-mail ne sera en aucun cas transmise à un quelconque tiers et servira uniquement et raisonnablement à vous faire profiter d’avantages exclusifs réservés aux abonnés tels que l'envoi d'E-Book, de promotions, d'alertes des nouveaux articles, de cadeaux digitaux offerts et bien plus encore ! Vous pourrez vous désabonner à tout moment.

Inscription réalisée avec succès

Pin It on Pinterest