Web Design Principles: The Definitive Guide (26 Tips)

Introduction

What are design principles?

Design plays a crucial role in the overall effectiveness of a website.

Good website design can be the difference between a business succeeding or failing.

Between a sale and no sale.

Between generating profit and recording a loss.

Strong website design relies on established design principles which have been tested and proven time and time again.

Come with us as we take a dive into 26 proven design principles and learn how you can improve your own website designs.

Web design principles such as Hick’s Law, Rule of Thirds, Visual Hierarchy, Contrast, F Pattern, Typography, Colour, Consistency and many more.

Get a head start on your competition and dig into the following 26 website design principles.

 

CONTENTS

 

Design Laws

#HicksLaw / #FittsLaw / #RuleofThirds / #GestaltDesignLaws / #OccamsRazor /

 

Structure 

#VisualHierarchy / #GridBasedLayouts / #Contrast / #Unity / #WhiteSpace / #FPattern / #Simplicity / #Balance / #Repetition / #Movement /

 

Content / Brand Awareness

#Typography / #Colour / #Imagery / #Communication / #Purpose / #Content / #Emphasis /

 

Usability

#Navigation / #Consistency /

 

Accessibility

#Responsiveness / #LoadTime /

 

 

Important Website Design Laws

Hicks Law Web Design

What is Hick's Law?

Hick’s Law dictates that every additional choice available to a human will increase the amount of time it takes to make a decision logarithmically.

You may think that the more choices available to someone the easier it would be to pick something. However this is the paradox of choice.  In fact, more choice means it’s easier to choose nothing.

For instance, if you design a website which requires it’s users to make lots of decisions then its more likely they will exit without making any decision.

Therefore there is a real need to eliminate the number of options or choices to a user when designing a website.

Living in the era of infinite choices, it is now vitally important that high quality filters be used in web design.

When designing, make sure you pay special attention to the choices you incorporate into your designs. This is the most key when looking at product filters.

 

Fitts Law Web Design

What is Fitt's Law?

Fitt’s Law states that the time required to move to a target is a function of target distance and target size.

A bigger, closer target is easier to reach and should be applied to frequently used elements. However, a smaller, further target is less easy to reach and should therefore be reserved for less frequently used elements.

That said, bigger does not necessarily always mean better.  Fitt’s Law is a binary algorithm. This means that predicted usability of an object runs along a curve, not a straight line.

Therefore  a small button which is made 20% larger is likely to see increased usability.

BUT, an already large button which is made 20% larger won’t see the same benefits.

This means that a button’s size should be proportionate to its frequency of use. This is where mouse tracking and screen recording software can come into its element.

If you notice a particular button is used a lot, you may wish to increase the size slightly. Similarly, if a button is seldom used then you may want to reduce its size.

A real life example of this might be the submit and reset buttons on a contact form. The submit button should be much larger than the reset button.

This is because, all things being well, users will be looking to click the submit button rather than reset.

 

Rule of thirds and web design

What is the rule of thirds?

The rule of thirds is a popular web design tool which is heavily associated with the use of imagery. It is a commonly utilised principle in photography.

The rule of thirds dictates that you divide an image equally into nine equal portions. Do this by using three vertical and 3 horizontal lines.

Now, to produce interesting and eye catching images place compositionally important elements along any of these lines, or their intersections.

This simple compositional trick will instantly improve the quality of your images.

They’ll be more visually appealing and will add an element of intrigue to capture your audience’s attention.

 

Gestalt Design Laws and Web Design

What are the Gestalt Design Laws?

Gestalt Design Laws is a theory of the mind and brain. It identifies that humans see objects in their entirety before perceiving their individual parts.

The founder of Gestaltism (a field of psychology which tries to understand how we make sense of a chaotic world) Kurt Koffka explains it this way “the whole exists independently from the parts”.

We can apply this to web design in the following manner.

People who arrive on your site will see the whole of your website first before they start distinguishing individual elements such as the header, menu, body and footer etc.

The Gestalt Design Laws is made up of six different design laws which predict how people will perceive something.

