How to wireframe Android apps with Justinmind
Putting Google’s material design principles into practice to create outstanding Android mobile app wireframes with Justinmind prototyping tool.
We recently wrote about Google’s material design principles in relation to Justinmind’s Android Lollipop and Nougat UI libraries. In this post, we’ll look at three aspects of material design that serve as guidelines to Android app design — layout, motion and navigation — and how to simulate these in Justinmind prototyping tool. After all, it’s all about the process: awesome process, awesome wireframe!
Designing the perfect layout for your Android wireframes
Material design principles and the floating action button
Material design uses print-based design elements, including typography, space, color and imagery, to create visual hierarchy between elements. You can find more on material properties here, the style of which intends to ‘immerse the user in the experience’. An important visual element of the Android OS is the floating action button, used to represent the primary action in an application.
According to the material design guidelines, the floating action button is distinguished by a circular material button that lifts and displays an ink reaction on press. Shaped like a circled icon floating above the UI, it changes color upon focus and lifts upon selection. When pressed, it may contain more related actions.
Justinmind’s Android widget library contains a complete set of industry standard material design buttons, including the floating action button:
Use it in your android wireframes for promoted actions. Remember that this button changes color on focus and lifts upon being selected. Thanks to the newest Justinmind release, all our Android buttons and icons have been recreated using SVG vectors, so that you can easily change their color. To get started with the Android widget library, simply browse through the collection which automatically appears below the Basic widget library on the left of the canvas, when you open an Android prototype.
Design mobile-first prototypes with a simple drag & drop
Defining the app structure and layout
The material design environment is three-dimensional, containing light, material, and cast shadows. As the Google experts have it, objects in the physical world can be stacked or stuck to one another, but cannot pass through each other. Objects also cast shadows and reflect light. Material design reflects these qualities to form a spatial model that is familiar to users and can be applied consistently across apps.
Translate these qualities to your mobile display, and we’re talking about consistent use of the floating action button and a permanent app bar.
Getting the structure of your android app wrong is a material design faux pas. Luckily, Justinmind takes the stress out designing the layout. The grids help you to adjust your wireframe design down to the last pixel and the rulers help to align UI elements on the page easily. Pay attention to UI regions, defining the primary horizontal or vertical dividers using the customizable guides and green lines in Justinmind. To create a guide, simply click on the rulers and drag and drop the guide where you want it. See more on this here.
Getting responsive UI down
Responsive layout, meaning a layout that can adapt to multiple screen sizes (see more on this here), is a principle component of material design in Android apps.
In material design, responsive behavior is made possible with a flexible grid that ensures consistency across layouts and breakpoints that enable the flow of content across screens of different sizes.
With Justinmind, it’s quick and easy to simulate responsive behavior in your Android app wireframes. Starting off with a web prototype, simply create the screens that will represent the different devices you wish to simulate your content on, add a few simple expressions, and voilà! For more details on how to create and simulate responsive behavior in your wireframes, click here.
Android motion in your wireframes
Prototyping material motion
Motion in material design involves spatial relationships, functionality, and intention with beauty and fluidity. According to Google’s material design principles, material in motion abides by forces similar to those of the real world, like gravity.
In material design, animation serves a wide range of scales and contexts to unite beauty and function. Often, UI elements perform more than one movement in a given screen, in order to properly communicate to the user that a task has been completed or in order provide visual feedback, such as with a pull-to-refresh action using a floating menu button.
With Justinmind, you can create simple and complex event series, with animations and effects that can be performed at the same time or one after the other. You can customize the time between events, and the gesture that the user performs in order for them to take place. Simulate on-screen movements of the Android OS, such as the arc upward and downward, using a series of On Tap + Move events.
Navigation in your Android app wireframes
Navigation patterns with Justinmind
Android apps that host material design principles display content according to what you want the user to focus on first, and de-emphasize less important content by placing it in less prominent locations.
“Navigation through your app should be intuitive and predictable. Both new and returning users should be able to figure out how to move through your app with ease.” According to the Material Design guidelines
The traditional navigation patterns for the Android mobile layout are tabs in a top navigation bar and a side bar — two coherent techniques that most users are familiar with.
The tab bar — presented as a selection of icons linked to other pages — is the basis for sticky navigation, and typically appears at the top in Android devices. Tab bars are continuous and always visible on the screen — whether the user scrolls down the page or not.
With Justinmind, you can simulate the tabbed top navigation bar by using Parallax features. Parallax in web and mobile design works by creating a fixed position menu that remains visible on top of the screen when scrolling. Learn more about tabs for mobile apps here.
The downside of tabs is that when you’ve got lots of options to display, an influx of tabs become a bit overwhelming. This is where the side menu really shines. When there is insufficient space to support tabs, side navigation is a good alternative as it is able to display several navigation targets at once. For example, folders in the Gmail inbox.
It’s really easy to create a side bar menu in your Android wireframes with Justinmind, using images, buttons and dynamic panels. But if you’re pushed for time, you can always opt for our ready-made Android slide menu — found in the Android Phone widget library.
So what are you waiting for? Get going with Justinmind right now and start creating outstanding Android app wireframes in no time!
