Mobile Media Design
1
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
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
4
Real EstateSize
Matters
20” 9.7” 3.5”
About 1/2 About 1/3
About 1/6
Display Sizes of Design Medium
9”
Mac Classic
5
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
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
Human Physiology
Rule of Thumb
From http://answers.oreilly.com/topic/1802-designing-iphone-apps-the-rule-of-thumb/
Rule of Thumb
From http://answers.oreilly.com/topic/1802-designing-iphone-apps-the-rule-of-thumb/
Controls on Bottom
Restrictions for Market
Primary Content on Top
More: Secondary Nav
Big Buttons
Overcrowding
Avoid Clutter
Simplicity
Simplicity
The One Thing
Scroll vs. 'Flip'
Magic Number 44
Iconic 88
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
26
App Aesthetics: Composition, Color, Shape, Typography, & Style
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).
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)
Achieving Unity Across App Environment
Dominant color matches throughout
1.2.Structure of the site pages is consistent
Conceptual and Visual Unity
Conceptual refers to “idea” elements
Visual refers to “art-based” elements
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
Color
Umberto Boccioni, Elasticity, 1912
32
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
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
Nita Leland, Color Speak,199835
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
ShapeShape
Henri Matisse, Jazz: Icarus, 1943
38
Shape is space enclosed by a line.
An object with the 3rd dimension added to its shape creates volume, or illusory space.
39
The subtle use of shape
The subtle use of shape can enhance The subtle use of shape can enhance an imagean image
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 . . .
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
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.
44
iSki, a weather app for skiers, $1.99
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopq rstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmn opqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijk lmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
Typography
45
Type: Kind of lettering used
Font: Specific type (size) used
46
Arial
Arial 72 pt.
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
All RecipesFree
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
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
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
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
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
Strip Designer, free
Cook’s, free
The Official Jazzfest app, free
Thank you.
57