How to Design a Mockup on the iPad.

Design a User Interface for the next award winning app!

265 Views 1 Like 1 Comment
How to Design a Mockup on the iPad.
77 Steps
Supplies
Embed
1
You can use one of two apps to design your mockup. The FREE Inkpad (by Taptrix)...

You can use one of two apps to design your mockup. The FREE Inkpad (by Taptrix)...

2
Or TouchDraw (by Eleveroworks). TouchDraw is $9.99, and my preferred app, but we all like free eh? So I will be using Inkpad for this guide.

Or TouchDraw (by Eleveroworks). TouchDraw is $9.99, and my preferred app, but we all like free eh? So I will be using Inkpad for this guide.

Recommended For You
3

Setup

4
Open Inkpad and Tap the plus to create a new drawing. Set the dimensions to (900 x 1600). Set the orientation to Portrait.

Open Inkpad and Tap the plus to create a new drawing. Set the dimensions to (900 x 1600). Set the orientation to Portrait.

5
We need some sample objects

We need some sample objects

6
Select the square

Select the square

7
Give it a fill color at 50% brightness. Make sure it has no stroke.

Give it a fill color at 50% brightness. Make sure it has no stroke.

8
Draw a small square.

Draw a small square.

9
Select the square and duplicate it in place.

Select the square and duplicate it in place.

10
Drag out the duplicate.

Drag out the duplicate.

11
Give it a fill of 25% brightness.

Give it a fill of 25% brightness.

12
Duplicate it once more. You can use "Duplicate and Transform again" option.

Duplicate it once more. You can use "Duplicate and Transform again" option.

13
Fill it with 100% brightness

Fill it with 100% brightness

14
Stroke it with 25% brightness.

Stroke it with 25% brightness.

15
We need some reference lines. Create a line with about 4.5pt thickness.

We need some reference lines. Create a line with about 4.5pt thickness.

16
Create a few more lines, each subsequent line being 1pt smaller than the previous line (3.5, 1.5, 1.5). These values will change based on the size of your drawing.

Create a few more lines, each subsequent line being 1pt smaller than the previous line (3.5, 1.5, 1.5). These values will change based on the size of your drawing.

17

Main

18
To create the main outline of the device, create a rectangle with a 12pt corner radius.

To create the main outline of the device, create a rectangle with a 12pt corner radius.

19
You can use the Color Picker and sample the box with the white fill.

You can use the Color Picker and sample the box with the white fill.

20
21
With a 0pt corner radius, draw the internal screen.

With a 0pt corner radius, draw the internal screen.

22
Sample the thin line, and draw more shapes for hardware parts. All corner radii should be a multiple of 3.

Sample the thin line, and draw more shapes for hardware parts. All corner radii should be a multiple of 3.

23

Re-use

24
Reuse the circle shape by duplicating it and moving it. You can sample the lines with the color picker.

Reuse the circle shape by duplicating it and moving it. You can sample the lines with the color picker.

25
26
Reuse the lines themselves also for screen divisions.

Reuse the lines themselves also for screen divisions.

27

Slider

28
To make a Slider, duplicate a circle.

To make a Slider, duplicate a circle.

29
Open the shadow panel.

Open the shadow panel.

30
Turn the shadow on, and give it no offset, and a bit of blur. Make the brightness 50% (or close).

Turn the shadow on, and give it no offset, and a bit of blur. Make the brightness 50% (or close).

31
Give it a solid white fill (100% brightness).

Give it a solid white fill (100% brightness).

32
Duplicate a line. And place it over the circle.

Duplicate a line. And place it over the circle.

33
With the line selected, Tap "Arrange" and then "Send Backward" to send the line behind the circle.

With the line selected, Tap "Arrange" and then "Send Backward" to send the line behind the circle.

34
That's it for the slider.

That's it for the slider.

35
I adjusted the stroke to 50% brightness and thickened it a little.

I adjusted the stroke to 50% brightness and thickened it a little.

36

Switch

