(upbeat music)
- [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)