How I design iOS layouts using my iPad Pro.

161 4

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.

4 comments

  1. I have using Adobe Comp as a way to create some screen designs. I also use OmniGraffle for iOS, I also have the desktop version of OmniGraffle that I have been using for a long time.

    1. Thanks Jim for the suggestion of Adobe Comp and OmniGraffle.

      I have played around with Comp and found it interesting but a little constrained for the way my creative process normally works, I have not tried OmniGraffle for iOS.

      What do you like about OmniGraffle that makes it a tool of choice for you?

  2. I have used Omnigraffle on my laptop for a long time, so I decided to try the iOS version. It is expensive at about $50 though. It has very nice features for creating flow diagrams, has a number of nice stencils with various drawing objects for screen layouts as well. It does support Apple Pencil to draw, but I find this feature to be too laggy (is that a word?).

    So, I can then easily take the Omnigraffle file and continue more work on it, if need be, on my laptop version of Omnigraffle. The desktop version of Omnigraffle is excellent.

    The stencils you can download for free, combined with really good object manipulation tools, and being able to work on the same file on iOS or OSX along with export features makes it a great tool for me.

    1. Thanks Jim for such a great reply!
      I will have to take a look at OmniGraffle after such a glowing review. I think you hit upon a key point in your comments, software authors have to consider that users today will be using more than one platform. Any app that has a desktop and mobile version always gets my attention and I prefer over platform silo apps.

      Laggy is a word for sure when it comes to styluses 🙂

Comments are closed.