The Four Key Components of a Great Web Design

By / Nov 24, 2009 / Tips
shares

There’s a lot that goes into creating a web design, but I believe it can be broken down into four main components. If you’re able to execute on all four, you will have a hit web design on your hands. However, if you come up short on one, the entire design will suffer. That’s the challenge. All aspects of a great design must compliment each other while helping achieve the end goals of the website. In this article, I’ve broken down the four key components of a great web design with examples and resources.

1. A Solid Layout

The importance of having a good foundation applies to just about everything in life. If the foundation is wrong, everything that is put on top of it will probably fail. In web design, the foundation is your layout. Laying out a web design involves placing all the content and navigational elements. You want to establish a hierarchy in these elements that gives the most important ones prominence, and this should be determined by how you think your audience will use the site.

Use Wireframes

A common practice by web designers to nail down a layout is to create a wireframe, which is basically a bare-bones representation of the various elements that will appear on the page. Wireframes are typically made up of gray scale boxes and blocks of placeholder text. The key is to keep things simple and not get caught up in color and design elements.

Jesse Bennett-Chamberlain of 31Three is great about posting his design processes on his blog. Here is an example wireframe he created for the Embrace Pet Community project.

web design

Be generous with whitespace

One key aspect of a great layout is more about what’s in between (or rather not in between) your various page elements. I’m talking about whitespace or negative space. Many designers make the mistake of over crowding their web designs. Don’t be afraid to let your pages breathe. Adding larger amounts of whitespace will actually give your design a more sophisticated look.

With so much going on in the layout of The Swish Life, Liam McKay realized how important it was to use wide margins around the content to give this design an open and airy feel while making it easy to skim over all of the text. Notice how much empty space is around the blocks of content. This makes it easier for the user to focus in on what’s important.

web design

web design

Mutant Labs is another great example of good use of whitespace. It gives this dark design an open feel and lets the subtle chalk board texture and doodles room to show through.

web design

Learn more about layout and wireframes

Wireframes Magazine is a blog written by information architects and interaction designers that has lots of info and examples of layouts and wireframing.

web design

2. Effective Typography

Just like layout, typography plays an important role in how a user digests the content of a website. It’s important for a web design’s typography to be easy to read and follow while establishing structure and hierarchy within the content.

Big = important

31Three uses all caps and a large font size for the titles and subtitles. This establishes a clear hierarchy that distinguishes the headings as having more importance than the paragraph below.

web design

web design

Make it legible

By using high contrast between the text and the background, Dan Cederholm made the text on Simple Bits very easy to read. Also notice the amount of line spacing used in the paragraphs. Always make sure to use enough to make a body of text easy to read. This normally requires some experimentation, but a good rule of thumb is to set the line height to 1.5em, which is 1.5 times greater than the font size.

web design

web design

Learn more about typography

If you want to learn more about typography, we’ve compiled a list of great sites about the subject, and we’ve also go a list of tools to help you with typography on the web.

3. The Right Color Scheme

Choosing the right color scheme is extremely important, because it will set the mood of your design more so than any other component. Don’t let your own personal taste determine what colors you use. That should be based on what’s trying to be achieved with the site and what you know about it’s audience.

Dare to be different

The Gap Medics site features a bold choice of colors that goes against everything we are used to seeing on medical related sites. It’s appropriate since the site is trying to attract young medical students. The colors help give the site a young hip feel that softens seriousness of the subject matter.

web design

Sometimes little color is the right color

Carsonified basically only uses two colors. The dark brown and a creamy white compliment the vintage poster style and design elements. Sometimes a minimal color palette is all you need.

web design

Need help choosing the right color scheme?

Adobe’s Kuler is a community driven web app that lets your browse color palettes created by others. You can also create your own by using the color wheel, harmony rules, and color sliders. There are also other tools to help you choose the right colors.

web design

4. Appropriate Design Elements

This is where you can have a lot of fun with a design. Your creativity can go wild here with texture, icons, patterns, etc. However, keep in mind that design elements also play a big role in setting the mood of the design. So keep things consistent with the goals of the website and it’s audience. Also keep the design elements consistent with the other three components we’ve already mentioned.

Consistency in action

