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