Chaque semaine, nous examinons un nouveau site Web et en analysons le design. Nous soulignerons les deux domaines qui sont bien faits en plus de ceux qui pourraient nécessiter du travail. Enfin, nous terminerons en vous demandant de fournir vos propres commentaires.
Le site actuel est WPMU DEV, une place de marché pour les thèmes et les plugins WordPress. Faisons un saut et voyons ce que nous pensons!
Soumettez votre site!
Si vous souhaitez soumettre votre site Web pour qu'il soit présenté dans une future Critique de conception, cela ne prend que quelques minutes. Nous facturons 49 $ pour la critique de votre conception - bien moins que le coût d'un consultant pour consulter votre site! Vous pouvez en savoir plus ici.
À propos de WPMU DEV
WPMU possède les meilleurs plugins et thèmes WordPress, Multisite et BuddyPress sur le Web. Primé, aimé par 145 436 membres, il le fait depuis 2004. C'est le seul endroit où vous trouverez d'excellents thèmes multisites, le célèbre pack de 133 thèmes, des pages d'accueil réseau incroyables et une compatibilité 100% BuddyPress.
Voici une capture d'écran d'une section de la page d'accueil:
Première impression
"WPMU DEV est un site magnifique avec une mise en page réactive et des tonnes de petites attentions qui suffisent à faire sourire le designer."L'année dernière, nous avons examiné un autre site de cette même famille / réseau: WPMU.org. Ce site semblait un peu simple. Cela semblait décent, mais ressemblait beaucoup à un modèle générique. En outre, la mise en page nécessitait des travaux et certains aspects de l'esthétique, tels que le logo, étaient un peu décalés.
Après la critique, les travailleurs de WPMU ont redessiné complètement ce site, en intégrant nombre des suggestions que j'ai faites dans la critique. Le résultat est un nouveau blog magnifique qui résout tous les problèmes que j'avais avec l'ancien. La mise en page est fantastique (parfaitement réactif au démarrage), l'esthétique est belle et personnalisée, même le logo a été redessiné pour se sentir plus moderne. Ils ont vraiment amélioré leur jeu et ont sorti la deuxième version du parc.
Quand ils m'ont demandé de jeter un coup d'œil à WPMU DEV, j'ai su dès que je l'ai vu que ces gars-là étaient tous sur le point de faire du bon design une priorité absolue. Comme le nouveau WPMU.org, WPMU DEV est un site magnifique avec une mise en page réactive et des tonnes de petites attentions qui suffisent à faire sourire ce designer. Voyons ce qui le rend si génial.
Entête
Nous allons commencer en haut et descendre la page. Lorsque vous chargez la page, voici le graphique qui remplit votre écran:
J'aime que la première chose que je vois soit une grande photo d'une personne attrayante et sympathique. Il n'a pas cette sensation de stock trop formel et formel mais semble plutôt plus authentique et incroyablement décontracté. Juste à côté de l'image de la femme se trouve une citation de client positive, qui met en contexte la photo de la femme.
Dès le départ, ils ont utilisé certaines de mes tactiques préférées: des visages souriants et de véritables éloges de la part des clients. Ce site, et par conséquent WPMU DEV, me semble sympathique, abordable et fiable en tant que visiteur. Je ne suis là que depuis quelques secondes!
Tout cela est soutenu par un solide appel à l'action: en savoir plus. À ce stade, c'est probablement exactement ce que je veux faire. Ce lien vous amène à une page différente, tout aussi impressionnante, mais pour l’instant, nous allons nous en tenir à celle-ci et faire défiler un peu.
La navigation
Avant de passer à la section suivante, parlons un peu de la structure de la page. Pour la plupart, il s’agit d’un site à une seule page. Les liens de la barre de navigation ne vous obligent pas à séparer des pages, mais vous dirigent plutôt vers différentes sections de cette même page. En parlant de la barre de navigation, il s’agit en réalité d’un travail de développement et de conception particulièrement astucieux:
Initialement, la navigation apparaît directement sous la photo de la femme de la dernière section. Toutefois, lorsque vous faites défiler la page, elle s’accroche en haut de la fenêtre. Ce faisant, un logo apparaît et le texte réduit sa taille dans une transition fluide. C’est le genre de choses qui me passionne vraiment, alors la navigation me tient à coeur.
Ce n’est pas de la gueule à l’oeil, mais la barre de navigation est en train de s’adapter à son utilisation. En haut de la page, il y a déjà beaucoup de marques, le logo n'est donc pas nécessaire. Lorsque vous faites défiler l'écran, le logo apparaît pour vous rappeler où vous êtes et sert de lien rapide pour vous rendre en haut de la page. Extrêmement fonctionnel. Extrêmement attrayant. C'est une victoire, gagne.
Section Plugins
À partir de là, vous passez simplement d’une section à l’autre en faisant défiler la page. Chaque section est unique et a une belle apparence tout en s’intégrant à l’esthétique du design qui régit toute la page. Voici la première section:
Comme vous pouvez le constater, ces autres sections inversent le schéma de couleurs présenté dans l'en-tête (arrière-plan sombre, reflets clairs), ce qui permet une utilisation vraiment agréable du contraste et de la répétition. Lorsque vous survolez l'une des icônes dans cette zone, le titre et même des parties du graphique deviennent jaune vif, ce qui optimise encore le contraste.
J'aime le look de ces icônes. Ce ne sont pas les mêmes icônes minimales que vous voyez dans des milliers d'itérations différentes sur la moitié des sites Web. Ils se sentent beaucoup plus coutumiers et ont une certaine personnalité.
Curseur d'adhésion
Ensuite, nous allons parcourir quelques sections et examiner un élément d’interface utilisateur très soigné qui vous aide à choisir un plan d’affiliation.
Nous avons ici un grand et beau curseur qui s’étend sur l’écran. Au fur et à mesure que vous déplacez le curseur d'un mois à trois mois, puis à douze, le prix au bas de la page est actualisé avec vos économies. C'est un excellent point d'interaction qui peut accroître l'engagement. Ça marche aussi vraiment en douceur, vous permettant de faire glisser le curseur ou simplement cliquer n'importe où pour mettre à jour le prix. Peu importe où vous relâchez le curseur, il passera au point d'arrêt le plus proche.
Développeurs
La dernière section de cette page que je souhaite regarder présente des clichés du personnel et des développeurs / concepteurs associés pour WPMU. En un coup d'œil, cela semble assez banal. Juste une grille de vignettes, non?
Il s'avère que ces gars ont même rendu cette section géniale. Lorsque vous survolez une photo, vous voyez une petite incrustation indiquant le nom et la position de la personne. Éloignez votre curseur et la superposition glisse. Ce qui est cool, c’est qu’il glisse vers l’extérieur dans la direction de votre curseur. Cela signifie que si vous faites glisser votre curseur hors d'une photo et dans une autre, il semble que la superposition vous suive. C'est une grande illusion avec laquelle j'ai dû jouer pendant trente bonnes secondes avant de continuer.
Mise en page réactive
Avant de terminer, il est à noter que le site est entièrement réactif. Ci-dessous, vous pouvez jeter un coup d’œil aux versions bureau, tablette et mobile:
Notez à quel point la conception s’adapte au périphérique qui la visualise. Au fur et à mesure que vous descendez, le message principal est conservé, mais les extras non essentiels sont abandonnés au profit de l'efficacité de la présentation.
Bon travail!
"Faites toujours attention aux barrières que vous placez entre vos utilisateurs et une conversion."
En ce qui me concerne, ce site est de premier ordre. Le design est parfait, le layout réactif et le spot de messagerie allumé. Je peux rapidement dire en quoi consiste WMPU DEV et disposer de sources d’information prêtes pour toutes les questions que je me pose.
J'ai longtemps regardé autour de moi en essayant de trouver quelque chose à redire et franchement, il n'y a presque rien. Ce qui me préoccupe, c’est l’effort nécessaire pour s’inscrire. Il n'y a pas? Inscrivez-vous maintenant? bouton n'importe où sur la page d'accueil. Une fois que j'ai cliqué sur? En savoir plus? bouton, je suis pris à la page des plans et des prix. Cette page est attrayante, mais je dois faire défiler des kilomètres avant d’arriver au fond, où je peux enfin choisir un plan et procéder.
Soyez toujours conscient des barrières que vous placez entre vos utilisateurs et une conversion. Si je viens sur ce site avec l'intention de m'inscrire, je suis votre meilleur visiteur et vous voulez vous assurer que j'ai un moyen facile et clair de vous donner mon argent.
À ton tour!
Maintenant que vous avez lu mes commentaires, apportez votre contribution en donnant quelques conseils supplémentaires au concepteur. Dites-nous ce que vous pensez être génial à propos de la conception et ce que vous pensez pourrait être plus fort. Comme toujours, nous vous demandons d'être également respectueux du concepteur du site et d'offrir des conseils clairs et constructifs, sans aucune insulte dure.