Critique de conception Web # 71: Patte la plus mignonne
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 Cutest Paw, une galerie de photos d'animaux dans le monde entier. Commençons et voyons ce que nous en pensons!
Explorez Envato Elements
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 critiquer votre conception - beaucoup moins que ce que vous paieriez pour qu'un consultant jette un œil à votre site! Vous pouvez en savoir plus ici.
À propos de Cutest Paw
Ce site remporte sans aucun doute le prix de notre critique de site la plus «awwww» qui ait jamais suscité. Ce site n'est rien d'autre qu'un flux infini de photos d'animaux mignons et drôles. Comment pouvons-nous supporter de regarder une telle chose et être en mesure d'offrir des commentaires constructifs sans se laisser distraire par les chiots endormis? Heureusement, nous nous engageons à 100% à aider les créatifs à améliorer leurs conceptions de conception Web. Restez en 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 achevé atteint ou non cet objectif. Le but ici pour un utilisateur est simple: afficher beaucoup, beaucoup de photos. Le site Cutest Paw semble bien servir son objectif. La mise en page est optimisée pour une utilisation maximale de l'espace et ne gaspille pas trop de pixels sur des bonbons superflus 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'y a donc pas grand-chose à critiquer. Cependant, comme toujours, j'ai des commentaires qui, je pense, aideront le concepteur à améliorer le site. Commençons 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 rend les mises en page autrement impossibles à configurer. La beauté de la maçonnerie est 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 belle pile verticale serrée, semblable à la façon dont les briques sont posées.
Le résultat dans ce cas est une grille d'images incroyablement serrée qui, comme je l'ai mentionné ci-dessus, maximise vraiment le nombre de photos qui peuvent être vues dans un petit espace. Le site utilise également une technique de défilement infini qui continue de charger le contenu lorsque vous descendez la page.
La combinaison de mises en page de style maçonnerie et de défilement infini a récemment été rendue très populaire par Pinterest, que vous ne pouvez pas vous empêcher de penser lorsque vous utilisez ce site. La combinaison de ces deux techniques offre une facilité de navigation sans précédent. Par comparaison, la pagination demande beaucoup d'efforts de la part de l'utilisateur. Ici, vous faites défiler et faites défiler jusqu'à ce que vous ayez vu tout ce qu'il y a à voir ou décidé de passer à autre chose.
Barre latérale
Comme 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 sa propre voie et implémente une barre latérale en retard qui se rattrape rapidement lorsque vous vous déplacez vers le bas de la page. C'est assez efficace, mais je dois admettre que l'animation, qui est un peu charmante au début, devient rapidement gênante et quelque peu agaçante.
La barre latérale est joliment conçue et clairement organisée, du point de vue de la convivialité (animation à part), c'est assez bien fait. C'est agréable de voir un bouton "Back to Top" implémenté ici, dès que j'ai commencé à faire défiler, j'ai immédiatement cherché l'un d'entre eux et je l'ai facilement trouvé. Cependant, cela pourrait être plus efficace car une sorte d'escale en haut ou en bas du côté droit de la pile de photos, cela la placerait là où l'attention de l'utilisateur est susceptible d'être concentrée et réduirait le besoin de la rechercher.
Thème
L'esthétique globale de la page mérite d'être discutée, en fait, elle peut être l'un des points les plus importants à considérer. D'une part, la page est attrayante. Le fond noir est élégant, élégant et aide les photos à se démarquer vraiment. D'un autre côté, l'arrière-plan et même les adjectifs que je viens d'utiliser semblent tout faux pour ce site.
Des mots comme «mignon» et «flou» sont la façon dont les gens décriraient le contenu, et pourtant le thème visuel du site est une texture grunge noire. Ces deux concepts ressemblent à des opposés polaires et créent une sorte de dissonance visuelle. Comme je l'ai déjà dit, je suis un grand partisan de l'utilisation du design non seulement comme bonbon pour les yeux, mais pour renforcer un objectif et un message. La conception de votre page transmet une personnalité et lorsque vous vous trompez, cela diminue l'impact et la réussite du projet. La juxtaposition de concepts dans cette conception est un peu comme voir un motard recouvert de cuir de 300 livres, couvert de tatouage, enseignant une classe préscolaire, les deux semblent simplement en désaccord.
Le concepteur a cloué la mise en page, qui est honnêtement souvent la partie la plus délicate d'un site comme celui-ci. Il est maintenant temps de retravailler 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 transmet une sensation de douceur (sans être laid et ringard). Consultez les modèles subtils pour quelques 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 identifiable. Cependant, en tant que logo, il présente un défaut majeur dans le fait qu'il est si générique. C'est un cercle avec une patte, peut-être la toute première chose que 99 non-concepteurs sur 100 proposeraient étant donné l'instruction de créer un logo de patte.
Le problème, c'est que vous ne pouvez pas vraiment le posséder. Si vous regardez bien, 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 la rende identifiable. Ce n'est pas en haut de la liste des priorités, mais à long terme, je recommanderais d'explorer quelque chose d'un peu plus unique.
Soumettre la page
Comme je l'ai mentionné au début de cet article, ce site est assez simple, nous allons donc conclure brièvement. La dernière chose dont je voudrais 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 type d'effet Inception qui se produit. Vous avez une capture d'écran d'une page Web jetée dans une page Web qui ressemble beaucoup. Il est incliné de sorte qu'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 mise à part de manière significative. Je recommande peut-être d'examiner un effet de trait et de recadrer cette grille d'image avec une vue encore plus agrandie. Pour sortir facilement, vous pouvez simplement mettre un gros animal mignon ici qui transmet en quelque sorte l'idée de partage, de téléchargement, 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: facilite la navigation
- Navigation simple mais efficace
Besoin de travail
- Esthétique générale: trop sombre et grungy
- Logo: trop générique
- Page d'inscription: la capture d'écran ne fonctionne pas
À 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.