The Gestalt Design Laws are:

  • Law of Proximity

Describes how people will group elements that are close together into a single perceived object. 

The important takeaway here is to make sure things that are not related to one another are far enough from each other. 

Otherwise users will initially perceive them to be part of the same thing. 

  • Law of Similarity

Explains how humans will group things based on similarity. For instance people will group elements based on their colour, shading, shape and more into one perceived element.

Therefore if you have different objects, make sure to differentiate them as much as possible to stop them being grouped together. 

  • Law of Closure

Explains how as humans we seek completeness. Meaning our minds will automatically fill in any missing elements to create whole shapes. 

For instance if you drew a circle or rectangle with a pencil then rubbed out random parts of the line, your brain would still perceive a full shape.

This law is often used to create interesting logos. 

  • Law of Symmetry

Describes how the human mind perceives objects as symmetrical that form around a center point. 

If you were to draw six separate brackets, the human mind would actually perceive three sets of brackets rather than six individual brackets. 

Humans also find dividing objects into even symmetrical parts very pleasing. 

You can incorporate this into your designs by creating an object and text pair which alternates sides as you scroll down. Thus creating a symmetrical feel, rather than having all the images on the left and all the text on the right for the whole page. 

  • Law of Common Fate

Explains how we perceive objects that move along the same path as one group. For instance, if you were to draw six circles with arrows pointing up out of three and arrows pointing down out of the rest. Humans would perceive the up arrow circles as one group and the down arrow circles as another group. 

You can incorporate this in your design by using elements on a path to highlight key elements of a page such as a CTA button. 

  • Law of Continuity

Explains that humans will usually perceive a line as continuing its direction even if intersected by another line.

In fact, should a line be intersected by another we will perceive two different lines or paths.

 

Occams Razor and Web Design

What is Occam's Razor?

The last of our design laws or rules is Occam’s Razor.

Occam’s Razor suggests that the simplest solution to a problem is usually the best.

The reason for this is because the simplest solution will usually be the explanation which requires you to make the fewest assumptions or judgements.

Occam’s Razor says that when given competing hypotheses you should choose the one that makes the fewest assumptions.

This will in turn give you the simplest and usually best explanation or solution.

The key here is to strive for simple effective design rather than needlessly complicated and confusing design.

 

Structure in web design

Visual Hierarchy and Web Design

What is visual hierarchy?

Moving onto structure and how to utilise it for good web design we have visual hierarchy.

Visual hierarchy is a fundamental principle for strong website design here.

The key thing to remember here is that different elements of your site are more important than others.

Important elements may include value proposition, lead form or call to action.

You should then place these elements on your page in order of importance in relation to your business objective. (Having a strong business objective is vitally important).

You can arrange your important elements by using different sizes, colours and contrast as well as imagery, typography, texture, style and white space.  T

he key point of visual hierarchy is to direct visitor’s attention to your important elements using the above techniques.

 

Grid based layouts and web design

What is a grid based layout?

Grid based layouts are a design tool which helps to keep your content structured and organised.

Grid based layouts use evenly spaced columns and boxes to organise elements and content into neatly aligned and balanced designs.

Grids ensure consistent and pleasing website design whereas haphazardly placing blocks can create a chaotic and hard to use design.

 

Contrast and web design

What is contrast?

Contrast is an important design technique that helps to create excitement and direct viewers attention.

Contrast can obviously be created by using different colours. However, there are many other methods of building contrast into your web designs.

These include:

  1. Round vs sharp shapes
  2. Negative vs positive space
  3. Smooth vs rough texture
  4. Plus any other elements which directly oppose each other

Humans can find monotony quite dull and boring, so using contrast is a great method of injecting excitement and intrigue in your web designs.

You can begin to incorporate contrast by first identifying objects or elements that you wish to direct your visitor’s attention to.

By being clever with your use of white space, shape, colour and texture you can quickly make certain elements ‘pop’ out of the screen.

Using contrasting fonts is another great way of accentuating certain copy or text in your designs and making them instantly more professional looking.

 

