How to Design a Landing Page in Sketch - Desktop Layout (Part 1/5)

okay so we're going to make a landing page and sketch completely from scratch so now I'm every project you you work with or you work on you want to start with a goal my goal is to make this landing page for a new project I'm starting called sketch to sketch which will allow people to hire me to create their their hand-drawn sketches into a full-fledged mock-up and the in this sketch app so let's get started first let's start with a rough layout I already have something I drew on a pencil and paper but I can't show you that obviously so let me do a quick wireframe of it desktop is fun now the goal of a landing page is to get users to convert which means take get users to take some sort of action so in this case I want them to sign up for my email list to sign up for this email list people need to have an email opt-in and all that so let's get started just we're going to press R for a simple rectangle tool and here is my quick little nav then we have our heading our main heading our headline subheading then I want a little video or like a little ebook picture right here with a quick little description underneath and then I want a third heading would some bullet points and now what you can do instead of having to draw these out can actually I pressed shift and down for that and that actually let me show you what I'm actually doing I downloaded this cool little plug-in called nudge app typically I think it's like 15 or 12 or pixels for a big nudge but you can change it depending on the base you want to work with I usually do 16 but let's let's try a base of 5 so the 15 would be good and now you'll see it's 15 and instead of having to do this even this all over again you can simply hold down alt and drag this out this is a just like Adobe Illustrator or other Adobe programs after that like just like illustrator you can control D it up cool hi just want three bullets underneath that we're going to have a the main opt-in form this is where they put the emails this is a big big ass red button that's going to tell them submit here or send me my list or whatever underneath that let's make this page a little bit bigger so this is going to be essentially the fold but people want to that want to kind of learn more about this they can scroll down below the fold and underneath that we're going to have a different totally different on body background let's take off okay now let's do another heading main benefit of why you should sign up and then the biggest browser video thing for an embedded youtube link underneath that you want to social prove this meaning that you want to show that real people are using it and they've actually gone some sort of value from whatever you're doing actually still wireframe and we don't text yet it's just there's another heading and this is cool so you can if you didn't already know about this on sketch do control not command control L you get your layout and layout is pretty cool you can change it around in it and really kind of give yourself a good guideline of what to do a 960 is fine for our purposes so essentially I want three main I keep pressing a T instead of our T's what gives you this type this is we're just wire framing right now so I want three different testimonials so this is 1/12 column grid so 12 divided by 3 is 4 now I want a square so the way I do this is like another program shift I can eyeball it to cool see how it snaps to the columns that's kind of cool this is actually a bit big forum okay this could work and then underneath that is where I want the the whatever they say so grab this alt do that let's see one more time boom okay we have our little profile pictures and testimonials and let's make this a little bit bigger underneath that we have another final call to action what essentially is going on is people that kind of check your landing page out here might not be convinced yet than the watch this cool video and then they get some value from the actual testimonials and then instead of having to scroll all the way back up to sign up we'll just have another cool really big opt-in form here so what's going on is let's do another background to make it stand out and then then you do another heading opt-in and call that other submit button show you underneath it or above the heading let's do some more bullet point so a little bit more info and love that you have your footer with footer links find out more links to the actual website and then up top I just want the brand name right here because we're not really linking to other websites or services so this is what a quick and dirty wireframe looks like neck rest command zero as you command one to make it zoom out to fit the entire project command zero goes to 100% for magnification so this is what you'll see in the browser this is it zoomed out okay of course the padding's and everything are pretty shitty because we aren't worried about that we just one in general layout and I think we have that so let's save this as what's up toes just catch cool now let's let's work on our style tiles or our style guides before we start with the actual mock-up just press this and you do Styles this one is oh no landing page okay my ad is kicking in super disorganized right now before we work on our Styles let's work on the mobile layout of this mobile is going to be pretty easy press a go here press a for getting these little templates it's cool a sketch gives you the exact screen dimensions and resolutions for all the iOS devices it gives you I Oh s icons even material design sizes and then you have your standard print paper I've actually never used sketch for printed design might be cool someday so anyway let's go to mobile and sit down a copy-paste let's just make it a rough thing you have your you have your nav not in that bar but Petter have here heading subheading video call to action on the video your main bullet points Center all this up okay and cool and then input button and then have your videos right here or your main video then you have testimonials just so we're not really worrying about the exact pixels or even alignment really just a rough layout whole little concept of wire framing is to have something that in bigger companies to hand off to designers that don't know exactly what they're doing since we're doing the entire design ourselves from sketching on paper to full-fledged mock-up in sketch and probably even code it ourselves we don't really need to worry about these formalities after after all this we have a final call to action area accepting this but okay boom and we just need this thing now it's probably going to be copyright blah blah blah check out my website and design by whatever someone like that Oh control one okay we have our mobile layout again now we can move on to styles for styles I don't like using something to do art board or okay I don't like using huge screen fur for style tiles because we're just going to be doing this now you can press ctrl R for your ruler I I usually do 32 let's do 20 right now because we're using a base five increment or base five grid essentially alright 768 so it'd be 763 you know we're doing 20 right now would send 48 cool okay let's to do this up first off press T let's do our h1 or our main heading heading 1 let's let's for the fonts batos good for generic open sans is good too and I have some palettes I like using I never use strict black or strict white often use though shades of grey because in the real world you never see everything pure black or pure why even a sheet of paper way light reflects on it in real life and you're never ever going to get a pure white unless you're shining a light through the back of it so for for the heading we want it to be more prominent didn't the other headings I just do with hex of two one two one two one we have that typically 48 would be good but since we're doing base of 550 is not that actually let's yeah we're at a hundred percent bag mmm fifty is not bad line height let's do let's try sixty try this is it yeah that's not good let's do 60 actually 65 my work 65 is good yeah 65 is good I like it and we're all set so let's some rationale should be oughta and lined right okay so we're we're doing h1 because that's the CSS name for it or HTML name for it so make sense especially when you're not working on this project all by yourself it's always good to name things the way the patient will be named in HTML because that's the next step from from the design aspect that's good let some Satoru ler right here and let's move down 20 oops yeah cool now let's make another one or h2 so since this was 50 let's do 40 and 195 that's not bad and auto hand did it a h2 now notice um since this is already chosen a style so it's already connected to a style notice what happens when I press h1 she becomes bigger and if I change anything here it's going to reflect let's do 55 see how it reflects everything that has the style of h1 kind of like CSS vehicle right so let's uh move back to h2 do a little thing maybe now h3 I I would speed this up but people the few people I've had so far that have messaged me about these videos have asked me to really talk through my design process so that's what I will be doing since this was 40 let's do 30/30 is a bit small 35 and I have an idea for this okay 525 is good h3 instead of the blacker one let's do a little more of a gray gray is good oh and now let's make this bold the h1 that's nice and bold let's make this semi bold it's good let's make this mi bold as good as well okay now let's do h4 I think we should stop at h4 and then work on our paragraph text this was what 35 let's do 30 actually now let's do 25 and 35 for the header Auto bitter dude we won't make it on the lighter color that this was this will probably just be semi bold and h4 cool now we can work on huh do you on my nose off that's weird so 300 now we can work on our paragraph body text which is super fun now I installed a plug-in called hipster fill so you can you can even do this ctrl T and you can find these plugins is googling sketch plugins now one one is good enough now we definitely don't want that let's do a 15 15 is a great size for body text and let's do 25 for the line height which is 25 go to let's do 30 30 is a bit much let's do 25 and regular is good let's see how it looks with the lighter color okay let's say oh I actually really really like this in fact that's how we can change this color now to this lighter color now it's um everything's good to go let's make this into textile let's call it body cool now we just need let's go back to our landing page what do we need headers okay we need them we need these call-to-action things which means super easy to make for a call-to-action actually before do that let's make these in your group called typography keeps everything nice and organized much unlike all this crap going on here let's do our styles for the text input so press R to do that thing all righty so for the fell let's do white so 250 is good um so essentially this is where people type in their email address looks a little too wide let's eat okay now um at some placeholder text to figure out our dimensions email at gmail.com just make this 15 and online high of 25 and whatever make this a little lighter and let's make this how is this 50 let's do okay no um no that's too much check let's check out our I'd like this to be seven hard flat so we can figure out our dimensions so let's do sine of five see how we like that except I've send them the seven oh five is good so we have that here set 37 35 is where we would want this to be at let's do two hundred for this section or 250 is not bad in case someone has a longer email address this oh that's odd 22 that okay let's get rid of the ruler so I want this to look like an input text input field so let's make this darker and let's add a little radius to it five is good and let's add some inner shadows the basic inner shadow hair is good it would not look good if we took at the border it's okay in this sense but look I like the border and that's a little move tells you where to put your mouse so you can enter all your crap let's look at it it's not bad very bootstrap you looking we can change a color slider right now right now let's just shared style input texts because that's what it is when it comes to HTML let's turn on our rulers again so 35 745 outlets 755 okay and now let's um let's out our big-ass submit box he'll work with this in a bit let's do the background for this like okay don't need for borders now I like using a nice shade of red loops not for borders it just tell you mm discs are so the way I come up with these colors is fairly easy you open up Chrome do flat UI colors calm and there it is I like using either of these if you want a better color palette a more extensive one go to flat UI color picker calm there it is go to red boom I think I'm using flamingo or cinnabar EF for ye 7f or yeah it's flamingo so um you have your get your text for this let's make this white 15 that's good actually it's like this a little bit bigger 20 and 25 to a but margin of 10 on the top and bottom and margin of 15 to 30 on left and right I says she it let's um she's centered up we don't need to march on the left and right it'll be too centered 300 300 is good and we'll just set her this bad boy up it if you really want to measure how to center it select your top thing first and then your background when you do with this and this there it is um let's let's make this say 30 would be a good thing and it's centered up now it looks much better okay we don't need this anymore let's add a little kind of shadow right here not an actual shadow like a flat design type shadow would sketch it it's it's a little difference not hard at all we do is shadows typically you in CSS this would be a a CSS thing it would be a border in CSS let's do this and to get the blur now you're left with this cool little border this is what nothing one is too little too is good five is a bit much let's do two check this out cool let's enter this up I like it so add a little disclaimer oops that let's do a text it doesn't need to be fifteen months to 14 to light and it's even smaller its 213 cool I like this didja - actually we could even a bit of shadow that's better like this okay now we can now make this into a symbol ideas great symbol and you do button CTA cool so now we have script this up let's call it call to action CTA what else do we need let's go back we need our little hmm oh we need um our footer links and our top leg so let's make a big-ass div a border but let's make the dark snowboard everybody let's make it dark that's good it's gone this one now links link singular I did a lots do we need now we we have most of it not any page is called it wire frame gonna make the landing page in a bit okay we're we're ready get we are ready to get started in the actual design process now unless I'm missing something which I am NOT mm-hmm yeah well I'm not really missing any crucial detail so we can we'll have a rough sketch later on pen and paper but the cool thing about design is it's an it's an evolution of your or of your original idea to what it's going to be in the future so let's do this landing page v1 ok artboard desktop strike this baby out cool let's get started um first thing is first let's do a 35 thing we're going to be making this thing now let's do the darker one right here for a for a for a these are global colors that I've I've been using for a while and they've worked well for me especially these grayscale colors I've been added too much like color to my designs so typically use use grayscale colors and I've actually done them from material design what you can do this material design palette and this is most of it right here is where I've found most of them 7-5 7-5 7-5 for for for a see let's try four four two four two four to see how that works hmm here we go cool you just find any color for my stuff four two four two four two is good now let's uh let's do a quick old thing here call it sketch to sketch make this knob link Auto now if you want to zoom in specifically to what your clicked on press command - there you go now that's a little bit too much let's do five is good let's try ten well ten is good I like someone right and this is 2010 to be and four teeth and we have our first section of the site let's call this header how cool is that now let's let's try the main headline or the actually the main call-to-action area right here which is this stuff right here now I haven't really gotten all the way into the copywriting part of this but I do have some rough copy I'd like to try out copy is another word an industry word for the verbage on the site it's very important when you're when you're looking to UM get conversions let's do it something like that let's do h1 remember it's shift down so 1 2 3 4 5 6 you know let's go back up and let's try one too it's a good area for this stuff the only thing I I wish sketched a different is as you're adding elements it should go below the existing elements like when I added this they went above the header and that's not how I see my files are like to organize my file so that's one thing I wish they did different so we have a 60 in our 60 pixel margin here since I'd this so I can I sure easier now I don't want a 60 pixel margin between this and the subheading so let me do 15 half of that and that's too ch3 here look to pick okay I like this more actually let's do h4 it's for is good um let's try 600 now let's try 500 let's try 450 450 is awesome so it's cool it's also like an arrow type kind of guiding your highs down like that and let's go back here it is here's where ends 15 and then so add 30 to kind of close this area of off see how see how what I meant about it adding it to the bottom snip it down you can do all this moving at the end but find it's easier to to really keep it organized as you go below that let's check out our wireframe I'm actually looking at the paper right next to me but yeah video and some title so video we don't really have anything to to put in here as far as images or assets go so let's just do this it did that word off canvassing because I haven't selected which page or artboard in this case I wanted to move work with so as you can see in the wireframe it's half and half to layout let's go here so six is half of 12 let's do this and 1 2 3 4 5 6 that's good let's add something underneath here and let's do h4 once again and we're up top flush to it let's see if that looks good actually we might need an h5 actually let's go back nothing 5h4 was H forwards 25 so let's make this 20 and 34 that let's do toppled it's just weird color but super easy 350 this up cool beans oh let's um let's not this house so I made this smaller needle that black area we made this each five into its own thing right here so we could just go back so we can use it for the landing page the area underneath this stuff it's a little bit smaller I like this now for 60 let's not do for six minutes do this okay so bad let's shift it down now let's not shift it down that much let's do John five okay cool so now we're going to work on this area which is a quick little this is what we do or this is what you get and then three different benefits via bullet points so not wrecking a little keep pressing rectangle text each force perfect for this one let's figure out and this is what to see our vistas can be good for it's going to good for designers who have maybe a lot of work on their hands and won't want the overall design they have in mind but they don't want to have to like go through all the crap of designing the website like we are right now and they simply don't have the two hours two hours per page that it might take so they might want to form it up to me or designers well developers are always looking for great designs I wish I could do back in development of any kind I'm envious of people who can but they might not make the best designs themselves and that might not get them to communicate whatever did it whatever it is that they're kind of make or sell or whatever or even if they have a portfolio site that they want to show to potential clients or employers while their programs might be awesome there the portfolio site might be ugly and it's going to make any prospective boss employer or client just leave the site and also it this might be great for UX designers are actually project managers that have an idea in mind that they want to have their team do but they don't have the budget maybe for full and design development team they can kind of get this quick little mock-up and send off to developers okay of course I don't want it this big let's do now let's do body cool I like that beautifully I learn how to spell this from Bruce Almighty project managers bold and bold little quick little thing here so what we're going to do is now I get to press my rectangle button hand this is the input field and let's go back to styles let's go to just make this a style place holder so that's a 25 pixel high font or text let's go back so I want a 10 10 pixel padding so 25 35 45 hi we're looking for its to boom see how cool that is actually we can and then we do insert symbol here how cool is that do it quick this is very horrible copy you never say get your free guide now like what the hell am I getting in this guide you want to be specific but in this case I don't have my copy ready quite just yet so you have to make do if your guide cool I am liking this when did this end mmm boom okay that's where I want it but when you are doing copy you want to have some sort of immediate action today yeah okay cool let's just okay let's see it it's not bad perhaps um we we could make this smaller I have an idea what to do 400 350 is not bad and this is what I want to do can i envelop this into its own little let me show you a quick read it it for a nice blue actually no let's go back to flat let's go to blue want a little nice little light blue hummingbird that's nice let's try that that's not bad at all let's actually add this to my route how cool is that I'm actually kind of second-guessing this for 8465 I am liking this okay um actually I wish we could make there are some things lighter than that slightest 1/2 1/2 Oh yep that's the last 1/2 perhaps we can now it's looking better where it is this ending that's a weird place for it to be um that's better sound 15 - that should be 35 40 50 now let's have 32 that so be 65 Alex much better again the shortcut for layout is ctrl L and for rulers it's control our side nice border-radius to this I'm really not liking how dark it this blue is because it's decreasing the contrast right there cool thing with sketches it helps you show you the RGB or HSB like HSB students m97 let's do ninety-eight or even 99 so 100 looks like 100 side okay I'm liking those too so had this super light blue ha cool sweet um let's put this into a group called smooth it down just one tiny bit give this stuff some breathing room again design as as much of that white space as it's not fact that's fifteen or and now I'm liking it perhaps I'll be better if we had okay so this is what people will see on digital I want to add some sort of arrow here just go to symbol shape now it's time to rotate this 180 let's do 200 huh let's see sighs your sketch kind of are your sketches into better to see if we can make this darker blue perhaps or perhaps red all right darker blue definitely sleeve that for now that's we're definitely to revisit this because right now it looks kind of weird without this there's nothing really guiding that the visitor to this section all this information is relevant actually I might even add an arrow pointing this way let's do that it's to shape arrow and cool there's been weird will find enough speech in a bit let's move on to this area go to wireframe this nice little area this will be easy here again so where's all this stuff this is I always say what is this what should we call this group of things called bullets call this video now sample video now the flood part I like making different sections this can be a very simple easy task boom there it is let's call this video background what we're going to do is have another thing choose fit big Meech 3-series good on 230 is good let's add our huge youtube the skin 90% going to be a YouTube embedded link or list Wistia embedded link its to 700 Shema 600 600 is good and let's make it 350 high and yes and check out our thing who did it I do this is a little weird glitch always happens I'm trying to snap to something it like it repels like oil and water sometimes it's weird but then again sketch has only been around a year or two just under third version sure there can be really really improving things soon but even from the get-go this brought this software is miles ahead of Photoshop when it comes to designing apps or websites and because it was designed for this that kind of thing I did it this is where my command you to kind of do something like our board triangle rotate this 180 and tell this what cool so it's essentially guiding your eye throughout the journey all right let's make this 200 see how you're kind of it flows just like this arrow shape right here I want I'll probably even add some stuff here pointing upwards and then when watching this your dotted downwards not a huge subliminal trick it's just literally like visually guiding you down um next up look at the wireframe oh this is cool oh you pause this I'll be right back okay I am back let's uh where were we okay yeah so now we're hitting something for right here so the really huge at at the end of the page type of what is available okay so I'm back and where were we okay so we have made our heading subheading main optin area we've made um we've made this kind of video explainer thing if people want to find out more and then had this little subtle arrow pointing down towards what we'll make here is the really big call-to-action actually now we're going to make this um testimonial section let's go back to here let's organise this a bit cool alright now we can jump on to to h4 so we're with end so let's add 30 that 30 is good I guess h4 is a little small h3 oops okay let's look at that yeah I like it right now we can focus on doing some cool things okay press o for oval I guess 303 on it so I'm like in okay let's just do this for now make sure aspect ratios right let's do 200 middle cool just good you know to 150 go that's better so it's going to be little them showcases of our little headshots of all the people and some text and let's do paragraph body culty boom I need a full pair like this is about how long a good testimonial is so let's do none weird and so let's take 15 away from both ends 270 and then M so what does that shift this down shift this down like that so far 115 more so ute then you want quick little ditty that can be h5 oops you don't do that strike this town 246 oh okay 45 then you want 60 okay cool so it looks like now all right let's see this looks better with okay I like that better let's get back to our 16 let's do 45 it's fifteen then two five two five and three forty go after this let's do another thing of thirty so be 50 so you want 30 gone to be too so DM good okay and now let's scrape all this together Colette testimonial we all to click this boom and now we can do this goes up so we can make this now add a little bit of border radius 5 s good C 10 five is good so yeah there's a super Ridgid theory that I use for any site just kind of go to the flow see what looks right um you can practice theory of this TEDx all you want but at the end it's what feels good for your project and what works and I might do a whole video on style guides later on for more intensive like 20 30 page websites that need it but for like a simple scrolling page website or 2/3 page website you don't really need something like that what does we need okay now we can move on to actually that's good please first cool need any of these anymore just five let's do 95 okay took a little Porter again our background actually let's make this blue oh no okay so now we need is something that says and what bilham and well to be very simple let's go back to our styles and this is what I want to use let's add a placeholder or plot light let's go back call it light - seven - cool let's go back and can actually move all this off of it it sounds a little triangle now I did it some pad see why it looks like oh it's it's looking like an envelope now - it's kind of cool stood 3:30 that's kind of cool too actually what if we may hit this this could be this now we're starting to get something okay now you have all this and now we can figure out and now we just need to our footer it's going to be dark okay um what side do we add up to the top 40 okay and then this was 15 it's a 10 patting cool okay go to 95 love that actually let's make this good 700 come on sketch cool desk and be brought up and let's add 10 see let's do something like and a blink let's do another time it's also um okay 30 way it's too yeah don't really have other things to worry about here 34:14 and let's do sound but critics that's my web design company cool stick actually before we zoom out when you to trim this page perfect let's assume feel like we should something here start this footer let's add but and then we'll probably get an arrow thing that points down as if this weren't enough how did it hurt it out like so so now so like I'm looking good maybe take off this arrow I will probably do that in pit we have for now it looks really nice next up we'll just work on the mobile layout for this so I'm probably going to make it another video it's this videos been going on for about an hour so I'll just make separate this into another video and you watch that there Thanks

Channel: Adam Rasheed

Views: 75,744

Keywords: Landing Page, Sketch 3, How-to (Website Category), squeeze page, Marketing (Interest), internet marketing, Web Design, UI Design, Email Optin

Id: 2VkZFA9D8iM

Length: 90min 21sec (5421 seconds)

Published: Fri May 15 2015

Reddit Comments

[u/isevenx]

does sketch output that design in HTML? or do you have to code it yourself?

[u/specialvillain]

Can anyone explain why Photoshop is not recommended for layout/design? I understand that even while setting up your document to include proper sizes and guides you can't always replicate a .PSD perfectly but how is it bad for the purposes of presentation?