Chaque semaine, nous examinons un nouveau site Web et en analysons le design. Nous soulignerons les deux domaines qui sont bien faits en plus de ceux qui pourraient nécessiter du travail. Enfin, nous terminerons en vous demandant de fournir vos propres commentaires.
Le site d'aujourd'hui est Idea Arts.
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 arts d'idée
Idea Arts est le portfolio personnel de Goran Ilic, un graphiste passionné par la technologie depuis toujours. Son site présente ses travaux récents et les services offerts par son entreprise.
Voici une capture d'écran de la page d'accueil:
Première impression
Idea Arts est pour la plupart un site attractif. Il y a quelques bonnes idées à l’œuvre qui donnent un bon départ à la conception. Le contenu est divisé en sections clairement définies et suit une progression logique. Il existe également des éléments graphiques attrayants qui attirent efficacement l'attention de l'utilisateur.
Cependant, il y a beaucoup d'opportunités pour le raffinement. La conception est suffisamment solide pour que je ne recommande pas de recommencer, mais plusieurs aspects mériteraient un peu plus d'attention pour les mettre au niveau. Ci-dessous, nous en examinerons quelques-unes.
Typographie
Le plus gros problème que je vois avec ce site est la typographie. Pour commencer, sur la seule page d’accueil, nous voyons une dizaine de variantes différentes de la taille, de la largeur, du style, etc. de la police. C’est presque toujours une caractéristique négative. En règle générale, limitez vos polices de caractères à environ deux à trois variantes par motif.
Choisissez les types de caractères que vous pouvez utiliser pour les en-têtes, les sous-en-têtes et la copie de corps. Rendez-les cohérents dans l'ensemble de votre conception plutôt que de traiter chaque section comme une zone indépendante pouvant avoir ses propres caractéristiques.
Aussi, passez vraiment quelque temps à construire le type pour qu’il ait l’air attrayant. Cela implique une planification minutieuse des options telles que la hauteur de ligne, la couleur et même vos sauts de ligne. Tous ces éléments sont assez difficiles dans l'exemple ci-dessous.
Pour commencer, le bleu clair ne contraste pas bien avec le fond. Cela peut facilement être corrigé en assombrissant cette couleur jusqu'à ce qu'elle se sépare réellement de la couleur claire derrière. En outre, la copie plus petite pourrait utiliser un peu plus de temps pour respirer. La hauteur de ligne est tout simplement trop basse et rend la lecture difficile, heurtez-la un peu ici et la lisibilité augmentera considérablement.
Cependant, soyez prudent, car dans d'autres zones du site, la hauteur de ligne semble maladroitement élevée. Je vous recommande d'utiliser un outil en ligne gratuit tel que Typograph - Scale & Rhythm (illustré ci-dessous) pour faciliter la fluidité de vos paragraphes.
Enfin, surveillez vos ruptures de ligne. Il est intéressant de noter que non seulement vous devez surveiller les sauts délicats dans la formulation, mais vous devez également être attentif à la forme du paragraphe. Celui ci-dessus semble un peu étrange et pourrait facilement être redéfini vers quelque chose comme la version ci-dessous.
Espace blanc
Un autre domaine de la conception qui pourrait être légèrement modifié est l’utilisation des espaces. Comme avec la typographie, cela peut être délicat et est en grande partie subjectif. Cependant, certains principes de base peuvent vous guider tout au long du processus.
Par exemple, chaque fois que vous avez une collection d'éléments distribuée, qu'elle soit verticale ou horizontale, essayez d'abord de regrouper les objets visuellement, puis de les espacer uniformément. Par exemple, dans l'exemple ci-dessous, la version d'origine a un espacement disparate entre les icônes et le texte, et les éléments devant être distincts se chevauchent un peu. Avec un peu d'ajustement, nous créons un énoncé graphique beaucoup plus clair.
La différence est subtile mais très importante. Remarquez comme il est facile de dire quelle ligne de texte va avec quelle icône. Il existe quelques autres zones dans la conception qui pourraient utiliser une dose d'analyse spatiale similaire. Par exemple, le texte ci-dessous se bloque presque à la fin de son dispositif de confinement. Assurez-vous toujours de laisser suffisamment d’espace à des éléments comme celui-ci.
Comme nous l'avons vu avec les numéros précédents, cela va dans les deux sens. Le logo, par exemple, a l’impression d’avoir trop d’espaces blancs dans l’espace entre les mots.
Tweak, Tweak, Tweak
La morale de l’histoire ici est que même si vous décidez que vous avez créé une belle page, le diable est dans les détails. Ne vous précipitez jamais dans les petites choses comme la typographie et l'espacement. En fait, vous devrez peut-être passer plus de temps à les corriger que de définir votre concept visuel initial!
Il vaut vraiment la peine d'investir du temps pour terminer votre site correctement. En prenant constamment cette habitude, vos conceptions se sentiront beaucoup plus raffinées et leur offriront une plus grande résistance à l'examen.
À 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.