4 Key Principles of Web Design

Building a successful website always requires you to get the basics right in the first instance. Everyone will have a different opinion of your site, and sometimes those opinions could be polar opposites from one another. However, if your site has the fundamentals right, then those differences in opinion won’t tend to oppose as much and they will converge on agreement that your site is a job well done. But what are the key principles of good web design? Here are four rules that should be considered in every website if you want your site to look good, be effective and be easy to use.


Use of Color and Imagery

Before your content ever gets the chance to inspire and engage your audience, the color scheme and images on your site will be tasked with creating that initial, impacting statement. The visuals of a site are so important to get right, as with all first impressions, it can be hard to shake off perceptions founded early on.

The guiding principle in use of color is: don’t overuse it. Don’t get carried with sporadic splashes of color and in most cases, 2 or 3 colorsare sufficient for the one site. Stick to known complimentary color schemes to avoid creating eyesores. If you are designing a website for a company, the colors you choose should match that of the company branding.

When using images, Flash always seems a great idea at the time. Who wouldn’t want an entertaining animation to break up the labor intensive reading of content? However, studies have shown that users are more likely to be attracted and pay attention to static images. Unless you deem it absolutely necessary, avoid images that move.

Images aren’t space fillers. If you’re using an image with the sole purpose of bulking out a piece of content, your audience will see straight through your intentions which will likely result in a higher bounce rate. All the images you use should provide value and offer a greater insight into the written content.

And if you must use images, make sure not to over-do it and that they are correctly sized for the web (internet resolution is 72 ppi). Images, animations and videos account for up to 60% of the loading time for a page.


Which fonts to use?

Early web content producers were restricted to just a few fonts, as venturing outside of “web-safe fonts” would result in collection of random symbols and gibberish. Today, thanks to @font-face embedding, a feature of most modern web browsers, the range of available fonts for internet use has significantly increased. However, that doesn’t give the go ahead to pick just any font and run with it. There are still three considerations that should be adhered to when selecting a font.

  • Keep the end user experience in mind. Large fonts could result in increased loading times which is a sure way to aggravate your visitors.
  • The body text should usually be sans serif and headlines should also be reserved to serif fonts as otherwise they can be difficult to read.
  • As with color, keep the number of different fonts to a minimum. Three different fonts on the one site should be the maximum.


Don’t Break the Grid

Human beings are creatures of habit. Since the invention of codex, we have used the same grid system for all of our written language due to one simple fact: it works. Don’t try to fix or improve on something that isn’t broken. The grid system is familiar and comfortable and there is no need to rearrange the layout of text on a page. Save your creative efforts for the other on screen elements.


The F Pattern

The last principle is often overlooked by beginning website developers. Research has shown that we read a piece of content in an F pattern. This simply means that we read left-to-right and from the top down (in most cultures anyway).

In the modern world, where we are consistently bombarded with new content, readers use a quickened version of the F pattern to scan titles, headlines and images to determine if it’s worth their time to read the whole piece. If you want to stand out amongst the ocean of articles and blog posts produced every day on the internet, you need to ensure that the layout of your sites content pays attention to the F pattern.