Recent Updates

 
Speed & Optimisation25 Nov 2012
Usability11 Apr 2012
Planning11 Apr 2012
About Me / Contact Me11 Apr 2012
Home11 Apr 2012
 
Last updated: February 13th, 2012  
Viewed times 

Design: what makes a great web design?

A lot of factors play a part in effective web design - usability, content and the overall visuals. These points are discussed in other pages of this website, but for now, I'd like to talk about "design" in an aesthetic sense - this includes text as well as graphics, since a successful design will ensure that images and information gel together. It's a fickle world but visitors will judge you and what you offer by what they see on your website and if your website doesn't look appealing then neither will you. So, what can you do to make your website design look good? 

Great, or "high-quality" web design is difficult for any one person to quantify as we all have different ideas about what looks attractive. I personally favour a brighter colour palette but I keep my liking for 80s neons in check when dealing with the web.
Personal preferences aside, "high-quality" is often easier to achieve in web design when applying the five basic principles of art;

  1. Balance: The "weight" of different objects (light and dark) and their placement on the page.
  2. Proportion: The size of an element in relation to other elements.
  3. Rhythm: The way certain traits add consistency of design. Also known as "repetition".
  4. Emphasis: The point of focus or interruption. Eye-catching, as opposed to toned-down.
  5. Unity: The sense that all parts (despite size or focus) are working together to achieve harmony.

Basic ingredients: a recipe to success

Successful websites tend to use four basic ingredients in their design;

  1. Header: Usually houses the logo or banner, snappy tag line and maybe basic contact details (address/phone number).
  2. Navigation: Horizontally or vertically, above or below the header - more commonly on the left but can be on the right.
  3. Main body (content): The information that gives your website meaning and purpose - why people visit and keep coming back.
  4. Footer: Usually contains links to the main pages of your website, copyright details, brief disclaimer, and possibly affiliate links.

Concentrate on arranging your important information into these four zones while keeping a fuss-free, clear and neat layout.

While you're doing this, also try to remember that although the purpose of a website is to convey information, you shouldn't overload your design with too much information. Too much of one thing can be overwhelming so try out various combinations to balance images and colour. Break text and resources down into manageable chunks, under descriptive headings, and use a bit of white space to create distance. Space can actually be a good thing.

Use an attractive colour scheme

Websites are judged on looks and, before any content is absorbed my a visitor, the colour scheme will be the first thing to impact on their retinas. It is therefore essential that the unspoken message delieverd by your website colour scheme is pleasant and relevant. 

Some web developers have a horrible time choosing colours that looks good together, resulting in mismatched, garish websites that leave visitors feeling sick to their stomachs. Thankfully, there are online colour scheme pickers that help you select appealing combinations, or generate random ones, that you can employ in your designs;

It's difficult to say exactly how many colours you'll need but typically, you should look for a background colour, two text colours and an accent colour for interest.

Create focus: Draw - Direct - Deliver

A web page without a clear focal point can easily stump a visitor. Visitors have a hard enough time working out what they should be looking at when they visit a new website and you only have a few short seconds to draw their gaze, direct them to important information and deliver a message. For this reason, it is often not a picture of a product that becomes the focal point, but the "call to action" itself; "Buy Now!", "Sign-up for a FREE trial!" and "Add to Basket" are all common examples of elements that a developer will emphasise - these being an encouraging direction that a visitor should (ideally) take. It's all about mind control!

Creating a focal point can be done by;

  • Making something bigger: Bigger screams "notice me!" and disproportionate scale between related object cries "what's going on there?" - either way that focal element takes the attention away from its smaller counterparts.
  • Creating higher contrast with shape and colour: Colours that are greatly different from those of surrounding elements are naturally eye-catching. Too much colour can be distracting though so just use enough to separate from surrounding elements.
  • Placing something somewhere with lots of impact: Whether it's front-middle, or in complete isolation, an element can draw the eye if it stands out or is highlighted as being different in some way.

Attention to detail

An integral part of high-quality web design is attention to detail, both in the graphics and the text. The best websites are planned down to the finest snippet; the distance between paragraphs, whether a list is indented or has custom bullets, or at what size and font the headings should be presented at. Everything is thought out and applied with consistency. Don't always settle for the first design - try out a few different things until everything is "just so". Lesser developers might say "why bother?", but looking after the finer details of a design will reward you with a professional website that instills confidence in your visitors.

Modern web design practices: CSS over Tables

Table-based web layouts were once a convenient way to structure a website design. Thankfully, this is no longer the case, and with cascading styles sheet (CSS) usage on the increase, web developers are saying "goodbye" to slow loads and bloated markup and "hello" to faster views and limitless design possibilities. Emphasis on design possibilities here folks - you can still make good looking websites with tables, but with CSS and div combos you have the opportunity to make fantastic looking websites, also with the added benefits listed below;

  1. CSS layouts use less markup: All styling and formatting can be removed from a web page and stored in an external CSS file, which leads to smaller page sizes. Additionally, eliminating tables also means eliminating those extra markup tags - table, tbody, th, tr and td are simply replaced with one div, thus reducing the page size yet again!
     
  2. CSS layouts load faster: An external stylesheet can be cached by a web browser, meaning that it is downloaded once and then stored in reserve to use on the next page. Used in conjunction with divs, CSS leads to speedy and progressive page views. Tables, on the otherhand, need to download in full before a web browser can display the contents, so on slower internet connections, there is a significant delay before anything pops onto the screen.
     
  3. CSS offers more design potential: CSS design isn't restricted in the same way that rigid, grid-based table layouts are. Why limit your design to something that looks at home in an Excel spreasheet? Open yourself to a world of creativity!
     
  4. CSS layouts are easier to update: Changing the look of your website is easier and faster with CSS. Since CSS can be stored in one, site-wide file, it's easier to locate elements that need updating and that change instantly filters down to every page of your website. If you've used a table-based layout, you'll need to update every page of your website to deploy a global change.
     
  5. CSS saves you money (and earns you money): Smaller page sizes means less bandwidth consumption (saves on web-hosting fees). It also means more page views; Visitors don't get impatient and leave » they browse more » they buy more!
     
  6. CSS increases your search engine visibility: Smaller pages with simpler, less-bloated markup, are easier for web-spiders to index so they zip around your website and give good marks for clear content separation, etc. Consider all those extra visitor-clicks too and your page rank gets another well-deserved boost!
     
  7. CSS can give you the edge in the job market: If you show a prospective employer that you can use CSS effectively, it proves that you can offer clients modern design solutions that will in turn give them the market edge. Employer looks good. Developer looks good. Client looks good. Everyone's happy! 

So, keep tables for statistical data, and use CSS for your web design. And if your really must use tables somewhere in your web layout, try to keep them to an absolute minimum - no tables inside tables, inside tables, like a stack of Russian dolls - nested tables really do get ugly. 

Where to next?...

Making a website that looks great means nothing if usability doesn't come up to par. If a website doesn't work well, or doesn't work as expected, your visitors will leave in overwhelming frustration - and that will leave you frustrated at them. Keep frustration for both parties to a minimum by making sure that your website is, above all else, user-friendly and easy-to-use.


Other pages in this category