Chaque semaine, nous examinons un nouveau site Web et en analysons le design. Nous indiquerons à la fois les domaines qui sont bien réalisés et ceux qui pourraient nécessiter du 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 de sites 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 la critique de votre conception - beaucoup moins que le coût d'un consultant pour jeter un coup d'œil sur votre site! Vous pouvez en savoir plus ici.
À propos de Scott
«Je vis à Columbia, dans le Maryland, à quelques minutes de route de Baltimore et de la capitale nationale. Quand j'avais douze ans, j'ai combiné ma passion pour les Corbeaux de Baltimore à mon intérêt croissant pour la technologie et commencé à créer des sites sur les Corbeaux. Depuis lors, j'ai affiné mes compétences avec diligence et je réalise 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 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 lorsque vous les supprimez individuellement, comme indiqué ci-dessous.
Cependant, je ne suis pas fou de la distribution des couleurs. Ils semblent implémentés de manière aléatoire dans des points de la page simplement pour des raisons de variation au lieu d’être appliqués avec un but et une logique. Pensez à chaque choix de couleur que vous faites et à son lien avec le 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 se rendent sur la scène. Vous voulez profiter de cette occasion pour faire une bonne première impression. Malheureusement, je pense que ce logo commence à manquer.
Je peux voir comment les lettres sont intégrées à des formes de bloc, probablement pour correspondre au nom de famille du créateur, mais cela ne fonctionne tout simplement pas. Le SB a une lecture assez médiocre et se sent un peu daté.
Navigation et en-tête dans son ensemble
La zone de navigation est assez simple, il n’ya que du texte avec des séparateurs horizontaux et un soulignement pour indiquer la page en cours. Je suis tout pour garder la navigation simple donc je pense que cette zone est bien faite.
Lorsque vous survolez un lien dans la navigation, une icône apparaît sous le logo Scott Block. C’est un bel effet que je n’ai jamais vu s’exécuter de la sorte (avec l’effet de survol si éloigné du lien).
Lorsque vous prenez la zone d'en-tête dans son ensemble, il existe quelques problèmes notables qui pourraient être liés à l'adressage. Comme je l'ai dit plus haut, l'effet de survol d'icônes est soigné, mais il pose certains 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, ce qui vous fait vous demander pourquoi il n'est pas aligné avec quoi que ce soit.
Une solution possible consiste à appliquer une icône à l'état par défaut qui passe à une autre icône lorsque vous survolez un lien et rétablit 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 inconfortable.
Globalement, l’espace négatif dans ce domaine pourrait faire l’objet d’une restructuration complète. Au-delà du problème de l’icône manquante, le logo principal occupe tout simplement trop d’espace vertical et crée des trous étranges.
Zone sélectionnée
J'aime la répétition dans un dessin, et je peux voir comment les angles de cette section reflètent ceux du logo, mais comme cela ne fonctionne pas vraiment dans le logo, il en va de même ici. La nature oblique des titres semble un peu étrange, de même que le motif entrecroisé créé par les couleurs ici.
Inconsciemment, votre cerveau veut relier les deux éléments de même couleur, mais ici les deux zones ne sont pas liées.
En outre, il existe un certain nombre d’effets de vol stationnaire 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 nous survolons une zone cliquable. Cependant, ces zones ne sont pas cliquables et leur donne l'impression de ne faire que créer de la confusion pour l'utilisateur.
Bas de page
Le pied de page est assez simple, mais nous voyons encore une fois qu’il pourrait être affiné.
Tout d’abord, le bouton est mal placé. Lors de la conception, veillez toujours à coller des objets dans des trous simplement parce que vous avez de la place. Un fort alignement à gauche est établi ici par le texte mais ensuite ruiné par la position du bouton.
De plus, l’animation de survol du bouton est un peu trop. Un sprite d'image est utilisé ici et il y a une animation entre les deux états du bouton où vous pouvez voir une partie de l'image glisser vers l'extérieur. Il 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 j'estime qu'il serait préférable d'essayer de tout relier. Voici mes suggestions:
Pour commencer, redéfinissez le logo pour qu'il soit plus moderne et horizontal. Établissez ensuite un alignement extrême gauche tout au long de la page. Alignez la zone de navigation et le bloc de copie situé en dessous sur le côté gauche de la page et déplacez peut-être le nouveau logo vers la droite.
Variez la taille du texte sur la page pour créer des titres clairs et une copie de support. Tout est actuellement très grand. Rappelez-vous: quand vous faites tout spécial, rien n'est spécial.
Jetez les formes actuelles dans la section sélectionnée et la liste à puces géante (intégrez vos services ailleurs). Créez un seul aperçu de projet de grande taille qui s’étend sur toute la zone de contenu.
Enfin, retravaillez le pied de page de manière à respecter l’alignement gauche ci-dessus.En d'autres termes, sortez ce bouton du coin droit.
À 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.
Intéressé d'avoir votre propre site critiqué? Vous pouvez en savoir plus ici.