Wireframe Fundamentals
What is a wireframe in mobile design?
A low-fidelity layout showing structure, flow, and functionality without final design details
What is the main purpose of a wireframe?
To show structure and flow
Why use device templates in mobile wireframes?
To visualize the experience on specific platforms, device specific layouts and screen sizes
What does KLM stand for?
Keystroke-Level Model
What is a low-fidelity prototype?
A quick, simple version like a paper prototype for testing flows
Why should wireframes look sketchy?
To keep focus on functionality and avoid distractions from aesthetics
What distinguishes a mockup from a wireframe?
Mockups show final visual design with colors and fonts
What platform-specific element should be considered in Android wireframes?
Hardware buttons like back/home/menu
What does KLM predict?
Expert, error-free task completion times
What is a high-fidelity prototype?
A realistic, interactive version that may use real code
What are the four key components of a wireframe?
Task flow, interactions, content, layout
What is a prototype used for?
Interactive testing of functionality before building
What’s a best practice for flow length in mobile wireframes?
Keep flows to 3–4 screens max or break into bite-sized tasks
What is StEM used for?
Modeling touch interactions and predicting performance times
What is “Wizard of Oz” prototyping?
A method where a human simulates system behavior behind the scenes
What is the philosophy behind wireframing?
“Fail early, fail often” – generate many ideas and discard freely
What fidelity level do wireframes typically have?
Low fidelity
What should each screen flow be labeled with?
A user-centric task name (e.g., “Add to cart”)
What kind of UI elements can StEM model?
Buttons, draggable objects, gestures, timers
Why is Wizard of Oz not suitable for fast, repetitive tasks?
Because it relies on manual control and can’t keep up with rapid interactions
Why should wireframes be easy to throw away?
To encourage experimentation and avoid attachment to early designs
Why are prototypes better than wireframes for testing interactions?
They allow user interaction and simulate real behavior
Why is thumb zone awareness important in mobile wireframes?
To ensure controls are placed within easy reach for usability
What makes StEM unique compared to KLM?
It uses real interaction data and works with sketches/screenshots
What’s the main benefit of low-fidelity prototypes in mobile design?
They’re fast to create, easy to change, and focus on usability over visuals