Critique de conception Web # 29: MadeFreshly
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 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 critiquer votre conception - considérablement moins que ce que vous paieriez pour qu'un consultant jette un œil à votre site! Vous pouvez en savoir plus ici.
À propos de MadeFreshly
«Un panier d'achat avec goût. Les tendances changent et votre boutique en ligne devrait changer. 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 j'aime vraiment le design de MadeFreshly. Il y a plusieurs idées de design et bizarreries ici dont nous parlerons ci-dessous. J'ai certainement quelques suggestions d'amélioration, mais pour la plupart, c'est un site magnifique créé par des designers très talentueux.
Mon plus grand scrupule est probablement d'un point de vue conceptuel. Il s'agit certainement d'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 mise en place par le nom du site. «MadeFreshly» pourrait impliquer un certain nombre de choses: des aliments en général, des produits de boulangerie chauds sortis du four (c'est là que mon esprit va), quelque chose d'inspiré par la nature, ou même quelque chose de nouveau et brillant.
Cependant, le designer a choisi un léger look grunge pour le site. L'arrière-plan est une texture vieillie et les titres ont également un peu de grunge appliqué. Encore une fois, cela donne une belle page, mais elle est en contradiction avec le concept de «Fresh».
Le contenu doit toujours précéder et déterminer la conception. Concevoir autour, ou du moins pas en contradiction avec, le nom et la métaphore préétablie d'un site aide tout à se lier et à se sentir simplement «bien».
À titre d'exemple, découvrez une situation très similaire sur le site «Formee», qui propose 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 comment vous pouvez également lier le concept de «frais» aux visuels de la page.
Le logo
Je pense que le logo MadeFreshly est super. La police de caractères est assez attrayante tout en se sentant unique et l'effet d'autocollant bien froissé ajoute une sensation de profondeur au site. Bon travail!
L'en-tête
L'en-tête est agréable et simple 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 flottant au-dessus de ce logo.
Cela ne me dérange pas les espaces blancs et j'encourage même les concepteurs à l'utiliser assez libéralement, mais une grande zone vide est un moyen extrêmement maladroit de démarrer le site. La solution ici est simple, réduisez simplement cet espace d'environ la moitié et cela devrait être superbe. Vous conserverez toujours beaucoup d'espace, mais pas tant que cela vous distraira.
Un autre problème que je vois ici est que le logo est dans une étrange position horizontale. Le contenu sur le côté droit de la page s'aligne sur la droite, suggérant non pas une mise en page centrée mais justifiée. Cependant, le logo ne s'aligne pas avec le contenu de gauche et n'est pas centré sur l'élément en dessous (une autre position justifiable). Au lieu de cela, il flotte maladroitement à droite d'être aligné à gauche et à gauche d'être aligné au centre.
La solution simple ici consiste à faire défiler le logo vers la gauche afin qu'il s'aligne avec le contenu en dessous. Il est presque déjà là et a juste besoin d'un bon coup de plus.
La section en vedette
La section sous l'en-tête, que j'appelle arbitrairement «la section sélectionnée», est la partie de la page qui attire vraiment votre attention. Il a plus de poids visuel que le contenu qui l'entoure, il est donc plus important et vos yeux sont presque immédiatement attirés par lui (toutes les bonnes choses).
Le bouton «créer un magasin maintenant» est agréable et lumineux et sert de puissant appel à l'action. Après avoir vu le bouton, si vous avez un autre regard autour, vos yeux sont attirés par la flèche, une touche agréable qui attire encore plus l'attention sur l'un des éléments les plus importants de toute la page. Vous pourriez envisager d'ajouter un effet de survol au bouton tout comme un petit coup de pouce UX, mais sinon c'est un design solide.
Mon seul dilemme ici est le texte du titre. D'une part, il est attrayant et apporte une belle répétition au texte utilisé dans le logo. D'un autre côté, ce n'est tout simplement pas une lecture rapide simplement en raison de la complexité de la police.
C'est l'une de ces situations où l'esthétique et la lisibilité sont en contradiction. Si vous avez changé la police ici, je crois fermement que le site serait moins attrayant pour lui, mais vous pourriez doubler le nombre d'utilisateurs qui lisent réellement le titre.
Vous pourriez envisager d'expérimenter en laissant un mot du titre dans le script et en convertissant le reste en quelque chose d'un peu plus lisible. Ainsi, par exemple, «un panier d'achat avec» pourrait être plus petit et dans une police sans empattement simple tandis que «goût» pourrait être mis en évidence à la fois par une taille plus grande et par l'utilisation de la police de script.
En fin de compte, il est acceptable de voir comment c'est actuellement et ce ne sont que des suggestions à considérer. Il serait intéressant 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 trois places
Le bas de la page représente trois captures d'écran avec les mots frais, faciles et efficaces. C'est accrocheur et mémorable et la section a l'air géniale. J'adore le fait 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 lui donner une sensation beaucoup plus réelle et diversifiée.
Tous les paragraphes en gras
Normalement, nous nous en tenons à la page d'accueil de Design Critiques, mais cette fois, j'ai fouillé un peu sur les autres pages. Une chose qui, je pense, mérite d'être soulignée est le texte du paragraphe sur la page «Tour».
La décision de rendre les paragraphes 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 du 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 miniatures sur la page d'accueil.
À 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.
