PSDFan Extra

Bad Design Vs Good Design: What You Should Be Doing (Part 1)

Bad Design Vs Good Design: What You Should Be Doing (Part 1):

Today we present Part 1 of a two part post, identifying common mistakes in design, and showing you the right way to do things.

For each example we will present case-studies, in order for you to understand the principles of design first hand.

Saturation and Color Choices

Whilst color is a great attribute to web design, it must be used correctly. Colors should go together well, and be easy on the eyes. Color should be used to draw attention, not just for the sake of it:

WRONG:


Yaxay.com – The colors of this design are a little overwhelming. The viewers eye doesn’t really know where to go. The large block of bright orange in the background actually pulls the viewers eye away from the page content.


ShopSafe.com – The bright colors of the menu and background seem to clash. They’re far too saturated, giving a cheap feel to the website. The overwhelming colors pull the viewers eye away from the content. The eye should be on the website’s offers and products, not on the useless background!

RIGHT:


ColorSchemer.com – This website shows that bright colors can be done tastefully. The background, whilst bright is subdued enough to enhance the content, rather than distract from it. The brightest colors are in the top-center of the design, drawing in the users eye. The bright colors are relevant to the site’s purpose, and give life to the website’s design.


37Signals.com – Whilst not an overly colorful website, blocks of color are used to promote the most vital content of the website. Key text and product areas are highlighted with color, and different (but complimentary) colors are used to differentiate between the various products.

Typography

A good website design should have clear, legible typography. Fonts should be kept to a minimum (2-3 tops) so as not to overwhelm your visitors.

WRONG:


KanyeUniversecity.com/blog – Kanye West’s blog uses menu font that is very hard to read (not helped by it’s tiny size). His menu is rendered very unusable, and the website suffers.


Neil Gaiman – Neil Gaiman’s blog uses a similarly hard to read menu font. The image menu tabs, close kerning, close proximity between menu links, and integrate into the header actually make the menu look like part of the header design, rather than a menu at all. The result – a hard to navigate website!

RIGHT:


AListApart.com – AListApart uses a very clear menu typography, as well as elegant headings. Fonts are used sparingly, but to great effect!



ElliotJayStocks.com – ElliotJayStocks uses dynamic text replacement to improve his pages typography. The menu and headline use the same type, but both are clear and legible.

Branding

With so many websites out there, branding is becoming increasingly important. Designs should not only look professional, but encompass your websites philosophies and message. Furthermore, your brand should help set you apart from your competitors, sticking out in visitors minds.

WRONG:


TechDesigns.co.uk – TechDesigns design isn’t terrible, but it had literally nothing to set it apart from the crowd. The design seems like any generic hosting template, yet it’s for a web design agency!


BusinessProDesigns.com – BusinessProDesigns is another very generic lookins website. There is no branding, no uniqueness to the design.

RIGHT:


Tutorial9.net – Tutorial9 has a clear brand, playing off of the ‘Cloud 9′ ideal. The logo, subtle background patterns and color-scheme all serve to promote the image of providing ‘heavenly tutorials’ to their visitors.


OutLawDesignBlog.com – With a name like ‘Danny Outlaw’ Danny couldn’t really help but brand himself brilliantly. That being said, his website pulls off the branding effort with perfection. The western feel and attention to brand detail is outstanding!

K.I.S.S

The old motto Keep It Simple Stupid is never truer than in the world of web design. Simplicity is key to great design. The best designs only have the content that is vital, no useless content at all. Additionally white space is required for great design, leaving a good amount of space between the visual elements of the page in order to give it a padded feeling.

WRONG:


WebCreationUK.com – WebCreationUK is a web design company, yet they seem to find the need to cram every piece of information they can onto their homepage. There is no feeling of being drawn into their site, as instead you feel bombarded by the amount of data that they’re throwing at you!


Web-App.net – Web-App.net takes a similarly shocking approach, bombarding you with endless columns of text. There is very sporadic white space on this website, and because of this content areas are not clearly defined.

RIGHT:


KyanMedia.com – KyanMedia contains a very selective amount of information, and for this reason it’s visual elements feel nicely spaced out and focused. There is no confusion when viewing this design, your eye knows just where to go.


MT-Ventures.com – MediaTemple Ventures is a very minimal design, yet it doesn’t feel underdone. Rather, the design is elegant, and the content feels professionally integrated. The design utilizes plenty of white space.

A Unique Layout

