Le meilleur conseil que l’on puisse vous donner si vous voulez créer un site vitrine professionnel, c’est de vous inspirer de très bons exemples de sites. Nous avons sélectionné pour vous 18 exemples de sites vitrines qui appliquent chacun à leur manière les bonnes pratiques. Ce sont des sites efficaces, souvent très beaux, toujours très simples d’utilisation. Nous avons pris soin de vous présenter des sites créés avec différents logiciels pour que vous puissiez vous rendre compte de ce qu’il est possible de faire avec un Wix, un WordPress…
#1 L’Appartement Parisien (Wix)
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.
Site web : http://lappartement-parisien.com/
#2 Maud Dardeau (Wix)
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 ?
Site web : www.mauddardeautatouages.com
#3 L’atelier du Côteau (Wix)
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.
Site web : www.latelierducoteau.com
#4 Le Groupe Renault (WordPress)
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.
Site web : www.group.renault.com
#5 Alliance Française Rouen (WordPress)
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 de création de site internet, 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.
Site web : www.afrouen.org
#6 Spectre Agency (WordPress)
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.
Site web : spectre-agency.com
#7 Hellobar (WordPress)
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.
Site web : www.hellobar.com
#8 Seattle Cider Company (WordPress)
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…
Site web : www.seattlecidercompany.com
#9 Meritek (WordPress)
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.
Site web : www.meritek.ca
100% gratuit - 3 min
#10 The Walt Disney Company (WordPress)
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.
Site web : www.thewaltdisneycompany.com
#11 Dreaming with Jeff (Squarespace)
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.
Site web : www.dreamingwithjeff.com
#12 Boulangerie d’Ymare (sur mesure)
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.
Site web : www.boulangerie-ymare.fr
#13 Réinventer Paris (sur mesure)
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.
#14 Elephant Groupe (sur mesure)
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.
Site web : www.elephant-groupe.com
#15 Wonderful (sur mesure)
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.
Site web : www.wonderful.com
#16 Envato (sur mesure)
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.
Site web : www.envato.com
Voir tous les hébergeurs sur notre comparatif des meilleurs hébergeurs de site web sur le marché. Sinon, on vous recommande un hébergeur solide et performant pour 5€ par mois :
#17 Cuberto (sur mesure)
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.
Site web : cuberto.com
#18 Lucerne Health (sur mesure)
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.
Site web : www.lucernehealth.com
Laisser un commentaire