Critique de conception Web # 77: Capital Teas
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 Capital Teas. Commençons et voyons ce que nous en pensons!
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 49 $ pour critiquer votre conception - beaucoup moins que ce que vous paieriez pour qu'un consultant jette un œil à votre site! Vous pouvez en savoir plus ici.
À propos de Capital Teas
Capital Teas est un marchand de thé spécialisé familial de cinquième génération. Ils offrent plus de 175 variétés de thés en feuilles et d'infusions à base de plantes de la plus haute qualité des meilleurs pays et régions du monde, dont le Sri Lanka, l'Inde, la Chine, le Japon, le Malawi et le Kenya. Leurs produits de thé incluent des théières traditionnelles et modernes, des brasseurs et des infuseurs, et de nombreux autres articles de spécialité. Ils offrent également du miel artisanal, des confitures, du chocolat infusé au thé et d'autres aliments emballés gastronomiques qui accompagnent leurs thés.
Voici une capture d'écran de la page d'accueil:
Première impression
Ma première impression d'un site est fortement basée sur l'idée de savoir si je peux dire exactement de quoi il s'agit dans les trois premières secondes après avoir vu la page d'accueil. C'est vrai, trois secondes. Vous devez attirer mon attention, me dire qui vous êtes et ce que vous faites en moins de temps qu'il ne faut à une personne moyenne pour attacher une chaussure.
Dans le cas de Capital Teas, ils réussissent ce test avec brio. Ce site crie une boutique de thé en ligne (dans le bon sens). Je vois des photos de thé partout, le mot «thé» apparaît plusieurs fois, les couleurs évoquent le thé; Je suis instantanément bien orienté et je sais que si je cherche à acheter du thé, je suis au bon endroit.
En ce qui concerne l'esthétique visuelle et la disposition du site, je dirais qu'il a de bons os. Il y a une structure solide et une esthétique visuelle attrayante a commencé. Il faut un peu de travail, mais rien de trop important. Commençons et regardons quelques-uns des domaines spécifiques pour voir si nous pouvons trouver des suggestions d'amélioration.
Entête
L'un des domaines où je vois le plus de problèmes est l'en-tête. Il semble qu'il ait été conçu pour être simple, mais le service marketing l'a saisi et l'a jeté. Il y a tellement de choses entassées qu'il semble encombré et constitue une contradiction flagrante avec l'esthétique assez propre établie par le reste de la page.
Les icônes sociales en particulier pourraient utiliser un nettoyage majeur. La conception de chacun est incohérente, plusieurs éléments Facebook semblent redondants, il y a des problèmes de chevauchement et tout à cet endroit est bourré de très peu de marge de manœuvre.
Le «Deal du jour» et l'inscription à la newsletter de l'autre côté renforcent également le look encombré. Ces éléments ne sont pas particulièrement bien alignés avec quoi que ce soit d'autre sur la page et semblent être ajoutés après coup.
Comment le réparer
Certaines décisions difficiles vont devoir être prises ici parce que quelque chose doit se passer. En fait, plusieurs choses doivent aller. On dirait que quelqu'un a essayé d'introduire un tas d'éléments de pied de page dans un en-tête juste pour leur donner un meilleur emplacement sur la page, mais rappelez-vous, si tout est spécial, rien n'est spécial. Vous devez choisir ce qui a le plus d'importance et donner à vos articles une hiérarchie visuelle claire.
Je recommande de déplacer la plupart du contenu de l'en-tête ailleurs. Essayez d'identifier les éléments absolument critiques. Commencez avec le logo. C'est une belle pièce qui donne une impression de vieux monde au site, donnez-lui plus d'attention en enlevant les éléments environnants. L'autre élément nécessaire est le panier d'achat. Si vous pouvez réduire l'en-tête à ces deux éléments, vous vous en sortez très bien. Sinon, je vais autoriser l'inclusion de l'accord du jour. Tout se déplace soit vers le pied de page, soit mieux intégré dans le reste de la page.
Pendant que vous y êtes, trouvez un simple jeu d'icônes sociales qui a des icônes correspondantes pour chaque réseau social dont vous avez besoin.
La navigation
En descendant la page, nous arrivons ensuite à la navigation. Faire une double navigation efficace et non encombrée est une affaire délicate, mais j'aime vraiment la façon dont cela a été géré ici. Un menu de texte pur a été associé à une zone de recherche et empilé sur un menu basé sur des icônes colorées et le résultat est une excellente offre de moyens pour moi de trouver ce que je recherche.
Une chose que je trouve un peu gênante est la conception des menus déroulants dans la navigation principale. Ils ont une sensation déconnectée et flottante qui donne presque l'impression que quelque chose ne fonctionne pas bien.
Je recommande de repenser cela et d'expérimenter différentes idées visuelles qui rendent les listes déroulantes plus intégrées et connectées au menu principal.
Contenu principal
La zone de contenu principale se compose de trois cases. Ce sont un bon mélange de formats et se composent d'un grand curseur, d'une image statique et d'un petit film (qui, heureusement, ne joue pas automatiquement). Ce domaine est génial. J'adore le fait qu'il ait été jumelé à trois boîtes, la mise en page est belle et propre et cela met vraiment l'accent sur les produits et les informations affichés.
La photographie
En tant que photographe, je suis un aspirant aux bonnes photos et ce site livre avec succès dans ce domaine. Il semble que les propriétaires aient vraiment investi dans la photographie de qualité et cela rapporte en rendant leurs produits très haut de gamme et attrayants.
Typographie
Après l'en-tête, le deuxième domaine majeur qui nécessite une attention immédiate est la typographie. La plupart des concepteurs recommandent de choisir une ou deux polices de caractères solides pour un projet entier, peut-être trois si vous vous sentez aventureux et avez suffisamment de compétences pour le réaliser. J'ai perdu le compte du nombre de polices que j'ai vues sur la seule page d'accueil de ce site.
Votre type est l'un des indicateurs les plus puissants du style de votre site. Il définit une humeur, une période de temps, un ton professionnel et bien plus encore. S'il est incohérent et dispersé, les messages qu'il transmet le sont également.
Je recommande vraiment de supprimer toutes les différentes polices de caractères, puis d'en choisir une ou deux avec un haut degré de lisibilité et un ton qui correspond aux intentions de la conception. Le résultat sera une impression beaucoup plus cohérente et professionnelle pour le site dans son ensemble.
Contenu secondaire
Il y a une bande de cases au bas du site que j'appellerai le «contenu secondaire» pour nos besoins. Cette disposition combinée avec les trois cases ci-dessus est simple et solide. Cela me rappelle quelques-unes des dispositions de notre article 10, Exemples de mise en page de sites Web solides.
Mon seul vrai problème avec ce domaine est la typographie, que j'ai déjà passée en revue. Plus précisément, le problème ici est que la police de caractères «afficher ce produit» est si fine qu'elle est presque illisible.
Conclusion
Pour résumer, Capital Teas a un bon début pour un site super attrayant. La structure de mise en page de base est solide, les photos sont belles et la double navigation fonctionne bien même si je décourage généralement cet itinéraire. Parmi les domaines à améliorer, citons l'en-tête, qui doit être désencombré, et la typographie, qui doit être associée à quelques polices de caractères sélectionnées.
À 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.
