Critique de conception Web # 11: Scott Block
Chaque semaine, nous examinons un nouveau site Web et analysons le design. Nous soulignerons à la fois les domaines qui sont bien réalisés ainsi que ceux qui pourraient utiliser un certain travail. Enfin, nous terminerons en vous demandant de fournir vos propres commentaires.
Le site d'aujourd'hui est le portfolio personnel de Scott Block, un concepteur Web du Maryland.
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 24 $ pour critiquer votre conception - considérablement moins que ce que vous paieriez pour qu'un consultant jette un œil à votre site! Vous pouvez en savoir plus ici.
À propos de Scott
«Je vis à Columbia Maryland, à quelques minutes en voiture de Baltimore et de la capitale nationale. Quand j'avais douze ans, j'ai combiné ma passion pour les Ravens de Baltimore avec mon intérêt croissant pour la technologie, et j'ai commencé à créer des sites sur les Ravens. Depuis lors, j'ai affiné mes compétences avec diligence et je crée maintenant des sites Web pour diverses personnes et organisations. Je suis maintenant compétent dans la combinaison de html avec css, javascript, php et ajax, pour créer de beaux sites Web fonctionnels. "
Voici la page d'accueil du site:
Bien qu'il y ait certainement un certain potentiel ici, il y a beaucoup de choses que je corrigerais sur cette page. Regardons-les un par un.
Schéma de couleur
Les couleurs utilisées sur le site de Scott créent une palette assez agréable lorsqu'elles sont retirées individuellement comme indiqué ci-dessous.
Cependant, je ne suis pas fou de la répartition des couleurs. Ils semblent implémentés de manière aléatoire à des endroits de la page simplement pour des raisons de variation au lieu d'être appliqués avec un objectif et une logique. Pensez à chaque choix de couleur que vous faites et à la façon dont il se rattache au reste du contenu de la page.
Logo
Sa position en haut à gauche du site fait de ce logo la première chose que les utilisateurs voient lorsqu'ils visitent la scène. Vous voulez profiter de cette occasion pour faire une forte première impression. Malheureusement, je pense que ce logo est à court.
Je peux voir comment les formes de blocs sont travaillées dans les lettres, probablement pour être liées au nom de famille du concepteur, mais cela ne fonctionne tout simplement pas. Le SB a une lisibilité assez médiocre et semble un peu daté.
Navigation et en-tête dans son ensemble
La zone de navigation est assez simple, juste du texte avec des séparateurs horizontaux et un soulignement pour indiquer la page actuelle. Je suis tout pour garder la navigation simple, donc je pense que ce domaine est bien fait.
Lorsque vous survolez un lien dans la navigation, une icône apparaît sous le logo Scott Block. C'est un effet soigné que je n'ai jamais vraiment vu exécuté comme ça (avec l'effet de survol si loin du lien).
Lorsque vous prenez dans la zone d'en-tête dans son ensemble, il existe quelques problèmes notables qui pourraient utiliser l'adressage. Comme je l'ai dit ci-dessus, l'effet de survol de l'icône est soigné, mais cela pose quelques problèmes. Lorsque vous ne survolez pas un lien dans la navigation, il y a un grand espace vide à côté de la copie d'en-tête qui vous fait vous demander pourquoi il n'est aligné avec rien.
Un moyen possible de résoudre ce problème consiste à appliquer une icône à l'état par défaut qui se transforme en une autre icône lorsque vous survolez un lien et revient à l'icône d'origine à la fin du survol. Malheureusement, lorsque l'effet de survol de l'icône est présent, le logo et l'icône créent une pile verticale maladroite.
Globalement, l'espace négatif dans ce domaine pourrait nécessiter une restructuration complète. Au-delà du problème avec l'icône manquante, le logo principal prend juste trop d'espace vertical et crée d'étranges lacunes.
Zone en vedette
J'aime la répétition dans un design, et je peux voir comment les angles de cette section reflètent celui du logo, mais comme cela ne fonctionne pas vraiment dans le logo, la même chose s'applique ici. La nature inclinée des titres semble un peu étrange ainsi que le motif entrecroisé créé par les couleurs ici.
Inconsciemment, votre cerveau veut connecter les deux éléments qui sont de la même couleur, mais ici, les deux zones ne sont pas liées.
En outre, il existe un certain nombre d'effets de survol sur cette zone qui ne servent à rien. Lorsque vous survolez une section, une ombre portée est créée. Le Web nous a appris à reconnaître une telle activité comme une indication que ce que nous survolons est une zone cliquable. Cependant, ces zones ne sont pas cliquables et leur donner l'impression qu'elles ne font que créer de la confusion pour l'utilisateur.
Bas de page
Le pied de page est assez simple, mais encore une fois, nous voyons qu'il pourrait utiliser un peu de raffinement.
Tout d'abord, le bouton est dans un endroit gênant. Lors de la conception, méfiez-vous toujours de simplement coller des choses dans les trous simplement parce que vous avez de la place. Un fort alignement à gauche est établi ici par le texte mais ensuite ruiné par le placement du bouton.
De plus, l'animation du survol du bouton est un peu trop. Un sprite d'image est utilisé ici et il y a une animation entre les deux états de bouton où vous pouvez voir une partie de l'image glisser comme les autres diapositives. Ce n'est pas facile de dire ce qui se passe au début et c'est donc un peu déconcertant.
Recommandations générales
J'ai présenté quelques critiques sévères ci-dessus et je pense qu'il serait préférable d'essayer de lier tout cela ensemble. Voici mes suggestions:
Pour commencer, repensez le logo à quelque chose de plus moderne et horizontal. Ensuite, établissez un alignement à gauche tout au long de la page. Alignez la zone de navigation et le bloc de copie en dessous sur le côté gauche de la page et déplacez peut-être le nouveau logo vers la droite.
Faites varier la taille du texte sur la page pour créer des titres clairs et une copie de support. Tout est actuellement très grand. N'oubliez pas: lorsque vous rendez tout spécial, rien n'est spécial.
Jetez les formes actuelles dans la section en vedette et la liste à puces géante (incorporez vos services ailleurs). Créez un aperçu de projet unique et de grande taille qui s'étend tout au long de la zone de contenu.
Enfin, retravaillez le pied de page afin que l'alignement gauche ci-dessus soit respecté. En d'autres termes, sortez ce bouton du coin droit.
À 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.
Intéressé à faire critiquer votre propre site? Vous pouvez en savoir plus ici.
