General Design Principles, Part I

Part 1: The Design Process

Two Methods for Mobile App Design

4

From http://www.isabeljevans.com/expertise.html

User-Centered Iterative Design

From http://www.smashingmagazine.com/2011/05/02/a-user-centered-approach-to-mobile-design/

Rapid Prototyping

Phase 1 of the Design Process: The Information Phase

Define the purpose or goal of the project

Determine the target audience

Plan content

establish benefits | provide information | entertain | sale products | educate | provide information referencecustomers | professionals | youth | students | colleagueswritten text | images | music/sound | video | animation |widgets

Phase 2 of the Design Process: The Interaction Phase

Plan content flow

Determine the amount of control allowed the user

Map out design

Think through the navigation

Storyboards are traditionally used to ensure good flow of information

Phase 3 of the Design Process: The Presentation Phase

Create layout thumbnails

Design the look / style of the project

Build the prototype

Examples of thumbnails for designing the layout of a project

SummaryThe design process has 3 phases that must be followed in order:

Information Phase Interaction Phase Presentation Phase

Only after the 3 phases are complete, the design can be executed.

Composition & LayoutComposition & Layout

14

László Moholy-Nagy, Composition #19, 1921

“[T]he use of design to make all the different elements of a piece work together as a whole” (178).

Unity Layout

Unity is created by 1) using consistent style Unity is created by 1) using consistent style & 2) treating elements similarly& 2) treating elements similarly

16

Henri Matisse, La danse (1909)

Achieving UnityAchieving Unity

1. Color of armor does not match the helmet2. Details of the armor’s surface area differ

Achieving Unity Across App Environment

1. Dominant color matches throughout1.

2.

2. Structure of the site pages is consistent

Conceptual & Visual UnityConceptual & Visual Unity

Conceptual Unity: Conceptual Unity:

Unity of meaning Unity of meaning or referenceor reference

Visual Unity: Visual Unity:

Unity of visual elementsUnity of visual elements

19

11 22

Conceptual and Visual Unity

Conceptual refers to “idea” elements

Visual refers to “art-based” elements

Digital media design requires unity because it requires many images in one screen or across many pages or screens

Bill Viola, Hall of Whispers, 1995

Unity Unity ToolsTools

1. Space: Grouping or arranging in a pattern

2. Line: Similar line quality, direction devices

3. Shape: Groups of similar shapes

4. Value: Similar values, consistent light source

5. Texture: Similar textures

6. Color: Similar hues, tints, shades

Mariko Mori, Birth of a Star, 1995

22

Unity Unity ToolsTools

1. Space: Grouping or arranging in a pattern

2. Line: Similar line quality, direction devices

3. Shape: Groups of similar shapes

4. Value: Similar values, consistent light source

5. Texture: Similar textures

6. Color: Similar hues, tints, shades

IPhone Interface

23

Layout –– Arranging all the elements of a design to Layout –– Arranging all the elements of a design to work togetherwork together

24

Content Content read left read left to right, to right, top to top to bottombottom

Important Important elements near elements near toptop

Most important elements are larger than restMost important elements are larger than rest

Captions near Captions near imagesimages

““Next” or “continue” near bottomNext” or “continue” near bottom

25

Content Content read left read left to right, to right, top to top to bottombottom

Important Important elements near elements near toptop

Most important elements are larger than restMost important elements are larger than rest

Captions near Captions near imagesimages

Less important “call to action” near bottomLess important “call to action” near bottom26

NavigationChanges

Working with the Grid

Grid: A series of intersecting lines to align placement of elements on page

27

Raphael.  The School of Athens. 1509. Fresco. Vaticano, Stanza della Segnatura, Rome

SummarySummary

1. Composition is the arrangement of all the elements to make the piece work as a whole

2. Two important aspects of composition are unity and layout

3. Unity can be conceptual—related to meaning—or visual—related to visual elements

4. Layout involves arranging all of the elements or images of a design to work together

29

Color

Umberto Boccioni, Elasticity, 1912

30

What Is Color?

The way “we perceive different wavelengths of light” (139).

Different colors in the spectrum are created by different wavelengths of light.

31

Prisms and Color

32

33

Two Types of Color Models

1. Additive 2. Subtractive

34

Additive

Color

The color model for digital media

Its primary colors are red, green, and blue (RGB)

Its secondary colors (produced by adding two primaries) are cyan, magenta, and yellow

35

Additive Color

36

Primary colors are red, blue, yellow (close to secondary colors of additive method)

Subtractive ColorAn object of a specific color absorbs (subtracts) all the other colors.

Secondary colors are purple, green, orange.3

7

RGB and CMYK

RGB (red, green, blue), or the additive method, is used for computers and TV

CMYK (cyan, magenta, yellow, black) is used for print

38

Nita Leland, Color Speak,199839

The primary or secondary color that makes up a given color. The hue of pink is red.

Hue

40

Tint means that white has been added to a color.Shade means that black has been added to a color.

Value is the variation of light and dark

shade tint

original color

41

Value Relativity

Dark colors seem to have more discernible tints while lighter colors seem to have more discernible shades (147-8).

42

Intensity, or Saturation is the level of pure color that is present.

43

Color temperature is a characteristic of visible light expressed in terms of hot and cold.

Gamut is the spectrum of colors available in any medium

Large area = colors humans can seeWhite triangle = colors a monitor can produceBlack line = colors a printer can produce

45

Color on the Web

256: The number of colors that can be produced by a 32 bit computer (1 byte, or 8 bits x 32 = 256)216: The number of colors available in the Web standard212: The number of colors Internet Explorer can read

46

Dithering

The process a browser uses to produce a color outside the Web gamut

47

Summary

1.Color is determined by the wavelength of light rays2.Additive (RGB) color, used in new media design,

mimics the way natural light behaves3.Subtractive (CMYK) color is used in printing4.The gamut of colors in the Web-safe palette is

limited to 216 colors

Wassily Kandinsky, Fugue, 1914, oil on canvas

48

UsingUsing ColorColor

49

50

51

52

53

54

Basic Principles of Color

Color RelativityColor UnityComplementary ColorContrasting Color

55

Color Relativity

Adjacent colors affect the appearance of a given color.

56

Color UnityColor Unity

“similar colors to bring unity to a design” (159).

57

Complementary Color

“colors that are direct opposites on the color wheel” (160)

58

59

Color Wheels with Complementary Color Shown

60

Found on opposite sides of the color wheel. “The further apart and more directly opposite each other, the greater the contrast.”

Contrasting Color

From Layout and Design Glossary, http://desktoppub.about.com/od/glossarylayout/Page_Layout_and _Design_Glossary.htm

Combining Color

61

Analogous

Alternate Analogous

Split Complement

Triad

Monochromatic

Value Variation

Go to http://colorschemedesigner.com/

62

63

64

Temperature

Edvard Munch, the Scream, 1893

Emotions

The Great Gatsby movie poster, 1974

Symbolism65

Color Temperature

Warm vs. cool colorsThe complement of a cool color is a warm color and vice versa.Color relativity affects the warmth or coolness of a given hue.

66

Color and Emotions

67

Colors and Symbolism

68

Summary

Color relativity affects a designer’s color choicesComplementary colors make each other stand outThere are six major three-color combination schemesColor temperature, emotion, and symbolism affect how audiences perceive your design

69

Resources

Color Palette Generator, http://www.degraeve.com/color-palette/You can determine the color palette of any website with this nifty tool

Color Scheme Designer, http://colorschemedesigner.com/Create your own cool color palette