This document discusses the importance and uses of wireframing for mobile app development. Wireframing helps product owners, UX designers, developers, and quality engineers visualize and communicate app designs effectively. The document recommends starting with low-fidelity sketches and paper prototypes to explore ideas before using software tools. It also provides tips for wireframing, such as using consistent terminology and focusing on usability patterns.

1. Wireframing for
Mobile App Developers
04/11/14
Veiko Raime, Mobi Lab
http://lab.mobi

2. designing & developing for mobile
Are Wireframes only for designers?
UX designers show user flows with sketches of views of
application.
Graphic designers user wireframes as input to their work process.
For developers wireframes gives high-level visual description to
view elements and actions they need to develop.
QE can use wireframes to prepare test cases and ensure that
product matches requirements described with wireframes.
PO and Client can review wireframes to ensure requirements are
met with design process. It can be early feedback for UI and low-cost
way to find UX problems.

3. designing & developing for mobile
So it brings engineering closer to UX
design. What’s the point?
➔ Lean UX that could actually work.
➔ Explaining ideas visually helps in communication.
➔ Engineers can be better designers when it comes to native
components and patterns.
➔ Test early and be more effective as a team.

4. designing & developing for mobile
Choose your wireframe style!
➔ Sketching - quickest way to explain your idea
➔ Paper cutouts, play around with app
➔ Stencils - if you perfectionist
➔ Use some software: SmartDraw, Omnigraffle, presentation
tools etc.
➔ Graphical design tools - Photoshop, Illustrator
➔ Clickable prototyping tools

5. designing & developing for mobile
Sketches are easy to make for anyone. These help you to quickly try
different ideas and help to communicate with others visually.

6. designing & developing for mobile
Paper cutouts are good to play around with ideas. Use those for
testing your UX ideas.

7. designing & developing for mobile
Stencils help you put together components and have 1:1 feeling with
real life. And you don’t have to be good in drawing lines :)!
Source: http://www.uistencils.com

8. designing & developing for mobile
Good thing about software tools like Omnigraffle is that they are very
easy to use once you get used to them. Having them in file gives an
option to have versions and change ideas on the fly.

9. designing & developing for mobile
Using designer tools is not really recommended. They are good
when high-fidelity wireframes are needed. In engineering its usually
not good idea to mix UX concepts with GUI.

10. designing & developing for mobile
When it is more important to explain more complicated interactions,
these tools might come in handy. They are also easy to share over
internet for collaboration.
source: https://pidoco.com

11. designing & developing for mobile
High-fidelity vs Low-fidelity?
It’s usually good idea not to go to designers playground and try to
make as low fidelity wireframes as possible to explain your ideas.
Risk of having too many details in the beginning is that they are
taken as visual design elements and implemented like this.

12. designing & developing for mobile
What to keep in mind.
➔ Be consistent, use the same language
➔ Try lower fidelity whenever possible, practice it
➔ You don’t have to have perfect wireframes to share your ideas
➔ Draw wireframes on the fly and explain what you’re doing.
➔ Use whatever medium you have in hand - whiteboard, piece
of toilet paper etc.
➔ You still have to know the basics - be interested in common
UX patterns, human interface guidelines from platform makers.
➔ Explore and use new apps and try to think why you like and
why you dislike something.

13. designing & developing for mobile
Explore around!
➔ You are the experts of OS specific guidelines!
➔ Want to find more creative ideas:
◆ http://www.pttrns.com
◆ https://mockupstogo.mybalsamiq.com/projects
◆ http://www.android-app-patterns.com
◆ http://inspired-ui.com
◆ http://moobileframes.tumblr.com

14. Thank you!
Veiko Raime
veiko.raime@lab.mobi
http://lab.mobi
https://www.facebook.com/lab.mobi