- [Emmanuel] Any UX project must start from somewhere

and some research and inspiration

is usually the place I start.

So for us, we'll assume we're building a purchase flow

that could be used for a fictive company

called H+ Sports Supplements and Active Wear

and we'll be designing the purchase flow for mobile.

So let's get some inspiration by researching the web

for colors and potential ideas for design.

Again, feel free to completely use different colors

and designs for your own project.

So where I usually go is at pinterest.com

but you can also use something like Behance or ArtStation

or any other sites that you find your inspiration.

So for example, for me, this is where I go.

So let's first do some research.

So we're going to do a sports company,

so let's go ahead and do sports

and because I liked the colors

that usually comes with soccer themes

and soccer companies and things like that,

I tend to go towards soccer

and if you scroll down, you're going to find some colors.

So what I usually do is scroll on Pinterest

and kind of look at the colors that they're suggesting.

So I like this really cool green and blue.

This is something that's trendy right now.

You can also find colors like this.

So whatever colors you like, go for it

and put them in the Sketch.

And I'm going to show you in a few seconds

how we put inspiration in Sketch show.

One that I wanted to look for is a little bit down in here

and maybe the designs have changed

or the pictures here have changed

so let's go for the other one that I've seen here,

it's very similar to the colors that we're going for.

So there we go, it's right there.

So what I usually do is create inside of Sketch

an inspiration board.

So let's go ahead and do that

and then we'll drag and drop some photos inside of Sketch.

So let's go ahead and create a new document.

So open Sketch and then click on new document, choose

and then click on the little arrow here.

This is going to show all the pages inside of Sketch, like so

and the first one let's rename it to inspiration.

And what I usually do is create a huge board

and just drag and drop the images for inspiration.

So you create a new board by doing a

and then just click on whatever size

but for our case here it's going to be something

that's customized.

So let's just go in custom

and create custom size.

So my custom size for this one

and let's just create a brand new preset,

so inspiration board like this

and usually I go by a thousand pixels by a thousand pixels.

And once you create a custom preset,

this will be available for future use as well.

So you have it in your custom

so you can go ahead and create this new one and click on it.

So you got your inspiration board here.

So another shortcut for Sketch is to click on command

and scroll with your mouse, basically on the Mac,

you can also do the same by using a track pad

and scrolling up and down by hitting command and track pad.

So once you have that you'll have your board center as well.

Another way to a move in Sketch

and this is something that will be useful

once we have multiple boards on our application,

it's to use shift and then use the track pad

or the scroll mouse like so

and then you can move left and right like that.

So what we'll do is go back to Pinterest

and start dragging images inside of our inspiration board.

I'll maximize both so I can drag

and drop in between application, like so.

So I want to have the first image on the top

that I saw somewhere here,

so just click on it,

drag and drop inside of Sketch

and then inside of Sketch just move it to wherever you want.

And then what you could do is type some notes here.

So you can use a shortcut t for text

and just do something like colors.

Let me type some notes here like the green

and blue, dark blue of this image

and just maximize the text

so you guys can actually see it, like so

and because we're going to have some other things,

let's just move it here and there you go.

So one thing that you'll see

as you move things around in Sketch,

this is not a basic course on Sketch,

so you may be familiar with this, if you're not,

then you'll see that whenever you move things around,

you're going to have guides.

So are you're going to have like the amount of pixels

in between each items and so on an so fourth.

This is very useful when you start positioning stuff

and also aligning stuff.

Hold on, let me just click on auto, there you go

and then do this, while it's highlighted of course

and make sure that we have the right size.

So we're not going to spend too much time

on the text alignment

but this is basically how you put items in here.

So the next thing we want to make sure that we save this.

So let's rename this purchase flow this

and I'm going to put it on desktop for my own

but you can put it anywhere you want,

there we go.

So I need few other things for inspiration.

So I got colors, I want some shapes.

So you need to find some shapes

and again, these are all things

that you can find for inspiration,

you don't want to replicate the exact same thing,

so you want to make sure that you just get inspiration

from this, then start doing some low-level mock-ups

and then do the actual designs.

So, one other thing that I search quite often is UI

and if this is a mobile application,

I'm going to do mobile, like so

and I'm going to find more inspiration from there

and then just scroll and see

what are the shapes that you really like

or designs that inspire you.

So for example, one of the designs that I really like

is a little bit down further when I first did this search,

this one here.

I really liked the round shapes

and the way they did the design here.

So let me go ahead and drag

and drop this image as well, like so.

Now this image is really, really big

so what I'm going to do

and a little shortcut that you can do in Sketch,

is double click on something and then crop it,

click on crop and you click the selection you want to crop

and this kind of represents the colors

and the shapes that I like,

so I'm going to crop this.

So I did my selection and then just crop it like so

and then you can just replace the image on your board,

like so.

So I'll put it at the bottom here

and it's just option, click to the second text

and just put some notes in here, like the shapes

and this design, like so.

So one more thing that I did find in my initial research,

you can go ahead and do products

because this is going to be an application

that will represent a company that sells products.

So maybe get some more inspiration around a company

that has mobile application, some UI references

and about products.

And one other design that I really like, that I found,

I believe it's a little bit down further,

it's this one here.

So I really liked this design,

I like the way that this is kind of a blog in a application

but I'd like to use

kind of a same similar style for products

and then you can swipe sideways to the application.

So let's go ahead and drag and drop this image here

and then we can close Pinterest

because we're kind of done with our inspiration

and I will maximize this here

and because this is so big,

let's just resize this one, like so

and just put it on top like that

and t's put some notes again.

So option, click, let's reshape this

and then really like the side scrolling approach.

So this is how I usually go about finding inspirations,

I create an inspiration board.

So I directly create an inspiration board inside of Sketch

so I can always go back to it.

So the idea of this exercise is to really find ideas,

not that you will replicate exactly the same way

but you want to find inspiration for shapes, flows

and general colors to inspire you in your design.

(upbeat music)