Wireframing for Mobile App Developers

  • Published on
    01-Jul-2015

  • View
    372

  • Download
    4

Embed Size (px)

DESCRIPTION

Presentation explains how wireframing technics which are used mainly by designers, can be used in software engineering process by mobile app developers.

Transcript

  • 1. Wireframing forMobile App Developers04/11/14Veiko Raime, Mobi Labhttp://lab.mobi

2. designing & developing for mobileAre Wireframes only for designers?UX designers show user flows with sketches of views ofapplication.Graphic designers user wireframes as input to their work process.For developers wireframes gives high-level visual description toview elements and actions they need to develop.QE can use wireframes to prepare test cases and ensure thatproduct matches requirements described with wireframes.PO and Client can review wireframes to ensure requirements aremet with design process. It can be early feedback for UI and low-costway to find UX problems. 3. designing & developing for mobileSo it brings engineering closer to UXdesign. Whats the point? Lean UX that could actually work. Explaining ideas visually helps in communication. Engineers can be better designers when it comes to nativecomponents and patterns. Test early and be more effective as a team. 4. designing & developing for mobileChoose 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, presentationtools etc. Graphical design tools - Photoshop, Illustrator Clickable prototyping tools 5. designing & developing for mobileSketches are easy to make for anyone. These help you to quickly trydifferent ideas and help to communicate with others visually. 6. designing & developing for mobilePaper cutouts are good to play around with ideas. Use those fortesting your UX ideas. 7. designing & developing for mobileStencils help you put together components and have 1:1 feeling withreal life. And you dont have to be good in drawing lines :)!Source: http://www.uistencils.com 8. designing & developing for mobileGood thing about software tools like Omnigraffle is that they are veryeasy to use once you get used to them. Having them in file gives anoption to have versions and change ideas on the fly. 9. designing & developing for mobileUsing designer tools is not really recommended. They are goodwhen high-fidelity wireframes are needed. In engineering its usuallynot good idea to mix UX concepts with GUI. 10. designing & developing for mobileWhen it is more important to explain more complicated interactions,these tools might come in handy. They are also easy to share overinternet for collaboration.source: https://pidoco.com 11. designing & developing for mobileHigh-fidelity vs Low-fidelity?Its usually good idea not to go to designers playground and try tomake as low fidelity wireframes as possible to explain your ideas.Risk of having too many details in the beginning is that they aretaken as visual design elements and implemented like this. 12. designing & developing for mobileWhat to keep in mind. Be consistent, use the same language Try lower fidelity whenever possible, practice it You dont have to have perfect wireframes to share your ideas Draw wireframes on the fly and explain what youre doing. Use whatever medium you have in hand - whiteboard, pieceof toilet paper etc. You still have to know the basics - be interested in commonUX patterns, human interface guidelines from platform makers. Explore and use new apps and try to think why you like andwhy you dislike something. 13. designing & developing for mobileExplore 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 Raimeveiko.raime@lab.mobihttp://lab.mobihttps://www.facebook.com/lab.mobi