How to Do App Mockups in IOS

Create App Concepts using IOS PAGES.

3k Views 75 Likes 4 Comments
How to Do App Mockups in IOS
34 Steps
Supplies
Embed
1
Download the PAGES app by APPLE from the App Store. Price: ($10).

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

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

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

Recommended For You
3
Tap DOCUMENT SETUP.

Tap DOCUMENT SETUP.

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

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

5
Choose a picture from your CAMERA ROLL.

Choose a picture from your CAMERA ROLL.

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

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

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

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

8
This will be our MOCK DISPLAY. Resize it

This will be our MOCK DISPLAY. Resize it

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

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

10
Open the NATIVE CAMERA APP.

Open the NATIVE CAMERA APP.

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

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

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

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

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

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

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

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

15
Tap SETTINGS.

Tap SETTINGS.

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

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

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

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

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

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

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

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

20
They pop in. Resize them.

They pop in. Resize them.

21
You can add other content if you want to.

You can add other content if you want to.

22
I added a title.

I added a title.

23

FIN.

24

EXAMPLES:

25
CONCEPT: GOOGLE-APPLE MAPS.

CONCEPT: GOOGLE-APPLE MAPS.

26
CONCEPT: DROPMUSIC. Hehe

CONCEPT: DROPMUSIC. Hehe

27
CONCEPT: IArchitecture

CONCEPT: IArchitecture

28
CONCEPT: Rotoscope

CONCEPT: Rotoscope

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

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
Found a good one!

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