Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.
Today’s site is Cutest Paw, a worldwide animal photo gallery. Let’s jump in and see what we think!
If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $49 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.
About Cutest Paw
This site definitely takes the prize for our most “awwww” inducing site critique ever. This site is literally nothing but an endless stream of photos of cute and funny animals. How can we bear to look at such a thing and still be able to offer constructive feedback without getting distracted by sleeping puppies? Fortunately, we’re 100% dedicated to helping creatives improve their web design chops. Stay back puppies, we have a job to do.
Here is a screenshot of the homepage:
Whenever I evaluate a design I go beyond aesthetics and ask what the purpose of the piece is and whether or not the completed design is meeting that goal. The goal here for a user is simple: to view lots and lots of photos. The Cutest Paw site seems like it serves its purpose quite well. The layout is optimized for maximum use of the space and doesn’t waste too many pixels on non-critical superfluous eye candy.
Like last week’s design critique, this one will be fairly brief. The Cutest Paw website is very simple so there’s not much to critique. However, as always, I have some feedback that I believe will help the designer improve the site. Let’s jump in and get started.
This site is a prime example of the usefulness of jQuery Masonry, an awesome layout plugin that truly makes otherwise impossible layouts a breeze to set up. The beauty of Masonry is that it forgoes the CSS behavior that sets up a horizontal layout before distributing the content vertically. Instead, it creates a nice, tight vertical stack, similar to how bricks are laid.
The result in this case is an incredibly tight grid of images that, as I mentioned above, really maximizes the number of photos that can be viewed in a small space. The site also uses an infinite scrolling technique that continues loading content as you move down the page.
The combination of Masonry-style layouts and infinite scrolling was recently made quite popular by Pinterest, which you can’t help but think about when you use this site. The combination of these two techniques makes for an unprecedented ease of browsing. By comparison, pagination requires so much effort on the user’s part. Here you just scroll and scroll until you’ve either seen everything there is to see or decide to move on to something else.
Since the content keeps scrolling forever, it becomes necessary to have a somewhat fixed navigation. Pinterest uses a bar along the top of their site, Cutest Paw goes its own way and implements a lagging sidebar that quickly catches up as you move down the page. This is quite effective, but I must admit that the animation, which is somewhat charming at first, quickly becomes distracting and somewhat of an annoyance.
The sidebar is nicely designed and clearly organized, from a usability perspective (animation aside) it’s quite well done. It’s nice to see a “Back to Top” button implemented here, as soon as I started scrolling I immediately looked for one of these and easily found it. However, it might be more effective as some sort of layover on the top or bottom of the right side of the photo stack, this would place it where the user’s attention is likely to be focused and reduce the need to hunt for it.
The overall aesthetic of the page is worth discussing, in fact, it may be one of the most prominent points to consider. On one hand, the page is attractive. The black background is sleek, classy and helps the photos really stand out. On the other hand, the background and even those adjectives I just used seem all wrong for this website.
Words like “cute” and “fuzzy” are how people would describe the content, and yet the site’s visual theme is a black grunge texture. These two concepts seem like polar opposites and create a sort of visual dissonance. As I already stated, I’m a huge proponent of using design not simply as eye candy but to reinforce a purpose and a message. The design of your page conveys a personality and when you get that personality wrong, it lessens the impact and success of the project. The juxtaposition of concepts in this design is a lot like seeing a 300 pound leather-clad, tattoo covered biker teaching a preschool class, the two simply seem at odds with each other.
The designer has nailed the layout, which is honestly often the trickiest part on a site like this. Now it’s time to completely re-theme the look of the site while maintaining the core structure. Start with a friendlier color scheme and/or use a much less edgy texture. Perhaps something that conveys a soft feeling (without being ugly and cheesy). Check out Subtle Patterns for some great resources.
The logo is shown in the previous screenshot. It’s obviously very appropriate for the site, the paw is an instantly relatable symbol. As a logo though, it has a major flaw in the fact that it’s so generic. It’s a circle with a paw in it, perhaps the very first thing 99 out of 100 non-designers would come up with given the instruction to create a paw logo.
The problem with this is that you can’t really own it. If you look hard enough, you could probably find something similar for tons of businesses and websites. You may not be seeking to build a global brand, but the whole point of a logo is still to have something that gives a face to your brand (however small) and make it identifiable. This isn’t high on the list of priorities but in the long run I’d recommend exploring something a little more unique.
As I mentioned at the beginning of this article, this site is pretty simple so we’ll wrap this up shortly. The last thing that I’d like to discuss is the page where users can go to submit their own photos:
The problem that I have with this page is the sort of Inception effect that’s happening. You have a screenshot of a web page thrown into a web page that looks very similar. It’s tilted so it stands out a little, but it’s still an unsettling combination. The problem here is that the background of the page and the picture are essentially the same, so the image isn’t really set apart in any significant way. I recommend maybe looking into a stroke effect and cropping that picture grid at an even more zoomed in view. As an easy way out, you could just put a big, cute animal here that somehow conveys the idea of sharing, uploading, etc.
To sum up, here’s a quick checklist of my thoughts on the design.
- Layout: this is a perfect use for jQuery Masonry
- Infinite scrolling: makes browsing effortless
- Simple but effective navigation
- General aesthetic: too dark and grungy
- Logo: too generic
- Sign up page: the screenshot isn’t working
Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.