Wireframing for Mobile App Developers04/11/14Veiko Raime, Mobi Lab
http://lab.mobi
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.
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.
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
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.
designing & developing for mobile
Paper cutouts are good to play around with ideas. Use those for testing your UX ideas.
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
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.
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.
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
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.
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.
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
Thank you!Veiko [email protected]
http://lab.mobihttps://www.facebook.com/lab.mobi
Recommended