8 Web Design Principles
& Laws that Work
in 2023
The quality of your website design has a bigger impact on conversions than you may realize. Even if you use all the best conversion optimization tactics, a poorly designed website can hold you back. Good design is not just about aesthetics – it is a crucial element of your marketing strategy and the functionality of your website. By understanding and applying key web design principles, you can improve the performance of your website and drive better results. In this post, we will explore 8 effective web design principles and delve into the importance of Gestalt Design Laws in web design theory.”
What are the 8 principles of web design?
1. Visual Hierarchy
Visual hierarchy is a key principle in web design that determines the order in which the human eye perceives different elements on a page.
Exercise. Please rank the circles in the order of importance:
Just like how you were able to easily rank the circles without any context, visual hierarchy helps guide your visitors’ attention to the most important parts of your website. Some examples of important elements on a website might include forms, calls to action, and the value proposition. When designing your website, consider which elements are most important and make sure they stand out by using prominent visuals. For example, if your website menu has 10 items, are they all equally important? Think about where you want your visitors to click and make those links more prominent in the hierarchy.
Visual hierarchy is not only achieved through size.
For example, Amazon makes their “Add to Cart” and “Buy Now” call-to-action buttons stand out by using a different color than the rest of the page.
Which buttons catch your eye?
Color can help elements of a web page stand out.
Start with the business objective
Here’s an example. It’s a screenshot from the Williams-Sonoma website. They want to sell outdoor cookware.
To effectively use visual hierarchy on your website, it’s important to consider your business goals. Without a specific objective, you won’t know what elements to prioritize. For example, a website selling a piece of meat might prioritize the image of the meat, followed by a catchy headline, a call to action, and then additional information about the product.
The free shipping banner and top navigation might be lower in the hierarchy because they are not as crucial to the business objective of making a sale. By understanding the principles of visual hierarchy and applying them to your website design, you can effectively guide your visitors’ attention and achieve your business goals.
2. Divine Proportions
The lower-case Greek letter phi is used for the Golden Ratio.
The Golden Ratio, represented by the number 1.618 (φ), is a mathematical formula that is believed to create aesthetically pleasing designs.
Another related concept is the Fibonacci sequence, in which each term is the sum of the two previous terms (e.g. 0, 1, 1, 2, 3, 5, 8, 13, 21, etc.). It’s interesting to note that these two seemingly unrelated topics actually produce the same number.
This is what the Golden Ratio looks like
Many artists and architects have used proportions based on the Golden Ratio in their work. One well-known example is the Parthenon in Ancient Greece, which is believed to have incorporated the Golden Ratio in its design.
Can the Golden Ratio work for web design? You bet. Look at Twitter:
3. Hick’s Law
Hick’s Law states that the more choices a person has, the longer it will take them to make a decision. This is often experienced when faced with a lengthy menu at a restaurant. Similarly, the Paradox of Choice suggests that too many options can make it difficult to choose anything at all. In web design, it’s important to keep these principles in mind and strive to eliminate unnecessary choices that could make your website overwhelming or difficult to use. One way to do this is to focus on simplifying the design and removing distracting options.
If you sell a large number of products, consider adding filters to make it easier for your customers to make a decision. For example, Wine Library has a vast selection of wine, but they also offer filters to help users find the perfect bottle.
They do a good job using filters:
4. Fitt’s Law
Fitt’s Law states that the time it takes to move to and interact with a target (such as clicking a button) is determined by the distance to the target and the size of the target. In other words, larger and closer targets are easier to use. Spotify uses this principle by making the “Play” button more prominent and easier to click than other buttons on their interface.
On the mobile phone app, they also place the play button in an easy-to-tap location.
While it may seem logical to assume that larger buttons are always easier to use, Fitt’s Law actually follows a curve rather than a straight line. This means that a small increase in the size of a tiny button can significantly improve its usability, while a similar increase in the size of a very large object might not have the same impact. This is known as the rule of target size, which suggests that the size of a button should be proportionate to its expected usage frequency. To determine the ideal size for buttons on your website, you can use mouse tracking to see which buttons are used the most and then make those buttons larger. For example, on a form with a “Submit” and “Reset” button, the “Submit” button might be made slightly larger because it is likely used more frequently.
99.9999% want to hit “Submit.” Hence, the button should be much bigger than ‘reset’.
5. Rule of Thirds
Using images in your web design can be a powerful way to communicate your ideas quickly and effectively. One technique to consider is the rule of thirds, which involves dividing an image into nine equal parts with two horizontal and two vertical lines, and placing important compositional elements along these lines or at their intersections. This can create a more visually interesting and balanced image. For example, notice how the image on the right is more eye-catching and appealing than the one on the left, thanks to the use of the rule of thirds.
The rule of thirds is a simple design principle to follow for images.
Using beautiful, big images contributes to good web design. If your images are more interesting, your website will be more appealing.
6. Gestalt Design Laws and Principles
Gestalt psychology is a field of study that examines the way the mind and brain perceive and process information. One of its key principles is that the human eye tends to perceive objects as a whole before breaking them down into their individual parts.
Here’s what is meat:
Gestalt law of Proximity
The Gestalt law of proximity states that people tend to group together objects that are close in space, creating a single perceived object. In web design, it’s important to consider this principle and make sure that unrelated elements are not perceived as a single unit. On the other hand, you can also use proximity to group related design elements together, such as the navigation menu and footer, to communicate that they are part of a cohesive whole.
The Law of Proximity shows how the mind naturally groups (or separates) items based on their distance from one another.
Gestalt law of Similarity
We group similar things together. This similarity can occur in the form of shape, color, shading, or other qualities.
Here we group black dots into one group and whites into another one, because, well, dots of the same color look similar to one another.
What’s this look like when applied to web design? Mixpanel uses a similar design for links to case studies, so we see them as a single group, each reinforcing the other:
Gestalt law of Similarity
We group similar things together. This similarity can occur in the form of shape, color, shading, or other qualities.
Here we group black dots into one group and whites into another one, because, well, dots of the same color look similar to one another.
What’s this look like when applied to web design? Mixpanel uses a similar design for links to case studies, so we see them as a single group, each reinforcing the other:
Gestalt law of Closure
According to the Gestalt law of closure, the human mind seeks completeness and tends to fill in visual gaps in order to perceive a complete image. For example, in the graphic below, you might see a circle and a square even though neither shape is actually present – your mind is filling in the missing parts to create a complete image.
The law of closure allows our minds to combine individual lines and shapes into a cohesive whole. Without this principle, we would simply see disconnected lines of different lengths. By using the law of closure in design, it’s possible to create more interesting and engaging logos or design elements. A well-known example is the World Wide Fund For Nature logo, which was designed by Sir Peter Scott in 1961 and uses the principle of closure to create a memorable and distinctive visual identity.
Gestalt law of Symmetry
According to the Gestalt law of symmetry, the human mind perceives objects as being symmetrical and organized around a central point. It is generally pleasing to the eye to divide objects into an even number of symmetrical parts. When we see two symmetrical elements that are not connected, our minds tend to perceive them as being part of a coherent shape.
When we look at the image above, we tend to observe three pairs of symmetrical brackets rather than six individual brackets.
Gestalt law of Common Fate
We tend to perceive objects as lines that move along a path. We group together objects that have the same trend of motion and are, therefore, on the same path.
Mentally, people group together sticks or raised hands pointing somewhere because they all point in the same direction. In your site design, you can use this to guide the user’s attention to something (e.g. a sign-up form, value proposition, etc).
Gestalt law of Continuity
The human mind has a tendency to perceive a line as continuing in its established direction. When two objects, such as lines, intersect, we tend to see them as two single, uninterrupted entities rather than distinct stimuli that overlap. This principle can be used in web design to guide the viewer’s attention and create visual flow.
7. White space and
clean design
White space, also known as negative space, refers to the empty areas on a web page that are not occupied by text, graphics, or other visual elements. While it may seem like unimportant or “blank” space, white space is actually an important element of web design that helps to establish hierarchy, create visual balance, and improve readability. A page that is too crowded or lacks sufficient white space can appear cluttered and may be difficult to read. Simple, clean designs that make effective use of white space are often more effective at communicating a clear message. By using white space wisely, you can create a clean, professional website that makes the best use of the available space. For example, the design of the website for Made.com incorporates white space effectively to create a visually appealing and easy-to-use layout.
Proper use of white space can help to focus the viewer’s attention on the main message and visuals, and can make the body copy more legible. It can also contribute to a sense of elegance and sophistication in the overall design. By including adequate white space in your web design, you can improve legibility and drive focus to the most important elements of your page.
8. Occam’s Razor
Occam’s Razor is a principle that suggests that, when presented with several competing hypotheses, the simplest explanation is often the most likely to be true. In the context of web design, this principle suggests that it is usually best to choose the simplest solution to a problem. By minimizing the number of assumptions and keeping things as straightforward as possible, you can often achieve the most effective and efficient design.
Conclusion
While web design and art may not be the same thing, many psychological and design principles that apply to art can also be applied to web design. By incorporating these principles into your layout, typography, and images, you can create a website that is both aesthetically pleasing and effective at achieving your business goals. It’s important to keep the needs and preferences of your target audience in mind when designing your website, and to focus on creating a layout that is both visually appealing and practical.
By following these principles, you can create a website that delivers positive results for both your business and your users.
