0
1
00:00:01,360 --> 00:00:08,140
So now that we've created our wireframes and we've had a look at what it might look like on our phone
1

2
00:00:08,140 --> 00:00:12,930
using Pop, the next stage is creating what are called mockups.
2

3
00:00:13,090 --> 00:00:18,910
Now depending on which designer you talk to, a mockup might mean different things to them. But I'm going
3

4
00:00:18,910 --> 00:00:25,270
to use the word mockup in the design sense. And it's essentially a high fidelity representation of your
4

5
00:00:25,270 --> 00:00:26,230
design.
5

6
00:00:26,230 --> 00:00:32,410
It's almost like as if you went into this app of the future and you took some screenshots from it.
6

7
00:00:32,410 --> 00:00:37,150
It should look photo realistic and pretty much just like the real thing.
7

8
00:00:37,180 --> 00:00:43,840
Some mock up show the screens next to each other and others show the mockup placed inside a phone and
8

9
00:00:44,230 --> 00:00:46,160
in some sort of use situation.
9

10
00:00:46,210 --> 00:00:50,320
So then the question is how do you go about creating mockups and what are the tools that you should
10

11
00:00:50,320 --> 00:00:51,180
use?
11

12
00:00:51,190 --> 00:00:55,450
So my tools of choice are Photoshop and Illustrator combined.
12

13
00:00:55,450 --> 00:01:01,110
For me, they represent the most comprehensive set of tools. You can literally do any kind of design work
13

14
00:01:01,120 --> 00:01:04,460
once you've got these two tools in your tool belt.
14

15
00:01:04,630 --> 00:01:09,570
Now the problem with these tools is that they have a really steep learning curve.
15

16
00:01:09,580 --> 00:01:13,490
They have a lot of buttons and they have a lot of complex features.
16

17
00:01:13,510 --> 00:01:15,660
Layers, marks, pen tool.
17

18
00:01:15,700 --> 00:01:19,350
They all take quite a long time to learn and get used to.
18

19
00:01:19,600 --> 00:01:26,630
Now I started out with Photoshop over probably 10 years ago and I picked up Illustrator soon after.
19

20
00:01:26,830 --> 00:01:30,990
So it's taken me you know over 10 years to hone the skills.
20

21
00:01:31,300 --> 00:01:37,750
And I think for somebody who is starting out in digital design today I really think that there are better
21

22
00:01:37,750 --> 00:01:44,380
tools that you can learn much faster that will be able to do 95% of what you can do with Photoshop
22

23
00:01:44,380 --> 00:01:45,440
and Illustrator.
23

24
00:01:45,670 --> 00:01:51,610
The other problem with these two softwares is that they're from Adobe and they are currently sold as a package
24

25
00:01:51,940 --> 00:01:53,900
through the Adobe Creative Cloud.
25

26
00:01:53,920 --> 00:02:01,180
Now anybody who's signed up to the Adobe Creative Cloud will know what a pain it is to try and get yourself
26

27
00:02:01,240 --> 00:02:01,810
out of it.
27

28
00:02:01,900 --> 00:02:04,720
So when you have a company license that's all well and good.
28

29
00:02:04,870 --> 00:02:10,700
But if you need it for personal use it's still something like £60 a month if you pay monthly
29

30
00:02:10,730 --> 00:02:15,120
and I think £40 a month if you pay for a one year subscription.
30

31
00:02:15,220 --> 00:02:17,980
So it's horrendously expensive basically.
31

32
00:02:18,520 --> 00:02:24,220
Now the tool that I'm going to recommend to you and I'm going to teach you a bit more about is actually
32

33
00:02:24,220 --> 00:02:24,920
something else.
33

34
00:02:24,940 --> 00:02:33,250
It could Sketch. And sketch is a really great Mac app that only costs $99 on the App Store and it can
34

35
00:02:33,250 --> 00:02:36,760
pretty much do most of what Illustrator and Photoshop can do.
35

36
00:02:36,760 --> 00:02:41,530
And especially when you're talking about user interface design, it can actually do something slightly
36

37
00:02:41,560 --> 00:02:47,080
better than Photoshop and Illustrator. And a really nice thing about Sketch is that it allows you to
37

38
00:02:47,080 --> 00:02:48,460
create a vector object.
38

39
00:02:48,490 --> 00:02:54,600
So essentially the images that scale to any size because they're vector rather than raster.
39

40
00:02:54,700 --> 00:03:00,190
So in Photoshop, you're only working with raster objects or smart objects and it's only an illustrator
40

41
00:03:00,460 --> 00:03:08,500
can you create these vectors for say your icon design, your app icon or your tablet icons etc. and
41

42
00:03:08,500 --> 00:03:14,650
Sketch can do all of that and it has really good integration with other tools for prototyping that we're
42

43
00:03:14,650 --> 00:03:16,660
going to talk about in the next module.
43

44
00:03:16,660 --> 00:03:21,930
So Sketch is great. You can get a free trial of it for 30 days I think for free.
44

45
00:03:21,940 --> 00:03:28,300
So give it a whirl and if you like it you know the $99 upfront cost is you know nothing compared to
45

46
00:03:28,300 --> 00:03:29,830
Photoshop and Illustrator.
46

47
00:03:30,100 --> 00:03:32,920
So I'll show you a bit more about that a little bit later on.
47

48
00:03:32,950 --> 00:03:38,980
Now the final thing I'm going to mention is something called Marvel. And Marvel is a browser based app
48

49
00:03:39,250 --> 00:03:42,800
that you can use to create mockups and prototypes as well.
49

50
00:03:42,880 --> 00:03:51,550
Now it has a pretty simple interface and you can drag on various shapes or images or text and it's basically
50

51
00:03:52,090 --> 00:03:53,890
and it's basically even easier
51

52
00:03:53,890 --> 00:03:59,860
I would say in terms of the learning curve to use it. And in most cases you don't really need the complex
52

53
00:03:59,860 --> 00:04:06,040
tools that you have in Photoshop and Illustrator. And in most cases if you're just making mockups or
53

54
00:04:06,030 --> 00:04:12,310
websites or for apps, then Marvel can actually do just as well and we'll show you how to use that as
54

55
00:04:12,310 --> 00:04:12,800
well.
55

56
00:04:12,880 --> 00:04:16,290
And a final tool that I wanted to mention is something called UXPin.
56

57
00:04:16,300 --> 00:04:22,120
Now I used to recommend them because I liked the way that you can drag on various UI components. So they
57

58
00:04:22,120 --> 00:04:27,610
have these libraries of UI components like buttons or calendars and you basically just drag and drop
58

59
00:04:27,610 --> 00:04:32,610
them onto the canvas as a quick and pretty pain free way of making mockups.
59

60
00:04:32,650 --> 00:04:40,240
But lately, I think their monetization model is a bit off and they don't really have a very generous tier
60

61
00:04:40,240 --> 00:04:45,350
for beginners. So you can't really try it out properly before you have to pay for their pay tier.
61

62
00:04:45,490 --> 00:04:51,130
And their pay tier is on a monthly basis and you'll find that overall it will probably work out cheaper to
62

63
00:04:51,130 --> 00:04:57,280
just get sketch and learn how to use it and you'll be able to do a lot more with it than you can with
63

64
00:04:57,790 --> 00:04:59,380
some of these web tools.
64

65
00:04:59,380 --> 00:04:59,700
All right.
65

66
00:04:59,710 --> 00:05:05,730
So we've spent enough time talking about the wonders of Sketch, it's time to introduce you to Sketch
66

67
00:05:05,890 --> 00:05:06,250
3.