So now that we've created our wireframes and we've had a look at what it might look like on our phone 1
using Pop, the next stage is creating what are called mockups. 2
Now depending on which designer you talk to, a mockup might mean different things to them. But I'm going 3
to use the word mockup in the design sense. And it's essentially a high fidelity representation of your 4
design. 5
It's almost like as if you went into this app of the future and you took some screenshots from it. 6
It should look photo realistic and pretty much just like the real thing. 7
Some mock up show the screens next to each other and others show the mockup placed inside a phone and 8
in some sort of use situation. 9
So then the question is how do you go about creating mockups and what are the tools that you should 10
use? 11
So my tools of choice are Photoshop and Illustrator combined. 12
For me, they represent the most comprehensive set of tools. You can literally do any kind of design work 13
once you've got these two tools in your tool belt. 14
Now the problem with these tools is that they have a really steep learning curve. 15
They have a lot of buttons and they have a lot of complex features. 16
Layers, marks, pen tool. 17
They all take quite a long time to learn and get used to. 18
Now I started out with Photoshop over probably 10 years ago and I picked up Illustrator soon after. 19
So it's taken me you know over 10 years to hone the skills. 20
And I think for somebody who is starting out in digital design today I really think that there are better 21
tools that you can learn much faster that will be able to do 95% of what you can do with Photoshop 22
and Illustrator. 23
The other problem with these two softwares is that they're from Adobe and they are currently sold as a package 24
through the Adobe Creative Cloud. 25
Now anybody who's signed up to the Adobe Creative Cloud will know what a pain it is to try and get yourself 26
out of it. 27
So when you have a company license that's all well and good. 28
But if you need it for personal use it's still something like £60 a month if you pay monthly 29
and I think £40 a month if you pay for a one year subscription. 30
So it's horrendously expensive basically. 31
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
something else. 33
It could Sketch. And sketch is a really great Mac app that only costs $99 on the App Store and it can 34
pretty much do most of what Illustrator and Photoshop can do. 35
And especially when you're talking about user interface design, it can actually do something slightly 36
better than Photoshop and Illustrator. And a really nice thing about Sketch is that it allows you to 37
create a vector object. 38
So essentially the images that scale to any size because they're vector rather than raster. 39
So in Photoshop, you're only working with raster objects or smart objects and it's only an illustrator 40
can you create these vectors for say your icon design, your app icon or your tablet icons etc. and 41
Sketch can do all of that and it has really good integration with other tools for prototyping that we're 42
going to talk about in the next module. 43
So Sketch is great. You can get a free trial of it for 30 days I think for free. 44
So give it a whirl and if you like it you know the $99 upfront cost is you know nothing compared to 45
Photoshop and Illustrator. 46
So I'll show you a bit more about that a little bit later on. 47
Now the final thing I'm going to mention is something called Marvel. And Marvel is a browser based app 48
that you can use to create mockups and prototypes as well. 49
Now it has a pretty simple interface and you can drag on various shapes or images or text and it's basically 50
and it's basically even easier 51
I would say in terms of the learning curve to use it. And in most cases you don't really need the complex 52
tools that you have in Photoshop and Illustrator. And in most cases if you're just making mockups or 53
websites or for apps, then Marvel can actually do just as well and we'll show you how to use that as 54
well. 55
And a final tool that I wanted to mention is something called UXPin. 56
Now I used to recommend them because I liked the way that you can drag on various UI components. So they 57
have these libraries of UI components like buttons or calendars and you basically just drag and drop 58
them onto the canvas as a quick and pretty pain free way of making mockups. 59
But lately, I think their monetization model is a bit off and they don't really have a very generous tier 60
for beginners. So you can't really try it out properly before you have to pay for their pay tier. 61
And their pay tier is on a monthly basis and you'll find that overall it will probably work out cheaper to 62
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
some of these web tools. 64
All right. 65
So we've spent enough time talking about the wonders of Sketch, it's time to introduce you to Sketch 66
3.