1. Mobile Media Design 1

2. Two Methods for Mobile App Design User-Centered Iterative Design Rapid Prototyping From http://www.isabeljevans.com/expertise.html From http://www.smashingmagazine.com/2011/05/02/a-user-centered-approach-to-mobile-design/ 2

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 3

4. Size Matters Real Estate 4

5. About 1/3 About 1/2 About 1/6 9” Mac Classic Display Sizes of Design Medium 20” 9.7” 3.5” 5

6. Launcher Icon Size Not quite “Miniature Art” Mary Chadwell, Pyramid Waves 5” x 3 3/4” 256 x 256 57 x 57 iPhone is 1/6 the size of Desktop Less detail work, not more 6

7. Touch Technology User is Mobile 1 Camera, 8 mp Video 4:3 widescreen; 30fps GPS Accelerometer 3 orientations Touch technology User is Mobile 2 Cameras (Front: VGA; Back: 720p); 1 MP Video 4:3 ratio; 30fps GPS Accelerometer: 4 orientations Keyboard/Mouse User is Static 1 Camera Video GPS None Features of the Medium 7

9. Human Physiology

10. Rule of Thumb From http://answers.oreilly.com/topic/1802-designing-iphone-apps-the-rule-of-thumb/

11. Rule of Thumb From http://answers.oreilly.com/topic/1802-designing-iphone-apps-the-rule-of-thumb/

12. Controls on Bottom

13. Restrictions for Market

14. Primary Content on Top

15. More: Secondary Nav

16. Big Buttons

17. Overcrowding

18. Avoid Clutter

19. Simplicity

20. Simplicity

21. The One Thing

22. Scroll vs. 'Flip'

23. Magic Number 44

24. 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 25

26. App Aesthetics: Composition, Color, Shape, Typography, & Style 26

27. Composition “[T]he use of design to make all the different elements of a piece work together as a whole” (Bennett 178). László Moholy-Nagy, Composition #19, 1921 27

28. Unity is created by 1) using consistent style & 2) treating elements similarly Henri Matisse, La danse (1909) 28

29. 1. Dominant color matches throughout 2. Structure of the site pages is consistent Achieving Unity Across App Environment

30. Conceptual refers to “idea” elements Visual refers to “art-based” elements Conceptual and Visual Unity

31. 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

32. Color Umberto Boccioni, Elasticity, 1912 32

33. 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

34. RGB & CMYK CMYK (cyan, magenta, yellow, black) or “subtractive method,”is used for print • RGB (red, green, blue), or the “additive method,” is used for computers and TV 34

35. Nita Leland, Color Speak,1998 35

36. Coloron 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

37. 6 Color Palettes 37

38. Shape Henri Matisse, Jazz: Icarus, 1943 38

39. Shape is space enclosed by a line. • An object with the 3rd dimension added to its shape creates volume, or illusory space. 39

40. The subtle use of shape can enhance an image The subtle use of shape

41. The subtle use of shape can also . . . MS OneNote Productivity, Free Bump SNS, Free Golfshot GPS for Golf, $29.99 used as separate visual elements in an unobtrusive way used as part of the subject

42. Shapes that are not the main image can be used to enhance design to: • Make the main image stand out • Balance the image • Move the viewer’s eye • Reinforce an emotional feeling Emil Nolde, "Kleine Sonnenblumen" (1946) 42

43. Shape Identification 1. Humans easily identify a wide variety of shapes. 2. Designers can exploit this human trait in many ways.  Kazimir Malevich, Suprematist Painting: Aeroplane Flying (1915) Oil on canvas, MOMA, New York 43

44. iSki, a weather app for skiers, $1.99 44

45. abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopq rstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmn opqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijk lmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz • Typography 45

46. Type: Kind of lettering used Arial Font: Specific type (size) used Arial 72 pt. 46

47. Working with Type • 1. Type must be legible • 2. Too much distortion makes letters hard to read • 3. Simple serif fonts are best for long line 47

48. All Recipes Free

49. Combining 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