- Welcome to a new web design tutorial video.
In this one, I'm gonna take you through my process
for designing a landing page using Sketch.
If you're not familiar with it already,
Sketch is a piece of design software for Mac
and it focuses on digital design,
and it's what I use to design
all of the websites that I work on.
I've previously done a video that I called Sketch 101,
and in that video, I went through all of the basics
of how the tool works,
what all the different panels mean,
and how you use all the tools and things like that.
So if you're not familiar with the software already,
I would recommend checking out that video first.
It'll be a really good introduction to it
and will get you used to using it
so you know where to click for things.
In this video, I want to dive straight in it
to using it to create a landing page.
So if you've never opened Sketch before,
then check out that basics video first.
Otherwise, let's get into it.
Before we dive into Sketch, I just wanted to note
that my web design process doesn't start
on the computer; it doesn't start on Sketch.
It actually starts with a pen and paper,
looking something like this.
I always like to wireframe a website
before I go in and design it on the computer
because I feel like once you're making boxes
and you're aligning things to a layout grid
and things like that,
you can tend to focus on getting things too perfect,
rather than just getting your ideas out first and foremost.
And so, just a regular piece of paper and a sharpie
really helps me to do that, as you can see.
You don't have to be good at drawing to wireframe a website.
This is a rough outline of what we'll be designing today.
I'm going to be designing a landing page for a font
that I'm making at the moment and will eventually be selling
hopefully later on this year.
So that's what I wireframed, thinking about what information
that I need to give to people about my font
and the different packages that I'm gonna be selling,
and every landing page needs to have a main goal,
and obviously with this landing page,
the main goal would be to get people to buy the font.
So with all that said, before you dive into Sketch
and start mocking up a landing page, I want you to
really think about the content of that page first
and what information needs to go on it,
and really it does help to do that in wireframe form.
All right, now that that rant's over,
let's dive into Sketch.
Okay, so here I have set up just a new document
with a Desktop HD artboard in it.
Remember, if you want to create an artboard,
you just go to Insert and add one through there.
The very first thing you usually want to do
with any form of design really is set up what grid
you're gonna be working to because with design,
you want to know the rules before you break them,
and in web design especially, working to a grid
is really useful for when it's gonna be built.
Most of the sites that I work on use a bootstrap grid,
so I like to mimic that in Sketch.
You turn on the layout grid here using control + l.
You can see that there's a setup with 12 columns
and this is the width of the bootstrap grid
because I have it set up as a default.
These are my grid settings here
if you want to take a screenshot and copy them.
What's really handy about Sketch
is that if there is a certain grid
that you always find yourself using,
then you can just click this Make Default button
and it'll be there on any new artboard
and document that you make.
All right, so what I do first
is basically create a digital version of this mock-up here.
So I'm just gonna make some gray boxes essentially
to put things in the right place.
What I just used there to get that placeholder text
is this plugin called Craft, which is made by InVision.
I'm gonna be going into that in a bit more detail
later on though, so don't worry about that for now.
So what I've mocked up is a header space
where I know I'm gonna have a photo of some sort,
a headline, and a button probably
with a call to action on it.
In the next section, there will be
a little bit of background information about the font
and some details on a few of its special features
like, you know, special parts to it,
and then ending the page, I want to have a section
with the different packages that I'm gonna offer,
and I'm not quite sure what's gonna go on these cards
yet here, so we'll work that out together.
And then, the very last bit is just a small photo
with a few links to my website and things like that.
So as you can see, I've created this wireframe
just by using rectangles and text boxes essentially
to make a slightly tidier digital version of this wireframe.
As you can also hopefully see,
I've tried to stick to the grid
for all the little things that I'm laying out,
just because it's gonna help me later,
so when I make the boxes for these,
which will be images or screenshots or something in here,
I made sure to put it over a full column.
So now we have a digital wireframe
and it's time to get into the fun part
of making the high-fidelity mock-up.
I did want to walk through this though
because this is my exact web design process
and you have to remember that design isn't just the visuals
and how it looks at the end.
It's the whole process
that goes into the planning and the thinking
about the information structure and things like that,
so taking the time for these wireframes
to really think about where information is gonna go
is really important.
When I come to doing this high-fidelity mock-up stage,
I tend to just work from the top down,
so that's what we're gonna do.
First, we're gonna tackle the design of this header section.
So if I come over to Illustrator here,
this is your first preview of my font
that I've been working on.
It's obviously not finished.
Right now, it's just an image trace from me drawing the font
on my iPad, and so there's a lot of refining to do
to turn it into an actual font that will actually be used,
but yeah, this is what I'm currently thinking of calling it.
I'm not entirely sure yet
but this is what we're gonna go with for now
for the purposes of making this landing page.
So what I'm gonna do is just copy these letters
and bring them back into Sketch.
And that's a really great thing about Sketch is
that you can copy and paste from Illustrator.
Sometimes things get a little bit like,
I'm gonna say janky is like just a good word for it
to explain, to be honest,
where it does these things and puts them in clipping masks.
Sometimes that can mean that your shape isn't seen.
So sometimes I like to just come in and tidy that up
by taking those clipping masks away.
So this guy is gonna be essentially the title of the page.
I don't want it to take up that much space.
Probably a line of text underneath and then the button.
I mentioned this in my Sketch 101 video,
but what I love about this software is that
this panel here adapts to be whatever you're working on,
like whatever thing you have selected.
So if I click into this guy here,
I obviously can't change the font of this
because it's not text, and so it doesn't show me that,
and I really like that.
I think it makes the most useful information
and the things you can edit apparent to you
and easy to access.
I want to give this button here slightly rounded corners
because I really like the way it looks,
and so to do that, I'm going to come into the rectangle
and just change the radius here to five pixels.
And I'd like a photo to go on the background here
because I feel like that will look more dynamic.
If you have an exact photo you want to use,
you can just drag it in and use this rectangle as a mask.
Let me show you how I do that actually.
So if I grabbed this image here and dropped it
onto my canvas, obviously it's gonna appear super large
because the photo is much bigger than that.
Now to use a rectangle, any shape really, as a mask,
you just have to select the two items and go Mask.
So anything that I edit in this group above here will be
confined to that rectangle shape,
but let me just turn that off for a second
because I want to show you another thing
that you could go, if I just draw another rectangle here.
Oop, and bring it out with the group.
There we go.
So this Craft plugin that I mentioned briefly before
is by InVision and it's essentially for filling your designs
with content.
That's the best explanation I can come up with for it,
but it also does things like duplicating content
and a bunch of other stuff that I don't really use
but this is the section that I tend to use the most.
Basically, all these sections here fetch example content
and put it into your design, so usually you don't use this
for the final outcome.
It's just for in the mock-up stage when you're not sure
what exactly what the text would be yet,
which is what I've done here and here.
But what you can also do is browse the web with it
and find a photo that will insert into the box,
so let me head to Unsplash, and now, for example,
I found this image.
All I have to do is click on it, and there we go.
Craft will fill in my rectangle with that photo,
so now that's the contents of it in the fill
that you see over here.
So that's pretty handy when you're mocking things up.
It's a great way to fetch images from the web.
Obviously, you have to make sure you've got permissions
to use the photos that you want in your designs
if you're putting them live on the internet,
but luckily, Unsplash is a site that does
Creative Commons stock photography,
so I tend to use it a lot.
I'm gonna make my title white,
so I just select all pieces and make it white.
You can set up text styling within Sketch,
which means that it would save this as a text style,
so then I could come down and,
let's use this thing as almost
so you've got to see it,
I can apply it here.
So that's something that I tend to use
when I am working on ConvertKit website for example,
and I've got a bunch of set styles in place
that I already know I need to use.
I think I'm going to make this button,
I really want it to be purple,
so we're gonna change the photo.
This brings up another good tip that I can share with you,
this color palette here.
See these global colors and document colors?
When you first open Sketch, those won't be there.
These global colors here are the ConvertKit color palette,
which is what I usually work on,
so I set them to appear on every new Sketch file,
and these here are my YouTube channel branding colors,
and so I set them to here, just in this document,
and I did that through a plugin called Sketch Palettes.
You just have to load the palette here,
and I've done a whole video about color palette management
that will go into how to create one and save the file
and other things like that,
so that will be linked on the card for you to shake out.
Sketch is vector-based software
but you would be surprised at how much you can actually do
with image manipulation in it.
So, I'm gonna make this dark purple,
so I'm changing the color of that rectangle behind there,
and now on the image itself, what I can do
is check Color Adjust, and drop down the saturation,
so that makes the image black-and-white,
and now I can lower the opacity, which will let through,
as you can see, the purple color that's behind it.
Let me turn off my layout so you can see that better,
and that's control + l, remember.
So this is what we have currently for our heading.
The spacing is a little off there, isn't it?
Let's sort that out.
And here's a little secret about spacing is that
I never bother to get it perfect in Sketch.
Something actually people often ask me is
if you can take Sketch and export all of the code
and suddenly have a website.
As far as I'm aware, that's not how it works.
You can export the CSS of certain things,
not that I ever do it,
so I'm not entirely sure how that works,
but the point of Sketch isn't to end up
with a working webpage; it's a design tool.
It's for you to design the webpage and then later on
is when you think about building it.
If you are looking for something
that just does all in one,
then maybe you could look at something like Webflow,
but I definitely recommend starting by
designing the page first
because I think you have a bit more freedom to
move things around and get creative with it
before you worry about exactly how it's gonna be built.
All right, we're gonna leave that for now.
That is a header of some sort.
In this section here, what I think I'm gonna do
is bring in some pieces of my font.
There you go.
This vector import has done the thing
that I was talking about,
where it tends to hide it in the clip root,
so if I just drag that j out, there, we see it.
I'm gonna edit these rectangles here slightly.
So I'm gonna use a very pale gray and round the corners.
Again, just using the align tools
to get them sitting in the middle.
A tip for copying and pasting things in Sketch.
If I tried to just regularly paste in this block here,
just by going command + v,
as you can see, the styling stays the same
because it automatically keeps the same style
as the text block already was.
And so, if I want to copy text over with styling,
I have to go command + alt + shift + v,
a lot of characters, but it gets the job done.
All right, I think I want to put a photo in here as well,
and I'm gonna use the same treatment as above.
And so, I'll show you a tip for quickly replacing an image.
If I just duplicate this block here and bring it down,
we will just get rid of that gray box.
What I'll do if I just shrink this up
so it'll actually show you on the screen, there we go,
is go Replace Image,
and there we go.
Now that image is in place of where the other one was,
and it keeps all the same styling that I had on that one too
which is really handy.
Obviously, I would probably use my real font some more
within this design, but for now,
it doesn't really exist properly,
so I'm just using a different font instead.
See, I'm just arranging layers by picking it up
and moving it around.
You can also go with this Move Forward/Move Backward thing,
but I find it easier just to move them.
As you can also see, I do not name my layers as I go.
A lot of people would recommend that
because it definitely makes it easier to find stuff
but to be honest, when I want to work with something,
I just click on it and that's how I know
what layer it is.
But yes, if you do want to be more organized,
I would recommend naming your layers.
I'm gonna copy this button that I made at the top here
and bring it down into these groups.
Okay, so now that I'm at the bottom of this page
and I'm seeing that I probably want my buttons to be purple.
I don't want the footer to be purple
because I want these to be the most eye-catching like links,
things that you see that you want to click on,
so I'm gonna change this to be perhaps black instead.
There we go.
Don't you think that the buttons stand out a lot more now?
These boxes here, I want to make the corners rounded
to match the buttons, but I don't want to round
all of the corners because as you can see,
these two here are joined.
So if for example, I put a five pixel radius on all of this,
I would get this weird notch here where I don't want one.
So instead of that, what I'm gonna do
is double-click on this rectangle here
and then see how these little anchor points come up?
I'm gonna hold shift and click on all three of them
that I want to be rounded,
and then I will type five pixels in,
and if I click off, you can see that
those corners are rounded, and this one stays the same,
which is exactly what I wanted.
And I'll do the same for just this one corner here
on this box, and these two corners on this one.
These three things here are my main packages I'm offering
for my font.
So I want to bring in some icons, I think,
to represent them.
For my font, I will get a piece of the actual font.
This one I think I'm gonna offer some extra vectors
with it, so that it will help you with your designs.
And I've not made them yet, so as an example,
I would just take
I guess this guy here and I'll turn it to one side.
And I'm gonna use this here and supposit a little icon
in between the two, so I kind of want it to be outlines.
So what I can do for that is right-click on it
and just go Convert to Outlines, and there.
Now it is a shape instead.
For this last one, I'm gonna use a tool called Noun Project.
Noun Project is a great place to go for icons.
I have an account with them
so I get this desktop Mac app here
that I can just search for something and check this out.
If I can just click on it and drag it into Sketch,
and now it's a vector in there.
But they also have a web version
where you can download icons without paying,
and you just have to give credit to the designer.
The idea of adding these things in here
is to really drive it home that with this package here,
you'll get more stuff.
That's why the box is taller,
that's why there's more icons in it,
and it'll kind of explain to people why it's a higher price.
Speaking of prices, I don't know what I'm charging yet,
but let me add a placeholder in.
And I'm gonna make the price purple as well
because then it connects in their mind
that when they click PURCHASE NOW,
they're gonna be paying that price.
You can see that we've got a header
with a super eye-catching image and a nice big button.
That button is probably too big to be honest
but hey, it's fine for now.
And I've got a block of text about the thing
and then I've got some extra details and information.
Then I have a subheading,
which will talk about the different packages,
what you can get.
And then I have my packages here.
One last thing I want to do is make that skateboard image
in the background stand out a bit more,
so I'm gonna select these boxes.
Let me bring my panel back in so you can see what I'm doing.
In Sketch, I could change the opacity of the whole box,
which would also change the opacity of the purple border
that I have on it,
or I could just change the opacity of the fill.
So I'm gonna make them 90%, maybe 80.
Let's go 85.
Now we can see a bit more of the skateboard behind them
coming through, and it brings in some more of that texture.
One last thing I want to add is a shadow
to my title at the top here,
just to make it stand out from the background a bit more.
So just tick the shadow option,
and then I can play with it from here.
I generally like my shadow to be coming from directly behind
and then a little bit more blurred out.
And if I just toggle this off and on,
you can see that adding it just really helps
bring that text forward a little bit more and stand out,
so I think I might do the same to the bottom here too.
So there we have it.
It's pretty simple,
probably not the best thing I've ever designed,
but I hope that it helps you pick up some design tips
along the way.
So that's a look at designing a landing page in Sketch.
If you have any questions
about this landing page design process,
please feel free to leave them down below in the comments.
I know I probably went through things very quickly
and skimmed over some stuff,
so please, don't be afraid to ask.
I am planning more videos about Sketch
in the future as well.
There's a lot I want to show you to do with vector tools
and creating shapes in Sketch, creating icons,
to do with mobile-responsive layouts and things like that,
so if that would be of interest to you,
let me know down below in the comments
and give this video a thumbs-up I guess.
This tutorial was voted on
by people who have joined my Patreon,
which is really exciting.
They wanted to see a tutorial on Sketch
and they wanted to see how to design a landing page.
So that's why I did this.
I'll also be sending the Sketch file out
to any patrons in the Learning by Doing
or Design Team Mentoring tier
because that is one of the rewards.
You get access to any of the assets
that I create during my videos.
Hopefully it will be helpful if you open up the file
and look through it and see how I set things up,
even use this as a base to design something for yourself
if you want to; I don't mind.
If you're not a Patreon yet and you'd like to become one,
then the link for that is patreon.com/charlimarie.
Also, if you would like to be notified
when this font eventually does go live for sale,
because if you're watching this video in the future,
who knows, maybe it is already, I don't know,
but head to charlimarie.com/font,
and there you can sign up to be notified,
or if it's the future,
the font might be there for sale already.
Okay, everyone.
Thanks for sticking with me
through this undoubtedly long video.
As you can see, the lightly has changed vastly
because while I've been talking,
it has become nighttime here in England.
All right, I'm gonna go and finish off my workday.
Thank you for watching, and I will see you next time.
Bye.