Sep 21 2009

Simplicity in Good Web Design : Advantages & How -to

Advertisement

Simplicity in website design doesn’t necessarily equate with a minimalist design aesthetic. Simple sites just remove all unnecessary elements from the design, content, and code. While minimalist sites generally fit this criteria, there are plenty of sites that wouldn’t, by any stretch of the imagination, be considered “minimalist” that still fit the definition of simple.

Below is a rundown of some of the benefits of simplified website designs, as well as some easy techniques for simplifying your own web design process.

Advantages of Simple Websites

1. Easier to Navigate

Simple websites don’t have extraneous information. This helps navigation in two wyas: generally, sites have fewer pages and sections; and the design of the site is usually less cluttered, making it easier to find navigation elements.

Simplifying your website designs can be a great solution to navigation usability problems. Here are some tips for simplifying your navigation:

  • Use only one main navigation menu.
  • Make sure navigation is consistent throughout the site.
  • Use subnavigation for individual sections to simplify your main navigation.
  • Don’t use dropdowns for navigation, which can easily hide a cluttered menu. Instead, force yourself to incorporate the navigation elements into the site’s design. Generally, this will result in cleaner navigation.

2. Simple Designs Load Faster

Simple designs generally result in smaller file sizes. And smaller files load faster. Also, if you keep your code simple and streamlined, you’re less likely to be calling multiple stylesheets, a ton of JavaScript files, or lots of other content that increases the number of HTTP requests your site makes. Faster loading and faster responding websites improve user experience.

3. Content is More “Scannable”

When there aren’t tons of complicated decorative elements in your site’s design, your content takes center stage. Content that is put to the forefront of a website is easier to scan by visitors.

One study showed that 79% of test users scanned any new page they visited, while only 16% read the page word-for-word. It’s better to work with these scanning visitors than to try to fight them. By putting your content front-and-center, you make it easier for visitors to quickly scan what’s there. These visitors will perceive your site as more user-friendly and are more likely to return in the future.

4. Simple Sites are Quicker to Design and Build

If your site’s design is simple, the code will likely follow suit. Designing a site with a simple layout, one or two page templates, and simple typography is a lot quicker than designing a site with eight sections (each with different page templates), complex typography, and a background that needs complicated slicing and coding.

Just beware of creating a site that looks simple but is actually very complex. Aim to keep your code as bare-bones as possible. Sometimes just tweaking a margin or padding on a certain element or moving something around a little bit can make it possible to greatly simplify your site’s code without making any noticeable impact on the frontend design.

5. Simple Code is Easier to Debug

If your code is simplified, it’s easier to find bugs. If you have a stylesheet with 300 different properties, it’s going to take you a lot longer to figure out why something isn’t working than if you have 30.

Look for ways to simplify your code right from the outset. Things like combining CSS properties and definitions can make your stylesheets a whole lot shorter. Combining stylesheets or JavaScript files can also greatly simplify your overall code. And take advantage of automated programs that can strip out unnecessary markup from your stylesheets, scripts, and other files before you upload them (just make sure you double-check that everything still works as intended).

6. Smaller File Sizes Mean Less Server Space

It’s already been mentioned that simple sites generally have smaller file sizes than complex ones. This means that your sites will take up less server space and bandwidth than other sites. While this might not be a big deal for a site with only a few thousand visitors a month or with limited content, for site with more pages and more visitors, this can actually add up to a huge savings. Consider that some minimalist homepages with few images might be less than 100kb, while more complicated sites can sometimes approach 1mb. That means that you could have ten times as much traffic with the simple site for the same cost as the more complicated one. If you have a lot of content or a lot of visitors, it makes sense to simplify your site and reduce your file sizes.

How to Simplify Your Websites

Remove unnecessary decorative elements

Many initial website designs incorporate a lot of decorative elements that really serve no purpose. While it’s not necessary to remove every decorative element from your designs, removing at least some of them can often make your site appear cleaner and more polished.

Elements that might be able to be removed or simplified include image borders, drop shadows, extra images in your header or footer, and extra illustrative images on individual pages (oftentimes one or two images is plenty).

Ask yourself: “Is this element really important?”

This is somewhat of the “golden question” when creating simple websites. On every element, whether design, code, or content, you should be asking yourself if it’s really necessary.

