Principles of good web design
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.
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 , and you’ll see how white space is used. It makes a page look more pleasing and, if you want a more 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, We 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. One way of representing the full gamut of colours is in the form of a colour wheel. Whether two colours work together can be seen from their positions: opposite colours are “complementary”, so they create maximum contrast and balance when used together, while colours close to each other are “analogous”, giving a more laid-back feel. While these are called “rules”, they’re just a guide. If you’re a non-designer, We suggest you base your design on a “monochromatic” or “shades” colour scheme, then add a complementary colour to brighten it up.
One rule of thumb is that the more photographs (or other colourful images) you use, the fewer colours you should have in your design. Most sites use white for their main content area and black for their body text, so the colours you’ve chosen will most often be used for the space outside the content area (the canvas or background) and for graphical elements. Some sites swap this and use black for content with white text and that’s fine: the key is to get legible contrast between the content and the background.
Don’t use Comic Sans. Ever. No, really. Back when desktop publishing began, suddenly the local vicar had access to, oh, tens of fonts, and felt the need to use them all. On every page. Far too many websites adopt the same approach and end up as an amateurish mess. Things can only get worse if you choose fonts such as Comic Sans that aren’t designed according to any conventional principles, and therefore convey no sense of authority or professionalism and, in large amounts, are painful to read.
Limit the number of fonts you use. We suggest between no more than three per page. You can get away with one, but most well-designed sites use two or three. Generally speaking, you’ll use one font for all your headings and one for your body copy (paragraphs). Any additional fonts will be for specific purposes.
Fonts – or, strictly speaking, the typefaces that they embody – come in three kinds: serif, sans serif and decorative. Decorative fonts should be used very sparingly, if at all.