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 Cutest Paw, une galerie de photos d'animaux du monde entier. 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 la plus belle patte
Ce site prend définitivement le prix pour notre plus? Awwww? induisant jamais la critique du site. Ce site n’est littéralement qu’un flot ininterrompu de photos d’animaux mignons et drôles. Comment pouvons-nous supporter de regarder une telle chose tout en pouvant toujours offrir une rétroaction constructive sans se laisser distraire par des chiots qui dorment? Heureusement, nous nous consacrons à 100% à aider les créatifs à améliorer leurs méthodes de conception de sites Web. Restez à l'arrière chiots, nous avons un travail à faire.
Voici une capture d'écran de la page d'accueil:
Première impression
Chaque fois que j'évalue un design, je vais au-delà de l'esthétique et je demande quel est le but de la pièce et si le design réalisé répond ou non à cet objectif. L’objectif ici est simple pour un utilisateur: afficher de très nombreuses photos. Le site Cutest Paw semble remplir très bien son rôle. La mise en page est optimisée pour une utilisation maximale de l'espace et ne gaspille pas trop de pixels en bonbons pour les yeux superflus et non critiques.
Comme la critique de conception de la semaine dernière, celle-ci sera assez brève. Le site Web Cutest Paw est très simple, il n’ya donc pas grand chose à critiquer. Cependant, comme toujours, j’ai des commentaires qui, à mon avis, aideront le concepteur à améliorer le site. Faisons un saut et commençons.
Disposition
Ce site est un excellent exemple de l'utilité de jQuery Masonry, un plugin de mise en page génial qui permet vraiment de mettre en page des mises en page impossibles. La beauté de la maçonnerie réside dans le fait qu’elle renonce au comportement CSS qui définit une disposition horizontale avant de distribuer le contenu verticalement. Au lieu de cela, il crée une pile verticale étroite et agréable, similaire à la manière dont les briques sont posées.
Dans ce cas, le résultat est une grille d'images extrêmement étroite qui, comme je l'ai mentionné ci-dessus, optimise réellement le nombre de photos pouvant être visionnées dans un petit espace. Le site utilise également une technique de défilement infini qui continue à charger le contenu tout en descendant de la page.
La combinaison de dispositions de style maçonnerie et de défilement infini a récemment été rendue très populaire par Pinterest, à laquelle vous ne pouvez pas vous empêcher de penser lorsque vous utilisez ce site. La combinaison de ces deux techniques permet une navigation sans précédent. En comparaison, la pagination demande beaucoup d’efforts de la part de l’utilisateur. Ici, il vous suffit de faire défiler et de faire défiler jusqu'à ce que vous ayez tout vu ou que vous décidiez de passer à autre chose.
Barre latérale
Étant donné que le contenu continue de défiler pour toujours, il devient nécessaire d’avoir une navigation quelque peu fixe. Pinterest utilise une barre en haut de leur site, Cutest Paw suit son propre chemin et implémente une barre latérale à la traîne qui se rattrape rapidement lorsque vous vous déplacez dans la page. C'est assez efficace, mais je dois avouer que l'animation, qui est un peu charmante au début, devient vite distrayante et un peu gênante.
La barre latérale est bien conçue et clairement organisée. Du point de vue de la convivialité (à part l’animation), c’est plutôt bien fait. C'est agréable de voir un? Haut de page? bouton mis en œuvre ici, dès que j'ai commencé à faire défiler j'ai immédiatement cherché un de ceux-ci et l'ai facilement trouvé. Cependant, cela pourrait être plus efficace en tant que couche intermédiaire en haut ou en bas du côté droit de la pile de photos. Cela le placerait là où l'attention de l'utilisateur serait susceptible d'être focalisée et réduirait la nécessité de la chasser.
Thème
L’esthétique générale de la page mérite d’être examinée. En fait, c’est peut-être l’un des points les plus importants à prendre en compte. D'une part, la page est attrayante. Le fond noir est élégant, élégant et permet aux photos de se démarquer vraiment. D'autre part, l'arrière-plan et même les adjectifs que je viens d'utiliser semblent totalement faux pour ce site.
Des mots comme? Mignon? et? Fuzzy? Voici comment les gens décriraient le contenu, et pourtant le thème visuel du site est une texture grunge noire. Ces deux concepts semblent être des opposés polaires et créent une sorte de dissonance visuelle. Comme je l’ai déjà dit, je suis un fervent partisan de l’utilisation du design, non seulement comme un plaisir pour les yeux, mais pour renforcer un objectif et un message. La conception de votre page confère une personnalité et, lorsque vous vous trompez, elle réduit l’impact et la réussite du projet. La juxtaposition de concepts dans cette conception est un peu comme si on voyait un motard vêtu de cuir, recouvert de tatouage et enseignant un cours préscolaire.
Le concepteur a cloué la mise en page, qui est honnêtement souvent la partie la plus délicate sur un site comme celui-ci. Il est maintenant temps de réorganiser complètement l'apparence du site tout en conservant la structure principale. Commencez avec une palette de couleurs plus conviviale et / ou utilisez une texture beaucoup moins énervée. Peut-être quelque chose qui donne une sensation douce (sans être laid et ringard). Découvrez les schémas subtils pour trouver d’excellentes ressources.
Logo
Le logo est montré dans la capture d'écran précédente. C'est évidemment très approprié pour le site, la patte est un symbole immédiatement assimilable. En tant que logo, il présente toutefois un inconvénient majeur: il est si générique. C'est un cercle avec une patte, peut-être la première chose à laquelle 99 non-concepteurs viendraient avec l'idée de créer un logo de patte.
Le problème avec ceci est que vous ne pouvez pas vraiment le posséder.Si vous regardez assez, vous pourriez probablement trouver quelque chose de similaire pour des tonnes d’entreprises et de sites Web. Vous ne cherchez peut-être pas à construire une marque mondiale, mais l’intérêt d’un logo est toujours d’avoir quelque chose qui donne un visage à votre marque (même petite) et le rend identifiable. Ce n’est pas une priorité, mais à long terme, je vous conseillerais d’explorer quelque chose de plus unique.
Soumettre une page
Comme je l'ai mentionné au début de cet article, ce site est assez simple, nous allons donc en conclure bientôt. La dernière chose dont j'aimerais discuter est la page où les utilisateurs peuvent aller pour soumettre leurs propres photos:
Le problème que j'ai avec cette page est le genre d'effet de création qui se produit. Vous avez une capture d'écran d'une page Web dans une page Web qui ressemble beaucoup. Comme il est incliné, il se démarque un peu, mais c'est toujours une combinaison troublante. Le problème ici est que l'arrière-plan de la page et l'image sont essentiellement les mêmes, de sorte que l'image n'est pas vraiment distincte de manière significative. Je recommande peut-être de rechercher un effet de trait et de recadrer cette grille d'image dans une vue encore plus agrandie. Pour vous en sortir plus facilement, vous pouvez simplement placer un gros animal mignon qui donne l’idée de partager, de télécharger, etc.
Conclusion
Pour résumer, voici une liste de contrôle rapide de mes réflexions sur la conception.
Bien
- Disposition: c'est une utilisation parfaite pour la maçonnerie jQuery
- Défilement infini: permet de naviguer sans effort
- Navigation simple mais efficace
Besoin de travail
- Esthétique générale: trop sombre et sale
- Logo: trop générique
- Page d'inscription: la capture d'écran ne fonctionne pas
À 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.