WordPress – 15 exemples de sites vitrines réussis

Vous avez sûrement déjà pensé à créer un site WordPress pour donner vie à votre activité en ligne. C’est un projet enthousiasmant, et nous sommes là pour vous aider, notamment en vous guidant à travers les choix de thèmes WordPress. Mais attention, gardez en tête qu’il y a des coûts cachés dans tout processus de création d’un WordPress.

Dans cet article, nous allons vous montrer des exemples de sites vitrines réalisés sous WordPress qui nous ont plu. Autrement dit, des sites réussis et beaux, selon plusieurs critères. L’objectif ? Vous émerveiller bien sûr, mais aussi comprendre ce qui fait un site WordPress réussi.

D’abord nous commençons avec des sites français, ensuite nous montrerons des exemples de sites WordPress conçus dans la langue de Shakespeare. C’est parti !

6 exemples de sites WordPress français

#1 Studio Ouam

Studio Ouam est un studio de designers bordelais qui créent des campagnes de publicité originales. La typographie originale, les éléments réactifs au passage du curseur, l’effet de parallax, où les éléments bougent au défilement, indépendamment du fond, concourent à donner une expérience utilisateur riche.

On a particulièrement aimé :

• Les éléments réactifs offrent une expérience ludique
• Les pages présentant les campagnes réalisées sont belles, succinctes et bien expliquées (cf. la marque de gin)

Accéder à Studio Ouam

#2 Votre tour du monde

Le vidéaste vedette Bruno Maltor, entrepreneur à succès dans le domaine du voyage, a choisi un site au design épuré. Une vidéo incrustée en haut de page, des grandes photos, du texte parcimonieux, avec les idées importantes en surbrillance donnent un rendu immersif. Les sujets essentiels sont abordés en front page, mais on a l’impression d’une grande organisation grâce au classement par formats : itinéraires, tops 5, récits, etc.

On a particulièrement aimé :

• Un nom de domaine qui frappe et s’adresse directement à l’internaute
• Le logo en tête de site
• Le format d’article en top ou liste, facile à lire
• Le menu horizontal avec onglets qui se colorent et se déroulent au passage du curseur

Accéder à Votre Tour du Monde

#3 Jour

Jour se présente comme une chaîne de restauration saine. La promesse est faite avec un thème à dominante verte, et le panneau d’accueil vise la simplicité avec un déroulement horizontal de trois grandes images. Le menu du haut offre un repère immédiat quel que soit ce que vous cherchez : restaurants, jobs, franchise, etc.

On a particulièrement aimé :

• Le menu hiérarchise les propositions : “Commandez” apparaît sur un bouton rouge
• Le ton décontracté, teinté d’humour

Accéder à Jour

#4 Le Royal Monceau

Hôtel de luxe, le Royal Monceau signe un site blanc et chic, visuellement fidèle à son identité. En home, on déroule des panneaux successifs présentant les différentes offres de chambres et espaces de détente et de relaxation. Une grande image et un texte associé, vendant les mérites de chaque offre, mais pas de prix : à l’instar des vitrines de luxe, l’hôtel s’adresse à une clientèle qui paie rubis sur l’ongle.

On a particulièrement aimé :

• La part belle aux images et aux descriptions
• Le bouton “réserver” en évidence grâce à un wigget en bas
• Des boutons d’accès boutique et réseaux sociaux en haut

Accéder au Royal Monceau

#5 SQLI

Voici le site recrutement de SQLI, une entreprise de conseil pour la transformation digitale. On tombe sur un visuel très épuré, aux accents technologiques. Au fil du déroulement, des lignes rappelant un réseau et des figures géométriques s’assemblent et s’éloignent, laissant une impression hypnotique.

On a particulièrement aimé :

• L’effet de parallax de la page d’accueil
• Un effet fondu au noir au bas de la home
• En bas, un mini formulaire en 4 cases dynamiques pour le recrutement

Accéder à SQLI

#6 Usbek&Rica

A l’origine magazine papier, Usbek & Rica, média dédié à la prospective et au futur, est en train de réussir sa mue digitale. La page d’accueil montre des articles hiérarchisés par taille (grande photo pour une longue interview par exemple). La lecture globale du site est aérée par des bandeaux dédiés à des contenus hors article, comme la proposition d’inscription à la newsletter.

On a particulièrement aimé :

• Un bandeau informe de la refonte du site et permet de tester les fonctionnalités
• Une monnaie virtuelle, les usbeks, à accumuler grâce aux réseaux sociaux et à dépenser sur le shop

Accéder à Usbek&Rica

9 exemples de sites WordPress américains

#1 10×17

Derrière le site 10×17 se cachent 26 artistes qui partagent leurs morceaux préférés de l’année 2017 et les illustrent à leur manière avec un code couleur similaire. Le site prend la forme d’un compte à rebours, du jour 10 au jour 1. Pour chaque jour, 26 morceaux, 26 magnifiques illustrations, et un petit lecteur à côté pour jouer chaque morceau.

On a particulièrement aimé :

• Le site combine l’art graphique à la musique pour un effet garanti
• Le scroll down crée un effet parallax (les éléments bougent indépendamment du fond)
• Les éléments sont interactifs sous le passage du curseur
• Le graphisme épuré, fait de couleurs vives et harmonieuses, à dominante de bleu, rouge, jaune et blanc

Accéder à 10×17

#2 Academy Self Defense

Il s’agit du site vitrine d’une académie américaine délivrant des cours de kick boxing pour apprendre à se défendre. Le site est clair et met en avant de grandes photos des entraînements, accompagnées de grand texte. Une mosaïque de photos des entrainements suivis sur zoom pendant le confinement montre la réactivité de l’académie autant que des développeurs du site.

On a particulièrement aimé :

