The 5 basic principles of web design

5 basic principles of web design 5 basic principles of web design

Despite what many think, there is more to effective web design than just moving stuff around and experimenting until it looks nice. There are rules, conventions and principles that need to be adhered to.

When we put together a design for a new site every element on the page is deliberately considered. Every button, every graphic and all the text is placed and coloured with deliberate consideration. Despite what many think, there is more to effective web design than just moving stuff around and experimenting until it looks nice. There are rules, conventions and principles that need to be adhered to.  In this article we are going to walk through a site I designed recently and discuss how each of the 5 basic priniciples applies to this particular design

Spirit DoctorsI chose Spirit Doctors because it is a somewhat alternative design. It would be easy to show a highly structured corporate design and illustrate the principles on a site where they are actually quite obvious. Using this design, hopefully you'll be able to see how these core principles apply to virtually any web site.

Colour

The appropriate use of color is important and probably one of the hardest considerations at the beginning of the design process. Colour invokes emotions and often the same colour can invoke different emotions when used in different contexts. Hilary is a highly spiritual person. It's important that the site invokes that emotion on first impression.

The first decision was to completely move away from the corporate black on white to a darker design. The challenge when doing this is you run the risk of looking either morbid or emo. We didn't want to go too dark because that's the opposite to Hilary's message. We designed the background of the site to look like old paper or parchment with a soft brown instead of white. There's a lot of subtle use of lighting and shadow (that's a subject that could fill another article).

Most of Hilary's market are women so we chose soft purples which are feminine without being girly like pink would have been.

Contrast

Contrast makes things readable, defines areas of the page and separates elements from each other.

Maintaining contrast when moving to a darker design can be a challenge. If we go too dark with the background we need to use white text. This can work really well on the right site. It's generally best for high impact sites or sites that need to make their images or products pop out of the page. Dark designs work really well for non-corporate design portfolios, rock bands, photographers, etc. That's not the image for Spirit Doctors but neither is white.

The background we designed for Spirit Doctors is in between light and dark so we needed to increase the contrast of the text against the background. We did this by adding lighting to the design. Notice it looks like a light is being shined down upon the page. The menu bar casts a shadow which separates it from the content area below and the page gets lighter in the middle to increase the contrast and readability of the text.

By using lighting in this way, it meant we could add a bevel and lighter top edge to the menu bar to contrast it against the image in the header. This nicely separates the header from the menu bar and the menu bar from the content below.

contrast

Notice the effective use of color, light and shadow to create contrast between the elements

Consistency

The quickest way to lose credibility and make your site look like a cheap, home made hack job is to use fonts, colours and spacing inconsistently. We see many clients who think that in order to get a message across they need to use 24pt text in bold and italics and color it red. Then use blue and orange further down the page in a different font. Aaargh. No! And please never, ever use Comic Sans. This isn't high school.

See how bad that looks. It does nothing for the professionalism of your website.

All the spacing, fonts, colors, font-sizes and headings should be consistent. Notice all the headings in the screenshot below are the same font and size. The intro text is larger and is consist on every page. The body copy is always the same font, size and color and the spacing between each of the elements is consistent.

spacing

Consistent spacing between all the elements and consistent use of fonts between headings,
subheadings and body copy.

Content

The phrase "Content is King" has been used around the web for years. Ever since Google started it's domination of search traffic website owners have employed a huge array of methods to improve rankings. Many so-called black hat methods can end up getting you banned and removed from Google's rankings completely. Google has always adviced us to "focus on developing high-quality content rather than trying to optimize for any particular Google algorithm". That's why any good web design should be focused on delivery of the content.

Content should always be put together before the design. The amount of text on each page, image sizes, the menu structure, etc all need to be taken into account before committing hours to a new design. Will you need to incorporate video or facebook streams? What about a Twitter feed or follow button?

All enthusiastic web designers have made the mistake of diving into a new design project prematurely only to find out their beautiful horizontal menu doesn't have enough space to fit all the items into. Or space hasn't been allocated for advertising banners.

Content should be written specifically for the web. People don't read articles on the web in the same way they hard copy material. Web content should have smaller sentences and make good use of subheadings. It needs to be scannable.

Notice in the Spirit Doctors example, the use of horizontal rules and subheadings to break up the articles.

Alignment

As a general rule of thumb, everything on a page should line up with something else. This doesn't just apply to web design, it's relevant to print design as well. It helps readers to move across the page and also keep focus as the page is scrolled down. 


 

We could go on over many pages covering other web design principles like typography, the use of ratios, usability and user behaviour. What we have here are the basic concepts of designing for the web. For further reading, I can thoroughly recommend The Principles of Beautiful Web Design (not an affiliate link) published by SitePoint. It's on it's second edition now but still relevant to today's web.

john-pitchers-avatar smAbout John Pitchers

John Pitchers is co-founder and lead developer at Joomstore where his primary role is the design and development of Joomla websites. He is also the developer of the FocalPoint maps extension for Joomla. John has been building CMS based web sites since 2004, originally working with Mambo before it forked into Joomla. When not writing PHP, Javascript or CSS you'll find John carving up the hills around Baldivis on his longboard (long before Walter Mitty made it famous).

Find out more about John on his About.me page and . Follow John on Twitter.

 

These posts may interest you...

Leave a comment