Skip to main content

Category: Wireframes

Photoshop (PSD) Templates for iPhone and Android Mobile App Previsualization

Matthew Wilson 3 Comments

Before you start working in Photoshop, save yourself time and effort by finalizing your wireframes.  It’s a lot easier to quickly change your hand-drawn wireframe sketches than modify a Photoshop file!

Once you have your wireframes where you want them, here are links to some design templates for Adobe Photoshop to help you create the pre-visualizations:

Teehan + Lax iPhone 6 Template
Updated Photoshop template for iOS 8 and iPhone 6 from Digital Experience agency Teehan + Lax.

Teehan + Lax Android Template
Photoshop template for Android devices (also from Teehan + Lax).  This one is a little outdated, but still useful.


If you like these templates, give a shout out to @teehanlax on Twitter.  They’ll appreciate it.

– – –

If these templates don’t work for you (or if you are averse to sweater vests), here are a few other sources to try:

9 Highly Recommended Free Android UI Kit PSDs
Choose one that works for you.  From TwelveSkip, the blog of Web designer Pauline Cabrera.

Smashing Magazine iPhone PSD Vector Kit
Photoshop template with many of the iPhone 4 UI graphics. This is a little out of date.  From the awesome web publication Smashing Magazine.

If none of these work for you, try searching Google for “iPhone PSD template” or “Android PSD template”.

– – –

Wireframing Your Mobile App

Matthew Wilson Leave a comment

Once you have an idea of what type of mobile app your group will be designing and what some of the features will be, the next step will be to start sketching out exactly how this app will work. This is done with a technique called wireframing – a rough approximation of what will appear on each screen of your app and how users will interact with it.

Photo by Flickr user Baldiri

Wireframes can be done in many different ways using many different tools – from simple hand drawn sketches to detailed annotated illustrations using robust software tools. For this project you will not need anything more complex than some simple hand-drawn sketches.

Photo by Flickr user Fernando Guillen



The goal of a wireframe is to quickly communicate how the app will look and how it will function for a user.  Wireframing involves multiple screens/pages that connect to one another through buttons or other interface elements.

Here is one helpful tool that you can print out multiple copies of for quick sketching that still has a “clean” look: a set of printable iPhone 4 wireframe templates:

UPDATE: Here is a set of printable iPhone 6 wireframe templates.


If you do a little Googling, there are tons of wireframing tools, templates, and toolkits available out there (including this gorgeous toolkit for Adobe Illustrator).  Most are overkill for this project.  My advice is to stick with sketches and stay focused on the concise communication of your app’s layout and functionality.