Design principles are concepts that offer guidelines on the structure and order of design elements for your design. These principles are important because they can affect the overall feel, and more crucially, the functionality of your design. You need to consider these principles when designing as they are proven to be successful, with one principle even dating back to the 13th century. 

Although design principles can offer invaluable information, you have the freedom to follow these guidelines as closely as you want. Design principles can give you the foundation to help you find the balance between creativity and practicality. 

Here are seven design principles that you should consider when designing any website or digital product. 

Hicks Law (aka Hick-Hyman Law). 

Hicks Law suggests that the more options available to a person, the more time and effort it will take for them to make a decision.

This theory can easily be applied to your website and digital products by keeping it simple and ensuring an easy path to your users’ final destination. For example, over-complicated and time-consuming payment options could result in people quitting the process before it’s finished. 

It might also be useful to check Google Analytics to see how long users are spending on your website and specific pages, to see what areas of your website could be distracting your users from their end goal. 

Key takeaways: 

1. Break down complex tasks into smaller steps.
2. Highlight recommended options to avoid overwhelm. 
3. Learn from your analytics and real-life users.  

Help Your Customers Make the Right Decision, Quickly – Hick’s Law

Occam’s Razor.

Occam’s Razor recommends avoiding using unnecessary elements that do not add value to the user’s experience. This adds more clarity to the user and reduces the decision- making process.

Occam’s Razor works perfectly with the concept of Hick’s law. This can easily be applied by keeping your design simple and removing any unnecessary features or content that may clutter up your page or distract your users. 

This is even more important when designing for smaller screens. You need to consider the differences between using a device and a computer, as the majority of internet searches are done through smartphones and tablets. The screens are much smaller, therefore it’s essential to ensure the design is simple, compatible, and not too busy or overwhelming for the user. 

Key takeaways: 

1. Design for smaller, smartphone screens first.
2. Make sure clickable elements are useable on handheld devices.
3. Prioritise the most important content. 

Grids and Guides.

The grid system is a proven way to organise elements on the page in a simple way. The grids are used to divide the webpage into columns that are then separated with margins (which are invisible in final print). 

Grids create clarity and consistency, helping to achieve a frictionless experience for the user. Since the grid system is a common design element used (dating back to the 13th century), it’s familiar to users, therefore making it easier for them to navigate your website – even on their first time using it. However, breaking the grid can also add creativity and help you stand out from your competitors. It’s worth experimenting to try and find a balance that works for you. Either way, remember to consider smartphone and tablet users when designing. 

Key takeaways: 

1. Grids help create a sense of organised familiarity. 
2. Break the grid to create an impact with your brand.
3. Always think of how your design will look when viewed on mobile phones and tablets. 

Fitts Law.

Fitts Law refers to accessibility and ease of your website. ‘The amount of time required for someone to move a cursor to a target area is related to the distance of the target divided by the size of the target.’ 

This can be easily be achieved with simple and practical changes. Firstly, reducing the distance the user has to move their mouse/finger to click. Remember to consider the difference between using your mouse and your finger on touch screens. Secondly, making sure the clickable areas on your website are big enough to be seen and easily used. 

The aim is to make your website as easy and accessible to use as possible. 

Key takeaways: 

1. Fitts’ Law helps us to design websites that are easy to use. 
2. Reduce the amount of effort it takes to click an option on your website.
3. Make sure all buttons and clickable areas are large enough to use.

Mobile First.

Mobile First does what it says on the tin. It suggests that you should design your websites and digital products for smaller, mobile screens first before moving onto larger screens. Smartphone users account for over 50% of all web traffic globally, therefore it’s essential that your website is 100% compatible for smaller screens. 

When designing for smaller screens, it’s important to keep it simple, clear, and concise. As the page is smaller, you don’t want to clutter it and create chaos on the screen. It’s also important to remember that in comparison to a computer mouse, our fingers and thumbs are wider and at times less accurate. Therefore, you need to make sure each interactive touchpoint is useable on a handheld device. Mobile First doesn’t just refer to the design of the website either. Since you are working with a much smaller space, it’s essential to prioritise your website content to ensure the more important information is visible and the easiest to access.

Key takeaways: 

1. Design for a smaller, smartphone screen first. 
2. Make sure clickable elements are usable on a handheld device. 
3. Prioritise the most important content.

Three- click rule. 

The three-click rule states that if users cannot find what they’re looking for in three clicks, they’re likely to become frustrated and leave the site. 

Although there is much discussion as to whether this theory is true, there are points that are useful and that you can take away. Each click should take users forward and closer to their end goal. Therefore, it’s important to consider your content and eliminate any distractions that don’t take the user to their desired destination. 

Key takeaways: 

1. Whilst a strict three-click rule is no longer considered an accurate measurement of useability, keeping user journeys as simple as possible will help more users reach their end goal. 
2. Every click or interaction on your website should take the user closer to their end goal. 

Golden Ratio.

The Golden Ratio is a mathematical ratio of 1:1:618. It may sound complicated and completely unrelated to your business and website. However, this design technique has been used by designers, artists, and architects for millennia. You will have seen thousands of designs that have used this rule without even knowing. 

The Golden Ratio, in basic terms, is perfect asymmetry. It is relevant to web design as it refers to proportions and structure, helping to improve your website visually. It is also used to ensure headings, subheadings and body text are all at a proportionate size and distance away from each other. This is important when distinguishing areas of content. Similar to Grids and Guides, it’s familiar to us and therefore can help users easily navigate through your website. 

It sounds complicated but you aren’t completely on your own. Adobe Photoshop and Adobe Illustrator allow you to create guides and layers to help you use Golden Ratio. There are also tools out there to help you, such as Phiculator and Atrise. 

Key takeaway: 

1. Golden Ratio helps you to place elements in a visually pleasing way. 
2. Always think of how your design will look when viewed on mobile phones and tablets. 
3. Try out Golden Ratio to help you organise important content on your website. 

Make Your Website More Visually Engaging – Golden Ratio

Each theory offers useful insight and inspiration when designing your website. However, it can be easy to feel overwhelmed with all the different principles if you’re not a designer.  If you have any questions about how you can create an incredible website that works for your business, get in touch with a member of your team today.