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.
Aujourd'hui, nous allons consulter le site de RoyalSlider, un populaire slider de contenu JavaScript. Faisons un saut et voyons ce que nous pensons!
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 RoyalSlider
Découvrez la nouvelle version du curseur le plus populaire sur CodeCanyon. Depuis juillet 2011, 4637 licences ont été vendues. Nous avons reçu 5 sur 5 étoiles note basée sur 378 commentaires.?
Chaque modèle de curseur est réactif. Jetez un coup d'oeil sur votre appareil mobile ou essayez de redimensionner votre navigateur pour voir l'effet.?
Voici une capture d'écran de la page d'accueil:
Première impression
J'adore plonger dans des sites Web très ciblés comme celui-ci, car nous pouvons définir un ensemble d'objectifs clairs et peser le succès de la conception par rapport à ces objectifs.
Alors, de quoi parle ce site? Son seul but est de vendre un produit: le "RoyalSlider". qui est en fait un élément extrêmement populaire sur CodeCanyon. Avec ce mini site, le développeur peut vraiment entrer dans les détails sur la puissance du curseur et sur son rôle.
Comme vous pouvez le voir dans la capture d'écran ci-dessus, il a fait exactement cela. Le site lui-même est très attrayant, donc d'un point de vue purement esthétique, je n'aurai pas grand chose à dire à part "un excellent travail!" Cependant, du point de vue de l'organisation du contenu, je pense que nous pourrions voir une amélioration.
«Du point de vue de l'organisation du contenu, je pense que nous pourrions voir une amélioration. ?Étant donné que l’objectif premier est d’éduquer les visiteurs sur ce produit, je pense que nous pouvons restructurer certaines informations pour mieux répondre à nos besoins.
Faisons un zoom avant et examinons quelques domaines spécifiques pour voir comment nous pouvons apporter des améliorations.
L'en-tête
L'en-tête est certainement la meilleure partie de la page. Le designer a utilisé cet espace pour présenter son produit, ce qui est parfait, d'autant plus qu'il est magnifique et très fonctionnel!
Le design ici et ailleurs est super minimal. Le blanc, le gris et le noir sont les couleurs primaires qui remplissent la page avec un rouge audacieux et accrocheur utilisé pour les zones qui méritent une attention particulière.
La navigation est facile à utiliser, le logo est simple mais attrayant, et il existe un lien évident pour acheter l'article sur CodeCanyon. Honnêtement, je ne changerais pas grand chose ici.
La seule chose que j’aimerais envisager est d’ajouter un titre audacieux au-dessus des deux paragraphes de droite. Pour le moment, le curseur attire tellement votre attention (une bonne chose) que vos yeux restent ancrés à celle-ci sans nécessairement effectuer le trajet jusqu'au petit texte à droite.
"Voir un morceau de gros texte gras, presque quoi qu'il soit dit, aiderait à attirer l'attention de l'utilisateur?" ?Le fait de voir une grande quantité de texte gras et audacieux, presque quoi qu’il en soit, aiderait l’utilisateur à attirer l’attention sur les informations importantes contenues dans cette partie du contenu. Voici une maquette rapide et sale de ce que je veux dire:
Les caractéristiques
Le reste de la page est entièrement occupé par du texte pur: plus de vingt paragraphes! Chacun de ceux-ci est bref, bien formaté et contient un en-tête, ce qui rend la page assez facile à parcourir.
Malgré le fait que le texte soit bien mis en forme, je pense que cette zone pourrait utiliser un lifting majeur. L'objectif principal de cette étape serait de casser tout le contenu du texte afin qu'il soit plus facile à parcourir et plus attrayant. Cela peut être accompli avec une combinaison de deux techniques différentes.
Ajouter des images de soutien
La première chose que j'aimerais voir dans ce domaine, ce sont des images. Chaque fois que vous avez de gros morceaux de contenu textuel, il est judicieux de créer une sorte de visuel pour aider à transporter ce contenu et ajouter un intérêt visuel à la page.
Vingt et un paragraphes, c'est beaucoup de contenu et sans aide visuelle, vous allez perdre vos lecteurs. Rappelez-vous toujours que les personnes naviguant sur le Web ont ADD, nous concentrons rarement notre attention sur une seule chose.
Vos visiteurs lisent sur Twitter, consultent leur courrier électronique et mettent à jour Facebook, tout en consultant votre site! Si vous voulez attirer l'attention dans cet environnement, vous devez apporter plus que quelques paragraphes.
"Vos visiteurs lisent sur Twitter, consultent leur courrier électronique et mettent à jour Facebook, tout en consultant votre site!"Une solution simple consisterait à associer des vignettes à certains des paragraphes. Les titres ici, tels que? Touch-friendly? et? Support vidéo ,? se prêtent parfaitement aux aperçus miniatures, cela ne devrait donc pas être trop difficile.
Créer des sections claires
La stratégie suivante que j'aimerais voir ici est de prendre tout le contenu du texte et de le diviser plus clairement en sections distinctes. À l'heure actuelle, il y a deux sections, mais elles ne sont en aucun cas distinctes visuellement.
Je recommanderais de diviser le contenu en au moins trois ou quatre sections, de créer des titres plus grands et plus importants, et éventuellement de modifier légèrement la couleur de fond de chaque section pour les différencier (alternance du blanc et du gris)
Inspiration: Squarespace
Squarespace est un site qui, je pense, tire le conseil que je donne ici très bien. Esthétiquement, ce site est très similaire à celui de RoyalSlider, mais la façon dont ils ont présenté leurs fonctionnalités est beaucoup plus attrayante et impressionnante.
Remarquez la richesse des images, les gros titres et la couleur de fond variable.Lorsque vous faites défiler la page, les sections sont clairement distinctes et si attrayantes que l’information n’est pas trop lourde.
Je ne suggère pas que quiconque devrait arnaquer le design de Squarespace, mais vous pouvez apprendre de précieuses leçons en analysant ce qu’ils ont fait et pourquoi.
FTW sensible
Le nombre de sites Web réactifs sur le Web augmente régulièrement. Je suis ravi de voir des développeurs Web de toutes les régions, des grandes entreprises aux exploitations unipersonnelles, faisant de la réactivité une priorité absolue dans leurs conceptions.
«Non seulement le site RoyalSlider est totalement réactif, mais le curseur lui-même est réactif. ?Ce site est un brillant exemple de cette tendance. Non seulement le site RoyalSlider est totalement réactif, mais le curseur lui-même est réactif. Ce n'est pas un mince exploit et je félicite le développeur pour son engagement à faire du Web une expérience davantage agnostique pour les appareils.
À 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.