The designer of Red Velvet Art did an excellent job of utilizing the same hand drawn style throughout the various design elements. Notice how the icons, background pattern and doodles all work together. The consistency also flows through to the typography and retro color scheme.

web design

web design

Attention to detail

The Squarespace blog has a typical blog layout and an overall clean design, but notice the pixel perfect tick marks that line the left and right borders of the content area. It’s such a minimal design element, but it serves it’s purpose in establishing focus on the content while staying consistent with the rest of the design.

web design

web design

Less really is more

This design could have worked well on a white background, but Elliot Jay Stocks loves using texture. To stay consistent with the open feel of the site, he went with a light and subtle grunge texture. It works because it doesn’t take away from the minimalism of the layout and still adds another layer of interest to the design.

web design

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

44 Comments

  1. Bill Jones
    November 24, 2009

    Thanks for breaking this down so clearly. Awesome article!

    Reply
  2. designfollow
    November 24, 2009

    very useful

    thank you

    Reply
  3. Kiliankoe
    November 24, 2009

    Very good article! Huge thanks for sharing it!

    Reply
  4. Brad Magnus
    November 24, 2009

    Great article Henry! Such a practical reminder that flashy doesn’t always equal good.

    Great examples too.

    Reply
    • Henry
      November 24, 2009

      Thanks Brad. I’m glad you found it useful.

      Reply
  5. Design Informer
    November 24, 2009

    Well done! Great points that you mention. You hit the nail on the head with this post.

    Typography, colors, layout, solid elements. These are all you need IMO.

    Reply
  6. commenter
    November 24, 2009

    If I see one more site with “Hi there”, or “Oh hello there! Im a designer!” in big type I’m gonna puke.

    Reply
  7. Pablo
    November 24, 2009

    Great article!

    Reply
  8. Patrick
    November 24, 2009

    Great content. This will help greatly as I look to redesign our companies website.

    Reply
  9. Nic Marson
    November 24, 2009

    Great article, very inspiration. Four simple steps to follow, but very difficult to master.

    Reply
  10. Laneth Sffarlenn
    November 24, 2009

    This is an excellent post, one that will be quite helpful to me in the coming few weeks. Thanks a lot! I’ll be retweeting this!

    Reply
  11. Fazai38
    November 24, 2009

    This is great stuff!!.. It’s so clear on the 4 elements.. Yet so true..

    Thanks for sharing.

    Reply
  12. Todd Wallace
    November 25, 2009

    Great concise statements about and examples of four topics that have volumes written about them. It’s definitely food for thought and a jumping off point for further study.

    Reply
  13. Web Design Maidstone
    November 25, 2009

    Some really good tips and resources, never hurts to be reminded of the key points

    Reply
  14. Design Ideas
    November 25, 2009

    Well writen. Thanks for pleasure!

    Reply
  15. viettel
    November 25, 2009

    Great article, very inspiration. Thanks

    Reply
  16. Sean Delaney
    November 25, 2009

    Some really good inspiration!

    Reply
  17. James
    November 25, 2009

    Great summary of the fundamentals Henry. Really well written and a great starting point for any design.

    Reply
  18. chris
    November 25, 2009

    awesome set of examples. I’ve not heard of Kulur and will definitively check that out! nice work!!

    Reply
  19. GDevelop
    November 25, 2009

    This is a good article with good examples.
    Thanks for compiling these tips.

    Reply
  20. Shane
    November 25, 2009

    Great post, really helpful tips. I Will bare them in mind next time I’m designing.
    thanks.

    Reply
  21. Jannis Gerlinger
    November 26, 2009

    Less is more – this is the right thing you have to think about it!

    Reply
  22. juday
    November 26, 2009

    nice article!very simple but full of thoughts. yes!color scheme is very important. the right combination of color. it does not have to be over designed!

    Reply
  23. Jordan Koschei
    November 26, 2009

    I appreciated seeing “Sometimes little color is the right color.” I’ve gone with pure black-and-white for my site, and wasn’t sure for awhile if it was too minimalist. Good to have some confirmation!

    Reply
  24. Rosti The Snowman
    November 27, 2009

    Great Post! I think its time for me to change my portfolio, as atm I am a guilty of the ‘Hi There’ tag line.

    Reply
  25. Matthew Mace
    November 27, 2009

    In correspondence to Jannis Gerlinger’s comment, I don’t whole heartedly agree with the theory that less is more, if your designing corporate sites then yes i would agree. I’m a firm believer that websites should be unique and communicate “This is who I am and this is what I do”

    When designing a website I believe you should think more about the end users response in operating the website. Think about what would impress you if you was a memeber of the public, a website should be a journey of exploration with a wow factor, if you have the wow factor more people with talk about and pass the word about.

    Reply
  26. Simone
    November 27, 2009

    Great article! Simple and to the point. A real inspiration.

    Reply
  27. Opal
    November 29, 2009

    “All aspects of a great design must compliment each other”

    That’s “complement each other”.

    Opal, a pedant who believes that typography isn’t all there is to saying something.

    Reply
    • Alex Kabomu Mkanyi
      June 6, 2012

      Awesome article especially for starters like me. Good job Henry.

      Reply
  28. wien
    December 1, 2009

    nice article, thanks

    Reply
  29. Ted Rex
    December 2, 2009

    So simple, and yet so difficult to master…

    I made this page on of my three links for the day on my daily design blog:
    http://designthoughtfortheday.blogspot.com/

    Ted

    Reply
  30. Thibault
    December 8, 2009

    Great article. Thanks for sharing.

    Reply
  31. Martin LeBlanc
    December 11, 2009

    Pretty webdesign does not equal good webdesign.

    Webdesign should be visual appealing, but the main purpose is to to effectively communicate the clients offers to the visitor.
    If it doesn’t solve that primary purpose any nice font or color scheme doesn’t make the design better.

    Reply
  32. Michael Plant
    December 11, 2009

    Content is probably the most important component of all. You can have the crappiest design on the whole planet, but with good content it will still be read. What happened to content?

    Reply
  33. Nicky McCatty
    December 11, 2009

    The following paragraph, from section 4 of this article, has two instances of “it’s,” one correct and one incorrect. When IT apostrophe S describe’s [sic] a contraction for IT IS, use an apostrophe. It’s correct in this situation.

    When you are talking about a possessive, it’s *not* correct to use an apostrophe. Its apostrophe dissappears when you’re saying somethin belongs to the IT of the sentence.

    * Right
    ** Wrong
    The Squarespace blog has a typical blog layout and an overall clean design, but notice the pixel perfect tick marks that line the left and right borders of the content area. *It’s such a minimal design element, but it serves **it’s purpose in establishing focus on the content while staying consistent with the rest of the design.

    Reply
  34. Adam Hermsdorfer
    January 4, 2010

    Can’t argue with those characteristics and examples. Very nice article. If you were to change the title to “5 key components of a great web site”, what would you add? I think calls to action would fill the 5th spot. Thoughts?

    Reply
  35. Siddhartha Oza
    January 12, 2010

    Thank you for this wonderful article and guide. Would really appreciate expansion of these 4 categories into separate articles. I can see the “Whitespace” one is up already, so maybe I will see them soon…

    Reply
  36. Anna Conroy
    January 15, 2010

    Great article. It’s unbelievably challenging to find examples of great sites or even good site design principles out there today. I just went through the exercise. Thanks for this.

    Reply
  37. Xplore Studio
    June 21, 2010

    Thank you for pointing out these components! So often when we are busy meeting deadlines we often forget the essence of great web and graphic design. Thanks fr putting it in perspective again!

    Reply
  38. Ben Zachary
    June 23, 2010

    All very true. Usability is key too!

    Reply
  39. alexDesign
    September 14, 2010

    thanks 4 this important information!
    the great article of the week!

    Reply
  40. CSS Training Online
    September 22, 2010

    Very insightful articles Henry. It really touches the very essentials of great web design. Wireframing is very important both during the planning and also serves as a guide for the CSS layout.

    Reply
  41. web design hull
    December 19, 2010

    Great article, you won’t go far wrong if you master these main points.

    Reply
  42. baidu456
    September 8, 2011

    Thank You for this post. Just found it on google and i have to say that i;m really really surprised Thanks again and cheers dude!

    Reply

Leave a Reply