The Four Basics of Good Web Design

THE 4 BASICS OF GOOD WEB DESIGN 

If you have ever researched web design, you probably have the following attitude: web design today is simple, with incredibly fast internet speeds and sophisticated browsers, designers are no longer faced with the restrictions they once did in the early days of the Internet.

This may be true from the perspective of those who are more than familiar with the basics of web design, but for someone who is not familiar with the terms “CSS responsiveness” or “Google Adwords,” then the concept of web design might be quite daunting.  

Whether you are building your site from a template or using custom web design, we have outlined the basic rules you need to stick to. 

 1. Grid Systems

Since codex was invented in the 1st century, “the grid” has determined how we read. Since then, thousands of variations have emerged over time, involving the different arrangement of rows and columns. Think of how text and images are arranged in newspapers, books and magazines. These are the systems that have now been carried over to the web. 

In a world where people are browsing on a range of different devices, from computers, tablets and phones, comes the issue of “responsive design”. That is purpose built mobile websites, a design that translates to smaller screen sizes in a smooth and coherent matter, so that your website is readable no matter the size of the screen its being viewed on.  

 2. Visual Hierarchy

It is a well-know fact that in most cultures people read left-to-right and top-down. However, when you throw images, logos and headings in the mix, reading behavior begins to follow a much more complex set of rules. This is especially true for websites when people are scanning pages rather than reading them.  

A good web design is one that considers these reading patterns carefully by placing important elements such as logos for websites, call to actions and key images along the axes that they expect readers to scan. This typically comes in an “F” shape: where the horizontal lines at the top and middle of the page are scanned first as well as down the left column.   

Beyond this, visual hierarchy is about signalling readers to what should be read first, which can be done by considering font size, spacing, direction and colour. 

3. WEB-FRIENDLY FONTS 

Back in the early days of the internet, browsers supported a limited number of fonts and when you deviated from these, some visitors would see incoherent symbols on their screens rather than your intended content. 

The same rules apply today however the options for usable fonts on the web has grown considerably. The tables have turned and now many web designers complain about having too much to choose from.  

When selecting fonts for your website there are important points to consider: 

  • Serif fonts should be used for headlines 

In web design, serif fonts must always be reserved for headlines because they become harder to read when the font size is too small.  

  • Use minimal fonts 

Reducing clutter is key for an appealing and easy-to-read website, keep the number of fonts used to a minimum – the more consistent, the better. 

  • Keep the space clear 

Some font files can be quite large and cause your site to load slowly.  

4. Images and colours

The principles of image and colour placement are simple: don’t overdo it. 

For colours:

 

  • Use a basic palette 

Like fonts, stick to a minimum (2 or 3 is good), they should of course reflect the organisation’s branding whilst also serving to highlight important areas.  

  • Consider colour blindness 

Did you know 5 percent of the male population is colourblind? Well it’s true, and you need to consider this when selecting the colours for your site. Ensure you’re not pairing colours that are too similar because some of those viewing your page may not even notice the contrast. 

 

For images:

 

  • Still is better 

Avoid images that move or flash. This will simply distract viewers and may effect their ability to read the content of your site. 

  • Carefully select images 

Images shouldn’t be there to fill space. Only use images that are relevant to your site or help to communicate key information.  

  • Abide by licensing restrictions 

Be aware of what you legally can and can’t do with the images you use. Most images have some form of copyright so you need to ensure that you have the proper permissions to use the images you select.  

  • Keep file sizes small 

Ensure your images sizes are kept as small as possible. Images often account for 60 percent or more of a pages loading time, if your webpage doesn’t load fast enough, many users won’t bother waiting and will move on.