The App Interface Design Wall

When we design the user interface for an app we typically go through 3 phases: information design, visual design and production design. Below you’ll find a description of each of these phases, and here is a picture of the wall in our office showing some of the information design and visual design mockups from an app user interface design project we completed.

App Information Design

In the information design phase we determine the way to present the information to be input or output in the app effectively, rather than just attractively or artistically. We make sure to understand the target users for the app, how they will interact with the app, and what are your business goals for the app. We identify what information is presented and captured on each screen of your app, how best to present it, and the proper flow from screen to screen. The results of this step are usually written success metrics for the app and free form sketches of how to present the information effectively.

In metaphorical terms, it’s determining the steak before the sizzle.

App Visual Design

In the visual design phase we take the basic sketches and hand drawn wire frames and bring them to life with full color, pixel perfect, visual mockups of each screen. At this point we’ll add the graphic design elements for each of the platforms that your app will run on, as well as the different variations of screens for phones and tablets. Our app user interface designers can create original color schemes and design guidelines for your app, or base them on an existing brand or corporate style guide. The results of this step are typically layered Photoshop files of each screen and an implementation guide for engineering that notes the proper color values and font treatments for screen elements that are applied programmatically.

App Production Design

In the production design phase we take the visual design assets and turn them into a production-ready format for the app developers to work with. This typically involves cutting the Photoshop file layers into individual graphics that are optimized for high quality, but still kept small enough to keep your application’s size down to a minimum for faster download from the app store. This isn’t a glamorous phase in the process, but it’s key to ensuring your app looks exactly like you expect, that it delivers a delightful experience to users, and that it keeps the engineers productive and on-schedule.