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

37

6 Color Palettes6 Color Palettes

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