1.
UI DESIGN
FUNDAMENTALPHOWR#aesthetics #usability
20
17
20
17

2.
• Intentional Design
• Interface without User is not User Interface
• 3 pillars of UI Design
• Aesthetics
• Content
• Interaction
What’s in this course

3.
• INTENTIONAL DESIGN
• Interface without User is not User Interface
• 3 pillars of UI Design
• Aesthetics
• Content
• Interaction
Where you are

4.
Who are the audiences of the
following sites and What are the
purposes of them?

5.
As a designer, what will you do to
maximize your (company) benefits
from the audiences?

6.
Design everything intentionally
UI Designer is a planner, not a creator.
KEEP IN MIND

7.
• Intentional Design
• INTERFACE WITHOUT USER IS NOT USER INTERFACE
• 3 pillars of UI Design
• Aesthetics
• Content
• Interaction
Where you are

8.
What they needs
Their behaviors
Their preferences
KNOW ABOUT USERS

9.
WHAT USERS PERCEIVE FROM UI
USER
INTERFACE
AESTHETICS INTERACTION
CONTENT

10.
• Intentional Design
• Interface without User is not User Interface
• 3 pillars of UI Design
• AESTHETICS
• Content
• Interaction
Where you are

11.
Tell me about the aesthetics of the
following designs

12.
The Smith Work
Table by Tom
Bekkers

13.
Holo Music
Artist Page by
Tom Koszyk

14.
MyKia Concept
by Tom Vranek

15.
Why do you think that
they are beautiful?

16.
So, a beautiful design is a
design that …?

17.
Changes time over time
Mostly comes from trends.
If you can’t create trends, just follow them
ABOUT AESTHETICS

18.
FUTURISTIC
ORNAMENTALISM

19.
SIMLICITY & COMFORT

20.
EXTRA DEPTH
(WITH SEMI-FLAT DESIGN)

21.
CUSTOM
ILLUSTRATIONS

22.
ANIMATIONS, GIFS
& CINEMAGRAPHS

23.
MICRO INTERACTIONS

24.
INTEGRATED ANIMATIONS

25.
OBNOXIOUS BRIGHT
GRADIENTS

26.
SEMI REALISTIC 3D

27.
3D METALIC & SOLID ELEMENTS

28.
ONE COLOR 3D DESIGN

29.
80S – 90S COLOR
PALETTES & PATTERNS

30.
BIG BOLD TYPOGRAPHY

31.
CREATIVE TYPOGRAPHY

32.
PARTICLE BACKGROUND

33.
M
O
D
U
L
A
R
B
L
A
N
K
S
P
A
C
E

34.
SPLIT
PAGE
DESIGN

35.
VIBRANT & SATURATED
COLOR PAGE

36.
MONDRIANISM

37.
• Intentional Design
• Interface without User is not User Interface
• 3 pillars of UI Design
• Aesthetics
• CONTENT
• Interaction
Where you are

38.
WHAT IS THIS SITE
ABOUT?

39.
Relevant & Useful
Accurate & Structure
Credible & Findable
Scanable & Simple
USER – CONTEXT - CONTENT

40.
• Intentional Design
• Interface without User is not User Interface
• 3 pillars of UI Design
• Aesthetics
• Content
• INTERACTION
Where you are

41.
Visibility
Affordance
Constraint
Simplicity
Feedback
Consistency Learnability Tolerance
Predictability
Mapping

42.
Visual Hierarchy
Legibility & Readability
Differentiate dissimilar things
Communicate in user language
VISIBILITY & SIMPLICITY

43.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
imperdiet massa nibh, id laoreet nibh suscipit sed. Curabitur
sit amet dictum metus. Nam vitae diam quis nulla efficitur
rutrum vitae laoreet leo. Vestibulum pellentesque faucibus
nisl, eget rhoncus ligula pharetra eleifend. Cras metus velit,
convallis vitae elementum vitae, egestas eu eros. Sed eget
metus vel est faucibus pulvinar vitae ullamcorper libero. Orci
varius natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. In commodo et dolor et tristique.
Fusce lacus nisi, maximus id lectus eget, accumsan
tincidunt augue. Phasellus consectetur, augue imperdiet
lacinia malesuada, nulla erat ornare lorem, a dignissim
nisi mi vel velit. Integer fermentum nec nibh non maximus.
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Sed imperdiet massa nibh, id laoreet nibh
suscipit sed. Curabitur sit amet dictum metus. Nam
vitae diam quis nulla efficitur rutrum vitae laoreet
leo.
Vestibulum pellentesque faucibus nisl, eget
rhoncus ligula pharetra eleifend. Cras metus velit,
convallis vitae elementum vitae, egestas eu eros.
Sed eget metus vel est faucibus pulvinar vitae
ullamcorper libero.
Orci varius natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. In
commodo et dolor et tristique. Fusce lacus nisi,
maximus id lectus eget, accumsan tincidunt augue.
Phasellus consectetur, augue imperdiet lacinia
malesuada, nulla erat ornare lorem, a dignissim nisi
mi vel velit. Integer fermentum nec nibh non
maximus.

44.
Visibility
Affordance
Constraint
Simplicity
Feedback
Consistency Learnability Tolerance
Predictability
Mapping

45.
Affordance
Mapping
PREDICTABILITY

46.
Visibility
Affordance
Constraint
Simplicity
Feedback
Consistency Learnability Tolerance
Predictability
Mapping

47.
Keep informing actions, change of states…
Error prevention and reduce cost of mistakes
FEEDBACK & TOLERANCE

48.
Visibility
Affordance
Constraint
Simplicity
Feedback
Consistency Learnability Tolerance
Predictability
Mapping

49.
Making similar things resemble one another
Reducing the need for users to rethink and
remember
CONSISTENCY

50.
ATOMIC
DESIGN

51.
• Intentional Design
• Interface without User is not User Interface
• 3 pillars of UI Design
• Aesthetics
• Content
• Interaction
Conclusion