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 Snowden Industries.
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 Snowden Industries
“We are a team of professionals, each with a unique specialized skill set. We love what we do and enjoy helping our clients maneuver through the creative process of translating existing offline business initiatives into immersive online experiences. We plan, design, code, build and critique our projects around the clock. We project manage with BaseCamp, bill with FreshBooks and communicate via several online messengers like Skype, AIM and Yahoo Chat. We are also always available by phone and email to help you through your project.”
Here is a screenshot of the homepage:
My first reaction to this site is simple: it’s awesome. It’s attractive, colorful, dynamic, engaging, well organized; I could go on and on. Serious applause to the folks at Snowden, they’ve done a stellar job.
Critiquing a site like this is always difficult because it’s just so well done. Instead of picking apart all of the things that went wrong, let’s discuss what went right. Along the way we’ll see if we can find any areas that could use improvement.
CRAP: The Acronym to Judge Designs By
Design author Robin Williams (not the actor) long ago laid out four basic design principles that I not only use as a guide for my own designs but also as a standard by which to judge other designs. These principles are Contrast, Repetition, Alignment, and Proximity, lovingly referred to in the design community as “CRAP.”
To see why this design works so well, let’s see how it holds up in each of these areas. As a reader, this will give you very important insight into how you can use these principles in your own work.
I would say that contrast is one of the strongest things driving this design. It’s the reason that the page really grabs your attention and holds onto it as you scroll down the page. Here are a few examples:
Notice how simple the color palette here is. This is a great thing about design that I think a lot of people miss out on. One of the best tips I can give you: if you’re not great with color schemes, keep it simple stupid! There’s a classic strategy at work here that we see on countless sites. First, two nicely contrasting colors were chosen, in this case, black and white. It simply doesn’t get any more basic and contrasty.
After that, a third color, usually a bright pop in the form of an orange, red or green is brought in and used repeatedly throughout the page to guide your attention to specific points. That third color is used very sparingly and really grabs you each time you see it. Snowden used a nice orange to accomplish this.
As a completely off subject tangent, notice that the site doesn’t look like a halloween design. Too often I hear designers giving thoughtless advice to avoid holiday combinations such as red and green (Christmas) or orange and black (Halloween) because viewers will immediately associate your design with those holidays. There is a certain amount of truth to the warning, but if you use one of the colors sparingly as Snowden did with the orange, you can easily avoid this. If you’re a skilled designer, you should be able to make viewers think about Christmas only when you want them to.
While we’re on the subject of color, that pop of orange also serves as a strong point of repetition throughout the page. As I mentioned above, anywhere you see orange, the designer is trying to direct your attention to something important.
Another intentional point of repetition is through the use of circles and heavily rounded corners. All through the page we see circles used as a design statement. Again and again they use the same basic element to create a strong and consistent aesthetic feel.
Picking up that rounded theme, the organization on the site is driven by these large arced sections. If we strip away the content, it’s easy to see the repetition here.
Alignment is a very basic but extremely important aspect of your design. This site has a fairly complex looking layout but the arcs are making it look a bit more complicated than it really is. The rounded nature of the sections is providing the layout with an almost organic illusion, but if you strip the visual design away you can see the wireframe underneath is a solid grid.
This example really helps dispel the myth that wireframes lock you into design structures that are so rigid that they kill creative freedom. This site is maxed out on creative visual appeal and yet the underlying structure is pretty simple and boring!
The principle of proximity is such that, if it’s done right, you shouldn’t ever notice it. Put differently, you’ll never pay attention to the fact that the things that belong together are together, you’ll only pay attention to the problems, when something is out of place or hard to find.
For this reason, proximity seems obvious and simple, but in truth it’s a stumbling point for many designers. As we’ve mentioned several times already, the structure on this site is provided by the arcs of white and black. This created nice little nooks where the designer could lay out clear visual clusters of information.
Don’t make the mistake of thinking that layout should be completely independent of aesthetic design. This page clearly shows the two working closely together and providing a powerful tool for implementing proximity.
There’s no magic formula that you can follow every time for a successful design, but following the principles above will get you close. The designers behind Snowden clearly have a strong grasp of basic design theory and how to craft a page that is both successfully functional and successfully attractive.
You may have noticed that I still really haven’t given any constructive feedback, and to be honest, I’m not sure what to say. It’s a solid design that I myself would be extremely proud of producing. The one thing that bugs me is the use of Cufon font replacement. The font used is a pretty simple sans-serif and I’m not sure Cufon is worth the usability hit. A similar look could likely be achieved with Helvetica Neue and some safer fallbacks. Further, @font-face provides a friendlier alternative, though some do prefer the visual rendering of Cufon. Either way, it’s a tiny matter with this site and is completely open for debate.
Before you go, stop by the site and have a look around. Notice how they took these same solid principles and combined them with new layouts and ideas on other pages throughout the site.
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.