How to Do App Mockups in IOS

Explore Guides

Or use your email address

Create an Account Forgot Password?

Liked

Start the Guide ›

Create App Concepts using IOS PAGES.

by Tutorial Doctor

68 Likes

2.7k Views

Step 1 of 34

Download the PAGES app by APPLE from the App Store. Price: ($10).

Step 2 of 34

Open PAGES and create a BLANK DOCUMENT. Tap the GOLDEN WRENCH at the top right of the screen.

Step 3 of 34

Tap DOCUMENT SETUP.

Step 4 of 34

I want to add a background. Tap the BLUE + at the top right of the screen, then Tap the MEDIA tab

Step 5 of 34

Choose a picture from your CAMERA ROLL.

Step 6 of 34

I will use the background from my MAKE A BOOK Snapguide. Resize the background.

Step 7 of 34

Fill the whole white area. Tap DONE and tap the BLUE + again. Go to the MEDIA tab again and grab an iPhone picture.

Step 8 of 34

This will be our MOCK DISPLAY. Resize it

Step 9 of 34

Don't overdo the resize. Make sure the picture is high resolution. Now leave the PAGES app for a sec.

Step 10 of 34

Open the NATIVE CAMERA APP.

Step 11 of 34

Cover up the camera lens and take a screenshot. (To take a screenshot, press the HOME BUTTON and POWER BUTTON at same time.)

Step 12 of 34

Go back to PAGES and back to DOCUMENT SETUP. Add the screenshot like you did the background picture and the iPhone picture.

Step 13 of 34

It pops in. Tap DONE and go back to the MAIN SCREEN for a sec.

Step 14 of 34

Tap the GOLDEN WRENCH at the tip right of the screen.

Step 15 of 34

Tap SETTINGS.

Step 16 of 34

If we were to try to resize the screenshot now, we would get a lot of snapping. Turn off CENTER GUIDES.

Step 17 of 34

Go back to DOCUMENT SETUP. Now RESIZE the screenshot to fit in the mock display. Tap DONE. Go back to the main screen.

Step 18 of 34

Now we can add our PROTOTYPE PHOTOS. Tap the BROWN +. Go to the MEDIA tab.

Step 19 of 34

I grab a photo of a 3D guy and a 3D girl.

Step 20 of 34

They pop in. Resize them.

Step 21 of 34

You can add other content if you want to.

Step 22 of 34

I added a title.

Step 23 of 34

FIN.

Step 24 of 34

EXAMPLES:

Step 25 of 34

CONCEPT: GOOGLE-APPLE MAPS.

Step 26 of 34

CONCEPT: DROPMUSIC. Hehe

Step 27 of 34

CONCEPT: IArchitecture

Step 28 of 34

CONCEPT: Rotoscope

Step 29 of 34

Step 30 of 34

The reason I created this guide is because I had an idea for an app, but could not find a good app that would help me prototype it. Now, if only I could program... Any App Developers out there??

Step 31 of 34

PROTOTYPING APPS

Step 32 of 34

UPDATE: Testing an app called DAPP by KEROFROG PTY LTD. It lets you make mockups using actual IOS icons. Using this with this guide will make your prototypes look more believable.

Step 33 of 34