Scribd
Upload
7 views26 pages

Week 07 - Introduction To Visual Design Principles II and Responsive Design

Uploaded by

Trần Quang Huy Tạ
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
7 views26 pages

Week 07 - Introduction To Visual Design Principles II and Responsive Design

Uploaded by

Trần Quang Huy Tạ
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 26

Vietnam National University of HCMC

University of Information Technology


Birmingham City University

★ Week 07 - Introduction to Visual Design


Principles II and Responsive Design ★

Dr Vi Chi Thanh - [email protected]


https://vichithanh.github.io
Last week’s recap

• Introduction to Visual Design (colour, visual hierarchy, reading


patterns)

W E D N E S D AY 1 1 D E C E M B E R 2 0 2 4 2
Low, medium, and high-fidelity prototypes
W E D N E S D AY 1 1 D E C E M B E R 2 0 2 4 3
Low, medium, and high-fidelity prototypes
W E D N E S D AY 1 1 D E C E M B E R 2 0 2 4 4
Today’s agenda

• Visual Design Principles


• Responsive Design

W E D N E S D AY 1 1 D E C E M B E R 2 0 2 4 5
Visual Design versus Usability

• User interfaces should be


designed to be intuitive and
predictable for end-users. Such
interfaces help users achieve
their goals quickly.
• That’s why functionality,
reliability, and usability create
three basic layers in the pyramid
of user needs.
W E D N E S D AY 1 1 D E C E M B E R 2 0 2 4 6
Aesthetic-Usability Effect

• Users often perceive an


aesthetically pleasing design as a
design that is more usable and
easier to use.
• An aesthetically pleasing design
creates a positive response in
people’s brains and leads them to
believe the design actually works
better.
(Kurosu and Kashimura, 1995)
W E D N E S D AY 1 1 D E C E M B E R 2 0 2 4 7
W E D N E S D AY 1 1 D E C E M B E R 2 0 2 4 8
W E D N E S D AY 1 1 D E C E M B E R 2 0 2 4 9
W E D N E S D AY 1 1 D E C E M B E R 2 0 2 4 10
Visual Design: Unity
• Visual unity establishes harmony between page elements, so
they appear to belong together, and users are not distracted
by chaotic (e.g., misaligned) layouts.

11
Visual Design: Unity

W E D N E S D AY 1 1 D E C E M B E R 2 0 2 4 12
Visual Design: Balance and scale
• Use visual balance and scale to distribute elements evenly.

13
Visual Design: Contrast and dominance
• Use differences in colour, size and placement to accentuate
elements.

W E D N E S D AY 1 1 D E C E M B E R 2 0 2 4 14
Visual Design: Contrast and dominance

W E D N E S D AY 1 1 D E C E M B E R 2 0 2 4 15
Visual Design: Contrast and dominance

W E D N E S D AY 1 1 D E C E M B E R 2 0 2 4 16
Responsive Design

• Responsive design is a design


approach used to create content
that adjusts smoothly to various
screen sizes.
• “Mobile first”, as the name
suggests, means that we start the
product design from the mobile
end which has more restrictions,
then expand its features to create
a tablet or desktop version.
W E D N E S D AY 1 1 D E C E M B E R 2 0 2 4 17
Responsive Design: Breakpoints

• Breakpoints are the point a


which your website or app content
will respond to provide the user
with the best possible layout to
consume the information.
• When you first begin to work with
responsive design you will define
your breakpoints at the exact
device widths (pixels) that you are
looking to target.
W E D N E S D AY 1 1 D E C E M B E R 2 0 2 4 18
Responsive Design: Breakpoints

W E D N E S D AY 1 1 D E C E M B E R 2 0 2 4 19
Responsive Design

W E D N E S D AY 1 1 D E C E M B E R 2 0 2 4 20
Responsive Design

W E D N E S D AY 1 1 D E C E M B E R 2 0 2 4 21
Responsive Design

W E D N E S D AY 1 1 D E C E M B E R 2 0 2 4 22
Design Grids

• Design grids, as design instrument to organize layout, may


have fewer master breakpoints.

W E D N E S D AY 1 1 D E C E M B E R 2 0 2 4 23
Summary of Visual Design principles II

• Unity – use this to establish harmony between page elements, so they appear
to belong together, and users aren’t distracted by chaotic (e.g., misaligned)
layouts.
• Gestalt – use these principles of how people perceive objects to guide how
users interpret your design.
• Hierarchy – use placement, font, etc. to show importance.
• Balance – use this to distribute elements evenly.
• Contrast – use differences in colour, etc. to accentuate elements.
• Scale – use this to emphasize elements to establish importance or depth.
• Dominance – use an object’s size, colour, etc. to make it stand out.
W E D N E S D AY 1 1 D E C E M B E R 2 0 2 4 24
This week’s practical activity

• High-fidelity prototypes:
• Complete the remaining pages of your wireframes and high-
fidelity prototypes using Figma.
• Without interactive pages, you won’t be able to
conduct a usability test!

W E D N E S D AY 1 1 D E C E M B E R 2 0 2 4 25
Vietnam National University of HCMC
International University
School of Computer Science and Engineering

THANK YOU

Dr Vi Chi Thanh - [email protected]


https://vichithanh.github.io

You might also like