Revisiting Mobile App Design Professor Larry Heimann Carnegie Mellon - - PowerPoint PPT Presentation

revisiting mobile app design
SMART_READER_LITE
LIVE PREVIEW

Revisiting Mobile App Design Professor Larry Heimann Carnegie Mellon - - PowerPoint PPT Presentation

Revisiting Mobile App Design Professor Larry Heimann Carnegie Mellon University 67-442: Mobile Application Design & Development A few things about the upcoming competition Code review comments Need testing Need to organize code


slide-1
SLIDE 1

Revisiting Mobile App Design

Professor Larry Heimann Carnegie Mellon University 67-442: Mobile Application Design & Development

slide-2
SLIDE 2

A few things about the upcoming competition

slide-3
SLIDE 3

Code review comments

  • Need testing
  • Need to organize code functionally
  • Need to separate out responsibilities into new, smaller

classes

  • Nice to use marks, markdown for documentation
  • Consider structs vs. classes (passing by value vs. references)
slide-4
SLIDE 4

iOS Core Design Philosophy

  • Deference
  • Clarity
  • Depth
slide-5
SLIDE 5

Deference

“Content should be the hero, everything else is secondary.”

slide-6
SLIDE 6

Deference

“Content should be the hero, everything else is secondary.”

  • Simplify
slide-7
SLIDE 7

Deference

“Content should be the hero, everything else is secondary.”

  • Simplify
  • Maximize Content
slide-8
SLIDE 8

Deference

“Content should be the hero, everything else is secondary.”

  • Simplify
  • Maximize Content
  • Colors
slide-9
SLIDE 9

Deference

“Content should be the hero, everything else is secondary.”

  • Simplify
  • Maximize Content
  • Colors
  • Typography is content

https://developer.apple.com/videos/play/wwdc2016/803/

slide-10
SLIDE 10

Clarity

“Make things immediately obvious to your user.”

slide-11
SLIDE 11

Clarity

“Make things immediately obvious to your user.”

  • Make text readable

Good Rules of Thumb for Text

  • 1. 16pt is readable; don’t go lower
  • 2. 120% - 140% line spacing
  • 3. max line length: 45-85 characters
slide-12
SLIDE 12

Clarity

“Make things immediately obvious to your user.”

  • Make text readable
  • Use obvious icons
slide-13
SLIDE 13

Clarity

“Make things immediately obvious to your user.”

  • Make text readable
  • Use obvious icons
  • Descriptive screens
slide-14
SLIDE 14

Clarity

“Make things immediately obvious to your user.”

  • Make text readable
  • Use obvious icons
  • Descriptive screens
  • Meaning in color
slide-15
SLIDE 15

Depth

“Everything should be contextual and transitional.”

  • Transitions with animations
  • Blurred background
  • Gestures
  • Sounds (when appropriate)
slide-16
SLIDE 16

iPhone sizes

https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

slide-17
SLIDE 17

iPad sizes

slide-18
SLIDE 18

The “rule of thumb”

Minimum Target: 44 x 44 pixels

slide-19
SLIDE 19

Demo on invisible buttons, launch screen, etc.

slide-20
SLIDE 20

Project teams

  • Akash Kejriwal -- Sid Malladi
  • Alex Wang -- Rho Eun Song
  • Asawari Kanitkar -- Shijie Rao
  • Bruce Lin -- Matt Gruber
  • David Gao -- Daniel Graf
  • Erin Dieirnger -- Katie Williams
  • Gus Henry -- James Ormond
  • Johnny Wu -- Svayam Mishra
  • Jordan Stapinski -- Jeremy Lee
  • Karen Segal -- Amy (Ziyun) Zheng
  • Mark Vella -- Sebastian Guerrero
  • Max Harlynking -- Donovan Powers
  • Natalya Buchwald -- Becca Kern
  • Piyush Puri -- Glen Wise
  • Sarah Reyes-Franco -- Connor Hanley
  • Sivan Mehta -- Jimmy Jameson
  • Sophie Zhao -- Helen Kim
  • Travis Chambers -- Andrew Wang
  • Emily Su -- Annette Chen -- Meghana

Valluri

  • Rumby Wilson -- Gaury Nagaraju --

Sina Siddiqi

  • Mounira Tlili