Critique de conception Web # 18: Deux chaps
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 Two Chaps Branding, une entreprise de conception et de marketing Web basée à Baltimore.
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 de Two Chaps
«Chez TwoChaps, nous pensons qu'une marque est plus qu'un joli logo et un énoncé de mission chargé des derniers mots à la mode de l'industrie. Nous pensons qu'une marque est l'histoire d'une entreprise, une histoire qui définit ses relations passées, présentes et futures avec ses clients et ses clients. Nous croyons qu'une marque est plus que la façon dont vous souhaitez être perçue, c'est la façon dont vous êtes réellement perçu. Qu'elle soit ignorée ou entretenue, votre marque vous définit. »
Voici la page d'accueil de Two Chaps:
Le design global est très attrayant. Le thème vieilli est bien exécuté à travers les couleurs, le type et les textures et la mise en page est simple mais puissante. L'alignement est très serré avec la majorité du contenu comprenant une colonne clairement définie.
Décomposons certains aspects de la conception et examinons-les de manière plus approfondie.
Le logo
J'aime vraiment le travail qu'ils ont fait dans le logo. Le melon et la moustache sont un message visuel parfait pour le nom «Two Chaps». De même, la forte police serif est parfaite pour la période de temps pour laquelle les concepteurs visent.
Bien que j'aime bien le logo, je ne peux pas m'empêcher de me demander s'il serait plus fort sans la moustache. En ce moment, il y a deux éléments graphiques concurrents dans le logo et le réduire à un seul pourrait améliorer la pièce. Je me rends compte que la moustache, les lettres et le chapeau suggèrent ensemble un visage, mais cela ressemble plus à des lettres avec une moustache et un chapeau.
En tant que graphique principal, le melon pourrait ensuite être utilisé ailleurs comme élément autonome indépendant du reste du logo.
Le titre
Le titre est ma chose préférée sur le site. Bien qu'il apparaisse à droite, c'est l'un des premiers que vous regardez lorsque la page se charge en raison de sa taille et de son audace.
Les tailles des lettres ont été parfaitement structurées pour créer une unité cohérente qui attire votre attention et permet une lecture rapide. Remarquez comment les mots les moins importants (les, de) ont été réduits en taille pour donner de la place aux mots les plus importants (art véritable).
Comme il s'agit d'un type graphique et non vivant, je recommanderais certainement de prendre le temps de travailler sur le crénage du texte ici. Certaines lettres, comme le «T» et le «r» dans «True», sont étrangement éloignées tandis que d'autres sont un peu écrasées ensemble.
Il est facile d'oublier cette étape lors de la conception, mais si la typographie doit être une caractéristique principale de la conception, vous devez toujours vous assurer que l'espacement des lettres est aussi proche de la perfection que possible.
Vignettes d'image
Les images sur la page d'accueil ont reçu un excellent traitement à la frontière. L'ombrage donne vraiment beaucoup de profondeur aux images car il crée trois niveaux distincts.
Par défaut, les images sont en niveaux de gris mais si vous les survolez, elles tombent d'un pixel ou deux (intentionnel?) Et deviennent en couleur. C'est un bel effet amusant à jouer si vous consultez le site pour la première fois.
La barre latérale
Comme vous pouvez le voir, la barre latérale est un ruban vertical qui contient le logo, la navigation, quelques boutons sociaux et quelques informations légales. Si vous consultez le site en direct, vous verrez que le pied de page reste commodément fixe pendant que le site défile. Cela permet un accès facile pour changer de page, peu importe où vous vous trouvez sur le site.
J'adore l'audace du rouge et à quel point il se distingue du reste du design. J'aime aussi le traitement et les couleurs utilisés pour les boutons Facebook et Behance. Il est cependant un peu étrange que les lettres de «Facebook» aient une ombre si dure, contrairement à celles de «Behance».
Les sections de navigation de la barre latérale se développent et se contractent avec une animation fluide lorsque vous cliquez sur les en-têtes. La clé ici est que tous les éléments sont toujours parfaitement accessibles avec JavaScript désactivé, les menus sont tout simplement affichés en position ouverte et vous ne sauriez même pas qu'il vous manquait quelque chose.
Il est toujours bon d'aller plus loin et de s'assurer que votre site fonctionne pour les navigateurs qui prennent en charge vos petits plaisirs visuels ainsi que ceux qui ne le font pas.
Bas de page
Le pied de page contient l'appel à l'action pour l'embauche de l'entreprise et est encore une autre rotation bien conçue sur le thème âgé.
Les lignes en haut et en bas sont une belle touche ainsi que le petit panneau «Cliquez ici» avec une boucle de page. Cette section semble un peu comme si certains «experts» du référencement s'en emparaient, car le mot «marque» apparaît énormément de fois pour un si petit bout de texte.
Lisibilité
Comme je l'ai indiqué ci-dessus, dans l'ensemble, j'aime vraiment la conception du site. C'est unique, audacieux, attrayant et assez fonctionnel. Cependant, je pense que la convivialité du site souffre à cause du texte. Découvrez l'image ci-dessous sur la page «Notre histoire».
Comme vous pouvez le voir, ni le gros titre coloré à côté ni le texte du corps blanc ne sont très lisibles sur le fond texturé. Cela est aggravé par le fait que l'arrière-plan reste en place lorsque le texte défile, créant un effet visuel très complexe et très chargé lorsque vous naviguez sur le site.
En fin de compte, le joli fond texturé peut faire plus de mal que de bien. C'est une bonne idée d'expérimenter en laissant tomber son opacité ou en la supprimant complètement au profit de quelque chose de plus simple. Cela peut être désagréable à entendre, mais si cela augmente la lisibilité du texte sur l'ensemble du site, cela en vaut la peine.
À 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.
