When working on an application for phones or tablets, you may need mobile-specific elements that will help create an understandable concept without much hassle. I’m sure you know how important and popular mobile market is nowadays — so do we. That’s why UXPin offers a tremendous amount of tools that are mobile-friendly. In this tutorial we will cover both important aspects – canvas and elements.
Let’s start with canvas properties. When creating a new prototype you can start with adaptive breakpoints adjusted to screen resolutions of common devices, like iPhone/iPad or Android phones and tablets. Some designers prefer to work on a bigger (default) canvas with usage of device bodies and gestures. Others prefer to limit the canvas’ size to display screen of target OS/phone/tablet.
Once you create default canvas you may want to add a smaller/bigger breakpoint. You can achieve this by clicking “add new adaptive version” in “Canvas properties” menu (click anywhere on the canvas and select desired size):
Below you can see two different approaches towards mobile wireframing.
To use device body element hit CMD/CTRL + F and type “body”. Remember to extend your canvas accordingly to accommodate the body size!
Currently available body elements include iPhone 5/5s/6/6s, iPad, iWatch, Nexus 5.
Default canvas with iPhone 6 body:
“Portrait” adaptive canvas for iPhone 6:
Moreover, you can add a device frame for the preview in the Properties Panel and also control whether to show the frame when you share a preview link.
Libraries and components
There are multiple libraries with iOS/Android specific UI elements at your disposal. Simply choose one you want to work with.
We’ve mentioned libraries and mobile-specific elements, but UXPin offers actual UI elements from iOS/Android, like keyboards, buttons and status bars.
Mobile wireframing differs from other types of design because of gestures and touch methods. If there’s an action that requires a swipe or holding two fingers, how would you present it to developer? Well now you have a comprehensive set of gesture components that you can use in your prototypes. Not only that, but our interactions simulate real-life actions required by users. Need an element to be double-tapped or swiped left? No problem! All interactions and their effects can be seen in preview mode.
Device bodies are small and narrow — a lot of content needs to be adjusted in order to fit. The ability to touch them and swipe in various directions allows you to put elements “outside of canvas” or workplace. UXPin simulates this with feature called “Crop Content” — with a few clicks you can enable your prototype to be scrolled either horizontally or vertically. This simulates very well scrolling or swiping content of your mobile app.
In this convenient video you have the whole process of cropping content to mobile-sized screens shown:
Here at UXPin we not only present you the tools needed for your work, but also share our knowledge. For more information about mobile UI trends download our free e-book, Mobile UI Design Book of Trends. This may help you broaden your horizons and become an inspiration during your wireframing adventures. Start your own mobile app prototype now! Log in to the app!