How To Wireframe iOS App Interfaces using Photoshop?

Much like building a website, mobile app design is a very detailed procedure. Although it may not be sociological rocket surgery (some might say otherwise) but even the best app designers will spend years studying the craft and still have a lot to learn. One of the earlier stages in both website & mobile app design is called wireframing.

This is a bare-bones template of the layout which includes the most important page elements. Content should be kept to a minimum used sparingly on an as-needed basis. Wireframing pushes a direct focus onto the experience – basically how a user will interact with the application. Many designers prefer to draw these by hand but there’s always an option to design wireframes using graphics software.

In this post I’d like to offer an introductory guide to wireframing for iOS apps, and specifically how this can be accomplished using Adobe Photoshop. Other programs like GIMP or Sketch also work just fine. The goal would be to create a layered wireframe which can be edited and rearranged to fit a working mobile app prototype.

Wireframe Overview

The best rule of thumb to keep in mind is simplicity. Wireframes are built off a handful of views for any single application. Each of these views could be any type of interface from a list view, social feed, user profile… there’s a number of options.

When just getting started you might try reverse-engineering wireframes from your favorite iOS apps. This will help you focus on the most important aspects of the screen so that you can translate these elements into your own ideas. Wireframing for simplicity is really about communication. Ideally you want to get across your ideas to developers, designers, and even potential users.

Think of the wireframe design from a user experience perspective. Solving UX problems is all about asking the right questions. What is the main goal of the application? How many screens are needed to complete this goal(or goals)? What’s the most intuitive way to move between these screens?

It is also worth noting that you don’t need to follow exact dimensions when crafting a wireframe. The goal is not a finished product – in fact this is often your very first and roughest draft of an application. If you have ideas for little icons or buttons feel free to add them into a wireframe. But keep your mind flexible and willing to change at a moment’s notice.

Fast iteration is the cornerstone of good wireframing. Plan quickly and draft your ideas without hesitation. This will help you determine what works versus what doesn’t work.

UI/UX Storyboarding

Storyboarding is more commonly associated with animation & film. Artists will draw sketches of each main shot to demonstrate how the storyline runs and what the viewers would see in each scene. This same idea has been adopted by user experience designers to explain how websites and mobile apps function.

This step isn’t necessary but it can provide a lot of benefits. It gives programmers a working diagram that explains how certain buttons will transition between different screens. Storyboarding is also meant to flesh out ideas and pick up on poorly-planned unintuitive elements so they can be fixed before creating the final concept. A polished storyboard might also be called a prototype.

Xcode has a small storyboarding interface but it requires a more refined palette of programming terminology to connect buttons with screen displays. If you’re solely focused on UI design then it’s better to storyboard with hand-drawn wireframes or with a tool like Photoshop. It’s just a matter of connecting screens with arrows to dictate the flow between them.

You could also add some written notes on the transition effect between views and how they would change based on moving forward or backward through the app hierarchy. A storyboard should tell the story of an app using low-fidelity wireframes. You’ll save time not worrying about colors and textures while also focusing primarily on user experience and content presentation.

Wireframing in Photoshop

Although your workflow may vary I’d like to share a few tips for beginners who want to try out wireframing. Getting started by hand is never a bad idea because you can work more directly and execute ideas faster. But when translating into Photoshop try not to worry about specific dimensions of title bars and tab bars.

Relative sizing is typically good enough for a lo-fi wireframe. Build each layout with the different shape tools to save a bit of time. You can set absolute width/height values to get an exact circle or square shape as needed. So with a typical iPhone app wireframe you might create a rectangle 320×480 representing the full screen. Then you can fit smaller rectangles into this frame representing the status bar, title bar, etc.

Although you shouldn’t be concerned with exact colors at this point, try to stick with a relative color scheme. For example you might plan that buttons in the title bar should be a darker color than the title bar itself. Or these buttons might be the same color but instead use a single 1px outer border. Don’t get too lost in the details but also try to avoid placing a bunch of shapes together using the same(or clashing) colors.

A happy medium is found somewhere in the middle between no detail and extravagant detail.

Grouping & Organization

Once you’ve created your first wireframe view combine all the important layers into a layer group. From here you could just duplicate the group and rearrange everything to make another view. This will save you hours of time recreating duplicate elements from scratch.

But organization is also important when you need to come back for editing. There’s nothing more daunting than a PSD with layers strewn all over the place. It’s tough to predict when a wireframe mockup will need to be edited or updated. Keep all your layers organized and you’ll have a much easier time if and when those edits are required.

Another idea is to create separate PSD files for different view modes. If you have room in a single PSD for both portrait and landscape views then fantastic! But if your wireframe needs a lot of different views it can be tough fitting them into one big file. This also applies to creating new PSDs for iPad wireframes in portrait and landscape mode.

Sample PSD Freebie

I’ve included my own PSD freebie which outlines a very simple iOS task app. I’ve created 4 of the screen wireframes for simplicity’s sake, but you can see how this process would be extrapolated to include every possible screen.

Feel free to download a copy of the PSD file and use a similar method for your own project work. Personally I feel it’s easier to start with a hand-drawn sketch and then move into the digital realm. It completely depends on your own preferences as a designer and what would be easiest for brainstorming.

Other Resources

There are hundreds of articles online that detail the process of iOS app design. It seems very complicated at first – probably because pixel matching is confusing and nauseating at first. Once you get comfortable with the process each new mobile app becomes a really fun and creative project.

Here’s a few more resources you can check out that’ll aid in your iOS wireframing.