Unity and web design

What is unity?

Unity is all to do with finding balance.

Specifically finding the right balance between different elements. This helps to achieve a sense of harmony which is important in making websites that people want to use.

You must make sure that every element you include in your design has a specific place and role in the page composition.

Fight the urge to include elements which have no reason or justification for their use.

Ultimately, you need to create a design which is complete and conveys the right message in the correct tone for your audience.

Think about patterns, weights, styles, and sizes when adding new elements to your design.

There is a careful balance to be had between using contrast (the previous principle) and unity to create harmonious but exciting websites.

 

White space and web design

What is white space?

White space, also referred to as negative space, is all the space on your website which isn’t actively filled with design elements or objects.

Whilst it’s essentially devoid of actual design objects, white space is vitally important in creating professional website designs.

White space is the space between graphics, margins, columns, copy and other visuals. It allows a page to ‘breathe’ and design elements to exist on the page.

Websites which exclude white or negative space will look cramped and can be very hard to understand or read.

They’re likely look quite amateurish and most importantly users won’t even attempt to interact or understand the page or site.

This is the reason simple websites are better and more user friendly.  It’s not simply a case of removing content.

Having a proper understanding of how you communicate and lay out sites using white space is critical in professional website designs.

Make sure you focus on this website design principle to use white space to help draw attention to headlines, value propositions and call to actions, as well as important messages and products.

The correct use of white space also helps bring an element of elegance or sophistication and improves legibility and user experience.

 

F Pattern and web design

What is F Pattern?

Utilising eye tracking software, studies have identified that people tend to view computer screens in a ‘F’ shaped pattern.

This is exactly as it sounds.

When viewing a computer screen, people will look at the elements on the page in the shape of the capital letter F.

Meaning that users tend to focus on the left side of the screen and will only take in a few elements on the right side.

Instead of trying to force users to look at elements that goes against user’s natural behaviour its best to design sites which take this behaviour into account.

Making the decision to locate and display important elements along this ‘F’ pattern to improve user experience and engagement.

Items of less importance should be located further down, as well as on the right.

Whereas important objects should be at the top and to the left to work with people’s natural visual flow.

 

Simplicity and web design

What is simplicity?

As we’ve alluded to earlier, simple sites (usually) work the best.

They’re the most eye catching and have the best user experience and engagement.  That’s why simplicity is one of our design principles.

Sometimes websites can become over designed – especially if they’re designed by committee. Nine times out of ten this will result in a website which simply doesn’t work.

Placing too many elements on a page can distract users from the main purpose of your website.

Simplicity is the foundation of designing a beautiful and elegant website which is easy to navigate and understand.

However it takes skill and control to harness simplicity, so you don’t end up with a bland and boring website.

Simple websites should let you seamlessly navigate from page to page and consume any content without distraction or confusion.

 

Balance and web design

What is balance?

Like other principles in this category, balance is fundamental in achieving an eye catching and easy to use website.

Balance is the art of making sure that no single element overpowers another.

This stops different elements from becoming insignificant and serving no purpose.

When it comes to design there are three different types of balance:

  • Symmetrical balance

Symmetrical balance is likely the type of balance which springs to mind when someone starts talking about design balance.

Symmetrical balance is the act of placing elements that mirror each other on the different sides of a page. For instance a butterfly has symmetrical balance. 

Infact, symmetry has played an important role in the assessment of beauty, design and art for the entirety of humankind. 

  • Asymmetrical balance

Asymmetrical balance is a way of balancing a page using a line of symmetry but without mirroring each side like for like.

Instead, visual weight is used to balance up the page.

You can think of this like a set of scales. With a big boulder on the left being balanced by many, much smaller rocks.

This is a clever way of creating balance without simply creating a mirror image on a page and can suggest modernism. 

  • Radial balance

Radial balance uses a central point instead of a line of symmetry, like the previous two balance types. 

Instead of mirroring or ‘balancing’ through a line of symmetry, radial balance is the act of placing elements around a central point with the idea that objects will ‘gravitate’ towards said central point. 

