Designing a landing page in Sketch – Tutorial

Designing a landing page in Sketch – Tutorial

– 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 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, 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.

100 thoughts on “Designing a landing page in Sketch – Tutorial

  1. Is this a mock-up or can you make this go live as a site? I’m completely new to sketch I don’t understand what the limit is

  2. This is a top-notch tutorial Charli! There's so much I like about this tutorial – your tone of voice, the pace, the visuals… The list goes on! Thank you so much for filming, editing and uploading. You are a champ.

  3. This is sooo cool to see you work both on paper and in Sketch!
    I haven't designed a website in ages but this really made me wanna do it again. And also, it's so funny to know you're working on a font right now bc, what a timing, my boyfriend is currently doing the same 😅🙈
    Thanks for sharing!

  4. The ones who downvote a video like this are mouthbreathers. Seriously what was wrong? All this knowledge for free…what more can you want? 🤷‍♀️

  5. hi charlie I have to ask as web designer myself im in a constant struggle of which is the BEST software to use to build/design a website. I see yours is sketch but not sure if this is your main one.
    Have you ever tried other competitors like

    * Everweb
    * Rapidweaver
    * Sandvox
    * Arcsoft
    * Html egg pro
    * Pinegrow
    * Dreamweaver
    * Sparkle
    To name a few..have you ever tried any of these?
    What makes sketch different?
    Is sketch wordpress friendly?
    Does sketch have plugins?
    Is it cms friendly?

    On an average how long does it takes you to build a whole site?

    Do you create icons and logos? If so it illustrator you use?
    Sorry for so many questions but I really admire you as a designer

  6. Thank you Charli, really useful stuff, i'll love to see your future videos on sketch designing more websites / apps and how you deal with developers as well (handing out the design). Thanks again!

  7. I have 0 knowledge, experience or any education on design but your videos make me want to learn design, specifically web design & development. Thank you so much for sharing everything you know and showing an insight to your life & career x

  8. Thanks for the video, even though i've used sketch for a year now, learn a couple tips, IMHO Sketch is way better for digital design

  9. What are your thoughts on Adobe XD? Or, even InVision Studio?

    I have a fair few upcoming web design projects and I'm torn between the three!

  10. Hi Charli. I'm following the front end developer path at Treehouse, and while I understand the importance of wireframing a website before coding it I still can't understand the importance of designing it first in tools like sketch instead of diving straight in to the code. Can you explain what kind of advantages this approach gives? Also I hear a lot of 'Mobile first' design pattern and in Sketch it seems you have to re-design your website for every media breakpoint you want to target. What am I missing? What's the point of using this tool instead of writing HTML and CSS? I hope to read your opinion ☺️ PS: I found your channel last week and I watched a lot of your videos, your contents and your character are great, keep up the good work!

  11. Very nice tutorial, Congrats. But I've been pissed because I may not find the plugin of that right bar which contains customs text and searching internet photos, my Sketch doesn't have it!…how may get it?

  12. Great video, and your font looks so good!! Little trick, you can actually give a different radius for each corner in the radius box itself, by using this syntax: 20;0;0;20 (top-left, bottom-left, bottom-right, top-right)

  13. Great tutorial! Lot's of cool tips I didn't know about with Sketch. I love the idea of doing the wireframe first, then what I usually do is duplicate that before creating the high fidelity mockup. Because I usually do a few versions of a design (love options and can't commit!)

  14. Heyyy Charlie! Thanks for the awesome tutorial. I am teaching myself Sketch and I am very veryy new to this environment. Can you plz tell me how to access the right panel option where you got access to the web?

  15. Can you export the files to make the website or is this just for layout purposes? For example can you export html/css/js files from your design?

  16. Nice Video. What you could say about bootstrap grid is that its a responsive layout. The columns can adapt to different view ports, so mobile phones and tablets.


    I'm new to design, but I pick things up pretty quickly and thought this was the perfect amount of time to get me started. You're a fantastic teacher!

  18. Just a suggestion from my side…. your exposure setting for this video is better as compared to other videos that i had seen! Loved your content. It is really helping me to get into this career option. Thank you for such a nice information.

  19. Hi Charli Marie do you recommend using Sketch to wireframe a design for a website (that need development as well) also for a beginner ?

  20. That was a really tut charli, learned so much, thank you, i have subscribed and awaiting more tuts but will check out your other stuff also. Your a class act… cheers 🙂

  21. Hello! I'm very new to Sketch but love your videos so far. How do you get the columns showing up with the even white space on the sides? I have the same dimensions as you but my columns stick to one side so it's uneven, even if I widen the box up

  22. Thank you! Your content is great and I do have interest to learn more about designing icons and responsively for mobile. Have a great day there, sis! ^^

  23. Hi CharliMarie, your tutorial is awesome. But I want to ask how to open the small window (the place you typed "nounproject" keyword) in 15:34 and in 15:50 of this video?
    Please show me. Thank you so much!

  24. Can you go through a tutorial on how you have set up your tools and why?? Making things easy to use is so important 🙂

  25. Hey, I'm learning the craft of web design while going through a recruitment process, and your videos have been very helpful. I do have a question though. Would the mock-up you created be something that you would show to potential employers or clients, or is it just something you would use as a first draft before creating the "real" mock-up to show them?

  26. Hi, Marie!

    Very good content! As a beginner UX-er that's useful for me.
    However, I do wanted to ask you how to activate the "fill content" bar from the right side of the sketch layout (The one from the Content Generator Plugin)? I installed the plugin and can't find the option for the bar. Thank you and as a cinematographer, if I can help you with any tips, let me know 🙂

  27. Hi, great Video. Do you design with a default width of 1440 or why did you use this width? Will the image be stretched on the whole screen for larger screens like 1920 px?

  28. and after deigning the page, you have to code it to make it look like it? wouldn't be better just code it from the beginning?

  29. Great video, I really love your stuff. So I'm a web DEVELOPER and I've recently become a full-time freelancer. I've discovered that I need to be part developer and part designer. Every time I try to find resources online for web DESIGN I get links to, CSS, HTML, JavaScript, etc. But I want stuff like, "Design Standards", "Layout 101", "Web Design Best Practices for Dummies", etc.

    Do you have a list of resources somewhere? Your videos are great and I'm learning a lot but I would like a reference source. Maybe that's the developer in me. 😛

  30. I just changed my major to user experience design and I am lost when it comes to where to start and what to start making. Your videos are definitely helping me out!! 🙂 Thank You!

  31. I love your channel and I learned a lot about Sketch, but I can't find on any tutorial how to set paddings between elements (text, images, etc). I am creating a Pillar Page and coming from Adobe I am dying on aligning and separating everything evenly 🙁

  32. Does this export it as html or something ? I guess no . so how you can use it more "practically" making a real web landing page or website . sorry i am old scholl web designer its new this one to me , i want to know more . good video thanks

  33. What about making pages that have more complex overlaps, transitions, fades etc. Would you still use sketch for that?

  34. The place where I get stuck the most is once I have designed in Sketch, how do I publish it into an actual live site. Been on WordPress (Divi theme) but painfull to replicate what I have in Sketch. Will give a shot to Webflow too. Any ideas?

  35. hey! Dope video Charli, just a question. You have Anima's Launchpad installed, isnt that plugin supposed to help you export the html and css and allow you to make an actual website? In the video you said you couldnt really export the html and build the website fully on sketch so I got confused

  36. Why is it all these guys think it’s important for their audience to see them talking to the webcam inside a tutorial, hiding parts of the interface? It really gives nothing, just a distracting element at best. Having said that, thanks for the good part of it.

  37. 想问一下 web设计 原则是什么比如你接到一个 网页设计需求 先怎么做 怎么构思 怎么选择 颜色 字体板式等等。。。

  38. name your layers and try avocode application, you will be super handy when it comes to web development, check it out
    by the way i like your videos – sub indeed 🙂

  39. Charlie, could you please write what is the visible height of the screen. Making a landing page for desktop hd I don't really understand where the hero slide should end and where the next one start

  40. This was a great tutorial. I tried to replicate the tutorial in Adobe XD and it is not as intuitive or easy. I still can't seem to color the mask in Adobe XD. I will probably just buy Sketch.

  41. I actually just stumbled across this channel while trying to get a base overview for Sketch, and it's amazing – this video in particular is really useful. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *