Chapter 3 – Prototyping and Wireframing Your App

Explains how to turn your app idea into something a developer can understand how to develop

• Focus on the Core Experience
  • Write Your Commercial First
  • Pick Your Typical User
  • Pick the Perfect Situation
  • What Do They Do Now?
  • Fleshing Out the Script
• Wireframe the App
  • Sketch Your Initial Screens
  • Draw Tools for Wireframes
  • Bare Bones
  • Common UI Stencils
  • Photorealism
  • Briefly Jumping Ahead
  • Static Wireframes of Dynamic Screens
  • Figure Out Your Options
  • Make Copies of Your Screens
  • Adapting Screens for Tablets
  • What Other Commercials Could You Make?
  • Identify Your Error Functions
  • Figure Out Your “First Run” Workflow
  • Get Feedback on Wireframes
  • Consolidate, Organize, and Refine
  • Group Like Data Together
  • Simplify Scrolling Areas
  • Buttons Are Cheaper Than Gestures
  • Reuse Phone-Sized Screens as Tablet Screen Elements
• Build an Interactive Prototype
  • The Value of Really Interacting
  • Pick a Tool
  • Maintain a System of Record
  • Always Working from Wireframes
  • Abandon Wireframes for Mockups
  • Transitioning Back and Forth
  • Convert Your Wireframes
  • Hook Your Screens Together
  • Duplicate Screens as Needed
• Prototyping Tips and Tricks
  • Make Sure that the User Can Always Get Back
  • Make Sure the Users Know Where They Are
  • Don’t Forget the Keyboard
  • Special Case: Logout
  • Get Feedback from Yourself and Others
• Wrapping Up