How to Do App Mockups in IOS

Create App Concepts using IOS PAGES.

2k Views 75 Likes 4 Comments
1
Image for Step 1

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

2
Image for Step 2

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

Recommended For You
3
Image for Step 3

Tap DOCUMENT SETUP.

4
Image for Step 4

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

5
Image for Step 5

Choose a picture from your CAMERA ROLL.

6
Image for Step 6

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

7
Image for Step 7

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

8
Image for Step 8

This will be our MOCK DISPLAY. Resize it

9
Image for Step 9

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

10
Image for Step 10

Open the NATIVE CAMERA APP.

11
Image for Step 11

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

12
Image for Step 12

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

13
Image for Step 13

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

14
Image for Step 14

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

15
Image for Step 15

Tap SETTINGS.

16
Image for Step 16

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

17
Image for Step 17

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

18
Image for Step 18

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

19
Image for Step 19

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

20
Image for Step 20

They pop in. Resize them.

21
Image for Step 21

You can add other content if you want to.

22
Image for Step 22

I added a title.

23

FIN.

24

EXAMPLES:

25
Image for Step 25

CONCEPT: GOOGLE-APPLE MAPS.

26
Image for Step 26

CONCEPT: DROPMUSIC. Hehe

27
Image for Step 27

CONCEPT: IArchitecture

28
Image for Step 28

CONCEPT: Rotoscope

29
Image for Step 29
30

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??

31

PROTOTYPING APPS

32
Image for Step 32

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.

33
Image for Step 33

Found a good one!

34

UPDATE: I have some DAPP tutorials on my site now. I might still make a guide, but these videos are very good. (Link in the comments of this step.)

keyboard shortcuts:     previous step     next step
Comments
4 COMMENTS
View More Comments