Scribd
Upload
6 views390 pages

Design Principles PDF

The document discusses the importance of alignments, visual hierarchy, and typography in design, emphasizing that well-organized layouts lead to better user experiences. It covers concepts such as proximity, optical illusions, and the use of focal points to create effective designs. Additionally, it highlights various design tricks like contrast, whitespace, and repetition to enhance layout consistency.

Uploaded by

davidfestusugwu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views390 pages

Design Principles PDF

The document discusses the importance of alignments, visual hierarchy, and typography in design, emphasizing that well-organized layouts lead to better user experiences. It covers concepts such as proximity, optical illusions, and the use of focal points to create effective designs. Additionally, it highlights various design tricks like contrast, whitespace, and repetition to enhance layout consistency.

Uploaded by

davidfestusugwu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 390

Without Alignments

With Alignments
Which of these Rooms would
you go for & Why?

It’s clean and well arranged while the other isn’t.

Very organised and less chaotic while the other is very chaotic.
Without

Alignments
With

Alignments
using Grids
With

Alignments
using Grids
Left

Middle

Right

Top

Centre

Bottom
Without Alignments
With Alignments
With Alignments using Grids
With Alignments using Columns
With Alignments using Columns
With Alignments using Columns
Columns give your layout a better consistency
With Alignments not using Columns With Alignments using Columns
With Alignments using Columns
With Alignments using Grids
Mostly used in
Prints
A Website without alignments and 100% Fails
A Website with alignments and 100% success
Use of a Focal point: Visual Hierarchy
Use of a Focal point: Visual Hierarchy
Use of an Alpha button & Ghost button: Visual Hierarchy
Use of a Focal
point: Visual
Hierarchy
Use of a Focal
point: Visual
Hierarchy
Visual Hierarchy
Visual Hierarchy Fails
Visual Hierarchy Fails; the form fighting for hierarchy
Visual Hierarchy Fails; background fails to communicate anything
Visual Hierarchy Fails, no contrast between the texts
A simple website without Visual Hierarchy
A simple website with Visual Hierarchy
A simple website with Visual Hierarchy
A simple website with Visual Hierarchy
A simple website with Visual Hierarchy
Optical Illusions; objects seem not to be the

same size but symmetrically they are


Optical Illusions; objects seem not to be the

same size but symmetrically they are


Optical Illusions; objects seem not to be the

same size but symmetrically they are.

Optical Illusions; to correct that you must

make the circle a little larger than the box


Optical Illusions; now they
feel the same size by sight
Optical Illusions; objects seem not to be the

same size but symmetrically they are


Optical Illusions; objects seem not to be the

same size but symmetrically they are


Optical Illusions; objects seem not to be the

same size but symmetrically they are

Optical Illusions; to fix it we have to make the

smaller object larger than the other


Optical Illusions; now it feels just right
Optical Illusions; happens with texts as well
Optical Illusions; see how this texts feels like
it’s sinking because it’s thick
Optical Illusions; see how this texts feels better but
it’s above the middle/center point of the box
Proximity; related items should
be together and not apart
Proximity; related items should
be together and not apart
Proximity; related items should
be together and not apart
Proximity; related items should
be together and not apart
Proximity; related items should
be together and not apart
Proximity; related items should
be together and not apart
Proximity; related items should be
together and not apart and vice versa
TYPOGRAPHY
& FONTS
Fonts; fonts makes

up the most part of

any website, app, or

webapp.
Fonts; every font has it’s
personality, mood and purpose.
Fonts; every font has it’s
personality, mood and purpose.
Fonts; every font has it’s
personality, mood and purpose.
Fonts; every font has it’s
personality, mood and purpose.
Fonts; every font has it’s
personality, mood and purpose.
Fonts; every font has it’s
personality, mood and purpose.
Slab Font Style
L I N E S P A C I N G
L I N E S P A C I N G
L I N E S P A C I N G
without L I N E S P A C I N G
W I T H L I N E S P A C I N G
L I N E S P A C I N G
EXTREME CROPPING
EXTREME CROPPING
EXTREME CROPPING
EXTREME CROPPING
EXTREME CROPPING
EXTREME CROPPING
EXTREME CROPPING
EXTREME CROPPING
EXTREME CROPPING
EXTREME CROPPING
PEEKING THROUGH THE BLINDS
PEEKING THROUGH THE BLINDS
PEEKING THROUGH THE BLINDS
PEEKING THROUGH THE BLINDS
PEEKING THROUGH THE BLINDS
PEEKING THROUGH THE BLINDS
PEEKING THROUGH THE BLINDS
PEEKING THROUGH THE BLINDS
PEEKING THROUGH THE BLINDS
PEEKING THROUGH THE BLINDS
SOFT CROP
SOFT CROP
SOFT CROP
SOFT CROP
SOFT CROP
SOFT CROP
SOFT CROP
SOFT CROP
SOFT CROP
SOFT CROP
SOFT CROP
SOFT CROP
SOFT CROP
SOFT CROP
SOFT CROP
SOFT CROP
SOFT CROP
RULE OF THIRDS
RULE OF THIRDS

SPLITTING YOUR SCREEN


I N T O 9 E Q U A L H A LV E S
RULE OF THIRDS

SPLITTING YOUR SCREEN


I N T O 9 E Q U A L H A LV E S
RULE OF THIRDS
RULE OF THIRDS

SPLITTING YOUR SCREEN


I N T O 9 E Q U A L H A LV E S
RULE OF THIRDS
RULE OF THIRDS
RULE OF THIRDS

SPLITTING YOUR SCREEN


I N T O 9 E Q U A L H A LV E S
RULE OF THIRDS

SPLITTING YOUR SCREEN