Here you want to keep objects equally distant from your central point to keep visual weight balanced and distributed on your page.

Take care when adding elements to a page, as each one you add can disturb the balance of your page. As mentioned in an earlier principle, grid layouts are a fantastic way of organising objects and design elements whilst maintaining balance.

Repetition and web design

What is repetition?

Repetition and habits form the foundation of most human behaviours in life.

And the same can be applied to website user behaviours.

When it comes to web design, repetition can manifest in many ways. You can use repetition to form patterns which can add an appealing visual element to a design.

Alternatively you can use repetition of user actions to enforce behaviour and generate a consistent user experience.

Repetition can also help emphasise branding and design composition.

For instance always locating specific elements in the same place across different pages.

Clever use of repeating colours and typography can enable users to have a subconscious awareness of their place on your site.

In fact associating colours with services is a great way of sticking in users heads.

 

Movement and web design

What’s inherently more eye catching? A static image or something that moves?

What is movement?

What’s inherently more eye catching?

A static image or something that moves?

Easy answer; something that moves of course.

Adding some kind of movement to your designs can be a great way of directing attention and focus in your web designs. 

Nowadays with technology as it is, this is actually quite a simple task when it comes to any kind of digital design.

Whereas in print you would need to be smart with your use of space, shapes and lines to portray the idea of movement.

With digital you can literally include animated images or even videos.

A current implementation of movement which is quite popular is the use of parallax scrolling.

This can be very effective if done right. Essentially it creates a three dimensional feel by moving the background and foreground at different speeds.

Whilst adding movement to your designs can be a great way of boosting engagement and directing, focus you have to be careful not to use it too much.

Using it too much will leave things confused and muddled.  Think of it like this.

If you were highlighting a document and highlighted everything – then is anything actually highlighted? 

No. Everything just blends together into one (see Gestalt Design Laws).

 

Content and web design

Typography and web design

What is typography?

It can be quite common for other design elements to overtake typography in terms of priority when working on a website design.

However, as the majority of content is text, typography is perhaps one of the most important things to consider when it comes to designing a website.

The use of good typography can make or break a website.

Not only does typography convey your message and content but it also portrays your brand and tone.

What your text says is obviously very important. But just as important is how it looks on the page.

First you need to make sure that any typography you use is easy to read. A font might look exciting, but if your user struggles to understand what it even says then it’s probably best to avoid said font.

That said, you do need your heading fonts to demand attention as well as communicate your brand identity and ethos.

For general copy its important you use a legible font, typically Sans Serif fonts are best on digital displays. You also need to make sure the size is appropriate – 16px is usually a good bet.

The main takeaway is to make sure you think long and hard about all typographical elements of your design. Use bold and striking fonts to demand attention for headlines.

Use legible easy to read fonts for body copy to communicate your message easily.  For further reading on typography check out Buttericks Typography guide.

 

Colour and web design

What is colour?

Colour, similarly to typography, is another key element of great web design.

That’s why it’s made our design principles list.

A well considered and thought out colour palette can really help elevate a website’s design.  And good design means better user engagement.

There are literally infinite ways of implementing colours into your web designs.

However you may want to follow some of these helpful guides so things don’t become too chaotic and distracting.

Consider using complementary colours in your designs to create an air of balance and harmony.

You could also use contrasting colours for text and backgrounds to make copy easier to read.

Don’t feel that you have to fill every square inch of your user’s screen with colour. As covered earlier in the white space principle, it’s a good idea to leave negative space to allow your design to breathe and your objects and elements to exist.

This will help achieve a modern and uncluttered aesthetic.  Colours often come with emotional ties and can elicit certain emotions from your users without anything more than a swatch of colour.

Take plenty of time to decide on what you want to convey to your audience and which colours are associated with those emotions.

As well as choosing the right colours its important you don’t use too many. Try not to exceed five different colours in your designs.

Think of having a distinct colour for each of these uses:

  1. Light shades
  2. Light accent
  3. Main brand colour
  4. Dark accent
  5. Dark shades

