Web Design Critique # 13: Prix annuels 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 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 Annual Design Awards.
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 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 des Annual Design Awards
«Les Annual Design Awards (surnommés ANNDAS) sont une reconnaissance mondiale des communications visuelles de pointe, mises en place pour récompenser les contributions exceptionnelles au sein de l'industrie du design. Nous avons réuni certains des talents les plus incroyables et des personnalités respectées du monde entier pour juger cet événement mondial qui vise à devenir les premiers 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 c'est déjà un site magnifique. J'adore le noir en conjonction avec des touches d'orange. Cette répétition unique d'une couleur vive aide à attirer les yeux des utilisateurs sur les parties importantes de la page.
La disposition est solide et contient beaucoup d'espace blanc. De plus, 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 la conception des autres aient eux-mêmes un sens aigu du design! Maintenant que nous avons analysé le tout, décomposons-le morceau par morceau.
Zone du logo
Commençons par l'endroit le plus évident: en haut à gauche. Nous voyons ici le logo des Design Awards annuels, une sorte de graphique en cercle rayonnant.
Le logo est simple mais efficace. Cela suggère un public jeune et énervé pas trop attaché aux lignes épurées et au 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 (réalisée avec goût). C'est un élément de conception très simple qui permet d'attirer votre attention sur le logo et par conséquent le nom du site. Cela ne fonctionnerait pas sur un site encombré, mais cette page est suffisamment simple pour ne pas créer de désordre visuel et remplit parfaitement son objectif.
La navigation
La zone de navigation est assez simple, juste du texte au-dessus d'une barre horizontale avec des pauses pour chaque section.
J'aime vraiment le choix de police ici. Cela ressemble à quelque chose de personnalisé fait avec @ font-face, donc j'ai été surpris quand j'ai jeté un coup d'œil au code et j'ai vu que c'était simplement Georgia italic.
Le survol d'une section met en surbrillance la barre en orange. C'est sympa mais ça fait un peu bizarre que le texte ne fasse pas aussi bien quelque chose (c'est assez pointilleux mais sur de superbes sites je dois parler de quelque chose!).
Je peux comprendre pourquoi le concepteur n'a pas changé le texte aussi bien qu'il serait probablement un peu difficile de lire un petit texte orange sur fond noir. Peut-être qu'une très légère transformation CSS pour faire pivoter le texte en survol serait utile. Ce n'est pas grave s'il est ignoré sur les anciens navigateurs et ce serait un joli clin d'œil au style du logo.
Diaporama
J'adore les diaporamas JavaScript, donc je pense que cette section est géniale. L'image glisse vers la gauche tandis qu'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, le bouton de lecture et de pause ici ne le coupe tout simplement pas pour moi. J'ai vu passer un graphique que je voulais revoir mais que je n'avais aucun moyen de revenir en arrière. Par conséquent, j'ai été obligé d'attendre qu'il se reproduise (ce qui a pris un certain temps).
Je recommande de mettre une ligne de petites icônes de cercle reliées à chaque image. C'est simple et subtil et donne à l'utilisateur à la fois une idée de l'endroit où ils se trouvent dans le diaporama et un certain contrôle sur la visualisation d'images spécifiques.
Section d'entrée
La section suivante est l'endroit où les utilisateurs s'inscrivent normalement pour entrer, cependant, cela est fermé pour le moment comme indiqué par le graphique de la note autocollante.
Le collant viole complètement le design (intentionnellement) et fait en sorte que vous ne puissiez pas manquer le fait que les soumissions soient fermées. Cela fonctionne bien et informe immédiatement les utilisateurs des informations qu'ils doivent connaître.
Les graphismes sous le collant sont un peu distrayants cependant. Les prix semblent étrangement placés, l'un se heurtant à cette boîte rectangulaire à gauche et l'autre ne s'y cognant pas. Je ne sais pas exactement ce qui se passe ici mais cela semble un peu décalé.
Pied de page et formulaire de contact
La dernière zone que nous examinerons est le bas de la page où vous pouvez vous inscrire pour recevoir des informations. Il y a aussi les liens de pied 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 présente un peu un problème d'utilisation car je cliquais sur la page, mais je ne savais pas quelle boîte était pour le nom et laquelle était pour l'e-mail quand je suis revenu.
Enfin, la zone de pied de page est superbe, mais j'aimerais voir un peu d'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, 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.
