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 MadeFreshly.
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.
À propos de MadeFreshly
Un panier de shopping avec goût. Les tendances changent et votre boutique en ligne devrait en faire autant. MadeFreshly vous propose un nouveau design pour votre panier.?
Voici une capture d'écran de la page d'accueil:
Première impression
Dès le départ, je peux dire que le design de MadeFreshly me plait beaucoup. Nous allons parler ci-dessous de plusieurs idées de design et bizarreries. J'ai certainement quelques suggestions d'amélioration, mais pour la plupart, c'est un superbe site créé par des concepteurs très talentueux.
Mon plus grand scrupule est probablement d'un point de vue conceptuel. Ceci est certainement une critique subjective, alors n'hésitez pas à l'ignorer complètement, mais je trouve étrange que les visuels du site contredisent la métaphore définie par le nom du site. ? MadeFreshly? Cela pourrait impliquer un certain nombre de choses: nourriture en général, produits de boulangerie chauds sortant du four (c'est ce que je pense), quelque chose d'inspiré par la nature ou même quelque chose de nouveau et de brillant.
Toutefois, le concepteur a choisi un léger look grunge pour le site. Le fond est une texture vieillie et les titres ont également un peu de grunge. Encore une fois, cela donne une belle page, mais elle est en contradiction avec le concept de «Frais».
Le contenu doit toujours précéder et déterminer le design. Concevoir le nom et la métaphore préétablie d’un site, ou à tout le moins ne pas le contredire, aide tout à s’unir et à se sentir simplement «non».
Par exemple, consultez une situation très similaire sur le site? Formee ,? qui délivre? des formes fraîchement cuites.? Le visuel est un personnage de chef sympathique qui renforce le slogan.
Ne copiez pas cette idée, mais vous pourriez envisager de relier le concept de? Frais? aux visuels sur la page.
Le logo
Je pense que le logo MadeFreshly est génial. La police de caractères est très attrayante tout en se sentant unique et son effet d’autocollant froissé ajoute une impression de profondeur au site. Bon travail!
L'en-tête
L'en-tête est simple et agréable avec une navigation en texte brut et un onglet de connexion facilement visible. Arrêtez-vous et regardez cette zone en taille réelle et vous verrez qu'il y a juste beaucoup d'espace qui flotte au-dessus de ce logo.
Les espaces ne me dérangent pas et j'encourage même les concepteurs à les utiliser de manière très libérale, mais un grand espace vide est une façon extrêmement maladroite de démarrer sur le site. La solution ici est extrêmement simple: il suffit de réduire cet espace de moitié et il devrait être superbe. Vous conserverez tout de même beaucoup d’espace, mais pas tant que cela vous distrait.
Un autre problème que je vois ici est que le logo est dans une position horizontale étrange. Le contenu à droite de la page est aligné à droite, suggérant non pas une mise en page centrée mais justifiée. Cependant, le logo ne s'aligne pas sur le contenu à gauche et n'est pas centré sur l'élément situé en dessous (autre position justifiable). Au lieu de cela, il flotte maladroitement à droite de son alignement à gauche et à gauche de son alignement au centre.
La solution simple consiste à placer le logo à gauche pour l’aligner sur le contenu situé en dessous. Il y est presque et a juste besoin d'une autre bonne poussée.
La section en vedette
La section située en dessous de l'en-tête, que je désigne arbitrairement comme "la section en vedette". est la partie de la page qui attire vraiment votre attention. Il a plus de poids visuel que le contenu qui l'entoure, donc il semble plus important et vos yeux sont presque immédiatement attirés par lui (toutes les bonnes choses).
Le? Create Store maintenant? Le bouton est agréable et lumineux et constitue un appel puissant à l’action. Une fois que vous avez vu le bouton, si vous regardez à nouveau autour de vous, la flèche le ramène à la vue, un geste agréable qui attire encore plus l’attention sur l’un des éléments les plus importants de la page. Vous pourriez envisager d’ajouter un effet de survol au bouton comme un coup de pouce UX, mais sinon, c’est un modèle solide.
Mon seul dilemme est le texte du titre. D'une part, c'est attrayant et apporte une certaine répétition au texte utilisé dans le logo. Par contre, ce n’est tout simplement pas une lecture rapide, simplement à cause de la complexité de la police de caractères.
C'est l'une de ces situations où esthétique et lisibilité sont en désaccord. Si vous avez changé la police ici, je suis fermement convaincu que le site serait moins attrayant, mais vous pouvez doubler le nombre d'utilisateurs qui lisent le titre.
Vous pouvez envisager de laisser un mot du titre dans le script et de convertir le reste en quelque chose d'un peu plus lisible. Ainsi, par exemple, un panier avec? pourrait être plus petit et dans une police de caractères sans empattement uni alors? goûter? peut être mis en évidence à la fois par une taille plus grande et l’utilisation de la police de script.
En fin de compte, la situation actuelle est acceptable et ce ne sont que des suggestions à prendre en compte. Il serait bon d’exécuter des tests AB sur cet élément pour voir si le rendre plus lisible a un effet mesurable sur les conversions. Sinon, conservez définitivement le script.
Section de trois en haut
Le bas de la page présente trois captures d'écran avec les mots frais, simples et efficaces. C'est accrocheur et mémorable et la section est géniale. J'aime que la texture d'arrière-plan se termine et que les vignettes se chevauchent dans la nouvelle zone.Encore une fois, le designer ajoute un peu plus de profondeur à son design pour le rendre encore plus réel et diversifié.
Tous les paragraphes en gras
Normalement, nous nous en tenons à la page d'accueil pour les critiques de conception, mais cette fois-ci, j'ai fouillé un peu dans les autres pages. Une chose qui, à mon avis, mérite d’être soulignée est le texte du paragraphe sur le? Tour? page.
La décision de rendre les paragraphes tout en gras ne fonctionne tout simplement pas. Les lettres semblent être entassées les unes contre les autres et sont assez difficiles à lire. De plus, en mettant en gras la copie de corps, vous réduisez l'impact d'un en-tête gras (le contraste est essentiel). Je recommanderais de donner à ce texte le même style que le texte non gras sous les trois vignettes de la page d'accueil.
À 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.