Movement
Movement
refers to the path a viewer’s eye takes as it navigates a composition
or layout. Take a look at the example below. Doesn’t your eye naturally
travel from left to right, making you feel like the lines are toppling
over?
You
can create movement in the same way in UI, to guide your users through
sections of screens or to create hierarchy and emphasis. You can use
lines to direct movement, as well as shapes, color, and even gradients.
Rhythm
Rhythm is organized movement. It’s very active and for obvious reasons, closely tied to music.
You can create rhythm using:
- Repetition: using predictability to create a pattern
- Alternation: using contrast to create a pattern
- Gradation: using a series of steps to create a pattern
Using
these 3 techniques, there are 3 main kinds of rhythm you can plan for
in design. As you read about them, it’s helpful to assign a sound to
each shape you see. Play the beat they would produce in your head. It
will help you understand how rhythm works visually.
Regular Rhythm
The
hallmark of regular rhythm is predictability. Identical elements are
arranged over predictable intervals, just as it is done in the example
below.
Flowing Rhythm
Flowing
rhythm is organic. Each element making up the pattern is similar but
not exactly the same and the intervals vary slightly. Think of zebra or
tiger stripes.
Progressive Rhythm
Progressive
rhythm is a combination of both. Elements are placed in regular
intervals but begin to vary and change gradually. Essentially, one
element transforms into another or a variation of itself. Think of the
notes on a harp and how they gradually transform into each other. A
color gradient is an example of progressive rhythm.
In
UI design, rhythm can add structure and visual interest to your
layouts. It will also provide an avenue for you to explore alternative
solutions to traditional, overused layouts.
Balance
Balance
in design works just like it does in the real world. You distribute the
objects' “visual” weight on the screen to make sure it doesn't feel
like it is about to topple over. There are 2 types of balance:
symmetrical/formal and asymmetrical/informal.
Symmetrical or Formal
In
symmetrical balance, both sides of a composition or layout will look
exactly the same. If you sliced the example below horizontally or
vertically, you'd have two identical pieces. If they sat on a scale,
both sides would sit at the same height.
Asymmetrical or Informal
Elements
on either side of a composition or layout are different in asymmetrical
design. They still, however, feel balanced. Take a look at the
composition below. If it sat on a scale, would both sides be at the same
height?
Balancing
your compositions, using either symmetrical or asymmetrical balance,
will be important in your design. When layouts lack balance, you can
create unwanted hierarchy and screens that feel awkward. It is the same
feeling you get when you light elements from the bottom—it just doesn't
feel right.
Proportion
Proportion
deals with the size relationships of components in a composition or
layout, how they relate to each other, and how they work to create
unity. Think of your body. All its parts are proportional; they feel
like they belong and work well together. You want to achieve the same
feeling in design.
When
designing interfaces, all its elements should feel “the right size.”
You would not want to create a button so big that it eclipses other
elements. It’s size must suit its function and work well with the other
elements, making them feel like a family.
Emphasis
Emphasis
deals with highlighting one element or section over another in a
composition or layout. It’s similar to making text bold or italicized.
No comments:
Post a Comment