Web Design Critique #53: Distinction
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 Distinction, home of a web design agency in Nottingham.
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 $34 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 Distinction
Distinction is a digital design agency who works with SMEs, corporations and charities across all industries. Established in 2001, Distinction has a wealth of experience in delivering award-winning, high return on investment (ROI) campaigns. Although our team is small, we’re very experienced. Distinction is owned and managed by James and Greg Bloor, who as the name suggests are brothers
Here is a screenshot of the Distinction homepage:
Initial Impression
We’ve been on a roll with design critiques lately, I keep getting submissions that I actually like! Distinction has a solid site design. One of my only concerns here is that it’s perhaps just a bit too safe. Everything is so clean, perfect and tidy that it feels a bit more like a template than the creation of an innovative design agency.
It really boils down to who their target audience is and what they perceive as enticing. The language on the site seems to target a very professional, corporate client. In this arena, the “safe” route might actually be the best one as it reflects the type of the design these clients are likely looking for.
Header Design
Despite my claims that the site feels a little bland, the first image in the slider at the top of the page really helps push the page design into something more exciting. The superhero kids image feels bold and comical, a great touch that adds a lot of friendliness to the page.
This particular banner also goes a long way towards making you immediately trust the agency. When I see that you ranked decently in a list of top agencies, I definitely feel safer about making my investment with you.
Above the slideshow is the company logo and navigation right where you would expect to find it. I like that there aren’t a lot of distractions in this area, just the bare essentials. This helps draw your attention to the slideshow and other important pieces of information.
Grid Alignment
As you can see, most of the content on the page adheres to a strict grid alignment. This should sound pretty familiar: the total width of the white section is 960px and the width of the content is 940px, with each of the four prominent columns weighing in at around 220px wide with a 20px gutter.
There’s a reason that this layout is so common, it works really well. The content is nice and uniform here but also nicely varied to prevent monotony. Notice how the section with the book graphic and dark background steals your attention and provides some much-needed contrast.
The flow of information works well here and mirrors the sections of the navigation: here are the services that we offer, here’s some of our recent work and finally, here’s some recent news about the company. I really like it when I can get an overview of the entire site in brief chunks on the homepage and that’s exactly the strategy that’s being used here.
Footer
Like everything else, the footer is nice and clean, containing only a few columns of links and nothing more. When I look at it though I can’t help but feel that it’s unbalanced. The visual weight is awkwardly left leaning with the two big lists, which results in a sort of stranded feel for the content on the right.
To help balance this out, I recommend the layout below. I’ve tossed in the company logo, which helps in the page on a strong note and adds some needed weight to the right side of the footer.
Other Pages
The other primary pages on the are similarly aligned, this time with a thick black bar across the page containing a headline or question. This is a very strong element with such bold contrast to the white background that you can’t help but look.
One thing that I noticed as I looked around the site is that it starts to feel pretty saturated with stock photos. Stock images are fine when they get your message across but you need to be careful about using them as a design crutch when something else will work much better.
As an example, consider the “Case Studies” page below. Here each image links to a project that Distinction has worked on. The thumbnails are the perfect place to show a preview of the work, but instead several of them have a photo that doesn’t really communicate properly about what’s inside.
Conclusion
To sum up, I think Distinction has a really great looking site. The design is clean and professional, the content is superbly organized and each page effectively calls attention to the areas that are important.
I did get the feeling like everything was a little too boilerplate for a design agency site and encourage the designers to make bigger, bolder statements in the future by incorporating unique ideas.
Also, photography is a solid tool for any designer but just be aware of using cliché stock images, especially when other resources such as screenshots are readily available.
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 void of any harsh insults.