18 exemples de sites vitrines réussis

Il y a encore quelques années, la création d’un site vitrine pouvait apparaître comme un luxe, avec tout le superflu que la notion de luxe implique. Aujourd’hui, ce n’est ni par luxe ni par pur mimétisme que les entreprises créent des sites vitrines. Toutes les grandes entreprises ont leur site internet et la majorité des PME sont, à raison, convaincues de la nécessité de développer une présence sur la toile. Voici 12 exemples de sites vitrines originaux, de qualité et très variés afin de vous montrer à quoi cela peut ressembler et vous donner quelques idées pour la création de votre propre site vitrine !

L’appartement Parisien – via Wix

Site web : www.lappartdesign.com

Le site vitrine du studio de design parisien, L’Appartement Parisien, a été réalisé par le logiciel Wix. Dès l’entrée sur le site, vous serez frappé par la qualité des photos qui y sont présentes ainsi que la clarté générale du site web. Cela met sans aucun doute en avant la qualité de leur travail en tant que studio de design. Ils ont choisi d’utiliser l’infinite scroll sur leur homepage afin que vos yeux ne quittent pas un instant l’ensemble de leur création. Ils n’ont pas oublié de mettre un menu principal flottant afin de pouvoir naviguer sur toutes les pages du site quand vous le souhaitez. En tant que studio de design, les réseaux sociaux et notamment Instagram, sont également mis en avant.

Maud Dardeau – via Wix

Site web : www.mauddardeautatouages.com

Si vous aimez les tatouages, le site Maud Dardeau Tatouages à Bordeaux va vous plaire. A votre arrivée sur le site web, vous verrez les réalisations les plus impressionnantes de Maud. Lorsque vous scrollerez, vous verrez coup sur coup son feed Instagram, quelques informations et photos sur son atelier, une section à propos ainsi qu’un agenda et une carte Google Maps. C’est un site one-page : en effet, lorsque vous cliquerez sur l’un des onglets du menu, le site scrollera automatiquement vers la section demandée. Pratique n’est-ce pas ?

Boulangerie d’Ymare – sur mesure

Site web : www.boulangerie-ymare.fr

Y’a t-il des gourmands parmi vous ? Ce site de la boulangerie-patisserie d’Ymare vous donnera l’eau à la bouche, et c’est bien le but ! Sur la page d’accueil, vous pourrez être redirigé vers les principales pages du site, à savoir « boulangerie, pâtisserie, chocolaterie ». Vous verrez ensuite quelques informations complémentaires sur la qualité des produits et du service. Enfin, dans le footer, vous aurez toutes les informations de contact nécessaires ainsi que les icônes vers les réseaux sociaux. Entrons maintenant dans l’une des pages du site, par exemple « boulangerie ».  Vous verrez les photos ainsi qu’un petit texte descriptif de chacun des pains proposés. De quoi définitivement vous séduire.

The Walt Disney Company – via WordPress

Site web : www.thewaltdisneycompany.com

Voici le site de la Walt Disney Company créé avec WordPress. Vous serez frappé par son style épuré pour une site grande entreprise. La homepage contient peu de texte, mais met en avant les différents onglets du site, à savoir « Carrière ou encore à propos ». Ils mettent également en avant leur engagement dans le domaine social. Le footer est composé d’un onglet Twitter ainsi que les différentes mentions légales.

Le Groupe Renault – via WordPress

Site web : www.group.renault.com

Encore une preuve en image et en texte que WordPress peut créer de magnifiques sites web vitrines de qualité tout à fait professionnelle. Actualité, initiatives face à la crise (COVID-19), vidéos tutoriels ou encore feed Twitter, voici ce que le groupe Renault a décidé de mettre en avant sur leur homepage. Sur leur menu principal, ils ont également incorporé un onglet totalement personnalisé intitulé #easyELECTRIClife. Preuve que, si vous ne le saviez pas encore, la capacité de personnalisation d’un site avec WordPress est proche de l’infini.

Alliance Française Rouen – sur mesure

Site web : www.afrouen.org

Voici un site sur-mesure très bien conçu pour l’Alliance Française de Rouen-Normandie. Malgré le nombre d’informations assez impressionnant, vous trouverez vite ce que vous recherchez grâce à ce site très intuitif. Le menu du haut regroupe l’ensemble des principaux onglets du site comme la présentation de l’école, des formations, des diplômes etc. Sur la page d’accueil, vous verrez des statistiques sur ce centre, une présentation de la région Normandie ou encore les partenaires de l’école. Les couleurs harmonieuses du site rendront la navigation encore plus agréable.

