C.R.A.P . RULES - According to The Non-Designers Design Book by - - PowerPoint PPT Presentation

▶
c r a p
SMART_READER_LITE
LIVE PREVIEW

C.R.A.P . RULES - According to The Non-Designers Design Book by - - PowerPoint PPT Presentation

Jun 07, 2023 291 likes •908 views

THE 4 BASIC PRINCIPLES THE C.R.A.P . RULES - According to The Non-Designers Design Book by Robin Williams What to do before design? What to do before design? Target group Sitemap Research Wireframes Sender Paper prototyping Test

slide-1
SLIDE 1
  • According to “The Non-Designers Design Book” by Robin Williams

THE 4 BASIC PRINCIPLES

THE

C.R.A.P .RULES

slide-2
SLIDE 2

What to do before design?

slide-3
SLIDE 3

Target group Research Sender Message Communication

Sitemap Wireframes Paper prototyping Test wireframes Usability testing

What to do before design?

And then Design…

slide-4
SLIDE 4

Anatomy of website

Jason Beaird - The principles of beautiful webdesign

slide-5
SLIDE 5

THE 4 BASIC PRINCIPLES

THE

C.R.A.P .RULES

  • According to “The Non-Designers Design Book” by Robin Williams
slide-6
SLIDE 6

Contrast Repetition Alignment Proximity

Kontrast Gentagelse Tilpasning Nærhed

UK DK Agronym /abbreviation

slide-7
SLIDE 7

Headlines and subheads need to be repeated and consistent. Make the look stronger in contrast. The typeface has to be stronger.

Contrast

If the elements on the page are not the same, them make them very different

Contrast,Alignment Repetition & Proximity

slide-8
SLIDE 8

CONTRAST BY:

TYPE / SIZE PLACEMENT (VERTICAL/HORIZONTAL) GRAPHICS/FORM COLOR TEXTURE WEIGHT

  • DON’T BE AFRAID TO MAKE THEM REALLY DIFFERENT
slide-9
SLIDE 9

Contrast

slide-10
SLIDE 10

Contrast

slide-11
SLIDE 11

Contrast

slide-12
SLIDE 12

Contrast - using texture

GOOD or BAD?

slide-13
SLIDE 13

http://victorydesign.deviantart.com/art/Web-design-Irrigation-162449898

slide-14
SLIDE 14

FORM AND GRAPHICS

Contrast

Two different fonts/shapes makes contrast

slide-15
SLIDE 15

PROXIMITY

slide-16
SLIDE 16

Contrast

SIZE AND SHAPE

slide-17
SLIDE 17

Contrast by color

http://lifelab.com.au/
slide-18
SLIDE 18

Contrast

slide-19
SLIDE 19

CONTRAST BY COLOR

slide-20
SLIDE 20

Elements that aren’t the same should be very different so they stand out

By SencerBugrahan

Contrast

slide-21
SLIDE 21

CONTRAST & PROXIMITY

slide-22
SLIDE 22

EXAMPLE OF CONTRAST & PROXIMITY

slide-23
SLIDE 23

CONTRAST PHOTO AND ILLUSTRATION

Gary Nock

slide-24
SLIDE 24

CONTRAST PHOTO AND ILLUSTRATION

slide-25
SLIDE 25

REPETITION

Being consistent HEADLINES - the same style and size Repeat visual elements of the design strengthens the UNITY

slide-26
SLIDE 26

FLOW - also important

slide-27
SLIDE 27
slide-28
SLIDE 28
slide-29
SLIDE 29
slide-30
SLIDE 30
slide-31
SLIDE 31
slide-32
SLIDE 32
slide-33
SLIDE 33
slide-34
SLIDE 34
slide-35
SLIDE 35
slide-36
SLIDE 36

REPETITION

slide-37
SLIDE 37

http://www.pablo-costa.com/dsn_southland.html

Contrast & Repetition

REPETITION REPETITION

slide-38
SLIDE 38

Contrast & Repetition

REPETITION REPETITION

slide-39
SLIDE 39

ALIGNMENT

Nothing should be placed randomly Every element has to be placed in a visual connection with each other

slide-40
SLIDE 40

ALIGNMENT

slide-41
SLIDE 41

ALIGNMENT

slide-42
SLIDE 42
slide-43
SLIDE 43
slide-44
SLIDE 44

http://960.gs

slide-45
SLIDE 45

CONTRAST BY 3D AND COLOR

IN PHOTOSHOP

If you want to repeat an object like a rectangle Hold down the Alt + shift and it copies and keeps alignment

slide-46
SLIDE 46

The longing we have for structure, grids, and ideal proportion is deeply ingrained in human nature. A layout that “doesn’t look quite right” can often be fixed by moving elements and resizing them

  • n the grid. So if a layout isn’t working, keep experimenting. You will have achieved balance

http://960.gs guideguide.me 1200px.com thisisdallas.github.io unsemantic.com elliotjaystocks.com/blog lemonade.im

GRIDSYSTEMS

slide-47
SLIDE 47

PLACEMENT

slide-48
SLIDE 48

ALIGNMENT/TILPASNING

slide-49
SLIDE 49
slide-50
SLIDE 50

ALIGNMENT/TILPASNING

Flush left

slide-51
SLIDE 51

ALIGNMENT/TILPASNING

Justified

J Kyrnin.

slide-52
SLIDE 52

ALIGNMENT/TILPASNING

Centered

ALIGNMENT/TILPASNING

slide-53
SLIDE 53

ALIGNMENT

Flush right & flow

slide-54
SLIDE 54

ALIGNMENT

Which direction does it lead you to go?

slide-55
SLIDE 55

ALIGNMENT/TILPASNING ALIGNMENT/TILPASNING

slide-56
SLIDE 56

ALIGNMENT/TILPASNING

slide-57
SLIDE 57

Placement and direction Vertical/horizontal

slide-58
SLIDE 58

PROXIMITY/NÆRHED

Group related items Separate items that are NOT related Nearness in place, order, occurrence or relocation

Creates an organized Design
slide-59
SLIDE 59

http://www.articulate.com/rapid-elearning/heres-why-contrast-is-an-essential-part-of-e-learning-design/

The principle of proximity calls for related items to be grouped visually, creating less clutter and making for a more organized layout. Items unrelated to each other should be placed further apart, to emphasize their lack

  • f relationship.

PROXIMITY/NÆRHED

slide-60
SLIDE 60

“The Non-Designers Design Book” by Robin Williams

slide-61
SLIDE 61

Assignment:

Create a website or a poster design Using the C.R.A.P . rules Just a paper prototype

Fresh eggs

Sender: A personal Blog