Did you find this helpful? Why not support me to bring you even more content.
Click here to Buy Me a Coffee and say Thanks!

DISCLAIMER: This post is older than one year and maybe out of date.

How I design iOS layouts using my iPad Pro.

I wanted to share this workflow I have created as I feel it might help others. I love to sketch and never know when ideas will come to me, especially for application user interfaces. So I wanted to find a way to make it all work for me on my iPad Pro without having to make it complicated.

I am going to go through every step including downloading templates with the assumption that you are not near a desktop machine to start with 🙂

On the iPad Pro I am using Safari, GoodReader and either Concepts or Procreate.

Step 1 – Downloading iOS Device Templates

The first step is to go to the superb site http://www.sketchsheets.com. I selected all the templates I wanted, this creates a collection you can then download.

Selected files on sketchsheets.com
Selected files on sketchsheets.com

When I download the collection it asks me where I want to save them, for this I tell it to save in GoodReader

Safari on iOS Showing Download Dialog
Safari on iOS Showing Download Dialog

When I save the downloaded zip file in GoodReader it asks me if I want to unzip, this is extremely helpful so I say yes. GoodReader creates a folder with all the files in, I can now navigate down the folders to the files.

GoodReader iOS application showing archive dialog.
GoodReader iOS application showing archive dialog.
GoodReader Folder Navigation.
GoodReader Folder Navigation.

Step 2 – Transfer Template to Design Application

I am going to design in the Concept application which does not support PDF(?). So I touch and hold on the .png file and from the right panel I choose “Open In…”.

File Selected in GoodReader
File Selected in GoodReader

In the pop-up panel I scroll through to find the “Copy to Concepts” icon and select it.

Open In Dialog - GoodReader
Open In Dialog – GoodReader

This sends the file to Concepts where I am asked if I want to import this image into a new drawing, clearly I do, so do it.

Step 3 – Design Awesome App

This opens the template file in a new document ready for me to start designing.

Import Image Dialog I Open In Dialog - GoodReader.
Import Image Dialog I Open In Dialog – GoodReader.
Concepts iOS Application Showing Imported Image
Concepts iOS Application Showing Imported Image

That is all there is to it, I hope this sends some of you on to the path of mobile happiness. There are many many ways to do UI designs but this takes advantages of the tools I already have and a good excuse to use my Apple Pencil 🙂

So how do you design on the move? Share in the comments with the rest of us.