Studies show that pleasing colour combinations actually have the power to increase customer engagement and make your users feel good.

So this is something definitely worth getting right!

Well thought out colour combinations or palettes can help you focus user attention, however bad combinations may cause distraction and stop users doing what you want them to.

 

Imagery and web design

What is imagery?

There’s a reason why the saying ‘a picture is worth a thousand words’ exists.

Choosing the right images for your website can have a massive impact on its overall effectiveness and communicating your message and brand.

Where possible try to use high quality imagery which links in nicely with your website and brand.

If you don’t have access to high quality bespoke photography you may want to consider using graphics or illustrations instead.

Alternatively you can always use stock imagery, though make sure you don’t fall into the trap of looking generic by using cliche stock photos.

Any imagery you use in your web designs should be expressive and capture the spirit of your company and brand.  Humans are very visual so can digest a lot of information from one image.

This is why it’s important to make sure you select the right images in your web designs.

 

Communication and web design

What is communication?

The ultimate purpose of any website is to communicate information to a visitor.  The key is to do this in the easiest way possible.

If your visitors can easily and quickly get the information they’re after then they’re more likely to stay on your site.

This can be accomplished in many different ways.

Including:

Organising information

Ensure information is presented in a logical fashion. Putting information in sensible orders can really help users find it.

Using headlines

Use clear headlines which stand  out and clearly communicate what the following information is about.

Using subheadings

Use strong subheadings to help break big pieces of information into smaller more navigable chunks.

Clear and succinct sentences

Avoid using long and wondering sentences. Find a way to say what you need in a clear and concise manner.

Bullet point lists

If appropriate, consider using lists to clearly layout bitesize chunks of information.

Excluding irrelevant details

If you deem something unnecessary, don’t be afraid to omit it. Unnecessary details or words can make sentences overly complicated and hard to comprehend.

Using simple language

Don’t feel like you need to use long words to sound clever. Communicating clearly with simple language is much better than simply working your way through a thesaurus.

 

Purpose and web design

What is purpose?

Your website must have a clear purpose – otherwise why does it exist in the first place? Are you trying to inform or entertain?

Sell goods or a service?

Or maybe interact with other businesses?

Whatever your website’s purpose, it must be clear to your user.

This is where good design comes in. However, it’s not good enough for your website to have a broad purpose, you need each page on your site to have a distinct and specific purpose.

And this purpose needs to be communicated on each page to your visitors.

You should keep your page’s purpose in your mind at all times when designing a page.

Does your design help to convey and communicate information?

Does your design improve user entertainment? Does your design clearly show off your products or services?

Your web designs should accommodate the needs of your users and make site interaction obvious to your visitors.

Content and web design

What is content?

A website is only as good as its content. Without content a website serves no purpose.

And without purpose there’s no reason for your site to attract visitors.

An effective website needs to show off content. Making it both visually appealing to look at and easy to read and understand.

A clever use of language can elevate a web design to the next level and actually influence visitors to the site. Hopefully converting visitors to customers.

 

Emphasis and web design

What is emphasis?

A clever use of emphasis, whereby specific elements naturally become more dominant in a composition, is a great way to improve your web designs.

It helps to direct attention and focus of users.

You can emphasise elements by incorporating some of the other principles we’ve covered such as contrast.

Your web designs should feature a primary element which acts as a focal point that will guide your visitors when they land on your site. An example of this is incorporating a clear call to action (CTA) into your designs, such as a form or call back request.

Having a clear message and call to action can help focus attention and allow visitors to interact with your site in the desired way.

It can help them complete actions and influence them to convert into customers. Emphasising a CTA is a great way of using this principle to better your web designs.

You may go about this by using bold colours, strong typefaces or eye catching imagery.

However be careful not to over do it.

In fact, leaving white space around an element can also be a great way of emphasising it to your visitors.

 

Usability and web design

Navigation and web design

What is navigation?

For a website to be effective it needs to be obvious and simple to navigate from page to page, product to product or service to service.

