A Comprehensive Guide to Mockups in Web Design
Black/White Web Design Trending in 2010?
Thursday Theory: Using Movies as Design InspirationHave every post delivered to your inbox and get access to hundreds of useful design freebies.
PSDFan Extra
New Post Series: Thursday Theory
As many of you may have seen we’ve really been putting a lot of effort into expanding PSDFAN recently. We’ve been publishing more content than ever, including some really high quality tutorials and articles. We recently got featured on Adobe’s official Photoshop Facebook page, and our traffic has generally been growing and growing. Our popular 30 minute redesigns series is nearing it’s 50th week, and next week we’ll be publishing our 100th Texture Thursday!
Rather than just sit back and enjoy all this progress, I’m really keen to provide as much quality content as we can. That’s why today I’d like to introduce a new weekly post series – Thursday Theory! Whilst roundups and inspiration posts will always be popular, I feel they’ve really overtaken more theoretical, practical articles within the community. Very few blogs take the time to give in depth analysis of prevalent design issues any more, meaning that whilst many readers are ‘consuming’, very few are actually learning more about good design. I really hope that this new weekly series will encourage some discussions amongst our great community, and that you’ll get involved and share your voice!
Thursday Theory: Common Web Design Mistakes People Keep Making
Today, to kick things off, we’ll be looking at common mistakes that people make when it comes to designing their own websites.
This post was inspired by our hugely popular 30 minute redesign series, which apart from being a lot of fun, has really highlighted some common issues in modern design for me. In this article I’ll be looking at some of the most common issues I’ve seen during these weeks redesigning, and teaching you how to avoid them!
No Continuity / Visual Hierarchy
There should be a feeling of continuity and order amongst your websites visual aspects. This means that colors should compliment each other, and fonts should be limited to a few choices. Too much variety means your design will likely fall down by overwhelming the viewer, and feel disorganized and random. Just take a look at the examples below and how adding some continuity can really bring a design together:
Capitol Church of God
Capitol Church of God really lacked continuity. The original site used a variety of fonts and styling, which really made the site feel random. The range of colors is far too extensive, and even the photos used don’t seem to match up that well. Even the content areas don’t appear to fit into any kind of grid system, as content boxes don’t align with each other.
For the redesign I reduced the color palette to a few complimentary colors. The typography is far more cohesive, and the content lines up much better.
Crucial Content Pushed Down The Page
You want your viewer to see your most important content straight away, as this is what should be drawing them into your site. If the content is pushed down to the bottom of the browser screen, or worse – the user is forced to scroll to view it, then you’re simply cutting of potential readers.
Remember – it is not your visitors job to look for your content, it should be presented to them. Why would they spend time scrolling or hunting for content when they likely have dozens of other websites they could be reading?
Dan’s Cartoons
The adverts in the header of Dan’s Cartoons were pushing down their daily cartoon, which given the nature of their website is their most crucial content. The cartoon seems to be bottom of the visual hierarchy in the original design, being pushed below welcome paragraph, logo, text, subscription options and navigation.
In my redesign I tried to reduce the amount of content above the featured cartoon, thus bringing it up the layout and reducing scrolling. I also made the cartoon more prominent by giving it an attractive border and browsing buttons.
Too Much Content Crammed Onto Homepage:
This is one of the most off-putting things you can do for your visitors, yet it’s something I see again and again! The logic is that your content is important, and therefore you want to place as much as it as possible onto your homepage, so that people read it.
The reality is that by doing this, your homepage appears cluttered, disorganized and worst of all overwhelming to your readers. Rather than drawing them further into your website and making them feel comfortable, you’re scaring them off by bombarding them with information.
Sony Photo Pro
Austin Luker’s portfolio used to just be a homepage full of text. He was trying to provide every bit of information he could, and put it on his homepage. To make matters worse, due to the single column layout the lines of text are incredibly wide. Generally you don’t want your paragraphs of text to span across your entire layout, as this is simply too large an area of text to hold your visitors attention.
My redesign tried to show how you don’t always need to use a huge amount of content to portray a point. In this example the idea was ‘a picture is worth a thousand words’. By replacing the huge blocks of text with concise bullet points, and use featured photographs, Austin can showcase his talent instantly, rather than expect visitors to browse down lots of textual content.
Nothing Drawing Users Further Into The Site
Even if your homepage content looks great, you should be prompting your visitors to delve further into your website. It’s simply not good enough to hope that they might explore your navigation. You know what I’m talking about – calls to action!
Calls to action can be incredibly powerful, as you are directly encouraging readers to take action, rather than leaving it entirely up to them. Calls to action can come in many forms, but often the most understated examples, such as ‘learn more’ buttons, special offers, or ‘meet our team’ banners can be hugely effective.
The crucial theory here, is that as users are drawn deeper into your site, it will be harder for them to leave. They will feel somewhat committed to your website, and with every page they read, they gain trust, security and familiarity.
Cachaca Wruck
Cachaca Wruck had literally nothing drawing users further into their website apart from their menu. The only homepage content was an image that didn’t really tell the visitor anything about what the website did.
In an effort to draw users further into the site I integrated a call-to-action button, and an engaging paragraph to encourage users to want to learn more.
Navigation Isn’t Clear
The navigational menu is one of the most important aspects of a successful website. If visitors can’t easily browse your website without a second thought then you will never be successful!
D Lists
D Lists had one of the strangest menus I’ve worked with. The only visible menu link was ‘About’ and it was positioned unconventionally in the top right of the page. Furthermore the typography made it look like a headline, or even part of the header design, rather than a link.
In my redesign I replaced the abstract navigational with a more conventional menu bar, including an active tab to help visitors know where they are within the site. The clear menu bar is far easier to understand than the randomly positioned ‘About’ link.
Nothing Interesting or Unique About the Design
Even if your layout is strong, and you’ve followed all of the guidelines above, if there is nothing engaging about your design, it won’t really interest people. You can do everything right, but visitors will turn off if you don’t visually engage them!
Climb Addict
Climb Addict had some clear layout issues, but for me the main thing I wanted to do was to make the site more interesting. Aside from the slightly grungy logo design, the layout could really apply to any business. When you’re designing your layout you want everything to relate to the subject matter or business model. What would you like your colors to reflect – corporate business, soft and girly, fun and trendy? Everything from colors to typography should be relevant to your websites subject matter.
In my redesign I broke away from the boxy design of the original, and integrated some great rocky textures that instantly related to the rock climbing theme of the site. Combined with some funky typography and additional design quirks and this is one visually stimulating layout!
Have Your Say!
This whole point of these Thursday Theory posts is to encourage discussion and let you have your say on pressing design issues.
Do you make any of the common mistakes above, and what do you think about the issues raised? Please leave a comment below.
About the Author:
Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.
10 Comments:
Related Posts
Your Design Work, But More Awesome:
Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.
one more thing i like to add, did not know how to make a perfect design just copy others
This was a very good article and I just wanted to say that I love the way that the Climb Addict and Austin Luker redesigns came out – both examples show a more sophisticated version of the original from the typography, use of a grid, and especially the use of image.
I wanted to preview the Austin Luker page but the link didn’t seem to be working. I really like the blog-like appearance of the redesign. It would be really nice to see the D-List site implement your redesign – It always makes me cringe to see sites that don’t seem to put much thought into the design.
In regards to the overlooked points that you mentioned I think that there are definitely a lot of common mistakes like not placing important content ‘Above The Fold’ as some would say. And a good website should always have something memorable or unique about it, whether it’s the navigation or colors, but when they try to accomplish too much it just starts to become overwhelming, but this is just my opinion.
Great article, it definitely provides people some food for thought!
I HATE the term ‘Above the Fold’ as it’s completely misleading, and people tend to cram everything including the kitchen sink up into the top of the page. There is NO fold online.
But, it IS vital to use the ‘Information Hierarchy’ and put the right elements at the top of a website, like the ‘Site ID’/Logo, the tagline/slogan, the navigation, and what the site is about.
And then the page should end with a call to action.
Absolutely – I agree that the term ‘Above The Fold’ isn’t the best way to describe something since there is no fold on a computer screen, but the logic makes sense. You want to have the most important information about your site visible as soon as the page loads. I agree with your other points as well about having the logo and other crucial information along the top of the page.
Thanks for the great comments guys! This is exactly what I want to achieve with this post series – discussion.
In my eyes ‘above the fold’ is a pretty malleable concept, so shouldn’t be viewed as totally concrete. However, I do tend to think in terms of a ‘visual hierarchy’, as Trisha pointed out.
It’s also important to realize that whilst the points above highlight some general mistakes, obviously each website is different. Some designs may need to stand out more, whilst others may need to be less obtrusive.
Trisha: Whilst you’ve described quite a standard layout with your list of website elements, if every website followed these guides, we wouldn’t see as much variety and creativity on the web as there is.
Hi Tom,
I was speaking generally about the header area – I didn’t mean it should only contain those three things, or that they should appear in that order. I’m strongly in favor of creativity, as long as it’s still plainly obvious what the site is, what it’s about, and how I can navigate around in it.
This is a really good piece on the thinking behind structured and cohesive modern web design. I like that you always explain what it is you try to achieve in your 30-minute redesigns, Tom, hopefully people pick something useful up from that.
I know I do.
Thanks so much Mark
. I do try to include as much as my thinking process in each weeks redesign post (even if sometimes I’m not thinking all that much!). I hope that you’ll continue to enjoy the series, and join in with this new Thursday Theory series.
Common copywriting mistakes that people keep making.
1. Making spelling errors in the second sentence of an article…
etc.
What mistake?