Web Design Wednesday – Android’s Design Process

by . February 27th, 2013

The Android OS was a big challenger to Apple’s iOS – creatively and technologically speaking. But what’s good about the things Google do is that they allow people an inside look at their process and how they do the stuff they do. This week Google released the video that discussed the Android’s design process and the creative development of its notification feature and the overall design for the Android OS.

The whole design process follows a traditional point of view where they begin with the concept sketch of the project, then move it to wireframes, to making full fidelity mockups of the concept design.

Here we’ll be discussing how you can adapt Android’s design process into your own creative process, and even apply it on your website’s design process.


Start with Sketches

Alex Faabor, from Android’s UX Team pointed out that they started working on the project through sketches. Pointing out that people would only add or comment about little details once presented with a design in full fidelity.


Use Wireframe for Conceptual Ideas


Google’s Android OS utilizes the wireframe schematic. This process allows the designers and developers to lay out the overall look of a concept design. Using a wireframe schematic in a project allows you to look at your design in a visualized but crude format, yet allowing further development, improvement, and modifications.


Create Full Fidelity Mockups


Full fidelity mockups are your design concepts present in their full detail. These mockups are created the way how a designer would want his concept to look like in its final form. Creating a full fidelity mockup will allow you to visualize the design if it fits your overall project’s theme, or if you achieved what you were visualizing while you were sketching your design.


Create a Flow

Designing an interactive project requires you to visualize a series of steps for navigating your project. Creating a flow is a necessity in keeping your target user interested in your app or website. The primary goal of the flow is to ease the navigation process for the user.


Designate Redlines in your Design


Redlines or redlining is a term used in technical drawing for edits. But in web design it’s used to denote a specified size or note for developers to follow. Redlines are provided by designers for specific details they want to be followed through once the design is in development. These details may range from setting a specific size of a marker or image, and if they’re clickable, animated, or moveable.

Remember that the Android OS was meant to be a platform for mobile computing, that it’s meant to be used by users on the go.  You can utilize Android UX Team’s process for your web design projects, or any layout-based projects such as magazines, brochures, or posters.


Got an interesting web design project going on? Share it with us through the comment section!