Mobile Designs Guidelines

Ratnesh Kompelli
3 min readJun 6, 2016

--

  • Users should be guided to the content they’re looking for, quickly. These key principles will help you design effective and delightful app navigation.
  1. Show the value of your app upfront
Image Credit: Google

2. Differentiate “sign in” from “sign up.”

Many users end up taking the wrong action when attempting to sign up for an account by tapping on the “sign in” button, which then prompts them for a password. This often happens because users scan the screen quickly and assume that the first call to action that catches their attention is the correct one. Design a “sign in” and a “sign up” that are easily distinguishable from each other so users can get to where they want to go quickly.

Image Credit: Google

3. Create frictionless transitions between mobile apps and the mobile web.

Image Credit: Google
Image Credit: Google

Animations

  • Android provides a variety of powerful APIs for applying animation to UI elements and drawing custom 2D and 3D graphics.
  • When writing an application, it’s important to consider exactly what your graphical demands will be. Varying graphical tasks are best accomplished with varying techniques. For example, graphics and animations for a rather static application should be implemented much differently than graphics and animations for an interactive game.
  • There’s also more than one way to tell a story.(Manual for app usage)
Image Credit: Dribbble

Use 9-patch drawable

A 9-patch drawable graphic is a stretchable bitmap image, which Android will automatically resize to accommodate the contents of the View in which you have placed it as the background. An example use of a 9-patch is the backgrounds used by standard Android buttons — buttons must stretch to accommodate strings of various lengths. A 9-patch drawable is a standard PNG image that includes an extra 1-pixel-wide border. It must be saved with the extension .9.png, and saved into the res/drawable/ directory of your project. 9-patches are essential for creating and customizing UI widgets.

Image Credit: Google

Selectors

  • State list drawables make being state-friendly easy. These allow you to specify different drawables for different states of a UI component in an XML file.
  • Representing states properly provides important user feedback
Image Credit: Google

--

--