Business Benefits
Produce user-friendly, aesthetically pleasing, and financially rewarding results.
Rank elements on your website’s visual hierarchy based on your business objective.
For example, Williams-Sonoma sells outdoor cookware. The biggest eye catcher is the huge piece of meat as it makes you want it, followed by the headline say what it is, a call to action get it, a descriptive paragraph under the headline, the free shipping banner, and the top navigation list.
Apply the Golden Ratio to your site layout to make it more aesthetically pleasing.
For example, if your layout width is 960px, dividing it by the Golden Ratio (1.618) lets you know that the width of the content area should be 593px and the sidebar 367px. If the website height is 760px, you can split it into 470px and 290px chunks (760/1.618=~470).
Add filters during the design process for easier decision-making and to eliminate distracting options.
The more options a user has on your website, the more difficult it is to use if they decide to use it at all. For example, Wine Library offers a huge selection of wines but does a good job with their filters to make it easier for their customers to make a decision.
Use button sizes proportional to their expected frequency of use.
You can use mouse tracking to see which buttons people use the most, then make popular buttons bigger and easier to hit.
Follow the rule of thirds in your images to make them more interesting and your website more appealing.
Divide images into nine equal parts using two equally spaced horizontal lines and two equally spaced vertical lines. Place important compositional elements along these lines or at their intersections.
Use Gestalt design laws when designing your website.
The following are the six best guiding Gestalt design laws for web design:
- Law of Proximity. Things that are close together in space are perceived by people as a single object. Make sure that things that do not go together are not perceived as one.
- Law of Similarity. Whether they be similar in form shape, color, shading, or other qualities, we group similar things together. Use a similar design for related things so they can be seen as a single group, each reinforcing the other.
- Law of Closure. When shapes that aren’t closed or parts of a picture are missing, our perception fills in the visual gap. Using the law of closure can make logos or design elements more interesting.
- Law of Symmetry. The mind perceives objects as symmetrical, forming around a center point. People prefer symmetric appearances over asymmetric ones, and alternating columns of images and text, sliders, and lists can add to the visual enjoyment of your site design.
- Law of Common Fate. We tend to perceive objects as lines that move along a path. Use objects pointing in the same direction to guide users’ attention to something, such as a sign-up form or value proposition.
- Law of Continuity. People have a tendency to perceive a line as continuing its established direction. When there’s an intersection between two lines, we tend to perceive them as two single, uninterrupted entities.
Use white space and a clean design to make it easier for users to focus on the main message, visuals, and copy.
Pages without white space, crammed full of text or graphics, risk appearing busy or cluttered and are typically difficult to read. A clean design with lots of whitespaces doesn’t just mean less content. You need to use white space wisely and carefully consider the hierarchy for information, typography, color, and images.
Use a simple, minimalist design and follow the principle of Occam’s razor.
Occam’s razor argues that the simplest solution is usually best. For example, when Angelpad removed 80% of the content on their homepage, leaving only the sign-up button and one Learn More link, their conversion to sign-up increased by 300%
Last edited by @hesh_fekry 2023-11-14T12:05:32Z