Critique de conception Web # 40: FanExtra
Bienvenue dans notre 40ème critique de design! Chaque semaine, nous examinons un nouveau site Web et analysons le design. Nous soulignerons à la fois les domaines qui sont bien réalisés en plus de ceux qui pourraient utiliser un peu de travail. Enfin, nous terminerons en vous demandant de fournir vos propres commentaires.
Le site d'aujourd'hui est FanExtra, un site de ressources fantastique pour les concepteurs.
Explorez Envato Elements
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 - beaucoup moins que ce que vous paieriez pour qu'un consultant jette un œil à votre site! Vous pouvez en savoir plus ici.
À propos de FanExtra
«Tout a commencé avec un long été il y a plus de deux ans et une passion pour le design. Après avoir profité de certains des tutoriels Photoshop publiés à l'époque, j'ai décidé d'en écrire quelques-uns. J'ai créé un blog à cet effet (PSDFAN.com) et j'ai commencé à l'utiliser comme débouché créatif. 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 vite née! Le réseau FanExtra est un lieu pour les designers du monde entier de se réunir et d'explorer leurs idées et leur créativité. Vous pouvez participer aux discussions sur nos forums ou vraiment 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 encore eu. La raison en est qu'il s'agit en fait d'une page vraiment attrayante, mais que je recommanderais de repenser presque complètement.
Chaque section de la page, du logo aux miniatures, a fière allure. Cependant, lorsque vous prenez la page dans son ensemble, il y a de véritables problèmes avec le flux de chaque section en plus du plus gros problème, qui est la clarté de la communication du message principal.
Ce problème est assez courant et se pose en raison 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 à voir qu'un visiteur pourrait ne pas comprendre ce qui se passe. L'hypothèse est qu'un visiteur trouvant cette page saura ce qu'est "FanExtra", ce qui n'est certainement pas quelque chose qui devrait être supposé ici.
La communication
Lorsque vous atterrissez 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? Servent-ils des produits Coke ou Pepsi? Ok, peut-être que cette dernière question ne s'applique pas ici.
Mon point est que, lorsque vous regardez l'en-tête de ce site, il ne répond pas adéquatement à toutes ces questions cruciales:
Nous voyons ce que le site est appelé (FanExtra) avec un grand champ pour une sorte d'inscription. Est-ce que cela signifie que je suis inscrit au réseau? Est-ce donc un service gratuit? Sur la droite, nous voyons quelque chose qui fait allusion à des «tutoriels», qui nous met sur la bonne voie, suivis 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 passe dans une certaine mesure, mais est-ce vraiment le but ici? Le visiteur doit-il trouver des indices et les utiliser pour interpréter ce qu'est le site?
Le mystère est révélé
Lorsque nous descendons au milieu du site Web, le mystère est révélé:
Maintenant, nous pouvons voir que FanExtra est "un réseau de sites de tutoriels géniaux" offrant des adhésions pour 9 $ par mois. Il s'agit de l'élément de communication le plus important de la page, et pourtant il est caché à mi-chemin de la page. Cela devrait être la première chose que l'utilisateur voit.
En fait, je pense que ce message pourrait être encore plus clair. L'expression «sites de tutoriels impressionnants» est encore assez vague si vous y pensez du point de vue d'un étranger. Quelque chose comme «des sites de tutoriels géniaux pour les professionnels de la création» irait vraiment plus loin. Tout de suite, vous avez fixé votre public cible directement sur le nez de sorte que lorsque je trouve cette page, je vois un bon accueil chaleureux m'informant que ce site est spécifiquement destiné aux personnes comme moi.
Contraste visuel vs encombrement 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'œil à la communication principale telle qu'elle est actuellement:
Ici, nous voyons 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 j'ai écrit des articles entiers sur le contraste dans le design, mais ce que cela se résume est mieux dit dans un conseil de l'auteur du design Robin Williams, "ne soyez pas une mauviette." Par cela, elle veut dire que pour utiliser efficacement le contraste, les éléments doivent vraiment se démarquer de manière importante, sinon le résultat est simplement un fouillis visuel.
Découvrez comment un autre programme d'adhésion au design populaire, Think Vitamin, structure le message principal sur leur page.
Ici, nous voyons un contraste énorme et massivement surestimé entre le titre et le sous-titre. Le résultat est une communication belle et claire qui se lit parfaitement. Les personnes qui parcourent la page lisent le titre presque par accident, et si elles sont intéressées, elles peuvent prendre le temps de lire le sous-titre.
Les caractéristiques
La page se termine par un ensemble massif de puces qui descendent sur le côté gauche. C'est une utilisation assez maladroite de l'espace et crée un espace inconfortable sur le côté droit.
La solution rapide est simplement de diviser les puces en deux piles distinctes:
C'est finalement un pansement et je pense que la page pourrait en fait utiliser une intervention chirurgicale majeure. Nous aborderons brièvement cette question dans la section suivante.
Mes recommandations «d'ensemble»
Honnêtement, je ne pense pas que la configuration ininterrompue à double colonne fonctionne pour ce site. Il est trop rigide et perturbe en fait le flux naturel de communication plutôt que de le faciliter, ce qui est l'objectif d'une mise en page structurée.
Ma recommandation est de jeter complètement cette disposition. Tout d'abord, abandonnez la structure rigide à double colonne. Ensuite, déplacez la communication principale en haut de la page. Créez une grande boîte «en vedette» qui couvre toute la largeur de la page et met en évidence une partie du contenu que vous décomposez ensuite plus tard (140+ fichiers, 40 vecteurs, etc.). Assurez-vous que le titre utilise un contraste fort, un phrasé et un ciblage limpides, et au plus deux couleurs qui sont superbes ensemble.
Enfin, après avoir créé cette superbe zone d'en-tête qui définit parfaitement ce qu'est le site, à qui il s'adresse et les bases de ce qu'il comprend, vous pouvez vous concentrer sur l'organisation de vos autres informations en dessous, éventuellement dans un format à deux ou trois colonnes.
À ton tour!
Maintenant que vous avez lu mes commentaires, lancez-vous et aidez-moi en donnant au designer quelques conseils supplémentaires. Faites-nous savoir ce que vous pensez de la conception et ce que vous pensez pourrait être plus fort. Comme toujours, nous vous demandons également d'être respectueux envers le concepteur du site et d'offrir des conseils constructifs clairs, sans insultes.
