12 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’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.

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.