I N T O 9 E Q U A L H A LV E S
RULE OF THIRDS

SPLITTING YOUR SCREEN


I N T O 9 E Q U A L H A LV E S
RULE OF THIRDS

SPLITTING YOUR SCREEN


I N T O 9 E Q U A L H A LV E S
RULE OF THIRDS

SPLITTING YOUR SCREEN


I N T O 9 E Q U A L H A LV E S
RULE OF THIRDS

SPLITTING YOUR SCREEN


I N T O 9 E Q U A L H A LV E S
U N B O X I T !

B O X E D I M A G E S C R E A T E

O T H E R B O X E S A R O U N D I T
U N B O X I T !

L E T ’ S E D I T T H I S

P R O F E S S S I O N A L LY
U N B O X I T !

R E M O V E T H E I M A G E

B A C K G R O U N D
U N B O X I T !

C H A N G E T H E

B A C K G R O U N D C O L O R
U N B O X I T !

A D D S H A D O W T O T H E I M A G E ; S O I T F E E L S L I K E

T H E L A D Y I S S T A N D I N G I N F R O N T O F A W A L L
U N B O X I T !

E D I T T H E T E X T W I T H T H E

F E E L I N G O F T H E T O P I C
U N B O X I T !
U N B O X I T !
U N B O X I T !
H O W T O D E T C T A F A K E I M A G E . . .
...FROM A REAL & TRUE IMAGE
IS THE SCENE RE AL?
IS THE SCENE RE AL?
IS THE SCENE RE AL?
DO THE EMOTIONS FEEL RE AL?
DO THE EMOTIONS FEEL RE AL?
DO THE EMOTIONS FEEL RE AL?
DO THE EMOTIONS FEEL RE AL?
DO THE EMOTIONS FEEL RE AL?
DO THE EMOTIONS FEEL RE AL?
DOES THE SET LOOK
RE ALISTIC & MODEREN?
DOES THE SET LOOK
RE ALISTIC & MODEREN?
DOES THE SET LOOK
RE ALISTIC & MODEREN?

WHAT KIND OF DESKTOP


MONITIOR THAT LOOKS SO OLD
AND ISN’T EVEN PLUGGED IN
DOES THE SET LOOK
RE ALISTIC & MODEREN?
DOES THE SET LOOK
RE ALISTIC & MODEREN?
DOES THE SET LOOK
RE ALISTIC & MODEREN?
AVOID ABSTR ACT IMAGES
AVOID ABSTR ACT IMAGES
AVOID ABSTR ACT IMAGES
AVOID ABSTR ACT IMAGES
TRICKS 101; CONTRAST
TRICKS 101; CONTRAST
TRICKS 101; CONTRAST
TRICKS 101; CONTRAST
TRICKS 101; CONTRAST
TRICKS 101; CONTRAST
TRICKS 101; CONTRAST
TRICKS 101; CONTRAST
TRICKS 101; CONTRAST
TRICKS 101; CONTRAST
TRICKS 101; CONTRAST
TRICKS 102; W H I T E S P A C E
TRICKS 102; W H I T E S P A C E
TRICKS 102; W H I T E S P A C E
TRICKS 102; W H I T E S P A C E
TRICKS 102; W H I T E S P A C E
TRICKS 102; W H I T E S P A C E
TRICKS 102; W H I T E S P A C E
TRICKS 102; W H I T E S P A C E
TRICKS 102; W H I T E S P A C E
TRICKS 102; G O O D W H I T E S P A C E
TRICKS 102; B A D W H I T E S P A C E
TRICKS 103; R E P E T I T I O N
TRICKS 103; R E P E T I T I O N
TRICKS 103;
R E P E T I T I O N
TRICKS 103;
R E P E T I T I O N
TRICKS 103;
R E P E T I T I O N
TRICKS 103;
R E P E T I T I O N
TRICKS 103;
R E P E T I T I O N
TRICKS 103;
R E P E T I T I O N
TRICKS 103;
R E P E T I T I O N
TRICKS 103;
R E P E T I T I O N
TRICKS 103;
R E P E T I T I O N
TRICKS 103;
R E P E T I T I O N
TRICKS 103;
R E P E T I T I O N
TRICKS 103;
R E P E T I T I O N
TRICKS 103;
R E P E T I T I O N
TRICKS 104; L A Y O U T C O N S I S T E N C Y
TRICKS 104; L A Y O U T C O N S I S T E N C Y
TRICKS 104; L A Y O U T C O N S I S T E N C Y
TRICKS 104; L A Y O U T C O N S I S T E N C Y
TRICKS 104;
L AY O U T
C O N S I S T E N C Y
TRICKS 104; C O N S I S T E N C Y I N T Y P O G R A P H Y
TRICKS 105;
OVERLAPPING
TRICKS 105; O V E R L A P P I N G
TRICKS 105; O V E R L A P P I N G
TRICKS 105; O V E R L A P P I N G
TRICKS 105; O V E R L A P P I N G
TRICKS 105; O V E R L A P P I N G
TRICKS 105; O V E R L A P P I N G
TRICKS 105; O V E R L A P P I N G
TRICKS 105; O V E R L A P P I N G
TRICKS 105; O V E R L A P P I N G
TRICKS 106;
T E N S I O N
TRICKS 106; T E N S I O N
TRICKS 106; T E N S I O N
TRICKS 106; T E N S I O N
TRICKS 106; T E N S I O N
TRICKS 106; T E N S I O N
TRICKS 106; T E N S I O N
TRICKS 106; T E N S I O N
TRICKS 106; T E N S I O N
TRICKS 106; T E N S I O N
TRICKS 106; T E N S I O N

You might also like