INTRODUCTION TO DESIGN PRINCIPLES PART 1

Sam Wainford

2

Graphic Design• Graphic design isn’t just about making things look pretty. • It is about effectively sending out a desired message through visual

communication. – easy to understand– appealing to the desired audience.

• Effective design uses design principles to – have a certain effect on the viewer– to give the viewer direction as to what they should do after seeing the design

• Two great references:– http://deltadesignz.com/2010/09/design-principle-lines-in-graphic-design/– http://deltadesignz.com/2010/09/design-principle-part-2-balance/

Graphic Design elements

• Design elements are the building blocks of graphics.– Line– Color – Shape – Texture

3

Lines

• Lines can be straight or curved.

• How are lines used in the composition on this slide?

4

5

Lines to create movement

6

Lines to create illusion of volume

7

Lines used for impression of chaos

8

Lines used to create perspective

9

Lines used to create space

10

Lines used to create wireframe

11

Lines used to create depth

12

Lines used to divide a page

13

Work with Line on the Web

• Great HTML5 online drawing tools:– Harmony: http://mrdoob.com/projects/harmony/

HTML5 enabled browser required (Chrome works best)– Pixlr: http://pixlr.com/editor/

Also available for Android and iPhone– DeviantArt Muro: http://muro.deviantart.com/

Awesome app in pure HTML5– Bonomo: http://bomomo.com/

Included 20 painting and drawing tools– Zwibbler: http://zwibbler.com/

Good for sketching wireframes– Sketchpad: http://mudcu.be/sketchpad/

Paint and draw with patterns, gradients and more

Popular Color Models

Why do we have all these different color models?

WEB MEDIA ART MEDIA

PRINT MEDIA

Artist’s RYB Color Wheel• Analogous colors are adjacent to each other on the color wheel.• Complementary colors are opposite each other on the color wheel.

15http://www.webexhibits.org/colorart/bh.html

Isaac Newton developed the first circular diagram of colors in 1666, based on his study of rainbows and prisms.

Primary colors of pigment, paint, pastels:RYB = red, yellow, blue

16

Primary, Secondary, and Tertiary ColorsPrimary Colors - 3 pigment colors that can not be mixed or formed by any combination of other colors. All other colors are derived from these 3 hues.

red, yellow, blue

green, orange, purple

Secondary Colors – These are the colors formed by mixing the primary pigment colors.

yellow-orange, red-orange, red-purple, blue-purple, blue-green and yellow-green

Tertiary Colors – formed by mixing a primary and a secondary color. That’s why the hue is a two word name, such as blue-green.

17

All in one

RGB Color Wheel• This color wheel is for

calculating color mixture for Additive Color Theory (light waves). Primary colors of light in the visible spectrum.

• Frequency of light wavelength determines what the eye sees.

• Work best when generated from a light emitting device such as a monitor.

• Always refer to the traditional Subtractive RYB Color Wheel (Red Yellow Blue) when identifying Color Schemes such as complimentary and color triad harmonies.

http://susandwheeler.blogspot.com/2011/05/rgb-color-wheel.html#.UY90bKLqmcM

RGB COLOR MODEL

RGB colors are called additive colors because you create white by adding R, G, and B together

Additive colors are used for lighting, television, and computer monitors. Your monitor, for example, creates color by emitting light through red, green, and blue phosphors.

A large percentage of the visible spectrum can be represented by mixing red, green, and blue (RGB) colored light in various proportions and intensities. Where the colors overlap, they create cyan, magenta, and yellow.

http://help.adobe.com/en_US/illustrator/cs/using/WS714a382cdf7d304e7e07d0100196cbc5f-6295a.html

Additive vs. Subtractive Color Models

• Additive color models display color as a result of light being transmitted (added). – The total absence of light would be perceived as black.– RGB: Web, TV, Computer monitor

• Subtractive color models display color as a result of

light being absorbed (subtracted) by the printing inks. – As more ink is added, less and less light is reflected.– Where there is a total absence of ink the resulting light

being reflected (from a white surface) would be perceived as white.

– CMYK: Print, printer’s ink, magazines, posters, etc– RYB: Painter's pigment, oil paint, pastels, etc– CMYK is derived from the traditional RYB model

When In Doubt, Save Images As RGB:RGB displays a much larger percentage of the visible spectrum than CMYK

