Turning an Idea into an App

I have read a great article explaining the app design process. I have summarised the article in my own words. It really emphasises that “designing” and app is not just making something look beautiful, but making the user experience better through both visuals, the layout, structure and content. In order to evolve a great idea, it needs to be planned on and honed until it works, and then once it’s done, to keep working on it and updating it.

idea process
Synxius,. (2017). iPhone App Development Company in Austin, Texas. Mobile App Development and Mobile App Design Company. Retrieved 10 March 2017, from http://bit.ly/2nl69ae


Below are the 7 steps for designing an app.


Ideas are constantly changing and you need to be prepared for this as it is an important process that will help improve your final product.

You should ask yourself some questions before developing an app.

  • Will the time, effort and expenses put in, bring a worthy profit?
  • How/by whom could this app be made and what challenges may we face?
  • Does this app exist? If it does, how can we improve it and make it worthwhile for users to change to our app?
  • Are there other ways we can achieve the same results which may be more efficient?

Trello is a great tool to organise your ideas and their development. It allows you to collaborate with others which is helpful in refining your app.


A specification, or ‘spec’ is the document which is essentially your app in paper form. It details what your app does and how you will make it. A spec can be small, often called a ‘brief’ or it can be a large document explaining every part of the app. However, when writing a spec, you want to be clear and concise. Explain what the app does, its functional and non-functional requirements, and use plain language.

No matter how you are going to make your app, whether it is for a client, in-house or even for yourself, it is important you make a spec. Specs are a way of visualising your idea and as you write one, your idea can be further developed. If you are working for a client, a spec can be a contract on which estimates can be made.

The spec is essentially a kind of ‘bible’, your team and everyone involved will be constantly coming back and referring to this document.


Wireframes are similar to the storyboard process in film making. They can either be added to a spec or can be made from the spec. Information Architects (iA’s) and User Experience Designers (UX designers) generally produce the wireframe for an app, but the entire team should discuss and understand how the app will be structured and put together. It is ideal to produce the wireframes with the client on a whiteboard from which the wireframes can be digitized, shared and revised futher. Some applications which can be used are Omnigraffle, Sktetch or even Photoshop. Applypixels.com have a wireframe UI kit which makes the wireframe process very quick and easy, however, it has a monthly subscription fee.

ApplyPixels,. (n.d.) Android Wireframe. Applypixels.com. Retrieved 22 February 2017, from http://bit.ly/2n656yX



Wireframes are important as they help you figure out the structure and layout without being distracted by the visual design like colours and pretty logos. It is also where any confusion or issues are found, discussed and fixed.

One of the main reasons that apps do not get funded or made is because they don’t do a spec or wireframe. They have this great idea but they don’t have any clue on how it will be made or how it will be executed. Having the spec and wireframe made will really propel your app forward.


Next is the prototype. It is essentially an interactive rough of your app to test your idea and get feedback. Invision or Marvel are tools that allow you to convert your mock-ups into interactive “apps” which allow you to tap through the design. Other times, designers go straight for a native prototype written in Swift.

For larger apps with larger teams, the rough “app” is good to quickly share around the team, however, if you are a smaller team with a more solid idea, going straight to coding can work better as there is a faster turnaround as the app is starting the development earlier. Framer and Figma are two options with free trials that allow you to make a functional prototype app. Figma also allows you to collaborate live.

A good thing about not going straight to coding your prototype is if you discover issues, you haven’t invested a lot of time and money with coding, especially if the entire idea ends up being scrapped.

Visual Design

You want to make your app look consistent throughout. If an apps visual design is done well, it can help guide users through your app, it can help make your app stand out from the rest and differentiate your product from others, it also gives an overall more enjoyable user experience.

iOS, Android and Windows Phone all have certain UI “rules.” While it is important to follow these rules so as not to confuse and frustrate the user, it doesn’t mean you shouldn’t push these boundaries and add a little zest to the existing rules. For example, the typical refresh button could be a grey wilting flower that animates into a fresh flower with colour. You can use your UI kits and wireframes to help you start visually designing your app.


As a visual designer, you may not actually code and develop the app, but it is good you and your team include the app developer in the steps leading up to the producing of the app. For example, during the wireframing process, the developer could save a designer from making a serious issue that could take a very long time for it to be fixed. The same goes for when the developer is producing the app, the designer may be able to suggest a certain type of interaction which could suit the app more.

Today’s Quick Tips:

  • An app is never finished and is constantly changing, revising and updating
  • A spec is essentially your entire app in paper form and must be done for your app to have a chance at succeeding
  • Wireframes are quick sketches of the rough of each screen in your app, allowing you to fill in any blanks and see how the app will work. They also allow you to concentrate on the structure and layout without being distracted by making it look pretty
  • A prototype is an interactive rough of your app
  • Visual design should be consistent throughout. Follow the UI rules but challenge the rules. Do this step well and it will make your app stand out from the rest
  • The developer should be a part of most of the app ideas development to help ensure you are not making a grave mistake that could be difficult to fix, likewise, the designer should see and assist the developer in their process.


These notes were summarised from:

Flarup, M. (2016). What Everyone Should Know About The Process Behind App Design – Smashing Magazine. Smashing Magazine. Retrieved 22 February 2017, from https://www.smashingmagazine.com/2016/11/what-everyone-should-know-about-the-process-behind-app-design/


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s