INTRODUCTION TO GRAPHIC DESIGN By David Ledo Attractive Things - - PowerPoint PPT Presentation

▶
introduction to graphic design
SMART_READER_LITE
LIVE PREVIEW

INTRODUCTION TO GRAPHIC DESIGN By David Ledo Attractive Things - - PowerPoint PPT Presentation

Oct 22, 2022 140 likes •617 views

INTRODUCTION TO GRAPHIC DESIGN By David Ledo Attractive Things Work Better Attractive things make people feel good, which in turn makes them think more creatively. Don Norman , Emotional Design (2004) THE ELEMENTS OF DESIGN Building

slide-1
SLIDE 1

INTRODUCTION TO GRAPHIC DESIGN

By David Ledo

slide-2
SLIDE 2

Attractive things make people feel good, which in turn makes them think more creatively.

– Don Norman, Emotional Design (2004)

Attractive Things Work Better

slide-3
SLIDE 3

THE ELEMENTS OF DESIGN

Building blocks that compose visuals

slide-4
SLIDE 4

Georges-Pierre Seurat (1884-1886) Alena Advertising (2011)

POINT / MARK

Marks a position in space. Can be insignifjcant points or fmecks, or a concentrated locus of power.

slide-5
SLIDE 5

Josef Muller Brockman (1954) Paul Rand Xavier Esclusa Trias Hans Neuburg (1958)

Infjnite series of points. It is a connection between two points, or a path of a moving point.

LINE

slide-6
SLIDE 6

Burton Kramer, 1974 Lazlo Moholy Nagy Mike Joyce

SHAPE

Area within the implied line – shapes have two dimension, length and width, and can be geometric or free form.

slide-7
SLIDE 7

Paula Scher Devin Sanger Devin Sanger Thomas Ciszewski

SPACE

Visual distribution in the composition. Can give illusion and feeling of depth.

slide-8
SLIDE 8

Cruz Diez Aaron Draplin, 2013 Jackie Lee, 2014

COLOUR

Has 3 properties: Hue (name of the colour), Value (lightness or darkness) and Intensity (purity of the hue)

slide-9
SLIDE 9

Owen Gildersleeve Alex Robbins

TEXTURE

Taking everyday surfaces or patterns from the physical world and incorporating them into the visuals.

slide-10
SLIDE 10
slide-11
SLIDE 11

GESTALT AND DESIGN

Putting elements together

slide-12
SLIDE 12

LAW OF PRAGNANZ

We simplify complex shapes into simpler components

slide-13
SLIDE 13

LAW OF SIMILARITY

Similar objects are perceived as belonging together

slide-14
SLIDE 14

LAW OF PROXIMITY

Objects that are close to one another appear to form groups

slide-15
SLIDE 15

CLOSURE

Eyes will fjll missing lines to make sense of shapes

slide-16
SLIDE 16

COMMON REGION

Objects are seen as part of a group if placed within the same region

slide-17
SLIDE 17

CONTINUATION

Elements arranged on a line or curve are perceived as more related than those not on the line or curve

slide-18
SLIDE 18

COMMON FATE

Elements that move in the same direction are perceived as more related than those moving in a difgerent direction

slide-19
SLIDE 19

PARALLELISM

Elements parallel to each other are seen as more related than those not parallel to each other

slide-20
SLIDE 20

FOCAL POINT

Elements with a point of interest, emphasis or difgerence will capture visual attention. Attention draws towards contrast

slide-21
SLIDE 21

SOME DESIGN PRINCIPLES

Selecting ones to start with...

slide-22
SLIDE 22

Josef Muller-Brockmann Josef Muller-Brockmann

BALANCE

State of equilibrium where no part has more presence than

  • ther. Can be radial, symmetric or asymmetric

Shepard Fairey

slide-23
SLIDE 23

PROPORTION

Relative size and scale of elements in a design. Determines hierarchy

slide-24
SLIDE 24

EMPHASIS

Creating dominance and focus in the work. One can emphasize colour, value, shapes, etc.

https://www.smashingmagazine.com/2009/07/les- sons-from-swiss-style-graphic-design/

slide-25
SLIDE 25

ALIGNMENT

Organizing items in parallel. Understanding other grid- like relationships

slide-26
SLIDE 26

MANY OTHERS LEFT BEHIND

There are more principles worth exploring – Perspective Movement Pattern Repetition Rhythm Variety Harmony Unity Negative Space

slide-27
SLIDE 27

APPLYING WHAT WE LEARNED TO UI

They work better than you think

slide-28
SLIDE 28

Barbara Marcantonio https://dribbble.com/shots/1909306-Gestalt-principles-applied-to-web-design/attach- ments/326587

slide-29
SLIDE 29
slide-30
SLIDE 30

http://www.oecdbetterlifeindex.org

slide-31
SLIDE 31
slide-32
SLIDE 32
slide-33
SLIDE 33

https://foundation.zurb.com/templates

slide-34
SLIDE 34

PICKING COLOURS THAT WORK

Tales from experience

slide-35
SLIDE 35

MOVING AWAY FROM PURE RGB

Pure RGB colours tend to look intense and unnatural

slide-36
SLIDE 36

THINK ABOUT CONTRAST

Black font + white background is best, followed by white font + black background

hello world hello world hello world hello world not enough contrast hello world contrast too intense

slide-37
SLIDE 37

PICK COLOURS FROM PHOTOS

Sometimes it works to use colours from photos / movies, since they have colour interactions that work together

slide-38
SLIDE 38

USE TEMPLATES FROM THE WEB

Adobe Color CC has great colour palettes (and free)

slide-39
SLIDE 39

SOME TIPS ABOUT FONTS

Credit for many of the next slides to Christina White

slide-40
SLIDE 40
slide-41
SLIDE 41

Merriweather

Helvetica

Sans-Serif Fonts

Typically works best on screens

Serif Fonts

Typically works best on print

slide-42
SLIDE 42
slide-43
SLIDE 43
slide-44
SLIDE 44
slide-45
SLIDE 45
slide-46
SLIDE 46
slide-47
SLIDE 47

The Design Deck