Vous avez sûrement déjà pensé à créer un site WordPress pour afficher 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.
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 !
#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 interactifs 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)
#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é :
- L’arborescence du site est bien réalisée
- 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
#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 :le CTA est bien mis en valeur
- Mise en avant efficace de la culture healthy
#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
#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é :
- La page cliente est très bien faite : l’UX et les filtres sont très parlants
- Bonne profondeur de pages pour les services et les carrières
#6 Usbek&Rica
À 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é :
- Le menu en burger offre un rangement clair et par thématiques
- L’UX est original
#7 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
#8 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 entraînements 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
- Le menu du site est cliar et permet de consulter les programmes et les horaires des cours.
Découvrir Academy of Self Defense
#9 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
#10 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é :
- La mise en avant de tous les outils utilisés par les TPE et PME
- L’espace carrière est visible du premier coup d’oeil et permet de découvrir les avantgaes fournis par la compagnie
- La page « who we are » est plus que sympathique et présente très bien l’entreprise et ses produits
#11 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
#12 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
#13 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
#14 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
Découvrir The Walt Disney Company
#15 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 qui met bien en avant les produits
- Les animations business sont bien faites
- Les fiches produits sont bien réalisées et épurées
- La hiérarchisation de l’information est éloquente
Conclusion
J’espère que vous en avez pris plein les mirettes, et que ces quelques exemples ont pu vous inspirer. Pour conclure, voici les derniers conseils que l’on peut vous donner pour mettre en place un site vitrine efficace.
Dans un premier temps, 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é.
Dans un second temps, 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 !
Laisser un commentaire