Critique de conception Web # 27: Idea Arts
Chaque semaine, nous examinons un nouveau site Web et analysons le design. Nous soulignerons à la fois les domaines qui sont bien réalisés en plus de ceux qui pourraient utiliser un peu de travail. Enfin, nous terminerons en vous demandant de fournir vos propres commentaires.
Le site d'aujourd'hui est Idea Arts.
Explorez les ressources de conception
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 d'Idea Arts
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 de bonnes idées à l'œuvre ici qui ont mis le design sur un très bon départ. 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 de possibilités de raffinement. Le design est suffisamment solide pour que je ne recommande pas de recommencer, mais plusieurs aspects pourraient nécessiter un peu plus d'attention pour les mettre à niveau. Ci-dessous, nous allons en examiner quelques-uns.
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 variations différentes de taille de police, de largeur, de style, etc. C'est presque toujours une caractéristique négative. C'est une bonne règle de base pour garder vos polices de caractères à environ deux à trois variations par conception.
Décidez des polices de caractères que vous pouvez utiliser sur les en-têtes, sous-en-têtes et corps de texte. Rendez-les ensuite cohérents tout au long de votre conception plutôt que de traiter chaque section comme une zone indépendante qui peut avoir ses propres caractéristiques uniques.
En outre, passez vraiment du temps à construire le type pour qu'il soit attrayant. Cela implique de planifier soigneusement les options telles que la hauteur de ligne, la couleur et même vos sauts de ligne. Tous ces éléments sont assez approximatifs dans l'exemple ci-dessous.
Pour commencer, le bleu clair ne contraste pas bien avec l'arrière-plan. Cela peut facilement être corrigé en assombrissant cette couleur jusqu'à ce qu'elle se sépare vraiment de la couleur claire derrière elle. De plus, la plus petite copie pourrait utiliser un peu plus d'espace pour respirer. La hauteur de ligne est tout simplement trop faible et la rend difficile à lire, augmentez-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 recommande d'utiliser un outil en ligne gratuit tel que Typograph - Scale & Rhythm (illustré ci-dessous) pour vous aider avec le flux de vos paragraphes.
Enfin, regardez vos sauts de ligne. Chose intéressante, non seulement vous devez faire attention aux coupures gênantes dans le libellé, mais vous devez également prêter attention à la forme du paragraphe. Celui ci-dessus semble un peu étrange et pourrait facilement être redirigé vers quelque chose comme la version ci-dessous.
Espace blanc
Un autre domaine de la conception qui pourrait nécessiter quelques ajustements est l'utilisation des espaces blancs. Comme pour la typographie, cela peut être délicat et est largement subjectif. Cependant, certains principes de base peuvent vous guider tout au long du processus.
Par exemple, chaque fois que vous disposez d'une collection d'éléments distribués, qu'ils soient verticaux ou horizontaux, essayez d'abord de grouper les objets visuellement, puis de les espacer uniformément. Par exemple, dans l'exemple ci-dessous, la version originale a un espacement disparate entre les icônes et le texte et les éléments qui devraient être distincts se rencontrent un peu. Avec un peu d'ajustement, nous créons une déclaration graphique beaucoup plus claire.
La différence est subtile mais très importante. Remarquez combien il est facile de dire quelle ligne de texte va avec quelle icône. Il y a quelques autres domaines dans la conception qui pourraient utiliser une dose similaire d'analyse spatiale. Par exemple, le texte ci-dessous se bloque presque à la fin de son dispositif de confinement. Assurez-vous toujours de donner beaucoup 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, donne l'impression qu'il y a trop d'espace dans l'espace entre les mots.
Tweak, Tweak, Tweak
La morale de l'histoire ici est que même si vous décidez d'avoir créé une belle page, le diable est dans les détails. Ne vous précipitez jamais à travers les petites choses comme la typographie et l'espacement. En fait, vous devrez peut-être passer plus de temps à les corriger que d'élaborer votre concept visuel initial!
Cela vaut vraiment la peine d'investir du temps pour terminer votre site correctement. Prendre constamment cette habitude rendra vos créations beaucoup plus raffinées et leur donnera une plus grande résistance à l'examen.
À 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.
