I kept going until I had finished one screen, then copied the common components to a ‘new’ screen/device, and worked on the next task that users would need to complete in the app.
It’s really fast to build up your mockup using these pre-grouped collections of shapes!
Tip: If you need to position components more precisely, when the components are selected, use the arrow keys on the keyboard instead of the mouse.
Of course, your app will rarely be just one screen, so you will need to insert or copy the device outline and the standard components multiple times. Hold down Cmd or Ctrl and click on all of the components you want to duplicate, then click Edit > Copy (or use the keyboard shortcut Cmd + C or Ctrl + C).
Tips for creating good app mockups
Keep it simple: Too much clutter makes mobile apps hard to use. Keep the UI simple and make the visual clues as easy to understand as possible. Apps that are intuitive to use are used much more regularly! Plan the tasks that the users will complete with your app before you start designing – it’s easier to create a simple UI when you have clear goals.
Keep it consistent: Don’t move UI components around, keep everything consistent – including icons, dialog components, labels, and their positions.
Keep it up-to-date: Use UI components that are recommended for the most recent device. A UI that was designed for when the iPhone 5 was new looks outdated and tired on an iPhone 7. You should use iOS components for your iOS apps, and Android components for apps on Android devices, otherwise your users will not feel comfortable using your app.
Keep it lightweight: Don’t try to use large images or video components that will slow your app down. Also, don’t try to design your app like a website – they aren’t meant to be navigated and used on a small screen with large fingers! Don’t make buttons or components too small – make sure it’s all easily readable and can be used with appropriate finger gestures.
Keep it flexible: These days, users expect to use apps on multiple devices – it needs to work on screens of different sizes, and both portrait and landscape modes. Take advantage of the various device outlines in the draw.io shape libraries to plan the different layouts for your app. If you are developing an iOS app, consider split view and slide over. Also consider how much of the app will be covered up by keyboards of various sizes.
My app mockup is done! What’s next?
First, get feedback on your design – see what your target users think about it. Do they feel it will be easy to use? Does it all make sense?
Once you are ready to start programming, there are a few more diagrams that you can create with draw.io that will help minimize errors and time spent debugging.
- Entity relationship diagrams
- Event or sequence diagrams
- UML diagrams