37
To make a switch, draw a rectangle with a 48pt corner radius.

To make a switch, draw a rectangle with a 48pt corner radius.

38
Sample the fill of 50% brightness.

Sample the fill of 50% brightness.

39
Duplicate the slider knob and place it over the shape. Switch done!

Duplicate the slider knob and place it over the shape. Switch done!

40
You can vary the color of the shape if you want.

You can vary the color of the shape if you want.

41

Keyboard keys

42
To make a keyboard key, Create a rectangle with a 24 pt corner radius.

To make a keyboard key, Create a rectangle with a 24 pt corner radius.

43
Give it a shadow facing straight down. Turn the blur to 0, and give it 50% brightness.

Give it a shadow facing straight down. Turn the blur to 0, and give it 50% brightness.

44
Fill it with white, and make sure it has no stroke.

Fill it with white, and make sure it has no stroke.

45
46
Create a text object. Give the text 50% brightness. Type a letter.

Create a text object. Give the text 50% brightness. Type a letter.

47
With the text selected, you can sample the 50% grey box with the Color picker.

With the text selected, you can sample the 50% grey box with the Color picker.

48
Scale and position the letter.

Scale and position the letter.

49
Note that when placed against a background with a color similar to the shadow, it looks flat.

Note that when placed against a background with a color similar to the shadow, it looks flat.

50
Just darken the shadow.

Just darken the shadow.

51
Select both the letter and the rectangle and group them. Found in the "Arrange" menu.

Select both the letter and the rectangle and group them. Found in the "Arrange" menu.

52
Now you can duplicate and transform as many keys as you want.

Now you can duplicate and transform as many keys as you want.

53
There are all sorts of things you can do with these basic techniques.

There are all sorts of things you can do with these basic techniques.

54
55
Zoomed out view.

Zoomed out view.

56

Hardware Buttons

57
To make a hardware button, create a rectangle with a 6pt corner radius.

To make a hardware button, create a rectangle with a 6pt corner radius.

58
Fill it with 50% grey.

Fill it with 50% grey.

59
Position it alongside the device.

Position it alongside the device.

60
Send it backwards until it is behind the device's lines.

Send it backwards until it is behind the device's lines.

61
Do this for any additional hardware parts. An antenna?

Do this for any additional hardware parts. An antenna?

62
Now THAT is an antenna!

Now THAT is an antenna!

63
The smaller the corner radius, the more like a button if looks.

The smaller the corner radius, the more like a button if looks.

64
Larger corner radii look like knobs.

Larger corner radii look like knobs.

65
Just uses stroke-less 50% grey rectangle with a 0pt corner radius for a Status Bar, or any content area on the screen.

Just uses stroke-less 50% grey rectangle with a 0pt corner radius for a Status Bar, or any content area on the screen.

66
Content area for the messages.

Content area for the messages.

67
You can view your mockup as an outline from the settings menu. From here, you also turn on Snapping.

You can view your mockup as an outline from the settings menu. From here, you also turn on Snapping.

68
This is the outline.

This is the outline.

69

Examples

70
Tweak it a little!

Tweak it a little!

71
I added a translucent rectangle with an "Overlay" blending mode over the screen to make it look darker. Then sent it behind this popup I made. I "United" two shapes under the "Path" menu to make this.

I added a translucent rectangle with an "Overlay" blending mode over the screen to make it look darker. Then sent it behind this popup I made. I "United" two shapes under the "Path" menu to make this.

72
A keyboard?

A keyboard?

73
Nice!

Nice!

74
This is touchdraw. Same concept. TouchDraw gives you much more control and precision.

This is touchdraw. Same concept. TouchDraw gives you much more control and precision.

75
This is what you could potentially do!

This is what you could potentially do!

76
This was made with TouchDraw, on the Mac. It is also available on Android devices. Not available for Windows.

This was made with TouchDraw, on the Mac. It is also available on Android devices. Not available for Windows.

77

End

keyboard shortcuts:     previous step     next step
Comments
1 COMMENT
View More Comments