L’atelier du Côteau – via Wix

Site web : www.latelierducoteau.com

Le site vitrine de l’Atelier du Coteau, centre de création et de loisirs artistiques nantais, a été réalisé grâce au logiciel Wix. La cohérence et la beauté de la charte graphique frappe tout de suite. L’utilisation du « long scrolling » apporte à la fois une qualité esthétique et un confort d’utilisation très appréciable (pas de sous-rubriques). Les informations sont très riches en contenu et exposées clairement. Les principales infos (présentation de l’atelier, localisation, public…) sont d’ailleurs présentes directement sur la home page, juste sous la ligne de flottaison. Le menu en haut de pages permet une navigation très facile et agréable à l’intérieur du site. C’est un site très simple à répliquer et assez peu coûteux à créer.

Dreaming with Jeff – via Squarespace

Site web : www.dreamingwithjeff.com

Le site Dreaming with Jeff met parfaitement en valeur toutes les potentialités de Squarespace. Il s’agit d’un site d’écoute musical riche en animations offrant une mise en page assez originale et propice à l’écoute des morceaux de musique. L’utilisation du long scrolling et l’identité visuelle dark renforce le côté esthétique de ce site.

Réinventer Paris – Sur mesure

Site web : www.reinventer.paris

Ce site a été crée pour la Mairie de Paris par Ultranoir, une agence de com’ parisienne de qualité. Il s’agit d’un site d’appels à projets. Le contenu du site peut être parcouru très rapidement, offrant aux visiteurs un confort de navigation très appréciable, bien que ce modèle de site ne puisse pas s’adapter à tous les besoins. En arrivant sur la page d’accueil, et avant de scroller, vous tombez nez à nez avec une Tour Eiffel renversée à 90 degrés, ce qui incite à faire défiler la page et à capter l’attention du visiteur. Vous constaterez que le menu de navigation n’apparaît qu’après avoir scrollé sous la ligne de flottaison de la home page. Le choix des langues est mis en valeur et clairement visible tout en haut à droite du site. C’est très important de mettre cet élément en avant, surtout si vous avez l’intention de toucher un public non-francophone.

Créez gratuitement votre site web avec Wix, l'un des CMS de référence

Plus de 500 templates disponibles

120 millions d'utilisateurs dans le monde

Le logiciel n°1 de sa catégorie pour la Fabrique du Net

DECOUVRIR WIX

testé et approuvé par la Fabrique du Net :

Elephant Groupe – Sur mesure

Site web : www.elephant-groupe.com

Elephant est un groupe de production audiovisuelle. Le site met en valeur sur sa page d’accueil les productions déjà réalisées. L’utilisation d’une symbolique de couleur distingue bien chacune des catégories du site (magazine, fiction, documentaire…). La barre de gauche permet très rapidement d’accéder aux adresses des membres de l’équipe et aux réseaux sociaux. C’est l’occasion de rappeler une chose : à côté de votre site vitrine, il peut être très intéressant de développer une communauté sur les réseaux sociaux. Si vous choisissez cette option, pertinente à bien des égards, n’oubliez pas de bien afficher votre présence sur les réseaux sociaux depuis votre site vitrine.

Wonderful – via Concrete5

Site web : www.wonderful.com

Sur ce site, l’accent est porté sur l’image avant tout, le texte est relégué au second plan. Il s’agit de mettre en avant les produits commercialisés sous leur meilleur jour. Les flèches situées à droite et à gauche de la homepage permettent de découvrir rapidement tous les produits. Le menu de navigation, situé en bas de la page, est suffisamment discret pour ne pas éclipser les photos, et en même temps suffisamment visible pour retenir l’attention. Au-delà des pages de contact et de présentation de l’entreprise, ce menu contient un moteur de recherche interne (symbolisé, comme toujours, par une loupe, tout à droite). Il est très utile de se doter d’un moteur de recherche interne lorsque le contenu de votre site est très riche (sur ce site, le contenu n’est pas très riche : l’exception confirme la règle !). Cela permet de fluidifier et de simplifier la navigation pour les visiteurs. Le moteur de recherche interne complète le menu de navigation.

Spectre Agency – via WordPress

Site web : spectre-agency.com

