ui design 101: day 02 of 07
TRANSCRIPT
![Page 1: UI Design 101: Day 02 of 07](https://reader033.vdocuments.site/reader033/viewer/2022042605/58cf53721a28aba17e8b5b4f/html5/thumbnails/1.jpg)
UI Design Crash course:Basic Principles
of DesignDay 02(what I learned from a one-week course)
![Page 2: UI Design 101: Day 02 of 07](https://reader033.vdocuments.site/reader033/viewer/2022042605/58cf53721a28aba17e8b5b4f/html5/thumbnails/2.jpg)
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.
![Page 3: UI Design 101: Day 02 of 07](https://reader033.vdocuments.site/reader033/viewer/2022042605/58cf53721a28aba17e8b5b4f/html5/thumbnails/3.jpg)
5 UI DESIGN PRINCIPLES1.Movement
2.Rhythm
3.Balance
4.Proportion
5.Emphasis
![Page 4: UI Design 101: Day 02 of 07](https://reader033.vdocuments.site/reader033/viewer/2022042605/58cf53721a28aba17e8b5b4f/html5/thumbnails/4.jpg)
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.
![Page 5: UI Design 101: Day 02 of 07](https://reader033.vdocuments.site/reader033/viewer/2022042605/58cf53721a28aba17e8b5b4f/html5/thumbnails/5.jpg)
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
![Page 6: UI Design 101: Day 02 of 07](https://reader033.vdocuments.site/reader033/viewer/2022042605/58cf53721a28aba17e8b5b4f/html5/thumbnails/6.jpg)
Design Principle #2: RhythmA good design rhythm can add structure and visual interest to your layouts.
Source: Ramachandra Babu/©Gulf News
![Page 7: UI Design 101: Day 02 of 07](https://reader033.vdocuments.site/reader033/viewer/2022042605/58cf53721a28aba17e8b5b4f/html5/thumbnails/7.jpg)
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
![Page 8: UI Design 101: Day 02 of 07](https://reader033.vdocuments.site/reader033/viewer/2022042605/58cf53721a28aba17e8b5b4f/html5/thumbnails/8.jpg)
Design Principle #2: RhythmWith those 3 techniques, you can plan for 3 kinds of rhythm:
![Page 9: UI Design 101: Day 02 of 07](https://reader033.vdocuments.site/reader033/viewer/2022042605/58cf53721a28aba17e8b5b4f/html5/thumbnails/9.jpg)
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.
![Page 11: UI Design 101: Day 02 of 07](https://reader033.vdocuments.site/reader033/viewer/2022042605/58cf53721a28aba17e8b5b4f/html5/thumbnails/11.jpg)
Design Principle #2: RhythmFlowing Rhythm Examples
![Page 12: UI Design 101: Day 02 of 07](https://reader033.vdocuments.site/reader033/viewer/2022042605/58cf53721a28aba17e8b5b4f/html5/thumbnails/12.jpg)
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
![Page 14: UI Design 101: Day 02 of 07](https://reader033.vdocuments.site/reader033/viewer/2022042605/58cf53721a28aba17e8b5b4f/html5/thumbnails/14.jpg)
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
![Page 15: UI Design 101: Day 02 of 07](https://reader033.vdocuments.site/reader033/viewer/2022042605/58cf53721a28aba17e8b5b4f/html5/thumbnails/15.jpg)
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.
![Page 16: UI Design 101: Day 02 of 07](https://reader033.vdocuments.site/reader033/viewer/2022042605/58cf53721a28aba17e8b5b4f/html5/thumbnails/16.jpg)
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.
![Page 17: UI Design 101: Day 02 of 07](https://reader033.vdocuments.site/reader033/viewer/2022042605/58cf53721a28aba17e8b5b4f/html5/thumbnails/17.jpg)
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".
![Page 18: UI Design 101: Day 02 of 07](https://reader033.vdocuments.site/reader033/viewer/2022042605/58cf53721a28aba17e8b5b4f/html5/thumbnails/18.jpg)
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
![Page 19: UI Design 101: Day 02 of 07](https://reader033.vdocuments.site/reader033/viewer/2022042605/58cf53721a28aba17e8b5b4f/html5/thumbnails/19.jpg)
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!
![Page 21: UI Design 101: Day 02 of 07](https://reader033.vdocuments.site/reader033/viewer/2022042605/58cf53721a28aba17e8b5b4f/html5/thumbnails/21.jpg)
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)
![Page 22: UI Design 101: Day 02 of 07](https://reader033.vdocuments.site/reader033/viewer/2022042605/58cf53721a28aba17e8b5b4f/html5/thumbnails/22.jpg)
Coming up next:
Day 03Content based on a CareerFoundry course | Slides created by Siegrid Saldaña | Feb 2017