A unique design is essential. I’m personally not a fan of the thousands of sites using pre-made themes and templates. Nothing about these designs stands out, and particularly those sites in the design niche should consider using a custom-made design:

WRONG:


Websites Using Pre-Made Themes – Sure, themes/templates are convenient and handy, but in using a template many sites sacrifice their ability to make a real name for themselves. One solution for designers is to purchase a theme so that the code is already in place, but then use the design to make modifications – this way you can put a unique twist on a pre-made design. I’d like to make it clear that I have nothing against theme/template providers, many of them offer great designs. However, professional websites should consider using a unique design.

RIGHT:


WebDesignerWall – WebDesignerWall has one of my favorite all time favorite designs. It’s originality and creativity had the entire community talking when the design first went live.


WebDesignerDepot – WebDesignerDepot is a more recent example of a design that captured the interest of the design community. The hugely creative and unique header helped to carve out a niche for the blog, providing quality content and great design insight.


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.

Leave a comment

16 Comments:

  1. Rob Bowen says:

    Great post, Tom. I am excited to see part 2 now. You make some really good points when it comes to functional design over design that is not thought out very well. These considerations are key to having your design communicate effectively.

  2. Tom says:

    Thanks Rob! I’m glad that you liked the post. I’m not sure when part 2 will get published as I’ve got quite a busy schedule, but definitely soon!

  3. Hillary H. says:

    Hey Tom! This is a great post and most of which I already knew, but it’s a great refresher! Thank you so much, I’ll keep my eye out for part 2.

  4. Designhobo says:

    Great advice! As bad as Kanye West’s site is, you have to remember who his main audience is… they’re not that smart. =P

    • I saw that! says:

      tom: no haha smiley face..at the kanye comment and nice refresher article it was actually just what i was looking for.

      designhobo: the comment about kanyes fans was, to quote you, “not that smart”, its not like he sat down and designed the thing himself…i dont even like kanye but your comment? if it has to come out your mouth , then you should back away from the hateraid…tsk tsk.

  5. Tom says:

    Hillary: Yeah, it’s really covering some basics, but it’s always important to keep them in mind.

    Designhobo: Haha, hopefully no Kanye West fans reading your comment here :P . The website is pretty terrible though, he should definitely get a redesign.

  6. Vim says:

    Good post thanks for thanks for the advise, its always good to cover the basics, waiting to see what part 2 brings, maybe headings, images body content etc. Thanks for the refresher Tom

  7. Real nice article, very helpful.
    like the part about branding, really helped me today :) thanks.

  8. Shannon says:

    Great post, it’s very helpful seeing examples of each topic done right and wrong for comparison. Looking forward to part 2!

  9. Peach says:

    Great read. Looking forward to part 2. Examples are essential in this kind of post and you nailed it. :D

  10. I think this article is a bit presumptuous:

    even if the concepts presented are interesting points to improve someone’s skills, the way in which you say this is wrong and this is right makes me almost laugh from one side and puts me in a doubtful state of mind on the other.
    I think the separation between wrong and right is too net.

    Also, the comparation between some websites are not really appropiate from my point of view.

    I would like to say also that even if I agree on the last point about templates, I really believe you can’t say that’s necessarily always wrong. That depends on the point of views and in some case that can be really a good start, imagine a talented writer that doesn’t have the budget for a custom design and wants to start a blog. Choosing a template then is the right and only choice.

  11. jeprie says:

    Great post. This comparison helps us understand your point. But, the last one, custom theme??? Hate to admit it, but you’re right. Too bad i don’t have budget for that.

  12. Good to see the examples… even though good design obviously looks good, what really matters is how well it achieves its objectives and appeals to its target audience (eg: generates sales, converts leads, provides information etc..)

  13. Excellent read! It’s nice to see the comparisons. As a designer, function is number one in my books. Simple, clean and easy to use is what gets return visitors. You don’t necessarily need a template to do so. I love the creative headers at WDL and WDW, they draw the eye in and capture attention. Looking forward to part 2!

  14. Aidan says:

    Nice analysis! But I don’t think there is a definite wrong or right in web design. Sometime what we see and how it actually works might be different. A ugly design might be converting as well.

    I’m looking forward to seeing other part of the series. Thanks for sharing.

  15. As a designer, function is number one in my books. Simple, clean and easy to use is what gets return visitor

Leave a Comment:

Related Posts

Subscribe to PSDFAN and Get Your Free Designer Toolkit

Have every post delivered to your inbox and get access to hundreds of useful design freebies.

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.

JOIN OUR FANEXTRA COMMUNITY TODAY