Web Design Critique #26: iPhone Toolbox
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 iPhone Toolbox.
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $24 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 iPhoneToolbox
“We collect the best iphone resources including wallpaper, icons, iphone applications, and news for iPhone fans. iPhone Toolbox is updated daily as well.”
Here is a section of the homepage:
First Impressions
My initial reaction to this design is mixed. There is a strong start here. The content has been organized into modular units, meaning the homepage can hold a ton of disparate content. This is a fairly strong foundation from which to build and is a good start.
The site does feel a little cookie-cutter though. By that I mean that it seems like the content was forced into a template rather than the site being designed around the content. Templates are great and can save you a lot of money, but you do sacrifice a lot of branding opportunity by choosing one with such a common design.
Let’s take an up-close look at a few areas of the site that could use some improvement.
The Logo
I’m admittedly quite picky when it comes to resolution and find myself making this same suggestion on several critiques. Your logo is the first and primary representation of your site that visitors will encounter. You therefore want it to be as crisp and sharp as you possibly can. The logo here is a bit on the fuzzy side.
The image is already a PNG, but it looks like a low-res JPG. PNGs are capable of retaining an impressive amount of detail and clarity so I imagine the problem lies in your PSD. Make sure you build the file at the proper size and don’t start with small resources that you then have to stretch to be larger.
Where’s The Emphasis?
One of the primary problems with using such a modular layout is that it’s easy to lose a sense of hierarchy. Instead of a clearly delineated structure of communication, you have several elements with similar emphasis competing for attention. Take a look at the image below and think about where the emphasis lies. Which part of the site draws your attention the most?
If you asked a hundred people, you would likely get several different answers. There is simply no strong beginning point. If anything, the ad up top is the strongest visual element and confuses viewers as to whether or not the message is advertising your services or someone else’s.
Remember that good design creates a clear path for viewers to follow. They can break off from the path if they wish but a strong suggestion should be there. Lead them from one place to the next and they’ll stay interested, throw them into a pool of content and they’ll close the page and move on.
I recommend creating a clearer header for the site, whether it be pure branding or a larger “featured” section, just create something that stretches across the width of the site that can serve as a strong visual starting point.
Alignment
The boxes holding the primary content establish a clear alignment for the site, both on the left and right sides. This line is followed all the way down the page, but is violated at the top. In the image below I’ve shown this by drawing two lines that go up from the main content.
As you can see, both the ad and the navigation simply don’t line up properly with the content of the site. This has the effect of making the site look a little sloppy and pushes the idea that the ad was an afterthought that was forced into the design. I suggest aligning the ad with the rest of the content and moving the navigation over so that “Home” lines up with the rest of the content below it.
Final Thoughts
Other than that, the site does pretty well. The alignments are strong throughout the rest, there are some cool hover effects that show how a wallpaper looks on an iPhone, the wallpaper section has a neat corner treatment on the images and the site footer looks great.
Some other things that can optionally be addressed include the text size (feels a little small), the rounded corners (slightly jagged) and the navigation (repeated colors). Finally, consider adding some major points of contrast to the page. The header suggestion that I made earlier could be really eye-catching if it were a really dark gray or black stretched all the way across the page. Contrast is a great way to add variety and visual interest to a design.
Your Turn!
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 devoid of any harsh insults.