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 Prezzybox, un détaillant en ligne. 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.
A propos de Prezzybox
? Prezzybox.com est la solution complète de cadeaux en ligne. Si vous cherchez un cadeau unique ou excitant pour votre mère, votre père, votre sœur, votre copain, votre demi-cousin ou vous-même (reconnaissons-le, nous méritons tous quelque chose de gentil), alors Prezzybox est l'endroit idéal. De la cigarette électronique à la pizza au chocolat, en passant par le slush maker rétro et notre funky Silly Bandz. Prezzybox a une véritable corne d'abondance de friandises étranges et merveilleuses qui attendent votre lecture.?
Voici une capture d'écran de la page d'accueil:
Première impression
Naturellement, Prezzybox a beaucoup à faire dans cette conception. Ils n'ont pas l'avantage d'être un détaillant spécialisé capable de présenter un seul produit. Ils essaient de vendre toutes sortes de produits différents et sont en train de chercher le meilleur moyen de les présenter.
De toute évidence, ils ont beaucoup réfléchi à cette question, et ils réussissent beaucoup. Cependant, il y a aussi beaucoup de place à l'amélioration. La page est un étrange mélange de bonnes idées et d'exécutions un peu négligées. Voyons si nous pouvons aider à affiner la structure et indiquer les domaines à traiter pour contribuer au succès de cette conception.
Typographie Malheurs
L'une des premières choses que j'ai remarquées sur ce site, c'est qu'il semble y avoir une très mauvaise compréhension de la typographie à la base de ce design. Partout où je regarde, je vois des implémentations très rugueuses de type personnalisé.
Pour commencer, le mélange de poids de police dans le logo est assez délicat:
Parfois, les polices du même mot ne semblent même pas correspondre. Par exemple, le? 0? sur le? 50%? dans l'image ci-dessous a un poids et un look complètement différents de ceux du "5".
Il existe également quelques problèmes majeurs de crénage sur le site. Le texte de l'exemple ci-dessous est une image. Par conséquent, les arguments relatifs aux obstacles liés au crénage en ligne ne s'appliquent pas. C’est simplement le résultat du saut d’une étape du processus de conception de Photoshop.
En outre, les nuages de tags ne sont presque jamais le meilleur moyen de diriger le trafic vers des destinations populaires. Celui-ci souffre du manque de séparation claire entre les balises. Par exemple, "Air Swimmers" et? Cadeaux pour enfants? Il existe deux balises distinctes, mais le poids des polices est si similaire que vous ne pouvez même pas vraiment le savoir.
Comment le réparer
Ma recommandation pour le type sur cette page est de recommencer. Scrap tous les différents styles de texte et les polices sur cette page et une autre course, cette fois très intentionnelle à propos de chaque caractère.
"Déterminez sérieusement le concept que vous essayez de communiquer et la police de caractère qui véhicule le mieux cette idée."Il faut commencer par investir dans des polices de qualité. Les polices Premium peuvent être assez chères, mais utiliser quelque chose de moche et pas cher ne peut avoir d’autre effet que de donner à votre site une apparence bon marché et moche. Si vous n'avez tout simplement pas le budget, il y a beaucoup de choix en ligne gratuits et / ou bon marché, tout en restant attrayants et élégants. FontSquirrel et Lost Type Co-op sont de bons endroits pour commencer.
Prenez votre temps et choisissez les polices minutieusement. Ne soyez pas tenté de simplement saisir les polices d’affichage car elles ont l’air amusant. Au lieu de cela, réfléchissez sérieusement au concept que vous essayez de communiquer et à la police de caractère qui véhicule le mieux cette idée. Pendant ce processus, limitez-vous à quelques bonnes polices qui fonctionnent très bien ensemble et mettez-les en œuvre sur tout le site.
Vous pouvez et devriez probablement utiliser des polices standard pour tout type de site Web actif, mais assurez-vous que tout est bien équilibré entre la taille de la police, la hauteur de ligne et la largeur de la zone de texte, afin de garantir une lisibilité maximale. Pearsonified vient de publier un excellent article sur l’utilisation du nombre d’or pour obtenir un type bien équilibré. Lisez-le et utilisez la calculatrice de typographie du ratio d’or comme règle générale pour comprendre les traitements de type.
Vous trouverez ci-dessous un endroit où ce conseil améliorerait votre type. Ici, la largeur du contenu et la taille de la police méritent une hauteur de ligne accrue.
La navigation
Passons à la zone de navigation. L’impression que j’arrive ici est que tout est tellement lourd. Chaque objet et élément a beaucoup de poids visuel et attire l'attention:
De plus, dans certaines régions, l’espacement vertical est trop serré, ce qui donne un aspect encombré et encombré.
Une chose que j’aime bien, c’est la catégorisation des produits utilisée. Chaque section est clairement segmentée et il est très facile de trouver des cadeaux pour la personne que vous souhaitez acheter. Ceci est dupliqué de manière simple et agréable plus bas dans la page:
Comment le réparer
Je pense que la zone de navigation est correcte, il faut juste quelques modifications. Threadless est une bonne source d’inspiration à consulter, qui utilise un menu de navigation très similaire, mais un peu plus raffiné.
Remarquez comment une segmentation similaire est utilisée ici, mais le tout semble plus léger et beaucoup mieux espacé. Les menus déroulants initiaux sont simplement du texte coloré sur un arrière-plan blanc, l’apparence de boutons épais n’est appliquée de manière sélective qu’aux éléments importants.
Organisation du contenu
Un autre problème que je vois avec ce site est que les tactiques organisationnelles pourraient utiliser un peu de travail.Pour commencer, il existe de nombreuses informations aléatoires qui semblent avoir été bloquées à des endroits aléatoires à la dernière minute.
Le site utilise des barres horizontales pour séparer les différentes sections, mais les zones ne sont pas clairement définies d'un point de vue visuel ou conceptuel. La section ci-dessous est intitulée? Prezzybox dans la presse? et semble englober deux grands? À propos de nous? paragraphes de style, recherches de cadeaux populaires, avis de clients, etc., dont aucun n’appartient vraiment à cette section.
Ces problèmes s’étendent au pied de page, ce qui pourrait nécessiter une réorganisation visuelle majeure. Je ne suis pas non plus un inconditionnel de la coupe maladroite qui la sépare de la zone principale. Si les siens étaient répétés ailleurs sur la page, cela ne semblerait pas si déplacé, mais en tant que caractéristique autonome, il ne convient pas.
Comment le réparer
Chaque section doit être définie plus clairement avec des graphiques et du contenu. Themes Kingdom est une source d'inspiration intéressante pour ce type de conception. Dans la capture d'écran ci-dessous, cette zone du site regorge de tonnes de choses. Cependant, les concepteurs ont utilisé des méthodes de séparation de contenu vraiment claires et modernes.
En clouant vraiment sur l'organisation du contenu, vous gagnerez en efficacité pour l'ensemble de cette page. Cela peut vouloir dire réorganiser et réaménager de nombreux articles sur le site et même couper beaucoup de graisse sur la page d'accueil, mais au final, ça en vaudra la peine.
Conclusion
Le commerce électronique est une bête intéressante pour les concepteurs. La raison en est que l'esthétique n'est pas aussi étroitement liée au succès que des gars comme moi le souhaiteraient. Par exemple, Amazon est un gâchis encombré qui me fait tourner la tête, mais c’est le détaillant en ligne le plus performant du moment. Toutefois, cela ne signifie pas que nous pouvons réduire les effets visuels attrayants en tant qu'importants pour les magasins en ligne. Tout le monde ne peut pas être Amazon et un bon moyen de se démarquer de la concurrence est un design solide.
Outre l’identité visuelle, le domaine d’utilisation est encore plus critique, ce qui est particulièrement important dans les magasins en ligne. Un grand nombre des modifications suggérées ci-dessus visent à améliorer le flux de pages afin que les utilisateurs puissent plus facilement consulter cette page et trouver ce qu'ils recherchent. Des visuels attrayants ne font que soutenir cette activité et aider à garder les téléspectateurs intéressés.
À 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.