Advertisements:

Have a business idea? Don’t know how to convert it from an idea to professional design? Or make it ready for the development phase? Or maybe you are a hobbyist programmer and never jumped in the complexity of system analysis and design. Here are very basic and very easy to understand professional app design steps that are inspired from standard system analysis and design methods but are scaled down and easily explained. 

 

1) Write it on a piece of paper

What will your App do? Write everything on a piece of paper. Anyway you like it! Do a cyclic update of this paper or document and make it super concise. Let’s consider this simple App idea written on paper:

Shopping With Friends is an app that allows users to share products they shop with their friends and get suggestions. Each user has to submit name, password, pictures and email address to sign up. Once signed in, a user has a friends list. User can add other people to the friends list. User can upload pictures of shopping items along with a description. Users can also comment on friends items and click a recommend button to add votes a shopping item. ”

Make sure you app idea is concise and easily explainable. And it defines everything that app is capable of. The above requirements can be written by anyone who has no idea of how technical stuff words. It is basically a layman’s explanation of how he/she wants an app to work.

2) Object Listing

Once you have the app idea in description, next step is to make an object listing. Object listing defines the basic elements of Object Oriented Architecture.  You can read about Object Oriented Analysis and Design here. Let’s find out objects in the above app description. Here is what I have found (highlighted in read):

Shopping With Friends is an app that allows users to share products they shop with their friends and get suggestions. Each user has to submit name, password, pictures and email address to sign up. Once signed in, a user has a friends list. User can add other people to the friends list. User can upload pictures of shopping items along with a description. Users can also comment on friends items and click a recommend button to add votes a shopping item. ”

Objects that I found are:

- friend
- user
- name
- password
- picture or userpicture
- email
-  item
- friendslist
- comment
- recommend

3) Make ERD

Making an ERD is the most important step in app design. ERD stands for Entity Relationship Design/Diagram. It defines how the data will be organized in the application. You can read the basics about ERD here. There are number of videos available on YouTube that you can watch to understand ERD. The concept is easy to understand. Once you have understood what ERDs are have a look at the following  quick ERD for the app we are talking about. Pardon my bad handwriting.

ERD

4) Class diagramming

Class diagrams define the basic scaffolding for inner app architecture. It previews the basic functionality of app. Class diagramming comes from a design language called UML (Unified Modeling Language). There are number of YouTube Videos and articles available on internet that can teach you about how class diagramming is done. I didn’t make a full class diagram of the app but here is a preview of how some part of a class diagram may look like:

ClassDiagram

 

5) Wireframing

Wireframes are blue prints of app’s user experience. This is not always be the 5th step. Wireframing may be the first step in app design. There is no strict rule. It depends how you want to go through the application design process. There are many tools that allow you make awesome wireframes. There is no standard for wireframing, you can do it the way you like. Wireframes are also called User Experience Sketches. Have a look at Google’s Image Search for iOS wireframing examples. I make wireframes by hand. Following is one of the sample wireframes I made for an app I developed recently (These are not wireframes of app we have discussed above).

Scan-120518-0009

 

Your app is now ready for implementation step (development).

Cover image by  juhansonin

Please join our Facebook Page for more updates or subscribe to our RSS Feed.