Design principles II 1. Typography 2. Layout 3. Color Typography - - PowerPoint PPT Presentation

▶
design principles ii 1 typography 2 layout 3 color
SMART_READER_LITE
LIVE PREVIEW

Design principles II 1. Typography 2. Layout 3. Color Typography - - PowerPoint PPT Presentation

Jul 21, 2023 105 likes •659 views

Design & Presentation Design principles II 1. Typography 2. Layout 3. Color Typography Fonts and how to use them Via Type On Screen Via Type On Screen Type classication Via The Non-Designer's Design Book Via The Non-Designer's

slide-1
SLIDE 1

Design & Presentation

Design principles II

slide-2
SLIDE 2
  • 1. Typography
  • 2. Layout
  • 3. Color
slide-3
SLIDE 3

Typography

Fonts and how to use them

slide-4
SLIDE 4

Via Type On Screen

slide-5
SLIDE 5

Via Type On Screen

slide-6
SLIDE 6

Type classication

slide-7
SLIDE 7

Via The Non-Designer's Design Book

slide-8
SLIDE 8
slide-9
SLIDE 9

Via The Non-Designer's Design Book

slide-10
SLIDE 10

Via The Non-Designer's Design Book

slide-11
SLIDE 11

Via The Non-Designer's Design Book

slide-12
SLIDE 12

Via The Non-Designer's Design Book

slide-13
SLIDE 13

Type families

slide-14
SLIDE 14

Via Thinking With Type

slide-15
SLIDE 15

So you want to emphasize?

Use italics to dierentiate Or weighting to make it bold Maybe even underline

But pick one! Avoid sending mixed signals!!

slide-16
SLIDE 16

Heads & bodies

slide-17
SLIDE 17

Via The New York Times

slide-18
SLIDE 18

Via The Non-Designer's Design Book

slide-19
SLIDE 19

This is my headline

My body text is the same font, but in a very dierent weight and size to help dierentiate it. Looks nice and clean, wouldn't you say?

slide-20
SLIDE 20

This is my other headline

But we can also have our body text be from a dierent type family than our headers to create clear visual distinctions between content types.

slide-21
SLIDE 21

Mixing typefaces

slide-22
SLIDE 22

Via Thinking With Type

slide-23
SLIDE 23

Guiding principle:

Typographic contrast

slide-24
SLIDE 24

Guiding principle:

Typographic contrast

slide-25
SLIDE 25

Via The Non-Designer's Design Book

slide-26
SLIDE 26

Via The Non-Designer's Design Book

slide-27
SLIDE 27

Via The Non-Designer's Design Book

slide-28
SLIDE 28

Via The Non-Designer's Design Book

slide-29
SLIDE 29

Layout

Making the grid work for you

slide-30
SLIDE 30

Single-column Multi-column Modular

slide-31
SLIDE 31

Via Thinking With Type

Guiding principle:

Organizing space

slide-32
SLIDE 32

Via Leo Tolstoy

slide-33
SLIDE 33

Via Observe Magazine

slide-34
SLIDE 34

Via The New York Times

slide-35
SLIDE 35

Via Layout Workbook

slide-36
SLIDE 36
slide-37
SLIDE 37
slide-38
SLIDE 38

Layout tip:

Don't let your text run too wide – or too narrow

(A.K.A. The Goldilocks principle of line-length)

slide-39
SLIDE 39

Too narrow

A sentence that is in a column that's too narrow becomes hard to read, don't you think?

slide-40
SLIDE 40

Too wide

A sentence that's in a column that's too wide just keeps going and going and loses readers' attention. (It's hard work to read this!)

slide-41
SLIDE 41

Just right

A line should hold 45-75 characters (counting both letters and spaces). 66 characters is ideal! Online, optimal width varies by font-size.

slide-42
SLIDE 42

Color

Using color eectively in design

slide-43
SLIDE 43

The color wheel

slide-44
SLIDE 44

Primary Secondary Tertiary

slide-45
SLIDE 45

Color relationships

slide-46
SLIDE 46
  • 1. Complementary

Via The Non-Designer's Design Book

slide-47
SLIDE 47
  • 2. Analogous

Via The Non-Designer's Design Book

slide-48
SLIDE 48

Hue v. Shade v. Tint

Via The Non-Designer's Design Book

slide-49
SLIDE 49

Hue = Pure color

slide-50
SLIDE 50

Shade = Add black

slide-51
SLIDE 51

Tint = Add white

slide-52
SLIDE 52

CMYK v. RGB

CMYK = Cyan, Magenta, Yellow, Key (black)

  • Works like paint (additive)
  • Used for print

RGB = Red, Green, Blue

  • Works like light (subtractive)
  • Used for the web
slide-53
SLIDE 53

Choosing colors

Via wesandersonpalettes.tumblr.com

slide-54
SLIDE 54

Tools

Adobe Color CC Color Brewer