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 actuel est Mogo Style, un site permettant de commander un logo personnel.
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 du style Mogo
Un mogo est l'outil idéal pour votre marque personnelle, conçu pour les personnes cherchant à se démarquer de la foule. Utilisez-les pour vos cartes de visite, vos courriels et vos profils. Personnel comme une photo mais professionnel comme un logo. Faites une impression incroyable, à chaque fois.
Voici une section de la page d'accueil:
Impression initiale
Tout d'abord, je dois commenter le service. C'est une idée vraiment intéressante. Ce qu'ils font, c'est prendre une photo de vous et la transformer en une illustration qui est essentiellement un carré ressemblant à une icône pour iPhone. Il s’agit donc essentiellement d’un service d’avatar numérique qui vous fournit une petite icône personnelle pour Facebook, Twitter, les cartes de visite, etc.
La page d'accueil du site le communique très bien. Malgré le fait que la société ait un concept très unique, il ne m'a fallu qu'une seconde pour le comprendre. C’est un objectif aussi noble que vous pouvez l’espérer ici et ils l’ont atteint.
La conception générale est propre et minimale, ce qui attire vraiment votre attention sur le diaporama expliquant le service et illustrant des exemples. Je dirais que le site est proche de la perfection, mais j’ai quelques recommandations à faire. Regardons de plus près.
Alignement
L’alignement est l’une des rares choses qui, à mon avis, doit être résolue. C'est presque parfait, mais je suis un maniaque du contrôle en ce qui concerne l'alignement et l'élément hors de propos ici me met vraiment en défaut. Le texte de style Mogo est aligné sur le reste des éléments, mais le petit cœur flotte en quelque sorte dans le no man's land.
Le problème ici est que le logo et le texte constituent une unité visuelle. Vous ne les percevez pas comme deux éléments distincts, mais un seul. L'intégralité du logo doit s'aligner sur le site de gauche avec le reste du contenu de la page. La solution ici est simple: il suffit de déplacer le logo vers la droite pour que le cœur se trouve là où se trouve le texte.
L'histoire
Comme je l'ai mentionné ci-dessus, le site communique parfaitement son concept. C'est en grande partie grâce au grand diaporama sur la page d'accueil, qui vous présente le style Mogo et son travail. Voici les quatre images que vous verrez, présentées par ordre d'apparition.
La première chose que vous voyez est quelques exemples du produit qu’ils livrent. Dans ce cas, l’image vaut mille mots ou plus. Aucune explication plus claire du service ne pourrait être proposée. Ensuite, ils vous impressionnent. La première diapositive vous intéresse, mais il est maintenant temps de communiquer sur la qualité. Ici, ils affirment que chaque logo est dessiné à la main. Il est difficile de justifier de payer quelqu'un pour coller votre photo dans un programme de traçage automatique, mais une illustration personnalisée dessinée à la main est un tout autre problème. Les deux prochaines diapositives ont pour objectif de vous expliquer pourquoi vous avez besoin du produit en décrivant certains cas d'utilisation.
La configuration ici est un excellent argument de vente: voici ce que nous vendons, voici pourquoi c'est génial et pourquoi vous en avez besoin. Lorsque vous organisez un diaporama pour une page d'accueil, vous devez garder à l'esprit des objectifs de communication similaires.
Lisibilité
Maintenant, je dirai que je ne suis pas folle de la lisibilité du texte sur les diapositives. Le concepteur a essayé d'améliorer la situation avec un texte en gras et une ombre portée, mais cela pourrait être beaucoup mieux. Les photos ici sont simplement trop occupées pour pouvoir facilement lire du texte. Si vous n'avez pas un grand champ de couleur assez solide, vous ne devriez presque même pas l'essayer.
Heureusement, la solution est presque toujours facile: si vous n'avez pas de champ de couleur uni, créez-en un! Une simple barre noire va très loin ici. Pour rendre les choses un peu plus délirantes, j'ai réduit l'opacité de la barre noire et rendu floue l'image derrière celle-ci.
Comparez ce texte à l'exemple actuel et vous verrez immédiatement que la lisibilité a été considérablement améliorée et qu'il a toujours l'air très élégant, peut-être même plus.
Le? Apprendre? Page
Sauter vers le? Apprendre? page, nous voyons un autre espace bien conçu, cette fois avec une mise en page beaucoup plus linéaire contenant trois sections principales et une histoire en arrière-plan.
Je pense que cette page est excellente, j'aime l'élargissement des détails sur les points importants et l'utilisation d'images différentes mais étroitement liées. Il aurait été facile de rendre cette zone complètement redondante avec la page d'accueil, mais elle fait du bon travail en étant autonome.
J'ai tendance à penser que les logos sociaux après chaque paragraphe sont un peu redondants. Visuellement, ça a l'air génial, mais conceptuellement, il n'y a pas vraiment de raison de répéter cet élément si souvent. Je pense que cette page bénéficierait grandement d'une attention légèrement réduite sur les médias sociaux et d'un effort accru pour amener les utilisateurs à la page d'achat. A? Obtenez le vôtre maintenant? bouton ou quelque chose de similaire aiderait.
Où est la FAQ?
Mon dernier commentaire sur le site est que, du point de vue du concepteur, il n’ya pas assez d’informations techniques sur le produit. Est-ce que c'est un raster ou un vecteur? Si c'est un raster, quelle est la résolution et la taille du fichier livré et est-ce qu'il apparaît sur un arrière-plan transparent? Est-il facile de changer de couleur? Quels sont les formats de fichiers?
Accordé, plus de la clientèle de ce site n’aura pas la moindre idée de ce qu’il en est de ces questions, mais il existe une zone grise de personnes qui ne sont pas tout à fait des designers mais qui en savent suffisamment pour se poser des questions sur le produit à livrer.
Une autre question qui me vient à l’esprit et que tout le monde se pose: quel est le délai de traitement? Parlons-nous des heures, des jours ou des semaines? Je pense qu’il existe une solution simple et élégante à tout cela: une page de FAQ. Ce sont des préfets pour placer toutes ces informations aléatoires que certains clients demanderont inévitablement. Il sert également un objectif important pour les clients qui ne sont tout simplement pas suffisamment informés pour poser de telles questions, mais qui sont parfaitement capables de comprendre les réponses.
Conclusion
En résumé, Mogo Style est un excellent petit site et un service tout à fait unique. La page d'accueil communique très bien le concept et ne nécessite qu'un léger ajustement de l'alignement et peut-être un remaniement du texte sur les diapositives. Le? Apprendre? Cette page a également un bel aspect, mais pourrait utiliser quelques icônes moins sociales et quelques appels à l’action concernant les achats. Enfin, je pense que le site bénéficierait grandement d’une page de FAQ.
À 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.