General Design Principles, Part I. Part 1: The Design Process.
-
Upload
silas-blair -
Category
Documents
-
view
220 -
download
0
Transcript of General Design Principles, Part I. Part 1: The Design Process.
![Page 1: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/1.jpg)
General Design Principles, Part I
![Page 2: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/2.jpg)
Part 1: The Design Process
![Page 3: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/3.jpg)
![Page 4: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/4.jpg)
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
![Page 5: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/5.jpg)
![Page 6: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/6.jpg)
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
![Page 7: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/7.jpg)
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
![Page 8: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/8.jpg)
Storyboards are traditionally used to ensure good flow of information
![Page 9: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/9.jpg)
![Page 10: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/10.jpg)
![Page 11: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/11.jpg)
Phase 3 of the Design Process: The Presentation Phase
Create layout thumbnails
Design the look / style of the project
Build the prototype
![Page 12: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/12.jpg)
Examples of thumbnails for designing the layout of a project
![Page 13: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/13.jpg)
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.
![Page 14: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/14.jpg)
Composition & LayoutComposition & Layout
14
László Moholy-Nagy, Composition #19, 1921
![Page 15: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/15.jpg)
“[T]he use of design to make all the different elements of a piece work together as a whole” (178).
Unity Layout
![Page 16: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/16.jpg)
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)
![Page 17: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/17.jpg)
Achieving UnityAchieving Unity
1. Color of armor does not match the helmet2. Details of the armor’s surface area differ
![Page 18: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/18.jpg)
Achieving Unity Across App Environment
1. Dominant color matches throughout1.
2.
2. Structure of the site pages is consistent
![Page 19: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/19.jpg)
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
![Page 20: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/20.jpg)
Conceptual and Visual Unity
Conceptual refers to “idea” elements
Visual refers to “art-based” elements
![Page 21: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/21.jpg)
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
![Page 22: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/22.jpg)
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
![Page 23: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/23.jpg)
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
![Page 24: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/24.jpg)
Layout –– Arranging all the elements of a design to Layout –– Arranging all the elements of a design to work togetherwork together
24
![Page 25: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/25.jpg)
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
![Page 26: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/26.jpg)
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
![Page 27: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/27.jpg)
Working with the Grid
Grid: A series of intersecting lines to align placement of elements on page
27
![Page 28: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/28.jpg)
Raphael. The School of Athens. 1509. Fresco. Vaticano, Stanza della Segnatura, Rome
![Page 29: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/29.jpg)
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
![Page 30: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/30.jpg)
Color
Umberto Boccioni, Elasticity, 1912
30
![Page 31: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/31.jpg)
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
![Page 32: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/32.jpg)
Prisms and Color
32
![Page 33: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/33.jpg)
33
![Page 34: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/34.jpg)
Two Types of Color Models
1. Additive 2. Subtractive
34
![Page 35: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/35.jpg)
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
![Page 36: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/36.jpg)
Additive Color
36
![Page 37: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/37.jpg)
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
![Page 38: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/38.jpg)
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
![Page 39: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/39.jpg)
Nita Leland, Color Speak,199839
![Page 40: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/40.jpg)
The primary or secondary color that makes up a given color. The hue of pink is red.
Hue
40
![Page 41: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/41.jpg)
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
![Page 42: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/42.jpg)
Value Relativity
Dark colors seem to have more discernible tints while lighter colors seem to have more discernible shades (147-8).
42
![Page 43: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/43.jpg)
Intensity, or Saturation is the level of pure color that is present.
43
![Page 44: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/44.jpg)
Color temperature is a characteristic of visible light expressed in terms of hot and cold.
![Page 45: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/45.jpg)
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
![Page 46: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/46.jpg)
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
![Page 47: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/47.jpg)
Dithering
The process a browser uses to produce a color outside the Web gamut
47
![Page 48: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/48.jpg)
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
![Page 49: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/49.jpg)
UsingUsing ColorColor
49
![Page 50: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/50.jpg)
50
![Page 51: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/51.jpg)
51
![Page 52: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/52.jpg)
52
![Page 53: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/53.jpg)
53
![Page 54: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/54.jpg)
54
![Page 55: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/55.jpg)
Basic Principles of Color
Color RelativityColor UnityComplementary ColorContrasting Color
55
![Page 56: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/56.jpg)
Color Relativity
Adjacent colors affect the appearance of a given color.
56
![Page 57: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/57.jpg)
Color UnityColor Unity
“similar colors to bring unity to a design” (159).
57
![Page 58: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/58.jpg)
Complementary Color
“colors that are direct opposites on the color wheel” (160)
58
![Page 59: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/59.jpg)
59
Color Wheels with Complementary Color Shown
![Page 60: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/60.jpg)
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
![Page 61: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/61.jpg)
Combining Color
61
Analogous
Alternate Analogous
Split Complement
Triad
Monochromatic
Value Variation
Go to http://colorschemedesigner.com/
![Page 62: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/62.jpg)
62
![Page 63: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/63.jpg)
63
![Page 64: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/64.jpg)
64
![Page 65: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/65.jpg)
Temperature
Edvard Munch, the Scream, 1893
Emotions
The Great Gatsby movie poster, 1974
Symbolism65
![Page 66: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/66.jpg)
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
![Page 67: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/67.jpg)
Color and Emotions
67
![Page 68: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/68.jpg)
Colors and Symbolism
68
![Page 69: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/69.jpg)
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
![Page 70: General Design Principles, Part I. Part 1: The Design Process.](https://reader036.fdocuments.in/reader036/viewer/2022062500/56649e3c5503460f94b2ed36/html5/thumbnails/70.jpg)
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