Use RGB For Screen Displays and CMYK For Print

Confusion• There is a tremendous amount of confusion about whether

the color models are additive or subtractive.– Stems from semantics vs. science– Depends on your point of view– Doesn’t really matter as long as you know which on to use– Will not see additive or subtractive on tests for this class

• When identifying Color Schemes such as complimentary and color triad harmonies, always refer to the traditional, artist’s color model:– Red, Yellow, Blue– Will see on tests

for this class

Color Models & File Formats

Web File Formats:• GIF• PNG• JPG

http://www.sketchpad.net/basics5.htm

Color definitions• Hue is another word for color.• Chroma or Saturation is the intensity or purity of color.• Tint is a color mixed with white.• Tone is a color mixed with gray.• Shade is a color mixed with black.• Value is how light or dark a color is.

23

In Photoshop, use the Hue and Saturation and Brightness and Contrast Tools to quickly enhance photographs.

24

Saturation & Value

Example saturation and value variations on a single red hue.

25

Tints, Shades and Tones

• Tint – adding white to pure color

• Shade – adding black to pure color

• Tone – adding gray to pure color

26

Complimentary and Analogous ExamplesComplimentary Analogous

Green and red are complementary colors of same value. Used together they create vibrating boundaries.

Blue and green are analogous colors. When used together they produce amore calming effect.

The green reads lighter on the right even though they are the same color.

Simultaneous contrast: where appearance of the same color is affected by the appearance of other colors surrounding it.

27

Color Schemes/HarmoniesRed and Green :: Blue and Orange :: Purple and Yellow:

• Located directly across from each other on the color wheel.• Complementary colors rarely look good when used together. • Become extremely vibrant. • Difficult to read, especially if they are of the same value.

Complementary colors are really bad for text!Complimentary

Analogous

Red and Orange :: Blue and Green, etc

• Analogous colors are located next to each other on the color wheel. • They usually match extremely well.• Create almost no contrast. • They’re good for very serene, peaceful designs. • Artwork where you want viewers to feel comfortable.

28

Color Schemes/Harmonies

Triad

Triad – uses colors that are evenly spaced around the traditional artist’s color wheel.

Triadic color harmonies tend to be quite vibrant, even if you use pale or unsaturated versions of your hues.

To use a triadic harmony successfully, the colors should be carefully balanced – let one color dominate and use the two others for accent.

29

Color Schemes/Harmonies

Rectangle (tetradic)

Rectangle (tetradic) - uses four colors arranged into two complementary pairs.

This color scheme is very rich and offers a lot of possibilities.

It works best if there is one dominant color.

30

Color Schemes/Harmonies

Split-Complementary

Split-Complementary – is a variation of the complementary color scheme.

In addition to the base color, it uses the two colors adjacent to its complement.

This color scheme has the same strong visual contrast as the complementary color scheme, but has less tension.

The split-complimentary color scheme is often a good choice for beginners, because it is difficult to mess up.

31

Color Pickers on the Web

• Use these resources to choose great color schemes!– Peter Piper’s Palette Picker:

http://www.worqx.com/color/palette.htm

– The Color Wizard: http://www.colorsontheweb.com/colorwizard.asp

– Colorminder: http://coloreminder.com/

USE THEM!

32

Color Optical Illusions

See if you can create this effect in PhotoShop

33

PhotoShop lab

How may colors do you see?

34

Bezold Effect and Munker-White Illusion• The Bezold effect is an optical illusion: A

color may appear different depending on its relation to adjacent colors.

• Munker-White Illusion is an optical illusion illustrating the fact that the same target luminance can elicit different perceptions of brightness in different contexts.

35

Bezold Effect

The background coloris the exact same color in all these images.

Using Color in design

• Use color to label or show hierarchy.• Use color to represent or imitate reality.• Use color to unify, separate, or emphasize.• Use color to decorate.• Use color consistently.

36

Shapes• Shapes are enclosed objects

that can be created by line or created by color and value changes that define their edges.

37

38

Negative Space

• The space around a shape is just as important. • What do you see?

39

Negative Space in Design

Texture• Texture is the surface look of

an object created by varying dark and light areas.

•Roughness•Smoothness•Depth

40

41

Texture created with line

42

Summary

• Use design principles as a means of communicating ideas

• Choose effective color schemes• Be aware of negative space