Just like any creative discipline, web design has its rules. Content, navigation, and visuals must all work together to make sure the design strikes the perfect balance. But how?
Design principles are widely applicable guidelines that designers use discreetly to make designs more effective. This blog post will cover some of these principles.
Visual Hierarchy:
This is one of the most important principles behind good web design. The visual hierarchy doesn’t only apply to size. Use colours and shading to make assets stick out more.
Tip: rank the things on your site based on business objective and adjust designs accordingly (to fit said objective)
Divine Proportions:
“The Golden Ratio” is the magical number 1.618 (φ). The golden ratio is used to structure page layouts. It creates a focal point, drawing in the attention of users and designs governed by this ratio are thought to be visually pleasing to users. A great example is the user profile on Twitter; a user’s attention should be drawn to the profile info and picture more than anything else.
Rule of Thirds:
An image should be divided into 9 equal sections by two equally spaced horizontal lines and two equally spaced vertical lines and important elements should sit on these lines or at their intersections.
White Space and Clean Design:
White space or negative space is a portion of the site that remains empty (The space between assets/elements). A page with no white space, crammed with text or images can look very cluttered or messy depending on how it is structured. Keeping universal spacing between assets/elements promotes cleanliness and uniformity.
Occam’s Razor
When you have several competing hypotheses we should choose the one that makes the least assumptions and therefore offers the simplest explanation. So what does this have to do with design? A modern interpretation of Occam’s Razor is “Entities must not be multiplied beyond necessity”. When applied to our work as designers, Occam’s Razor can be adopted as a guiding principle that informs our decisions and keeps us from reaching for a complex solution when a simpler one is sufficient.
Hick’s Law:
The law: the more stimuli (or choices) users face, the longer it will take them to make a decision. The internet is full of endless choices, think how often one fails to watch anything — or reverts to a previously watch the show — when bombarded with endless content. Designers must keep choices to a minimum to avoid overwhelming the user.
Fitt’s Law:
Fitt’s law stipulates the time required to move to a target (like a button) is a function of the distance to the target plus the size of the target. In other words, the more pronounced something is, the more likely it is for a user to engage with it. Example: the play button on Spotify is the biggest button. It’s likely that the Spotify team is aware that the play button is interacted with the most.
Law of Proximity:
Things that are close together appear to be more related than things that are spaced further apart. For effective design make sure things that do not go together are not perceived as one and are clearly separate from each other.
Law of Similarity:
People also group similar-looking objects together. This can occur in the form of shapes, colour, shading or other qualities. Use these different qualities to group items together that don’t generally stay together.
Law of Closure:
Humans seek completeness so when shapes aren’t closed or parts of a picture are missing our perception fills in the visual gap. We can use this in design to make certain items more unique.
Law of Symmetry:
The mind perceives objects as symmetrical, forming around a centre point. It is visually pleasing to divide objects into an even number of symmetrical parts. Based on this, it may be best to design in a symmetrical fashion wherever possible.
Law of Common Fate:
Humans tend to perceive objects with an equal motion to be on an equal path. People group hands pointing in one direction because they are leading attention to the same place. Designers can utilise this to guide user attention towards things like CTA’s and buttons.
Law of Continuity:
People have a tendency to perceive a line as continuing its established directions. When there is an intersection between two distinct objects we still see the objects as two separate entities.
In Conclusion:
Effective web design is important to create pleasing sites both visually and experimentally. One can create a magnificent website by applying these above laws to all the varying facets of UI/UX design.
