Bienvenue à notre 40ème critique de design! 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 FanExtra, un fantastique site de ressources pour les concepteurs.
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 34 $ pour critiquer votre conception, ce qui est nettement moins que ce que vous paieriez pour qu'un consultant examine votre site! Vous pouvez en savoir plus ici.
À propos de FanExtra
Tout cela a commencé avec un long été, il y a deux ans, et une passion pour le design. Après avoir visionné quelques-uns des tutoriels Photoshop publiés à ce moment-là, j'ai décidé d'écrire quelques-uns de mes propres. J'ai créé un blog à cet effet (PSDFAN.com) et commencé à l'utiliser comme sortie créative. Je voulais offrir plus pour notre communauté grandissante et pouvoir faire évoluer PSDFAN vers quelque chose de plus grand. L'idée de FanExtra est bientôt née! Le réseau FanExtra est un lieu de rencontre pour les designers du monde entier, qui souhaitent explorer leurs idées et leur créativité. Vous pouvez participer aux discussions sur nos forums ou approfondir votre apprentissage grâce à notre programme d'adhésion FanExtra.
Voici une capture d'écran de la page d'accueil:
Impression initiale
FanExtra est l’un des cas les plus intéressants pour une critique de conception que nous ayons eu à ce jour. La raison en est qu’il s’agit d’une page très attrayante, mais que je recommanderais presque complètement de repenser.
Chaque section de la page, du logo aux vignettes, a fière allure. Cependant, lorsque vous prenez la page dans son ensemble, le déroulement de chaque section pose de véritables problèmes, en plus du problème le plus important, à savoir la clarté de la communication du message principal.
Ce problème est assez courant et provient d’un mot très sale dans la conception Web: hypothèse. Ici, le concepteur est probablement proche du projet et a donc naturellement du mal à comprendre qu'un visiteur puisse ne pas comprendre ce qui se passe. L’hypothèse est qu’un visiteur qui trouvera cette page saura quoi? FanExtra? est, ce qui est certainement pas quelque chose qui devrait être supposé ici.
La communication
Lorsque vous arrivez sur une page Web, vous analysez instinctivement la zone d'en-tête de la même manière que vous analyseriez le tableau de menu dans un restaurant de restauration rapide. Les questions possibles incluent: Où suis-je? Combien ça coûte? Que vont-ils me donner pour mon argent? Est-ce qu'ils servent des produits Coca-Cola ou Pepsi? Ok, peut-être que la dernière question ne s'applique pas ici.
Mon point est que, lorsque vous consultez l'en-tête de ce site, il ne traite pas correctement toutes ces questions cruciales:
Nous voyons ce que le site s'appelle (FanExtra) avec un grand champ pour une sorte d'inscription. Cela signifie-t-il que je suis inscrit au réseau? Alors, est-ce un service gratuit? Sur la droite, nous voyons quelque chose qui fait allusion à des "tutoriels", ce qui nous amène sur la bonne voie, suivi de mots comme "textures". et "vecteurs", qui représentent un jargon assez spécifique.
Si je suis designer, à ce stade, j'ai probablement compris ce qui se passait dans une certaine mesure, mais est-ce vraiment le but recherché? Le visiteur doit-il trouver des indices et les utiliser pour interpréter le site?
Le mystère est révélé
Lorsque nous arrivons au milieu du site, le mystère est révélé:
Nous pouvons maintenant voir que FanExtra est «un réseau de sites tutoriels impressionnants». offrant des abonnements pour 9 $ par mois. Il s’agit de la communication la plus importante sur la page, et pourtant, elle est cachée au milieu de la page. Cela devrait être la première chose que voit l'utilisateur.
En fait, je pense que ce message pourrait être encore plus clair. La phrase? Sites de tutoriels géniaux? est encore assez vague si vous y réfléchissez du point de vue d'un étranger. Quelque chose comme Des sites de tutoriels géniaux pour les professionnels de la création prendrait vraiment cette déclaration beaucoup plus loin. Vous avez tout de suite fixé votre public cible au nez de sorte que lorsque je trouve cette page, je reçois un message de bienvenue chaleureux qui m'informe que ce site est spécifiquement destiné aux personnes comme moi.
Contraste visuel contre fouillis visuel
Un autre problème que je vois avec la messagerie est la façon dont elle est structurée d’un point de vue visuel. Jetons un coup d'oeil à la communication principale telle qu'elle est actuellement:
Nous voyons ici une pile de trois lignes, chacune utilisant un texte de couleur différente et de légères variations de la même police en termes d'audace et de taille. Je peux et ai écrit des articles entiers sur le contraste dans la conception, mais le mieux est de le dire dans un conseil de l'auteur de la conception Robin Williams: "Ne soyez pas une poupée." Elle entend par là que, pour utiliser efficacement les contrastes, les éléments doivent vraiment se démarquer les uns des autres, sans quoi le résultat est simplement un encombrement visuel.
Découvrez comment un autre programme d'adhésion populaire, Think Vitamin, structure le message principal sur leur page.
Nous constatons ici un contraste énorme et surestimé entre le titre et le sous-titre. Le résultat est une communication belle et claire qui se lit parfaitement. Les personnes parcourant la page lisent le titre presque par accident et s’ils sont intéressées, elles peuvent prendre le temps de lire le sous-titre.
Les caractéristiques
La page se termine par un ensemble considérable de points de balle situés sur le côté gauche. Il s’agit d’une utilisation assez délicate de l’espace qui crée un écart inconfortable du côté droit.
La solution rapide consiste simplement à diviser les points de balle en deux piles distinctes:
C’est finalement un pansement et je pense que la page pourrait nécessiter une intervention chirurgicale majeure. Nous en reparlerons brièvement dans la section suivante.
Mon? Big Picture? Recommandations
Honnêtement, je ne pense pas que la configuration ininterrompue de la double colonne fonctionne pour ce site. Il est trop rigide et perturbe le flux naturel de la communication plutôt que de le faciliter, ce qui est l'objectif d'une mise en page structurée.
Ma recommandation est de jeter cette mise en page complètement. Commencez par abandonner la structure rigide à double colonne. Ensuite, déplacez la communication principale en haut de la page. Faire un grand? En vedette? Ce champ couvre toute la largeur de la page et met en évidence une partie du contenu que vous diviserez plus tard (plus de 140 fichiers, plus de 40 vecteurs, etc.). Assurez-vous que le titre utilise un contraste fort, un phrasé et un ciblage limpides, et au plus deux couleurs qui vont bien ensemble.
Enfin, une fois que vous avez créé cette zone d'en-tête géniale qui décrit parfaitement le site, à qui il s'adresse et les éléments de base de son contenu, vous pouvez alors organiser vos autres informations, éventuellement en deux ou trois colonnes.
À 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.