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 Annual Design Awards.
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 des prix de design annuels
Les Annual Design Awards (surnommés ANNDAS) sont une reconnaissance mondiale des communications visuelles de pointe, conçues pour récompenser des contributions exceptionnelles au sein du secteur du design. Nous avons réuni certains des talents les plus remarquables et des personnalités respectées du monde entier pour juger de cet événement mondial qui vise à devenir le premier prix du design et à établir des normes internationales.
Voici une capture d'écran de la page d'accueil:
Conception générale
Je veux commencer par dire que ce site est déjà très beau. J'aime le noir en conjonction avec des touches d'orange. Cette répétition unique d'une couleur vive aide à attirer l'attention des utilisateurs sur les parties importantes de la page.
La mise en page est solide et contient beaucoup d'espace blanc. En outre, le volume visuel des objets est bien dispersé, de sorte que les zones importantes sont mises en évidence.
Heureusement, il semble que les gens qui jugent le design des autres ont eux-mêmes un sens aigu du design! Maintenant que nous avons analysé le tout, décomposons-le morceau par morceau.
Zone de logo
Commençons par l'endroit le plus évident: le coin supérieur gauche. Nous voyons ici le logo des Annual Design Awards, une sorte de graphique en cercle rayonnant.
Le logo est simple mais efficace. Cela suggère un public jeune et nerveux qui n’aime pas trop les lignes pures et le minimalisme ennuyeux (le site est en fait assez propre, mais d’une manière sournoise).
Les cercles sont une idée audacieuse exécutée de manière subtile (faite avec goût). C'est un élément de conception très simple qui attire votre attention sur le logo et par conséquent sur le nom du site. Cela ne fonctionnerait pas sur un site encombré, mais cette page est suffisamment simple pour ne pas créer de gâchis visuel et pour atteindre parfaitement son objectif.
La navigation
La zone de navigation est assez simple, juste du texte au-dessus d’une barre horizontale avec des sauts pour chaque section.
J'aime vraiment le choix de la police ici. Cela ressemble à quelque chose de personnalisé avec @ font-face, alors j'ai été surpris quand j'ai jeté un coup d'œil au code et constaté qu'il s'agissait simplement de Georgia italic.
En survolant une section, la barre est surlignée en orange. C’est bien, mais c’est un peu étrange que le texte ne fasse pas aussi bien (c’est plutôt capricieux, mais je dois parler de quelque chose sur de superbes sites!).
Je peux comprendre pourquoi le concepteur n'a pas modifié le texte aussi bien, car il serait probablement un peu difficile de lire un petit texte orange sur un fond noir. Peut-être qu'une très légère transformation CSS pour faire pivoter le texte en survol aiderait. Ce n'est pas grave si on l'ignore sur les anciens navigateurs et ce serait un joli clin d'œil au style du logo.
Diaporama
J'aime les diaporamas JavaScript, je pense donc que cette section est excellente. L'image glisse à gauche et une nouvelle apparaît et le texte a un bel effet de fondu. J'aime aussi beaucoup la bordure transparente et les repères de coupe.
Cependant, les boutons de lecture et de pause ne suffisent pas. J'ai vu passer un graphique que je voulais revoir mais que je n'avais aucun moyen de revenir en arrière. En conséquence, j'ai été obligé d'attendre que cela se reproduise (ce qui a pris un certain temps).
Je recommande de mettre une ligne de petites icônes de cercle qui lient chaque image. C'est simple et subtil et donne à l'utilisateur une idée de l'endroit où il se trouve dans le diaporama et un certain contrôle sur l'affichage d'images spécifiques.
Section d'entrée
La section suivante indique normalement où les utilisateurs doivent s'inscrire pour participer. Toutefois, elle est fermée pour le moment, comme indiqué par le graphique du pense-bête.
Le sticky viole complètement le design (intentionnellement) et le fait de sorte que vous ne pouvez pas manquer le fait que les soumissions sont fermées. Cela fonctionne bien et informe immédiatement les utilisateurs des informations dont ils ont besoin de savoir.
Les graphismes sous le sticky sont un peu gênants. Les prix semblent étrangement placés, l'un heurtant ce rectangle à gauche et l'autre ne s'y heurtant pas. Je ne sais pas exactement ce qui se passe ici, mais cela semble un peu éteint.
Pied de page et formulaire de contact
La dernière zone que nous allons examiner est le bas de la page où vous pouvez vous inscrire pour recevoir des informations. Vous trouverez également les liens de bas de page standard et les informations sociales sous le formulaire de contact.
J'aime que le formulaire de contact soit niché ici plutôt que sur une page dédiée et qu'il n'y ait que deux champs à remplir. J'ai remarqué que les étiquettes de champ disparaissent lorsque vous cliquez dans la zone et ne reviennent pas lorsque vous cliquez sans rien taper. Cela pose un problème d’utilisabilité car je cliquais sur la page mais je ne savais pas trop quelle boîte était pour le nom et laquelle était pour le courrier électronique à mon retour.
Enfin, le bas de page est superbe, mais j'aimerais voir un espace entre les mots. Suivez-nous? et l'icône qui l'accompagne. En ce moment, ils sont un peu écrasés ensemble.
À 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.