It’s also worth noting that studies show that users tend to stay longer on websites that are simple to navigate.

Key to good site navigation is a logical page hierarchy, bread crumb trails and clickable buttons.

A simple rule to follow is the ‘three click rule’ which states that visitors should be able to reach their required information within three clicks.

If navigation is confusing for users it’s likely they will click off your site and you will lose a potential customer.

The final thing to remember is to keep navigation consistent across all pages so users can easily find what they’re looking for.

 

Consistency and web design

What is consistency?

Consistency is an important principle of web design.

It can help bring a degree of uniformity and familiarity to a website which represents your brand and culture. Keeping fonts, font sizes, heading, subheadings and button styles consistent will help user interaction and site navigation.

Visitors will know what they’re looking out for and will be able to easily skim read a page.

This is how people tend to consume online content.

CSS or Cascading Styles Sheets is a style sheet language used in web development. CSS describes the presentation of a document written in HTML or other markup languages.

A good implementation of CSS makes creating consistent websites much easier.

CSS allows you to describe the styles of all elements of a website without having to add the format individually to each element which can result in mistakes.

 

Accessibility and web design

Responsiveness and web design

What is responsiveness?

Accessibility is more important than it has ever been.

If you’re website isn’t accessible to everyone then you’re missing out on potential traffic and potential customers.

With the drastic uptake of mobile and tablet  devices, it’s vital that your website be visually appealing and usable on all platforms – regardless of screen size. From desktop to phone and everything in between.

With modern website design this is achieved through responsive websites. Websites that respond by resizing to fit to the viewers screen size.

When designing websites, it’s important to keep in mind how they will appear on all screen sizes. Will elements stack on a smaller screen? Will the navigation turn into a dedicated mobile menu? And so forth.

As well as making sure your web designs appear on all devices. You need to make sure that your designs adhere to the different accessibility regulations set out by W3.

W3 outlines three different ‘levels’ of accessibility; A, AA, AAA. Within each, there are specific approaches, functions and features that you need to implement on your website in order to be hitting that level of accessibility.

As a minimum, we would recommend making sure your designs meet the majority of the AA guidelines.

For AA guidelines you will need to incorporate the following:

  1. Live videos have captions
  2. Users have access to audio description for video content
  3. Contrast ratio between text and background is at least 4.5:1
  4. Text can be resized to 200% without loss of content function
  5. Don’t use images of text
  6. Offer several ways to find pages
  7. Use clear headings and labels
  8. Ensure keyboard focus is visible and clear
  9. Tell users when the language on the page changes
  10. Use menus consistently
  11. Use icons and buttons consistently
  12. Suggest fixes when users make errors
  13. Reduce the risk of input errors for sensitive data

The requirements for AAA are much more strict and includes some of the following:

  1. Provide sign language translations for videos
  2. Provide a text alternative to videos
  3. Contrast ratio between text and background is at least 7:1
  4. Explain any strange words
  5. Explain any abbreviations
  6. Users with nine years of school can read your content
  7. Plus many more

Generally, AAA is considered too restrictive for the majority of websites. However for some sites, e.g. government or education bodies, it may be necessary.

To sum up, make sure your web designs are accessible on all devices and meet AA accessibility regulations.

 

Load Time and Web Design

What is load time?

Our final website design principle is site speed.

Site speed has become an ever increasingly important ranking factor for many reasons.

Least of which is that with modern internet speeds users have come to expect lighting fast websites which load in under a few seconds.

When designing your site make sure to not include any elements such as large high resolution images which may impact page load times.

If your website is slow to load there is a high chance of losing visitors.

Especially if it doesn’t load within three seconds. Make sure to optimise any images you do use and make sure they’re no larger than they need to be.

Conclusion

So there we have it;

26 website design principles. 

If you follow at least half of these principles your websites will be that much better. 

Your website designs will look professional with simple, effective and visually appealing designs which keep users coming back time and time again.

Keep checking back as we continue to expand and add to our list of web design principles!

Thanks for reading!