How to Bring an App Idea into the Design Process

While many people can brainstorm unique app ideas, it is much more challenging to make those ideas come to life on a real world mobile device. Once an app idea has been formulated, the originator will have to begin the initial framework that sets the stage for the design process.

software applications


The first step in developing the app’s framework is to sketch out what the app will do. One of the most effective ways to do this is to grab a pen and paper and start drawing out storyboards. Storyboards, also referred to as wireframes, are sort of like the drawings that old school animators drew on square and rectangular pieces of paper for cartoon flip books. You can use a series of storyboards to write out the app’s functions in the sequential order that the user will progress through them. This is commonly referred to as content mapping. On the sides of each storyboard, write out the interactive elements of each app function. These “margin notes” explain what each app screen will do while the actual storyboard sketches will describe what the sequence of screens will look like to the app user.

User Experience Design

Storyboards are fundamental to the app’s user experience design. The term “user experience design” means the sequence of steps that the user takes to utilize the app’s intended functions. It’s a schematic for how the app will provide a refined and pleasurable experience for the user. Utilize the storyboards to map out how the app will be presented to the user. The app’s specific coding and technological components don’t have to be detailed on the storyboard framework. Those details will come later in the design process. Map out the app’s user experience design in enough detail so that a stranger could pick up the storyboards, flip through them and put together the general idea of the app in his mind’s eye.

software application design


Here’s an example of a general storyboard framework and user experience design:

App Homepage? Log In Credentials? App Settings? App Features? App Categories? App Functions? App Function #1? App Function #2? App Function # 3? Log Out

software applications design

These storyboards represent individual screens of unique web pages that will be highly detailed at the end of the design process. Think of the framework for the app’s design as its beginning skeleton. The skeleton’s bones set the foundation for the highly-detailed skin which will be added later on.

Getting Started

If you think designing apps sounds like something that you’d like to explore, the Pennsylvania Institute of Technology offers an Associate degree in Computer Science that can help you get started. For more information about the program or to apply, click here.