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.
Authors