Ce site black & white est celui d’une agence de synchronisation musicale. Il a été réalisé avec un thème enfant de Genesis et un framework WordPress (de haut niveau).

Pour rappel, un framework est en gros un moteur de templates : vous avez plusieurs éléments déjà constitués, cohérents entre eux, à vous de les combiner pour obtenir le modèle de site qui vous convient !

Au-delà de la personnalité graphique originale de ce site, on remarquera la présence d’un onglet « News » dans la barre de menu à gauche. Pour faire vivre un site internet et donner aux visiteurs l’envie de revenir ou d’inscrire le site dans leurs favoris, il est important d’enrichir sans cesse le contenu du site. Cela a d’ailleurs aussi un impact SEO non négligeable. Si votre catalogue n’évolue pas, vous pouvez créer un blog ou une rubrique actu rattachés à votre site pour que les visiteurs puissent trouver quelque chose de nouveau à chaque visite.

Envato – Sur mesure

Site web : www.envato.com

Envato est une marketplace de services web conçue à partir d’un template Themeforest customisé. La mise en page de ce site est assez sobre et classique, mais l’utilisation des couleurs dans la charte graphique rend un résultat très probant du point de vue esthétique et fonctionnel (chaque rubrique est clairement distinguée par une couleur, au niveau de la ligne de flottaison). Ce site montre qu’il est tout à fait possible de créer un site agréable et bien fait sans pour autant utiliser beaucoup de fonctionnalités ou d’animations. De tous petits détails, comme les couleurs ici, peuvent faire toute la différence.

Hellobar – via WordPress

Site web : www.hellobar.com

Hello Bar est un service web qui permet d’ajouter une « floating bar » à son site web. Il a été conçu par les fondateurs de KissMetrics et Crazy Eggs. Autrement dit, il n’y a pas de doute que la mise en page du site et son interface ont été dictées par des considérations de performance. Ce modèle de site internet a tendance à se répandre, surtout parmi les start-ups. Ici, le message est clair : « vous vous inscrivez ou vous partez ». Aucun contenu n’est accessible avant de se logger, ce qui est à double tranchant : vous perdrez surement beaucoup de visiteurs, mais ceux qui resteront seront plus « utiles » pour vous que les badauds du net ! Ce genre d’interfaces ne convient pratiquement qu’aux sites de services. On les trouve souvent sur les interfaces de sites web d’applications mobiles.

Seattle Cider Company – via WordPress

Site web : www.seattlecidercompany.com

Seattle Cider Company est une distillerie de cidre, comme son nom l’indique. Ce site est l’exemple type d’un site one-page, c’est-à-dire d’un site composé d’une seule page. Pour proposer malgré tout un contenu intéressant, le long scrolling est mis à l’honneur. En descendant légèrement sous la ligne de flottaison, un menu apparaît afin de faciliter votre navigation dans cette très longue page. Une flèche tout à gauche vous rappelle que le contenu est accessible par scroll. Vous apprécierez plus globalement l’esthétique de ce site, laquelle permet de créer un univers de marque très fort. Les sites on-page sont très simples et brillent par leur clarté en général. Seul inconvénient : le référencement des site on-page n’est pas toujours satisfaisant…

Cuberto – Sur mesure

Site web : cuberto.com

Cuberto est une agence de design anglaise de très haut niveau. Le site, très personnalisé, témoigne de la qualité de l’agence et met en valeur son domaine d’activité (la création d’applis mobiles) Vous pouvez admirer la beauté de la page d’accueil. Une vidéo HTML 5 a été intégrée en fond d’écran principal. Il s’agit d’un site one-page, comme dans l’exemple précédent. On remarquera aussi l’utilisation très judicieuse des polices colorées tout en bas de la page qui font ressortir très clairement l’adresse de contact et le formulaire de demande.

Meritek – via WordPress

Site web : www.meritek.ca

Meritek est un cabinet canadien de recrutement IT. La mise en page en « ardoises » des offres d’emploi, dans le slider principal, met bien en valeur le cœur d’activité et la proposition de valeur du cabinet. L’utilisation des nuances de couleurs bleues permet de conserver une cohérence et une simplicité graphiques, tout en  différenciant bien les différents compartiments du site.

Lucerne Health – Sur mesure

Site web : www.lucernehealth.com

On remarquera sur ce dernier site la mise en avant du formulaire de contact. Pour les sites vitrines d’entreprises de services, cette mise en page peut très pertinente.

Vous avez un projet de création de site ?

Estimation de prix