Balance
Balance creates order and signals relationships. Everything works and fits together. Group things together that belong together. This includes positive and negative space.
Balancing any layout means arranging positive elements and negative space so that no one area of the design overpowers the others, unless it’s supposed to. When a design is unbalanced, the individual elements compete with the whole. They call too much attention to themselves; focus is on the trees instead of the forest.
In some cases there’re no need for visual rules to sepparate content. Negative space can do it by itself as the rules create more visual noise.
In a content-heavy layout balancing negative and positive space is critical. This allows the user to quickly scan, identify and group related visual elements.
Negative space works to signal visual hierarchy - using size, weight and alignment. It makes us follow it as a path in the right and bottom direction from top to bottom of our design.
Rhythm
Rhythm occurs when the invertals between elements are predictable and similar in size, shape and length.
When elements repeat at regular intervals, the visual rhythm speeds identification and the user’s ability to quickly infer what elements are and understand what do they do.
If you create structure, you also have to control it. If there’s a lot of information at once at the screen, you have to work a lot harder to control how it appears and the degree of complexity.
Harmony
Harmony is a visual “echo”. It’s a big part of what holds individual elements together visually, to form a greater, cohesive whole.
Harmony comes largely from rhythm and from repetition. It’s, for example, repeating a set of colors a number n of times, in different items with the same pattern of repetition. It also is
Harmony is directional. It creates clear, purposeful flow.
Dominance
Dominance enables and directs flow. Dominance is achieved by emphasizing one or more visual elements.
It relies on contrast. Clear differences in the visual field. By creating a dominant element, you reveal what’s most important in your design.
Dominance is not achieved necessarily by how big something is, but by emphasizing one or more visual elements. This creates a focal point, where most people will instinctively go at first glance. Dominance creates an entry point in the design; a starting from which you can lead the viewer to other parts of the screen.
Dominance enables and directs flow
When there’s no clear dominance between elements, they compete with each other. Without a dominant element onscreen, users have to work to find their own entry point.
From a primary dominant element, design flow is achieved by creating elements with secondary and tertiary dominance. (hierarchy).
Create Dominance with size, negative space and contrast
If a smaller shape has more contrast than a larger shape, the smaller shape will have more dominance.
More negative space also equals more dominance.
Alignment
Alignment is the most valuable visual design principal. By properly aligning items and making them consistent wherever possible, we create fewer paths for the eye to follow. This makes the hand-eye coordination of scanning and completion much faster.
The more alignment we have across both items’ edges, the better, easier and quicker this is to use.
Get in the habit of not putting a rule or a line or a stroke around anything, unless you’re absolutely positive you have to because there’s no other way you can figure out how to separate it.
When we look at photos, we have a tendency to fixate on focal features, specificalle eyes and mouth when their face involved. In the example shown, the guy has aligned the top text baseline with the eye of a person, making sure one thing is in proximity of another and making it form a line where one element follows the other.
Align everything with everything else. The more relationships you can make in seemingly unrelated items strengthens the overall visual lab. The more alignment that you have in place in between unrelated items, the stronger that design will be.
Proximity
Proximity describes relationships. Proximity is the distance between visual elements. We use it to signal relationships between those elements.
Elements visually close to each other are perceived as a single group, related by context of use. Unrelated items are visually separated, far from each other.
Proximity often beats color and contrasts in terms of dominance in terms of importance. If you have two groups, you can separate them further by both color and contrast.
Use proximity to create context. Use it to group or separate related visual elements as you can separate unrelated groups with negative space. Doing so, creates clarity.
Proximity makes congnition faster.
Changing gaps for things that are related, to make them closer together and moving further away things that are unrelated, makes a massive difference to make out scan of a page faster and easier.