ui design 101: day 02 of 07
TRANSCRIPT
UI Design Crash course:Basic Principles
of DesignDay 02(what I learned from a one-week course)
Why the need for good ui design?Users would have less to think about when they interact with
your product, making them a happier user. One interaction with your product can make your user leave or stay.
5 UI DESIGN PRINCIPLES1.Movement
2.Rhythm
3.Balance
4.Proportion
5.Emphasis
Design Principle #1: MovementA good design movement is able to provide a path for a
user's eyes, helping him or her easily navigate a composition or layout on a screen.
Smooth.
Design Principle #1: MovementMovement can be done by guiding a user with elements
arranged by hierarchy, emphasizing elements with colors or shapes for example, or through sections of the screen.
tomatree/dribble
Design Principle #2: RhythmA good design rhythm can add structure and visual interest to your layouts.
Source: Ramachandra Babu/©Gulf News
Design Principle #2: RhythmYou can create rhythm using 3 techniques:
Repetition: rhythm created by predictability
Alternation: rhythm created by contrast
Gradation: rhythm created by progression of regular steps
Design Principle #2: RhythmWith those 3 techniques, you can plan for 3 kinds of rhythm:
Design Principle #2: Rhythm1) Regular: Identical elements are arranged over predictable
intervals.
2) Flowing: This is organic. Each element is similar but not exactly the same, and intervals vary slightly.
3) Progressive: A combination of the first two. Elements are placed in regular intervals but begin to vary and change gradually. One
element transforms into another or a variation of itself.
Design Principle #2: RhythmFlowing Rhythm Examples
Design Principle #2: Rhythm
Regular FlowingIf a design is trying to communicate consistency, a regular rhythm is probably
best. If the design is trying to communicate something more natural and organic, a flowing rhythm would be preferred. source
Design Principle #3: BalanceA good balance effectively distributes "visual" weight of
elements on the screen, so that things don't feel awkward or confusing.
There are 2 types:Symmetrical or formal
Asymmetrical or informal
Design Principle #3: Balance1)Symmetrical or formal balance
If you divide up an element or layout, horizontally or vertically, you'd have two identical pieces.
Design Principle #3: Balance2) Asymmetrical or informal balance
You may not have two identical pieces but there is still a balanced distribution of visual weight.
Design Principle #4: ProportionYou don't want a button so big that it doesn't seem to fit
with the other elements. Everything should feel like the "right size".
Design Principle #4: ProportionA good design proportion creates a harmonious size
relationship among components in a composition or layout, being able to form unity.
source
Design Principle #5: EmphasisEmphasis highlights one element or section over another.
Elements noticed first will dominate over the others.
It can help direct a user or communicate a certain level of priority.
Test yourself on the next slide!
by Dima Panchenko
❏ A curation of the best UI ideas in animation
❏ An article about Visual Rhythm with cool examples
❏ An article that further elaborates Flow & Rhythm
Additional References (not from the original course)
Coming up next:
Day 03Content based on a CareerFoundry course | Slides created by Siegrid Saldaña | Feb 2017