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 actuel est Two Chaps Branding, une firme de marketing et de conception Web basée à Baltimore.
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.
A propos de deux gars
«Chez TwoChaps, nous pensons qu'une marque est plus qu'un joli logo et un énoncé de mission rempli 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. Nous croyons qu'une marque est plus que la façon dont vous souhaitez être perçu, c'est comment vous êtes réellement perçu. Que ce soit ignoré ou nourri - votre marque vous définit.?
Voici la page d'accueil de Two Chaps:
![](http://lesptitesaffairesdemayl.be/img/images_1/web-design-critique-18-two-chaps.jpg)
La conception générale est très attrayante. Le thème vieilli s’exécute bien dans les couleurs, le type et les textures. La mise en page est simple mais puissante. L'alignement est très étroit, la majorité du contenu comprenant une colonne clairement définie.
Décrivons quelques 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 quilleur et la moustache sont un message visuel parfait pour le? Deux Chaps? prénom. De même, la forte police de caractères serif est parfaite pour la période visée par les concepteurs.
![](http://lesptitesaffairesdemayl.be/img/images_1/web-design-critique-18-two-chaps_2.jpg)
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. À l'heure actuelle, le logo comporte deux éléments graphiques concurrents. 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 un visage, mais il se lit toujours plus comme des lettres avec une moustache et un chapeau.
En tant que graphique principal, le quilleur pourrait ensuite être utilisé ailleurs, en tant qu'élément autonome, indépendant du reste du logo.
Le titre
Le titre est ce que je préfère sur le site. Bien qu’elle apparaisse à droite, c’est l’une des premières que vous regardez au chargement de la page en raison de sa taille et de son audace.
![](http://lesptitesaffairesdemayl.be/img/images_1/web-design-critique-18-two-chaps_3.jpg)
Les tailles de lettre ont été parfaitement structurées pour créer une unité cohérente qui attire votre attention et permet une lecture rapide. Remarquez comment la taille des mots moins importants (le, de) a été réduite pour laisser la place aux mots plus importants (art véritable).
Comme il s’agit d’un type graphique et non de type live, je vous recommande vivement de prendre le temps de travailler sur le crénage du texte ici. Certaines lettres, telles que le? T? et? r? dans? Vrai ,? sont étrangement éloignés alors que d’autres sont un peu serrés ensemble.
Il est facile d'oublier cette étape lors de la conception, mais si la typographie doit être une caractéristique principale du design, vous voulez toujours être sûr que votre espacement des lettres est aussi parfait que possible.
Vignettes d'image
Les images sur la page d'accueil ont reçu un excellent traitement à la frontière. Les ombres donnent vraiment aux images beaucoup de profondeur car elles créent trois niveaux distincts.
![](http://lesptitesaffairesdemayl.be/img/images_1/web-design-critique-18-two-chaps_4.jpg)
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 entièrement en couleur. C'est un bel effet avec lequel il est amusant de jouer si vous visitez le site pour la première fois.
La barre latérale
Comme vous pouvez le constater, la barre latérale est un ruban vertical contenant le logo, la navigation, quelques boutons de réseaux sociaux et des informations juridiques. Si vous consultez le site en direct, vous verrez que le pied de page reste bien en place lorsque le site défile. Cela fournit un accès facile pour changer de page, peu importe où vous vous trouvez sur le site.
![](http://lesptitesaffairesdemayl.be/img/images_1/web-design-critique-18-two-chaps_5.jpg)
J'adore la hardiesse du rouge et combien il se démarque du reste de la conception. J'aime aussi le traitement et les couleurs utilisés pour les boutons Facebook et Behance. Il est un peu étrange que les lettres dans? Facebook? ont une telle ombre alors que ceux de? Behance? ne pas
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 simplement affichés en position ouverte et vous ne sauriez même pas qu'il vous manque quelque chose.
Il est toujours bon de faire un effort supplémentaire et de vous assurer que votre site fonctionne pour les navigateurs compatibles avec vos petits plaisirs visuels et ceux qui ne le font pas.
Bas de page
Le pied de page contient l'appel à l'action pour le recrutement du cabinet et constitue une nouvelle version bien conçue du thème des personnes âgées.
![](http://lesptitesaffairesdemayl.be/img/images_1/web-design-critique-18-two-chaps_6.jpg)
Les lignes en haut et en bas sont une belle touche, ainsi que le petit? Cliquez ici? signer avec une page curl. Cette section semble un peu comme des experts en SEO? obtenu le mot comme? marque? apparaît énormément de fois pour un texte aussi petit.
Lisibilité
Comme je l'ai dit plus haut, dans l'ensemble, j'aime beaucoup le design du site. C'est unique, audacieux, attrayant et très fonctionnel. Cependant, je pense que la convivialité du site souffre à cause du texte. Découvrez l'image ci-dessous de la? Notre histoire? page.
![](http://lesptitesaffairesdemayl.be/img/images_1/web-design-critique-18-two-chaps_7.jpg)
Comme vous pouvez le constater, ni le gros titre en couleur suivant, ni le corps blanc ne sont très lisibles sur l’arrière-plan texturé. Cela est aggravé par le fait que l'arrière-plan reste en place lorsque le texte défile, ce qui crée un effet visuel très complexe et chargé lorsque vous naviguez sur le site.
En fin de compte, le joli fond texturé fait peut-être plus mal que bien. C'est une bonne idée d'essayer de laisser tomber son opacité ou de la supprimer pour une solution plus simple.Cela peut être désagréable à entendre, mais si cela améliore la lisibilité du texte sur tout le site, l'effort en vaut la peine.
À 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.