It’s time for another awesome web design critique, where we take a look at a real 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 WebAppers, a great place to find open source web resources. 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.
Here is a screenshot of the homepage:
If you’re wondering whether a Design Shack critique is worth it, you need look no further than the repeat customers. WebAppers was actually the customer for our 14th web design critique and they’ve come back to have us take a look at their brand new, completely redesigned responsive site.
My first thoughts for the new design are very positive. This is no small update, they’ve taken the site in a completely new visual direction and I really think it’s better for it. The old site had a cobbled together sort of look, like various non-matching resources were thrown together. The new design, by contrast, is very clean and professional and comes off as a completely custom piece of work. And it’s responsive to boot!
We’re still very early in the responsive evolution of the web so my hat goes off to anyone who’s actually taking the initiative to remove RWD from the comfortable area of theory and put it into real world practice.
Let’s dig deeper into the site’s design and see what is working well and what could stand to be improved.
The old WebAppers logo had this sort of 80s rocker appeal. There was a cat of some sort, some lighting bolt shapes; it was quirky but fun.
I always found the logo to be a little confusing though. I could never quite tell if the lightning shapes were meant to be just that or if they were perhaps a lion’s mane. And what did any of that have to do with open source web resources anyway?
The new logo takes a simpler, text-based approach. I actually love the visual of the page curl “W”, the center of which also serves as an “A”. It’s just a flat out cool idea that was pulled off quite successfully.
I also like that the logo clearly states what the site is all about. As soon as I load the home page, my eyes drift to the logo and I know what the page is offering me. This is extremely important and it’s all too often in these critiques that I’m telling a designer the opposite (that it’s difficult to see what their site is all about).
As I mentioned above, the new layout is responsive, and by that I mean that it uses media queries to reflow the layout at a number of preset breakpoints. To be “fully responsive” some say that a site must also be built on a fluid grid like the one seen on Smashing Magazine, a project which no doubt inspired this one in some way.
WebAppers doesn’t reflow itself to every minute change in the browser width (at least until the smallest iteration), and to be honest, as I play around with it, I think that’s fine. It’s still a remarkably flexible design that adapts well to all kinds of different screen sizes, which is a lot more than most websites can claim.
In the wide version, there are four primary columns. From left to right they are the navigation, primary content, secondary content sidebar and advertising. The two sidebars have been designed to look almost like drawers that slide out of the main content, a perfect metaphor considering that they collapse as the width narrows.
As we narrow the window down, we drop the advertising column on the far right. The content doesn’t merely disappear at this point though, instead the ads appear above the right sidebar, pushing that content downward. This is an elegant solution that looks great and still maintains most of the original content.
There’s a subtle jump after this that narrows the main content column slightly. The container becomes narrower, the text size decreases and the images reduce their width. If we narrow the window even further we get the most significant layout shift:
Here we can see that the third column has completely dropped away and any content that was inside has become hidden. This means that the ads have disappeared completely (Smashing Magazine does the same thing) and the sidebar containing the popular content and search field is gone as well.
My only real problem here is that from this point on the site doesn’t appear to be searchable. I’m all for shifting design as the screen size changes but functionality is a touchier subject and reductions must be approached with caution. Searching seems like a fairly primary feature and I’d likely be frustrated that I can’t perform this task on my phone or tablet.
Eventually, the site breaks down to a single column layout with the navigation now appearing in a simple native dropdown menu, which typically work well on both mobile and desktop devices.
Overall, I think the layout works really well, and with the exception of the search functionality, I’m not sure I would change much about it.
Looking behind the scenes we can see that this project was helped along by Twitter Bootstrap, which is nice because the page doesn’t look like your typical copy/paste Bootstrap project at all and proves that you can use that toolkit under the hood without sacrificing custom design.
Now that we’ve discussed how the structure or bones of the site work, let’s take a look at the icing on top. The site takes on a largely gray color scheme with subtle pops of color here and there. It makes heavy use of attractive, minimal icons and of course Helvetica as its primary and nearly exclusive typeface.
My least favorite aspect of this entire site is the lack of contrast. Everything on the page has a sort of monotonous feel with nothing really standing out. I can see how the muted look is meant to be easy on the eyes, but it’s bland enough that it almost feels a bit straining.
The solution for this, as far as I’m concerned is so easy that it only involves replacing a single file: the background texture. I grabbed a dark texture from Subtle Patterns and gave it a test run on the WebAppers site with great results.
The dark background adds some much needed contrast to the site and really highlights the main content by pushing it to the forefront of your attention. It’s amazing how much of a difference a little tweak can make!
One other small thing that bugs me slightly is the shadow effect on the article titles, seen in the screenshot below:
One one hand, I think it’s a cool effect. On the other, I think it makes the text considerably more difficult to read. Perhaps if the shadow’s opacity were simply reduced it would be less distracting.
I think the WebAppers redesign is definitely a success. The site is more beautiful than ever and has taken a nice jump towards being device agnostic. It’s easy to use, the branding is more logical and the content presentation is really nice.
My one big concern is the lack of visual contrast, a concern which completely vanishes with the inclusion of a darker background pattern. I’m also skeptical of the decision to drop the search functionality on the narrower versions of the layout. I don’t think visiting the site on my iPhone should necessarily mean that I lost the ability to search.
Other than these issues though, it’s a great site. Be sure to stop by and give it a test drive. I think you’re going to like what you see.
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.