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 Capital Teas. Faisons un saut et voyons ce que nous pensons!
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 la critique de votre conception - bien moins que le coût d'un consultant pour consulter votre site! Vous pouvez en savoir plus ici.
À propos de Capital Teas
Capital Teas est un marchand de thé spécialisé de cinquième génération. Ils offrent plus de 175 variétés de thés en feuilles et d'infusions aux herbes de la plus haute qualité provenant des pays et des régions de croissance les plus importants au monde, notamment le Sri Lanka, l'Inde, la Chine, le Japon, le Malawi et le Kenya. Leurs produits à thé comprennent des théières, des brasseurs et des infuseurs traditionnels et modernes, ainsi que de nombreux autres articles spécialisés. Ils offrent également du miel artisanal, des confitures, du chocolat infusé au thé et d’autres aliments emballés pour accompagner 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 qui suivent l'affichage de la page d'accueil. C'est vrai, trois secondes. Vous devez attirer mon attention, me dire qui vous êtes et de quoi vous parlez en moins de temps que la moyenne des gens ne doit chausser une chaussure.
Dans le cas de Capital Teas, ils réussissent ce test avec brio. Ce site crie un magasin de thé en ligne (dans le bon sens). Je vois des photos de thé partout, le mot? Thé? apparaît plusieurs fois, les couleurs suggèrent 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 mise en page du site, je dirais qu'il a de bons os. Il y a une structure solide et une esthétique visuelle attrayante a commencé. Cela demande un peu de travail, mais rien d’important. Regardons quelques 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 que cela ait été conçu pour être simple, mais le service marketing s'en est emparé et l'a détruit. Il y a tellement de choses qui s'y glissent qu'il se sent encombré et constitue une contradiction flagrante avec l'esthétique relativement épurée mise en place par le reste de la page.
Les icônes sociales en particulier pourraient nécessiter un nettoyage important. La conception de chacun est incohérente, plusieurs éléments de Facebook semblent redondants, il y a des problèmes de chevauchement, et tout dans cet endroit est entassé avec très peu de marge de manœuvre.
Le "deal du jour" et l’inscription à la newsletter de l’autre côté contribuent également au look encombré. Ces éléments ne sont pas particulièrement bien alignés avec quoi que ce soit sur la page et semblent être ajoutés après coup.
Comment le réparer
Certaines décisions difficiles devront être prises ici, car quelque chose doit disparaître. En fait, plusieurs choses doivent aller. C'est comme si quelqu'un essayait de mettre une pile 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. Il s’agit d’une belle pièce qui confère au site une superbe sensation d’ancien monde et lui donne plus d’attention en supprimant les éléments environnants. L'autre article nécessaire est le panier. Si vous pouvez réduire l'en-tête à ces deux éléments, vous vous en tirerez très bien. Sinon, je permettrai l'inclusion de l'accord du jour. Tout se déplace vers le pied de page ou mieux intégré dans le reste de la page.
Pendant que vous y êtes, trouvez un jeu d’icônes sociales simple comportant des icônes correspondant à chaque réseau social dont vous avez besoin.
La navigation
En descendant la page, nous arrivons ensuite à la navigation. Tirer parti d'une double navigation efficace et non encombrée est une tâche délicate, mais j'aime beaucoup la façon dont elle a été gérée ici. Un menu de texte pur a été associé à un champ de recherche et empilé sur un menu coloré à base d’icônes. Le résultat est une excellente façon de trouver ce que je cherche.
Une chose que je trouve un peu délicate est la conception des menus déroulants dans la navigation principale. Ils ont une sensation flottante déconnectée qui donne l'impression que quelque chose ne fonctionne pas correctement.
Je recommande de repenser cela et d'expérimenter différentes idées visuelles pour que les menus déroulants semblent plus intégrés et connectés au menu principal.
Contenu principal
La zone de contenu principale consiste en trois zones. 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 fonctionne pas automatiquement). Ce quartier est génial. J'adore le fait qu'il ait été jumelé à trois boîtes, la mise en page est belle et propre et elle met vraiment l'accent sur les produits et les informations affichés.
La photographie
En tant que photographe, je suis friand de bonnes photos et ce site livre avec succès dans ce domaine. Il semble que les propriétaires aient vraiment investi dans une photographie de qualité et cela leur rapporte de donner l'impression que leurs produits sont très haut de gamme et attrayants.
Typographie
Après l’en-tête, la typographie est le deuxième domaine qui nécessite une attention immédiate. La plupart des concepteurs recommandent de choisir une ou deux polices de caractères solides pour tout un projet, peut-être trois si vous vous sentez aventureux et avez suffisamment de talent pour réussir.J'ai perdu le compte du nombre de caractères que j'ai vus sur la page d'accueil uniquement sur ce site.
Votre type est l'un des indicateurs les plus puissants du style de votre site. Cela crée une ambiance, une période, un ton de professionnalisme et bien plus encore. Si c'est incohérent et dispersé, les messages qu'il transmet le sont aussi.
Je recommande vivement de supprimer toutes les polices, puis d'en choisir une ou deux avec un degré élevé de lisibilité et un ton qui corresponde aux intentions de la conception. Le résultat sera une sensation beaucoup plus cohérente et professionnelle pour l'ensemble du site.
Contenu secondaire
Il y a une bande de cases au bas du site que j'appellerai le "contenu secondaire". pour nos fins. Cette disposition combinée avec les trois cases ci-dessus est simple et solide. Cela me rappelle quelques-unes des mises en page de notre article 10 Exemples de mise en page de sites Web Rock Solid.
Mon seul vrai problème avec ce domaine est la typographie, que j'ai déjà parcourue. Plus précisément, le problème ici est qu’il s’agit de la police de caractères? Visualiser ce produit? est si mince que c'est presque illisible.
Conclusion
Pour résumer, Capital Teas a un bon début pour un site super attrayant. La structure de base de la structure 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égagé, et la typographie, qui doit être associée à quelques polices choisies.
À 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.