Photoshop Design Tips for App Design

Posted on - Last Modified on

App Design or User Experience design is a crucial step when it comes to getting your application prepped and ready to go for the app store. Designing a user interface for iPhone (also known as UI or UX design) is actually a lot different than designing a website, or doing graphic design. UI and UX designs involve lots of thought processes and brainstorming. You want to make sure that the design is easy to read and see. You also want to make sure that your design is mobile-friendly and will be something people can use on-the-go.

To start off, you must first have the following things set and ready:

1.     What the main purpose of the application will be.

2.     What is the most easy and simplest way to achieve that main purpose

3.     Who your audience is and how will they engage

To achieve a nice, easy canvas to begin with, I would advise using sketching wireframe templates that are available online to download for free. The other thing would be to collect your assets, and the best place to start would be to download from This site offers UIs and GUIs for pretty much every iOS and Android model and give you a good foundation to start with. 

One thing to consider is the functionality of your app, and its important to lay out all the functionalities on a piece of paper, and then drawing spider graphics and connecting all the functionalities of your app using pencil with one another. This will give you a good structure and you'll find out which functionalities are the most important and the least important. Having the most important functionalities appear bold and big in the app will make the app so much better.

Then in Photoshop, make sure to layer each and every element of your app and also keep the fonts and names of the fonts you use in the same folder. This way, you'll end up with a complete, clean package in the end to provide to your developer. Another very interesting feature of Photoshop is the actions button, which allows you to add all sorts of actions like gloss, glare, or shadows to your assets. All this will completely take your designs to a new level. There are also actions to easily convert your artwork to app icons that you can use to submit your app to the developer portal. Apart from actions and existing templates, you can also draw your apps on paper with pencil, then scan them or pen them back in Photoshop for a finer finish and work your way up.

Below are some examples of the application we designed. The aim was to make the design offer variety and simplicity at the same time.


Posted 7 December, 2014

Misty Interactive Studios

Founder and CEO at Misty Interactive Studios Inc

Misty Interactive Studios (MIS) is a bespoke digital service provider, specializing in digital strategy, development and experience design. We work closely with our clients to uncover the unlocked potential of their business, driving process improvement and efficiency gains. Our expert team of designers and developers craft elegant systems that people love. Our customers have reported increased...

Next Article

Top Mobile Design Tools