• Un contenu immersif, qui promeut l’utilisation des réseaux sociaux et des applis de visioconférence
• La bordure du haut est claire et permet de consulter les programmes et les horaires de cours
• Le curseur qui change d’apparence sur le côté pour changer entre différents types de cours

Accéder à Academy of Self Defense

#3 Animal Logic Studio

Animal Logic est un studio d’animation 3D. Le site vitrine présente d’emblée des vidéos incrustées qui montrent le travail d’animation réalisé pour le compte de films à succès comme Happy Feet ou Avengers. C’est une stratégie judicieuse, car on remarque du même coup l’identité visuelle du studio et la qualité de son travail. Plus bas, le site fournit clairement les accès à l’espace carrières et à l’actualité de la firme.

On a particulièrement aimé :

• La force de la vidéo d’animation
• On peut faire défiler les différents films de gauche à droite
• Les réseaux sociaux en bordure supérieure sont immédiatement visibles

Accéder à Animal Logic

#4 Awesome Motive

Awesome Motive est une entreprise qui aide au développement du business en ligne. La proposition est formulée en front page avec une phrase résumée et représentée en animation 3D sous la forme d’un petit commerce qui grossit grâce à des outils : WordPress, emails, analyses de données, etc. Quand on déroule, le site communique sur les partenariats réalisés.

On a particulièrement aimé :

• L’animation 3D qui donne un ton décontracté et sympathique
• L’espace carrières est visible au premier coup d’oeil et permet de découvrir les avantages fournis par la compagnie

Accéder à Awesome Motive

#5 Obama Foundation

Difficile de faire plus simple : l’organisation non lucrative du 44ème président des Etats-Unis met en exergue son logo, une grande photo et du grand texte pour soutenir son action et inciter les citoyens à s’engager avec lui. Un menu de navigation coulissant sur la gauche au passage du curseur offre un repère efficace. Dans le coin supérieur droit, le bouton “Donate” résume le caractère non lucratif du projet.

On a particulièrement aimé :

• La qualité et la taille de l’image utilisée en une
• La clarté des thèmes abordés avec un titre limpide pour chaque publication

Accéder à Obama Foundation

#6 Angry Birds

Faut-il vraiment présenter le jeu mobile vedette aux oiseaux furieux ? Ici, on retrouve l’univers Angry Birds haut en couleurs au premier coup d’oeil, avec des images haute résolution des oiseaux, en cohérence avec le jeu. Le défilement permet de découvrir les derniers projets de la firme : jeu, film, etc.

On a particulièrement aimé :

• 4 boutons en tête de site : film, jeu, animations, shop et les chaînes de réseaux sociaux dans le coin droit
• Pour les 10 ans, une chronologie horizontale des étapes de la marque année par année
• Le détail qui frappe : une délimitation faite de cadenas fous, de feuilles et de fleurs entre les différents projets

Accéder à Angry Birds

#7 The New Yorker

Fondé en 1925 et revendiquant une identité dandy, The New Yorker a transposé fidèlement au numérique ce qui fait la force du magazine. Peu d’articles en une, différents formats de photos et d’images, une hiérarchie des articles, et un angle particulier dans leur traitement, donnent des repères au lecteur. En haut, les différents formats : news, books, video, podcast, etc. De l’actualité, sans fioriture.

On a particulièrement aimé :

• Une proposition de newsletter non invasive, dans le coin supérieur
• Un indispensable pour les médias : on défile du plus au moins urgent
• Les contributeurs apparaissent dessinés, pas en photo, ce qui crée une rupture dans le style général

Accéder à The New Yorker

#8 Walt Disney Company

Le site est logiquement conçu pour montrer Disney comme un lieu d’accueil et de divertissement. La photo géante en une montre donc le parvis du siège social, avec les 7 nains de Blanche-Neige soutenant le toit. Comme une invitation à retrouver la féérie. Plus bas, quand on déroule, on tombe sur les dernières nouvelles de la firme, avec images moyennes et texte associé.

On a particulièrement aimé :

• La photo en une, immersive
• La bordure supérieure et ses mentions claires : relations investisseurs, carrières, responsabilité sociale…
• Le détail qui fait la différence : le fond de la bordure vire au blanc sous le curseur

Accéder à The Walt Disney Company

#9 The Cool Club

Nous avons affaire à un site de e-commerce vendant de beaux objets tels que des cartes à jouer ou des affiches. Sur fond blanc, un paquet de cartes à jouer en vedette, animées en 3D, donnent une impression soignée du plus bel effet. Plus bas, les bandeaux se succèdent et regroupent différents types d’affiches : celles qui représentent des animaux, des gens célèbres, etc.

On a particulièrement aimé :

• Le visuel minimaliste
• Une page superbe avec des cartes à jouer réactives au passage de la souris
• Le bouton Star Wars mène à une page animée qui reprend les codes du générique de la saga…

Accéder à The Cool Club

J’espère que vous en avez pris plein les mirettes, et que ces quelques exemples ont pu vous inspirer. On remarque que le design d’un site dépend de sa raison d’être et de ses objectifs. Un site de média fourmille de texte, alors qu’on attend d’un site de créatifs ou d’artistes qu’il soit visuellement épuré.

Tâchez autant que possible d’équilibrer le ratio image/texte selon le but recherché par votre site, et de hiérarchiser l’information. Mais si votre site vitrine doit mettre en avant vos produits et service efficacement, gardez en tête qu’il reflète aussi votre personnalité, et doit permettre le contact avec vos visiteurs. Donc ne négligez pas la rubrique contact, newsletter et les réseaux sociaux.

Enfin, n’hésitez pas à ajouter du contenu réactif au passage de la souris, et à mettre de la couleur à votre site. Exprimez-vous !