Mobile Media Design
description
Transcript of Mobile Media Design
![Page 1: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/1.jpg)
Mobile Media Design
1
![Page 2: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/2.jpg)
Two Methods for Mobile App Design
2
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 3: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/3.jpg)
3
App Design Affordances & Constraints
•Sensuous (re: features like camera, audio recording, etc.)•Ubiquitous•Aware (location, spatial, & context)•Social•Personal & Useful•Interactive•Aesthetic (e.g. color, scroll/swipe)
•Small amount of real estate•Human physiology (Rule of Thumb)•Strict design requirements for some markets; design conventions•Limitations on codable attributes•Device restrictions•System restrictions
![Page 4: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/4.jpg)
4
Real EstateSize
Matters
![Page 5: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/5.jpg)
20” 9.7” 3.5”
About 1/2 About 1/3
About 1/6
Display Sizes of Design Medium
9”
Mac Classic
5
![Page 6: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/6.jpg)
iPhone is 1/6 the size of Desktop
Less detail work, not more256 x 256 57 x 57
Launcher Icon Size
Not quite “Miniature Art”
Mary Chadwell, Pyramid Waves
5” x 3 3/4”
6
![Page 7: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/7.jpg)
Featuresof the
Medium
Keyboard/MouseUser is Static1 CameraVideoGPSNone
Touch technologyUser is Mobile
2 Cameras (Front: VGA; Back: 720p); 1 MPVideo 4:3 ratio; 30fps
GPSAccelerometer: 4 orientations
Touch TechnologyUser is Mobile1 Camera, 8 mpVideo 4:3 widescreen; 30fpsGPSAccelerometer 3 orientations
7
![Page 8: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/8.jpg)
![Page 9: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/9.jpg)
Human Physiology
![Page 10: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/10.jpg)
Rule of Thumb
From http://answers.oreilly.com/topic/1802-designing-iphone-apps-the-rule-of-thumb/
![Page 11: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/11.jpg)
Rule of Thumb
From http://answers.oreilly.com/topic/1802-designing-iphone-apps-the-rule-of-thumb/
![Page 12: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/12.jpg)
Controls on Bottom
![Page 13: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/13.jpg)
Restrictions for Market
![Page 14: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/14.jpg)
Primary Content on Top
![Page 15: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/15.jpg)
More: Secondary Nav
![Page 16: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/16.jpg)
Big Buttons
![Page 17: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/17.jpg)
Overcrowding
![Page 18: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/18.jpg)
Avoid Clutter
![Page 19: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/19.jpg)
Simplicity
![Page 20: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/20.jpg)
Simplicity
![Page 21: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/21.jpg)
The One Thing
![Page 22: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/22.jpg)
Scroll vs. 'Flip'
![Page 23: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/23.jpg)
Magic Number 44
![Page 24: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/24.jpg)
Iconic 88
![Page 25: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/25.jpg)
25
Design according to Tapworthy• Mirror the rules of physical world
• Put primary controls in thumb's "hot zone"
• Remember 44 as the number for tap areas
• Be generous with space, don't crowd design
• Keep controls in reach, avoid scrolling
![Page 26: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/26.jpg)
26
App Aesthetics: Composition, Color, Shape, Typography, & Style
![Page 27: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/27.jpg)
CompositionComposition
27
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” (Bennett 178).
![Page 28: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/28.jpg)
Unity is created by 1) using consistent Unity is created by 1) using consistent style & 2) treating elements similarlystyle & 2) treating elements similarly
28
Henri Matisse, La danse (1909)
![Page 29: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/29.jpg)
Achieving Unity Across App Environment
Dominant color matches throughout
1.2.Structure of the site pages is consistent
![Page 30: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/30.jpg)
Conceptual and Visual Unity
Conceptual refers to “idea” elements
Visual refers to “art-based” elements
![Page 31: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/31.jpg)
Digital media design requires unity because work generally requires many images in one screen or across many pages or screens.
Bill Viola, Hall of Whispers, 1995
![Page 32: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/32.jpg)
Color
Umberto Boccioni, Elasticity, 1912
32
![Page 33: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/33.jpg)
What Is Color?The way “we perceive different wavelengths of light” (Bennett 139).
Different colors in the spectrum are created by different wavelengths of light.
33
![Page 34: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/34.jpg)
RGB & CMYK
RGB (red, green, blue), or the “additive method,” is used for computers and TV
CMYK (cyan,
magenta,
yellow, black) or
“subtractive
method,”is used
for print
34
![Page 35: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/35.jpg)
Nita Leland, Color Speak,199835
![Page 36: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/36.jpg)
Color on the Web
256: The number of colors produced by a 32 bit computer (1 byte, or 8 bits x 32 = 256.216: The number of colors that were available in the Web standard.212: The number of colors Internet Explorer read.
36
![Page 38: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/38.jpg)
ShapeShape
Henri Matisse, Jazz: Icarus, 1943
38
![Page 39: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/39.jpg)
Shape is space enclosed by a line.
An object with the 3rd dimension added to its shape creates volume, or illusory space.
39
![Page 40: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/40.jpg)
The subtle use of shape
The subtle use of shape can enhance The subtle use of shape can enhance an imagean image
![Page 41: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/41.jpg)
GolfshotGPS for Golf, $29.99
MS OneNoteProductivity, Free
BumpSNS, Free
used as part of the subject
used as separate visual elements in an unobtrusive way
The subtle use of shape can The subtle use of shape can also . . .also . . .
![Page 42: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/42.jpg)
Shapes that are not the main image can be used to enhance design to:
1.Make the main image stand out 2.Balance the image3.Move the viewer’s eye4.Reinforce an emotional feeling
Emil Nolde, "Kleine Sonnenblumen" (1946)
42
![Page 43: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/43.jpg)
Kazimir Malevich, Suprematist Painting: Aeroplane Flying (1915) Oil on canvas, MOMA, New York
43
Shape Identification
1. Humans easily identify a wide variety of shapes.
2. Designers can exploit this human trait in many ways.
![Page 44: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/44.jpg)
44
iSki, a weather app for skiers, $1.99
![Page 45: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/45.jpg)
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopq rstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmn opqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijk lmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
Typography
45
![Page 46: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/46.jpg)
Type: Kind of lettering used
Font: Specific type (size) used
46
Arial
Arial 72 pt.
![Page 47: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/47.jpg)
Working with Working with TypeType
1. Type must be legible2. Too much distortion makes letters hard to read3. Simple serif fonts are best for long line
47
![Page 48: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/48.jpg)
All RecipesFree
![Page 49: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/49.jpg)
Combining TypeCombining Type
One way to avoid bad use of type by using one typeface but varying the size. Using different type in the same project can add emphasis to certain parts.
49
![Page 50: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/50.jpg)
![Page 51: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/51.jpg)
StyleStyle
Marie Laurencin, Ballet Dancers, 1935
Edgar Degas, L'etoile [La danseuse sur la scene], 1878 Henri de Toulouse-Lautrec, Marcelle
Lender Dancing the Bolero in "Chilpéric," 1895–96
51
![Page 52: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/52.jpg)
Style as technique: treatment of the visual elements of a design to give them a certain look
Two Definitions of StyleTwo Definitions of Style
Donna Leishman, Red Riding Hood, 2004
Donna Leishman, The Possession of Christian Shaw, 2000
52
![Page 53: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/53.jpg)
Two Definitions of StyleTwo Definitions of Style
Style as an artistic movement: identifies a design within a recognized historical period in art, e.g., Art Deco or Renaissance
Franz von Stuck , Salome, 1906
Benozzo Gozzoli, Dance of Salome, 1461-62
53
![Page 54: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/54.jpg)
Creating Creating StyleStyle
The tools you use affect the appearance of the style.
Matthew Barney, Cremaster 3, 2004
Certain software programs do certain kinds of styles well.
54
![Page 55: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/55.jpg)
Strip Designer, free
Cook’s, free
The Official Jazzfest app, free
![Page 56: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/56.jpg)
![Page 57: Mobile Media Design](https://reader036.fdocuments.in/reader036/viewer/2022062517/56813d50550346895da70be8/html5/thumbnails/57.jpg)
Thank you.
57