Principles of good web design
Posted on 8 Feb 2013 at 10:30
Good web design doesn't come easy, but these basic rules and some experimentation can work wonders
WordPress and Joomla can take much of the hard work out of creating a website, but whether you’re using a content management system, a more basic template or building your site from scratch, you need to understand the basics of design if you want to make a good impression.
Design students will have heard of the “Golden Ratio”. This number (1.61803399 or thereabouts) describes how the size of the elements of a building, a work of art or, in our case, a web page should relate to each other to give a pleasing effect.
If I decide the area of my web page that will be occupied by my copy (text) is going to be the biggest – as it usually should be – then I should make it 1.62 times wider than the smaller column containing my navigation and logo.
There are various theories to support the Golden Ratio, but why not just get on and use it? In fact, I recommend an even simpler approach, which in turn will be familiar to photographers: the Rule of Thirds.
If you have one column 1.62 times wider than the other, the smaller column occupies roughly one-third of the overall width and the bigger one two-thirds. So you can get almost exactly the same effect by dividing your page into three.
The BBC's previous website design, above, is a perfect example of the Rule of Thirds. Each page is divided into three vertical columns, with some elements spanning two columns to give an approximate Golden Ratio of two-thirds to one-third.
Whichever way you achieve it, balance is one of the key aspects of design that separates the professional site from the amateur.
One of the other defining elements of a professional design is the active use of white space. White space is any area that doesn’t contain text or graphics. It doesn’t have to be white, just empty.
Amateurs cram their websites full of text and images, all jostling together. Designers use white space to separate elements and, in designer-speak, “give them room to breathe”.
Take a look at just about any professional website, even the notoriously information-rich Amazon, and you’ll see how white space is used. It makes a page look more pleasing and, if you want a more mercenary justification, helps draw the user’s eye to the parts you want them to pay attention to.
An immediate way to add white space to a typical web page is to increase the line height to at least 1.5 times its standard setting (150%); I prefer a setting of 175%.
The key to coming up with a colour scheme is to begin with a base colour. If you have a logo, the base colour can be taken from the dominant colour in it.
Bear in mind that each colour invokes a different emotion in the user, so take care before making your final choice
If you need inspiration, I suggest browsing the web for colours you like. Bear in mind that each colour invokes a different emotion in the user, so take care before making your final choice.
You can find out more about this at Color Wheel Pro. If you aim to sell globally, you may need to consider the cultural implications of your colours.
Once you’ve picked a base colour, find out its colour value. This is usually given in hexadecimal notation, where the numbers 0 to 9 have their usual meaning and the letters “a” to “f” then take you up to 15.
You don’t need to worry about this as long as you remember that the first two figures represent red, the second pair green, and the final pair blue. The higher the number (00 being the lowest, ff the highest and 88 somewhere in between), the more red, green or blue is in the final colour.
By mixing these, you can create any colour visible to the human eye; in fact, that’s exactly how your computer screen displays its range of colours.
On the next page, we'll investigate colour schemes and fonts.
For more details about purchasing this feature and/or images for editorial usage, please contact Jasmine Samra on email@example.com
- Windows 10 release date, features and how to get the Technical Preview
- Google announces the Nexus 6, Nexus 9 and the arrival of Android Lollipop
- Lenovo and Ashton Kutcher launch Yoga Tablet 2 Pro, Yoga Tablet 2 and Yoga 3 Pro
- Lenovo Yoga event live stream: watch Ashton Kutcher's tablet launch live
- HTC shows off Desire Eye selfie phone and periscope-like camera
- Xim: the slideshow app to get excited about
- Adobe has more apps for iOS, but none for Android
- How to download and install Windows 10 Technical Preview
- iPhone 6 Plus "less likely to bend than HTC One"
- iPhone 6 Plus: Apple's had nine complaints over "bendgate"
- Google Glass: mugger bait, pub problem and other lessons learned from two dangerous weeks
- Twitter, please don't fiddle with my feed
- How Satya Nadella can get some pay-raise karma
- Windows 10: a step back to go forward
- Michael Dell: Cloud infrastructure is the roads, bridges and highways of the 21st century
- How to check your identity hasn’t been sold to the hackers
- Tim Cook: this is how much TV has changed since the 70s
- Westminster wins the .London battle
- 20 years of PC Pro: from deep pan pizza to virtualisation
- Five reasons why the Apple Watch leaves me cold