1 / 57

Mobile Media Design

Mobile Media Design. 1. 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. App Design Affordances & Constraints.

suchi
Download Presentation

Mobile Media Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

  8. Human Physiology

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

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

  11. Controls on Bottom

  12. Restrictions for Market

  13. Primary Content on Top

  14. More: Secondary Nav

  15. Big Buttons

  16. Overcrowding

  17. Avoid Clutter

  18. Simplicity

  19. Simplicity

  20. The One Thing

  21. Scroll vs. 'Flip'

  22. Magic Number 44

  23. Iconic 88

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

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

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

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

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

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

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

  31. Color Umberto Boccioni, Elasticity, 1912 32

  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

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

  34. Nita Leland, Color Speak,1998 35

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

  36. 6 Color Palettes 37

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

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

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

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

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

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

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

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

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

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

  47. All Recipes Free

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

More Related