Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative...
-
Upload
lewis-higgins -
Category
Documents
-
view
220 -
download
0
Transcript of Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative...
![Page 1: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/1.jpg)
Mobile Media Design
1
![Page 2: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/4.jpg)
4
Real EstateSize
Matters
![Page 5: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/8.jpg)
![Page 9: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/9.jpg)
Human Physiology
![Page 10: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/12.jpg)
Controls on Bottom
![Page 13: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/13.jpg)
Restrictions for Market
![Page 14: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/14.jpg)
Primary Content on Top
![Page 15: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/15.jpg)
More: Secondary Nav
![Page 16: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/16.jpg)
Big Buttons
![Page 17: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/17.jpg)
Overcrowding
![Page 18: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/18.jpg)
Avoid Clutter
![Page 19: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/19.jpg)
Simplicity
![Page 20: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/20.jpg)
Simplicity
![Page 21: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/21.jpg)
The One Thing
![Page 22: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/22.jpg)
Scroll vs. 'Flip'
![Page 23: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/23.jpg)
Magic Number 44
![Page 24: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/24.jpg)
Iconic 88
![Page 25: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/26.jpg)
26
App Aesthetics: Composition, Color, Shape, Typography, & Style
![Page 27: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/30.jpg)
Conceptual and Visual Unity
Conceptual refers to “idea” elements
Visual refers to “art-based” elements
![Page 31: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/32.jpg)
Color
Umberto Boccioni, Elasticity, 1912
32
![Page 33: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/35.jpg)
Nita Leland, Color Speak,199835
![Page 36: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/38.jpg)
ShapeShape
Henri Matisse, Jazz: Icarus, 1943
38
![Page 39: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/44.jpg)
44
iSki, a weather app for skiers, $1.99
![Page 45: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/45.jpg)
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopq rstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmn opqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijk lmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
Typography
45
![Page 46: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/46.jpg)
Type: Kind of lettering used
Font: Specific type (size) used
46
Arial
Arial 72 pt.
![Page 47: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/48.jpg)
All RecipesFree
![Page 49: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/50.jpg)
![Page 51: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/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 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/55.jpg)
Strip Designer, free
Cook’s, free
The Official Jazzfest app, free
![Page 56: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/56.jpg)
![Page 57: Mobile Media Design 1. Two Methods for Mobile App Design 2 From se.html User-Centered Iterative Design From .](https://reader035.fdocuments.net/reader035/viewer/2022062407/56649d975503460f94a8181f/html5/thumbnails/57.jpg)
Thank you.
57