Look at what elements on your site could be combined, too. Are there pages that could be combined into one? Can you combine styles to simplify your stylesheets? There are almost certainly elements within your design and code that can be combined to simplify things.

Make sure the backend of your site is as simple as the frontend

So many designers only focus on the frontend of their designs and pay little attention to their code. Some simple-looking sites are a mess in the backend. Make sure that the markup for your site is as simple as you can make it. This could be limiting the number of styles in your stylesheets or the number of JavaScript effects you use. It also means writing good, standards-compliant markup.

This also means you should choose an appropriate CMS for your site’s backbone. Some CMSs are overly complicated and, while some sites benefit from their complexity, they can easily be overkill for a lot of sites. Choose a CMS that offers only the functions you need or allows you to turn functionality on and off as needed.

Excellent Examples of Simple Website Designs

Below are a dozen examples of great, simple website designs to get you thinking about how to simplify your own designs.

author

Author: Cameron Chapman

Cameron Chapman is a writer, blogger, copyeditor, and social media addict. She’s been designing for more than six years and writing her whole life. If you’d like to connect with her, you can follow her on Twitter or at her Personal Website.

About the Author

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Homepage

Comments and Discussions
  • dadida, 21 September 2009

    thanks for the list, i was looking for an interesting webdesign since months and finally found it on your website thanks a lot

    • Television Spy, 21 September 2009

      Not all sites should be simplistic, it really depends. Informational sites that are designed too simple will give the appearance of being empty and the whitespace won’t be appreciated.

      Take a look at wikipedia and imagine if it had a web 2.0 type look, bright flashy colors and lots of whitespace and larger text etc..

      • Mastercafe, 23 September 2009

        Really all depend of the products, services and final objective of the web.
        So actually there are many sites overflow of images, text and effects, and all for nothing to do. Simply check how much traffic have and how much go out in less than 20seconds.

      • Armen, 23 September 2009

        It’s hard to get the balance, but I think you’re right. Simplifying the design of a website often reduces the bounce rate.

        I wrote about Hick’s Law once, and I often bare it in mind when designing.

        Excellent article by the way, Cameron.

  • choen, 21 September 2009

    I liked the simple design

  • erik, 21 September 2009

    I’m sorry but there is at least one point that isn’t true.

    “Simple Sites are Quicker to Design”

    I takes a lot of work to make something look simple

    • Design Hitman, 22 September 2009

      Agreed. They are rarely easier to design OR develop.

      Think about what design is: it makes information easier and more pleasant to get through. And it takes a lot of work. Why should web design be any different?

      And they don’t necessarily load faster either. Large images are usually the biggest cause of slow loads, and simpler sites often have large images.

      The gem in here is “[make sure] Content is More “Scannable”.

  • SE7EN, 21 September 2009

    Agree with #4 Simple Sites are Quicker to Design and Build
    I can’t build complex web site.

  • AtiKuSDesign, 21 September 2009

    The simple websites are always the best in my opinion. It takes a lot of hard work to design a site to look clean and minimal and it’s worth every second.

    Thanks for this post

  • bababah, 21 September 2009

    Simple websites are Quicker to Design.
    Never heard such a stupid assessment. Like said Erik, “I(t) takes a lot of work to make something look simple”. And a lot of experience to make it simple and usable+useful, and a lot of genius to make it simple, usable and lasting.

  • Ben Hunt, 21 September 2009

    Great post. I wrote a whole book on this subject (called Save the Pixel – the Art of Simple Web Design, soon out in 2nd ed). One of the ideas in there is “Success is a function of Attention divided by Stuff”, which suggests that because Visitor Attention is a (fairly) finite quantity, the best way to increase the Success of a web page is to reduce the amount of Stuff!

  • joyoge bookmark, 21 September 2009

    looks realy nice, i like simply themes. thanks for share..

  • Anne, 21 September 2009

    I agree with about 98% of this post (great examples as well). I don’t agree that one should not use drop-down navigation – it really depends on the type of site you’re designing and developing. The problem is lack of proper planning and not understanding good user-friendly site layout techniques that creates a ‘confusing’ navigation system, it is not drop-down menus that are the problem.

    Every client is different and one should avoid “cookie cutting” simply for the sake of ease and speed. Delivering a well designed, uncluttered site that meets all the criteria of a ‘good web design’, AND which meets the client’s objectives, requires much planning and a great deal of experience, skill and time. Simple sites are not necessarily easier to design than graphic intensive sites.

    What makes design easier is developing a good work-flow, a good system for design. It is not about the design itself – it is about how you work to achieve that design.

    • Webjohn01, 03 November 2009

      Hello Anne!

      I really impressed with your own perspective about web design. I agree in what you are trying to say that all depends on the clients needs and how you simplify your work as a desiner/developer.

      Keep up the good work.

      More thanks!

  • Ted Goas, 21 September 2009

    Great roundup! I see a lot of showcases and galleries of minimal designs, but it’s nice that you’ve listed some of the characteristics (like scannability and file sizes).

    A lot of these also have great typography!

  • Jonathan Bennett, 22 September 2009

    Nice article. I’m glad so many people see the importance of simplicity in web design. I used to tell some friends years ago that I preferred many web site designs from the 1990s, just because they were more simple and to the point.

  • Wagner Rosati, 22 September 2009

    Very nice! Do u guys think my website follow these steps about “simplicity in good web design” ?

  • Ryan, 22 September 2009

    Great roundup of designs. Thanks.

  • Amber Weinberg, 22 September 2009

    If there’s one big gripe I have with mainstream web design, is that it tends to overdue effects, styles, etc. We all know the clients that ask to fit everything in every tiny empty space. :)

  • Rosodigital, 22 September 2009

    Great article, I like how clean the layouts are. very inspirational.. I just hope my clients can be more willing to grasp such concepts.

  • Jeez Tech, 22 September 2009

    Excellent article. Designing simple and usable sites is something everyone should look into.
    Great post. Keep the good work up :)

  • Bim, 22 September 2009

    Superb article. The age old question, is my website simple and effective enough?

  • Redstage Magento, 22 September 2009

    I appreciate the selection of websites. Nice job!

  • Busted Keys, 22 September 2009

    simplicity in sites is one that has a clear purpose of intent, in the context of display, and is therefore practical.

    i think my wordpress theme fits the bill. what do you think?

  • Zups, 22 September 2009

    I really like a simple design. Thanks for share

  • Shawn, 22 September 2009

    Simple web design? Yeah we used to do it before everyone decided lets’ bloat up sites with flash and or useless scripts. You know back when people actually wrote html/css for site layouts not just running some cms/blog script back when webmaster/designer meant something.

  • Callum Chapman, 22 September 2009

    Great article and very nice collection of simplistic web designs – one of my favourite styles.

  • pasxal, 22 September 2009

    nice list! simplicity is so complicated to create…good inspiration

  • Manuel, 22 September 2009

    Nice Article! Really great. I love simplicity in Web Design.
    But I just disagree with one point. I think you can use dropdowns for navigation if the dropdowns have an easy behavior. United Nude is a good example for using dropdowns with a simple web design. It seems that dropdowns are the best solution for this site and they fit well.

  • Ivan Miši?, 22 September 2009

    Nice article and great roundup of designs. THX

  • bilelz, 22 September 2009

    simple is The better way :)

  • Eric, 22 September 2009

    The simpler the look, the more complex the design process.
    Even if not 100% true, this is how I see it.
    I love clean and simple design, and it can be quite a challenge to be able to come to the desired result.
    Nice article, and great resources.

  • Ahmed, 22 September 2009

    thanks for the nice Article

  • Web 2.0, 22 September 2009

    I’m also trying to make my sites more simple, thanks for the article, it was useful.

  • ODWGOOG, 22 September 2009

    thanks for including my site in this list, you make my day

  • Siarhei, 22 September 2009

    Hello,

    Cameron, thank you for your posts, I’m looking forward to next ones, there’s no as useful as your ones.

  • Damian Herrington, 23 September 2009

    Great article!
    While I think clean and simple is a way forward and that is shown in the excellent collection above, you can’t beat a fantastic looking website that blows you away either in flash or standard html/css. Ok so they may take a little longer to load but from an inspirational point of view their fantastic!

  • Richard Teahon, 23 September 2009

    I think the reason sites are becoming cluttered and complicated is the desire by companies to want everything in it. Very often, most of the elements a site contains are never utilized, by streamlining like the article points out, can make the site more much more appealing. Nice post.

  • Banhawi, 23 September 2009

    Nice post , really like the sites collection you included . Thanks

  • Chris, 23 September 2009

    I like your designs. Good job! I actually use another software, Artisteer to do my web designs for my clients. It can actually create nice templates if I ever run out of designs.. haha.. like to introduce this software to all web designers so that we can benefit tgt.. cheers

  • studioCs, 23 September 2009

    Great! It is not only that the web design is simple and clean; the messages that you delivered in this post are also clean and straight to the point.

  • Holger Koenemann, 23 September 2009

    Hey, thanks for featuring my site! And a dam good article by the way…

  • christian reyes, 23 September 2009

    i really like this article very much! well i hope i did the right thing fixing my own layout.

  • Kayla, 24 September 2009

    I lean towards simplistic design myself, and I especially love the extra benefits that they’re quick to create, easy to debug, etc!

  • Shane, 24 September 2009

    hi.
    Nice article, i agree that simple designs are the way to go. i think that the question “is this element really important” is one of the main issues
    when creating a simple design.

    thanks for sharing these great examples of simple web designs the y really show how effective they can be.

  • Heather Kyle, 24 September 2009

    Here are some additional tips for keeping your site simple and easier to read …

    Keep the same grid on every page

    Keep the same navigation placement on each page

    Make sure to each page is labeled with the section name and the headline. For example, instead of “Rotomolding Machines” use “Products | Used Equipment | Rotomolding Machines” so users can keep track of where they are in the site.

    Keep page lengths short and to the point. Use bulleted lists. This will quickly guide users to pertinent information.

  • Charlie, 24 September 2009

    Really great article. Thanks! I believe that simplicity is so important in modern web design… so much so, I named my business after it! Keep up the good work.

  • Web Designing, 25 September 2009

    Nice article, i agree that simple designs are the way to go. i think that the question “is this element really important” is one of the main issues
    when creating a simple design.

  • kathryn barlow, 29 September 2009

    Nice list! Always good to be reminded of the smaller details that can really make a website go from good to great.

  • Linux2.6.27, 02 October 2009

    This article is great.
    I am looking for a perfect simple wordpress theme which can handle large number of pages and posts ?

    Any suggestions ?

  • Zookii, 18 October 2009

    Nice article … will help me on new web projects.

  • Andy, 22 October 2009

    Why do a lot of simlicity-sites look like wordpress templae? huh.

  • Ludovic, 11 November 2009

    oh my my, such a beautiful collection of great web designs!

  • Russell, 17 November 2009

    Clean and professional looking website always get proper
    attention, there are some themes they don’t require very clean look but a combination is always good, thanks for bringing this topic here.

  • Ant, 07 June 2010

    People overdesigning sites, because they fear it will be boring for visitors to read it. Thought it’s not true.

    Clients fear to pay designers for «empty» space, so designers «filling holes with stuff».

  • anthony, 21 November 2010

    Ocaam’s razor is one of the key principles that drive my site and has always guided my thought process throughout my work.

    Simple designs not only look better, but they work better too. Most people struggle with simplicity because they can’t prioritize what’s important and what’s not important. To do this, you have to be able to see black and white.

  • Hyo Cosentino, 18 January 2011

    very good post, i definitely love this website, carry on it

  • Wiyono, 08 February 2011

    Really nice..
    Thank you for sharing…

    Regard
    Wiyono
    Indonesia

  • Felipe, 26 April 2011

    Thank you! Really well written article not only explaining why, but how.

  • 12HourWesite.com, 04 January 2012

    you’re truly a just right webmaster. The site loading pace is incredible. It seems that you are doing any distinctive trick. Moreover, The contents are masterwork. you’ve performed a wonderful process in this matter!

  • Raja Sekar, 12 May 2012

    What makes design easier is developing a good work-flow, a good system for design. It is not about the design itself – it is about how you work to achieve that design.if we have make anything some design means where we have to edit that item.

  • SEMfuze, 20 June 2013

    Responsive web design = faster website + better user experience.

search form
 
image description image description