How to Design High Converting Landing Pages in Sketch for Beginners

1. Intro: Hey everyone. Welcome to my first ever Skillshare class. I'm excited to be here with you. My name is Daniel [inaudible] , and I'm an independent user interface and user experience designer. Before designing, I studied International Business in Marketing. In this course, we will combine the best of both worlds and see how we can design modern, beautiful landing pages but you also have super-rich or business course. In this class, we will learn what are the most important elements of a high converting landing page and how we can use design to reach this business course. After a brief introduction I give focus through a project starting from the initial idea all the way to the execution. I will show you how and where to find the inspiration for landing pages, how to create your own color palette, how to choose the best available funds for your project, as well as the most practical sketch plans. Or the design process will be created within sketch, which is the industrial lighting design app for designing mobile and web applications. In this class, we will create, a complete landing page for both desktop and mobile views. At the end of this course, you will have the opportunity to create your own landing page design for your business or idea. I will be here to help you and give you feedback as well. This class is data for beginners and intermediate designers who would like to learn how to use sketch and also how to improve as a designer by connecting design and business course. I can't wait to see you in class and start designing together. 2. Elements of a successful landing page: Hey there, welcome to this class. First of all, thank you so much for joining this class. You are amazing. Before we jump straight into sketch and start designing our landing page, let me show you how I usually start each of my projects and also to key elements of a high converting landing page. My first question is, why would you like to create a landing page? You probably want to create a landing page because you already have a product or service which you would like to promote and you need a landing page to get more conversions. With a great landing page, you can increase the conversions of your product or service. In our case, it means that more people will download, buy your product or signing up for your service. The other more popular reason why you need the landing page is that you have a great idea that you would like to validate before building on top of it. You would like to see if people are interested enough in that idea. With a great landing page, you can quickly validate your idea and see if there is enough interest towards it, so you can find out if it's worth the money and time building and executing your idea. Now let's take a quick look at the key elements of a landing page. Let's start with the business goal. Before starting any projects, I always try to figure out what is the main business goal that I'd like to achieve with a landing page. Based on the business goal, you can create the conversion goal, which is the main purpose of the landing page. For example, if we are creating a landing page for an app, then the most important conversion goal can be that after users visited the landing page they also downloaded the app. In case of the app is not ready yet, good practice is to ask for their email addresses for marketing purposes and notify them when the application is finally launched. If possible, try to learn as much information about the potential users as you can, so you can tailor the landing page experience for their needs. Always remember that you are designing for the users, and not yourself or not for the state quarters or business owners. If it's done right, using social validation in the form of testimonials or short case studies, can greatly improve the credibility of your landing page. During the design process, I will show you how I use social validation in an effective way. After we established the fundamentals, we can focus on creating an enjoyable and memorable experience, which the users will remember. Let's take a quick look at the project that we will have to create. The project brief usually look like this one big block of text when I get it. For this class, I created a fictive fake company, called Showtrackr, who has service and application for tracking TV shows automatically. Here is the brief: Showtrackr just launched a new iOS and web application, and they would like to get more users to sign up for their awesome services. Their target group includes technology focused early adopters in the age range of 15-30 years old. The biggest advantage of their service is that they are using cutting edge technology, like machine learning, to automatically track and recommend TV shows. The current user base love their services and have a lot of great recommendations on Twitter. The landing page has to be simple and delightful, using the main brand colors as well as follow the latest design trends from Dribble. Let's try to group these information so we can work with that. First we have the business goal, which is to get more users using their platform. Based on the business goal, we also know the main conversion goal, which is to get users start to sign up process by giving their email addresses. Of all the users, we know that they are technologically focused early adopters in the age range of 15 to 30 years on. We also have a lot of great recommendations on Twitter, which we can use for social validation. Lastly, the landing page has to be simple and delightful, using the main brand colors as well as follow the latest design trends from Dribble. As you can see on the right side, we also have a couple of visuals, including the iPhone 10 lookup and also a screenshot of that web application, which we can use during our landing page design process. Now that we have a better understanding of the desired end result, let's create the first version of our wireframes. A lot of designers prefer to create the initial wireframes on paper. However, I'd like to do it inside sketch, but the key here is low fidelity. You don't want to worry about colors, fonts or anything detail-oriented. The main goal here is to figure out a great structure for the landing page. So I started with the navigation, which will be a fixed position navigation obvious visible during scrum. Within the navigation, I also placed a "call-to-action" button, which is really important because it's always visible, and the users can decide anytime that they would like to sign up for the service and use the "call-to-action" button. The hero section is key, creating effective landing page. This has to be visually engaging and beautiful and interesting for the users, so I also place the "call-to-action" button there. It's instantly visible after the page loads. We have an iPhone look up showcasing the application. Then we will have a feature section, with the three most important features of the product and service. Then we have an actual case section where we can demonstrate and showcase the application, and then we have also a couple of toggles to make the prototype more interactive, and basically it's not just a static mock-up, but it's a more complex visual. Then we will have to social proof and the testimonials within these rectangles if we have to quote and also a link to the Twitter profile of the person who recommended the service. We also have a call-to-action section at the bottom of the page with some simple messages and also a "call-to-action" button. This layout also gives us a frame of the landing page. If you pay attention, we have a call-to -action part at the end of the page and at the beginning of the page, and we have the main content which amplify the message of the landing page. Basically these are the points where we try to showcase the possibilities of the application and the service. Users can sign up for it at the bottom or at the top of the page, and also anytime because we have the navigation always visible. If you look at it side by side, you can see the end result that we were to create. You can also see how it relates to the initial wireframes. Before we jump into designing part, let's see how we can find amazing inspirations for our projects. 3. Finding inspirations: For finding high-quality inspirations, I usually go to dribble and I also follow a couple of people. But you can also check the most popular shots. You can also filter it for the past week, past month, past year, so you can get feeding of the latest trends. What I usually do is I search for the term landing page and see the project that has a tag or under description, they have the term landing page, and you can also see an old-term popular and also, the most recent works. This is also really useful for having a fear of the latest trends. What I usually do that if I found a designer category I like, I also like it. So that's the life function is used for in my case. If you visit my profile, you can also have a look at the likes that I gave to project. So you can see a collection of my favorite designs also for lending pages, and for applications. This is basically a curated list of designs that I recommend going into details and study them to get more inspiration. The other great site I recommend checking out is good lab that design. Here you can search for design for specific sections of your page. So you can have a complete page-view like here, but you can also search for only the navigation part, or maybe on the just a hero section, or donate an inspiration for the call to action parts. This is an awesome website to fear that these ads and only look for what's usually need. So if you just have an trap of it, with design into footer, then you can have an inspiration of amazing footers here. If there is something that you like, you can just click on it and see the complete website where that folder was found. So this is also a really great website. Other one is uijar.com. This is a similar website to the good web design. So you can filter it for websites, but you can also have some inspiration for applications and illustrations and branding. Basically, this is also a created website with amazing designs. Lastly, you have Apple apps, which is very similar to repo. Here you can also filter for web and see the most popular and trending designs for landing pages and complete websites. So I really recommend checking this one out as well. When you found a design that you like, try to market, or you can also download it if you want. So you can just download the image and always don't forget to check out the attachments. So you can have a look and feel of the complete design. If there is a design that you like, you can just simply drag and drop it and save it to your desktop or put it in the folder on your schedule command, and you can have a look at it anytime when you need an inspiration and get new ideas from these designs. 4. Basics of using Sketch: For creating the design, we really use an application called sketch, which is the best design tool for creating modern mobile applications and upside designs. If you already have sketches then you can open it now, and follow along. But if you don't have it installed, you can download a free trial anytime and give it a try. If you open sketch, we can just simply create a new document. This is the main interface of the sketch application. The most common tools that we use, can be found, here under the Insert menu item, and here you can insert an art board, or a shape like a rectangle, or a star, or just a line. First, we need to create an art board. Next to each item, you can see a letter there, which is a shortcut. So if I press A, it will just create an art board, and here you can, find different size of art board. So if we are designing for mobile, you can just have an art board for mobile application, or if I press A again or just go here, to art board. I can also select a responsive web, but I have presets for responsive web design. We will use a desktop HD. So it's already preset, and ready to use it. On the inspector panel on the right side, you can change the view of an art board, as well as the height of an art board. So since if you have a much longer web page design, we can just change it and, have a much longer art board, up and ready for our designs. The other function that we use during our design process, is the rectangle shape. There is a shortcut on the keyboard. If you press ''R'', you get access to the rectangle tool. So, if I'm at the art board, and just press ''R'', I can start drawing. When you create a rectangle, on the right side, you can set on the position. So, you can position it with numbers. You can also set the width and height values. It's also good to note that, these are, smart fields. So you can do also, calculations, in there. So, there are a lot of capabilities within these input fields, and you have to trust that answer, so you can rotate a shape, here. Also, you can set border radius as well. You can also change the field of the shape, as well as the border as well. So you can set the border, you can set the border width. So, basically you can fine tune the details. You can add shadows, that you will use also a lot. So, these are all the values that you will use frequently. Within the color spun up, the default is RGB, as I remember. But if you click on the small letters here, you can switch it to HSB, which is hue saturation and brightness. So you can set the hue, the hue value is basically this one. The color spectrum, you can set the saturation. Also you can set the brightness, of the color. So it's much easier to work with this color picker, right here. You can also set gradients as well, linear gradients or circular radians, and also image feel as well. So, we will use this panel a lot during our design process. On the left side, you can see the layer list. So if we have a couple of layers, that you can see all these layers, you can also group them, by pressing ''Comment'' and ''G'', and ''Shift Command G'' and group them. But you can have also an icon there, and here you can also customize the toolbar, as you need. So, these are all the layers, that we have on an art board. What's also really important, is that you can have multiple pages. So you can have basically multiple work spaces, within one sketch document. So for example, you can work on the application design, for the iPhone then, on this art board, and on this page, you can work on the web design on this page. So you can have multiple work spaces, with multiple art boards as well. Finally, my favorite function with the sketch, is the measure tool. So when you select a rectangle, and you press the ''Option key'', or the ''Alt key'' on your keyboard. You can see the exact measurements of the rating elements. So you can measure it to the art board, you can measure one element to another element. You can use these measurements to create picture perfect design. That's all. That is also really useful, if you have multiple objects, that you would like to align. Is that, there are some align tools, right here. So you can quickly, realign these items as you want. So you can distribute them evenly, or position them at the center of the art board, if you group them and press enter. So, we will also use that alert during our design process. 5. Installing plugins: One of the biggest advantage of using sketch, is the huge amount of external plugins that can make our work much easier and faster. In order to manage these plugins. There is an option for managed plugins. This is also available within the preferences. If you go for Sketch and preferences, you also get upon with the available plug-ins that you have already installed. Or if you want to have new ones, you can just click on the get plugins button and it will take you to Sketch website with a list of the most popular plug-ins. You can also search for something like the content generator, which is an awesome plugin. So I really recommend the checking of this content generator plugin which will be also used to incur our project. It is awesome for automatically generating user profile, images, or names, or any texts. This is a really helpful plugin. The other that we will use is the To Label button. It is making super easy to relabel a certain button that we designed. I will also show you this one in action. Also, we will use the Paddy which is really like the pattern label, but with much more functionality, so it's a network capable. In order to download and install a plugin, you can just hit that download the zip file and it will automatically download the plugin for you. I also downloaded it. When you have the plugin downloaded, you can just double click on the Sketch plugin file within the folder. It says that the plugin is completely installed, so successfully installed. You already have the plugin which is right here. If you would like to try it out, you can just create a simple button. Let's say that it is Button. We can group these two elements, then we have the Paddy activated. We can stratify the paddying so that top bottom and left right paddying. Select top and bottom. That would be 20 and left-hand type, set it to 40 and hit apply, and it's already applied. Every time when we rename a button say, New Button, it will be resized automatically. This is a really cool and convenient plugin, and it is really similar to the other button that I already mentioned. If you create another button, we can say that it is a New Button and position it the way we want so we can align to the center and group them. Now we can use this button plugin or just use the shortcut command G. We can just rename the button and all other styles will be applied. These plugins are really similar and you can use any of them that let you like more. The other useful plugin that we also discussed is the Content Generator. If I have a couple of your induce and some texts for the names, you can keep your client out. If you select this, you can see that we need the personal photos and let's say, female images. It will be automatically filled out, and it is also true for the names. So we need female names and it's already done. It makes it super easy to work with your data and with your images. 6. Creating color palette: Creating a nice and consistent color palette can be challenging at times, but let me show you a couple of tips and tricks that I use when I'm searching for the perfect colors. I have a couple of great websites opened that I usually use in search of the perfect colors, so one of them is uigradients.com, here you can see really nice gradients created by brands and other designers, and you can also see the exact values that they are using, and this resource is huge, basically you can find anything in here, the other one that I really enjoy using is the Color Wheel by Adobe, and here you can set different rules, so how it works is that first you specify main color, a brand color, and then based on different rules, it can offer you other colors for a company that make color, and the last one that I use is the Grabient, this is really similar to the UI gradients, but they have really different type of gradients, you can also fine tune these and add the extra color to it so it's more interactive and it's more editable. This is also great website to check out, and I'll jump into sketch, I always try to start with defining the main character, the accent color, or the planned color that we will use throughout the project, this is usually the color of the patterns and then the most important elements of the website, and usually try to search something around the blue or the purple shades of colors, so I'm basically just bringing out it's saturation and brightness and hue value, so it's really good to keep in mind that the color has to work great both on a bright surfaces as well as on the dark or black surfaces if we have a directory interface like a dark motive in the app, or just a dark background, so it is also good to keep in mind that it has to work in both cases, so yeah, here we can play around with different shades and colors to find the one that really matches with our brand, so for our project, I already got the value so, you can also copy it and use it, so this is the main color that we will use on our landing page, and we will also have a color for the text, some designers say that they don't recommend using full black for the text, sometimes I agree, but it's really depending on the case, best practice is to use a really dark blue which is almost black, but nowadays, LED displays are more common, for example on the iPhone 10, sometimes it can be useful to use a perfect black as a background of a section on the website for example, so you can decide. You can add a user perfect black for the text, or you can just use a really dark blue color, and this is also true for the white, so some designers say that it's okay to use a completely white for text, but it really depends also the background. If we have a perfectly black background and we would like to write on top of it, it's really recommended to not use full white color because it can be really bright and rather decrease the opposite, so use 90 or 80 percent of white in case of a black background. But for our project we can use a perfect black for the text and also white for the white text and elements, and what has to be a need is that if we have three gradients and this way we are brand gradients, so all of them p, a, b in the diagonal shape, and let's see, this is the first step of the gradient, that's added to here and then this is the second. Just position it. Perfect. We have the other one right here. In terms of gradients, I usually try to create and use two colors, they neighbors each other. In this case, the yellow and the orange are almost red and they are really close to each other on the color spectrum as well as you can see the purple and the blue, so these are also next to each other, and this way it is pretty sure that they will you look great next to each other. They are safe to use within a gradient without any troubles or any fear of mistakes. Now we have the main colors that we will use throughout the project, and what I recommend doing is that here you can save this colors as document colors. Later on, you can just quickly use it with one click, so we just save this color, so whenever we are designing and we need the specific color, we can just jump here and then click on it and it will be there instantly. I recommend saving these colors, maybe the black and white is unnecessary, but if you are using the direct blue or a different shade for the light colors, it's really convenient to put them here, and it is also working with the gradient so you can also save these gradients as document color, and we will be using those a lot during the project so, it's really recommended to put them here for it's next texts. When if we are designing a button, for example, we can just quickly go through the gradients and [inaudible] , we have the gradient right there. We have our colors setup and we can continue with the project. 7. Choosing fonts: Typography is the most important element of design because we want to make sure that the reading experience is as great as possible. People are always looking for reasons to stop reading. With the excellent typography, we can be sure that the users will read our messages and reading would be a pleasure for them. If you'd like to learn more about typography, I recommend you checking out two article. One of them is the Five-Minute Guide to Better Typography. This is a great summary of the key principles within typography. During our practice, we've really used these techniques and principles. But if you are interested in typography, I really recommend you to read this article and learn more about different weights of fonts and also line heights and line lengths. This is an excellent article for learning about typography. But we will use almost all of these techniques in practice within the next chapter or video. The other article is a practical typography that come, is typography in 10 minutes. It's also a great summary of the most important typographic principles. For fonts, I usually use Typekit, which is a paid service by Adobe. I really like this service and it's really affordable and they are providing a lot of high quality on premium fonts. But for our project, we will use a free font, because it's available for anyone and you can easily just download it. We will use the font called Source Sans Pro. Basically, in order to download it, you can just select this font. Then here you have a download button and you can download it to your computer. Once you download it, you can just open the folder and you now order font files that you need. Just open the phone book application on your Mac and simply just drag and drop your fonts in there. If I do that, it will get an error message because I already have them installed. But that's the complete process of installing a font on your computer. So it's really easy. After you installed the font, you can just go into your document and then you start typing. You have the option to select the font that we just installed. So you have all the evades, the semi Boyd, Boyd black, regular. You have all the different versions of the font. So we are set up and we can continue with designing the landing page. 8. Designing the landing page: Finally, now we can start designing our landing page. This is the design process. First of all, we will need an Artboard, we can just press A on the keyboard or just select Artboard, and then select the "Desktop HD". Since the landing page will be a relatively long page, then change the height to around 7,000 pixels in height. Later on, we can always change this value if it's not enough, so we can anytime increase it to 10,000 or 8,000, it doesn't matter because it's changeable anytime. Let's start with designing the navigation first. For navigation we will need the rectangle, which is positioned exactly at the corner, and the width is 100 percent, so it's a full width, and the height is 50 pixels. As for the background-color calls, it should be a white one with a 97 percent of opacity, so when the user via scroll, then it will be able developed later on, then the content, it can be visible on just a little bit, and also we can add a background blur of authentic cells as well. In order to have a little bit of separation under it, it's good practice to add the shadow, which is just one pixel down. The breweries is zero and the opacity is 10 percent black. We can add the company logo or brand logo, which is a really simple one. Short tracker. We should be 18 pixels, also bold. In order to have a bit more separation, the last word should be the brand color like this. In terms of positioning, the content of the website will be 1100 pixels width. This is, the box within we will layout, the content. If you want, you can turn in rulers and you can use guides here as well. You can simply just create, by double-clicking, create two lines right there and you can keep them as a reference. But I usually just say that it's 170 pixels from the left and also from the right so it is pretty easy and we don't need a more complex system at the moment. If you have one other project assets ready, so you have the content here. This is the brand name. He are navigation items. We can just create these as well. Should be a 14 pixels in font size and the regular, the first we have the features, then we have the community, and the get started, then place them 60 pixels apart from each other. If you group them, position them in the center and study. Now we need another one of these for the login, which can be a bold one and also we need a get start button. For the button I recommend using four pixels, border radius. And also use the brand color as the background. Change the color to white. In terms of shadow, I recommend using a color of the button color that just modified the brightness so that the bit downsides so it's darker color around it and just decrease the opposite it to 10 or 20. Also change the text here to semi bold, instead of bold and just position it in the center like this, and also this one right there. Sometimes it's also good to believe in our eyes and not just the numbers. Because of the shadow and the visual balance that it may be that obvious, the best tool to put the exactly by numbers in the center, but also trust your eyes in the process. You can just upload, check everything, and it's perfect. Now we have the title, the title and the main title is this one so we have regular shovels automatically. It should be a 70 pixel in font size and black and also, like this, and the line height is 72 and we also raise it like this and then we have the regular description text, which we have this one. Also it's a nice idea to use emojis because it's really popular nowadays and it can look your product or service steady up to date and modern so it's just a nice touch of using this one and the font size here is 21. Also for the line height, I usually multiply it by 1.5, 1.6 so it should be around 7-1 in general so that's okay for the line-height. Yes, something like this. Put it into pixels, that makes it perfect. Now we can create the go to action section of the page and in our case, it won't be just a button. It will be an input field for the e-mail address because if under users to give that e-mail addresses. Here we can create a rectangle which is 450 pixels in width and 23 pixels in height and also the radius should be four pixels. The background color to be white. However, in order to make this visible, if you apply shadows. One shadow would be one pixel down and two pixel blur and black with 5 percent opacity. If you'll add additional shadow, with different values, but the opposite will be 5 as well. Now it's much more visible but they can still improve this by applying a border which will just into thickness will be just a half and the border color can be the black with 10 percent opacity or just 5 percent opacity. So it's really up to us what we prefer for our project, we will prefer the 5 percent version. Then we can create a button, which is 140 and so you put the brand color. What we can do here is position like this one. If we group these two elements together, and click on the larger rectangle at the bottom, we can use it as a mask. As you see, we have the boarder radius right there so it's perfect this way. We can have the 16 pixels text saying that. Start tracking, because start tracking your TV shows. It's also a good idea to use specific texts in terms of go to action buttons, that's just genetic tests. Instead of using just the guest dotted or join or sign up, and it's also good to try different phrasing like start trekking because it's more connected to the functions of the app or the service that this company provides. You can also see the positioning here. Now we need to have the input field title, so saying it's email, and we can also use the brand color in this case. Then we can have just the base auto text, like your@email.com. Just giving the user some idea of the input that we need from them. We can just use that 30 percent opacity. Just like that. We just position it like this one. Always keep a variety layers so that everything is within one group here, because of the masking, it should be 30 pixels below the description text. If you have partners, it's a great idea to put them on the landing page. Right at the beginning. The users can see that you are working with big brands and partners. We have these logos. We can scan them, so the height is 30 pixels. Netflix can have 25. If you are making something. All caps, it's a good idea to increase the character and the spacing between the characters, and also decrease the font size as well. Like this. We have the nobles, and set that opacity 30 percent and just distribute them evenly. Great, and position them like this. Awesome. Now, to make this hero section visually more interesting, let's create a couple of rectangles and use the brand gradients that we already created during the color chapter in the color video. We can have one beaker square with the 60 or 40 percent of Puerto radius. We can also use this smooth corners feature by my sketch. It makes the corners more rounded basically. We can select one of the prime gradients and also decrease the opacity to 90 percent at the background blur of 10 pixels. Also use a shadow of eight and 16 pixels, and set it to 20 or just 15, like this, and create another one in the purple brand color. You see that they are on top of each other and the opacity and also the background blurred it creating an interesting effect. Now we just have to rotate them. So let's rotate this, 65 percent on degrees and this one in 45 degrees and try to just align them or maybe it's a good idea to first align them and then rotate them. These are perfectly aligned this way and we can just rotate them now. It's a perfect, yes, let me just group them. It's important that we have the navigation bar. We just glue them together and place it at the top. You can also rename that group if you want. Perfect and we need another rectangle, which would be 300. We will use the blue gradient and still apply the same opacity and background blur, also the shadow. Rotate it in 45 degrees and place it right here. Now we can get the iPhone 10 mockup finally, and use it. It is 310 pixels width. Also add some shadow, like 20 pixels down, and 30 pixels of blur, and 10 percent of opacity, just like that. Now you can play around with the positioning until you find that the perfect position that you are comfortable with. Something like this one, great. Well, if you'd like to see what's visible exactly when the page loads. What is above the font, below the font. We can just select the add board and modify the height to 900 pixels. This is the default resolution of Retina MacBook Pro. It's 1440 by 900. This is virtually visible without squatting on the landing page. If you just stop here and I think for a second, you can see that the visitor of your Instagram that what is the main selling point or the main feature of this application, how the application looks like. They also get a little bit of explanation. They can immediately signing up and start using. If they y are allowed to have an account they can login. They can also sign up and they can also give their email addresses, and they also see that there are really great brands in connection with this service. They can automatically start tracking their TV shows with Netflix, or with an analogy, home network systems or basically just the normal devices. Basically every necessary information is right here for the user to decide if they would like to sign up instantly. But in case they are not ready to continue with the sign up process, we can give them more information about this app and service. We can just continue with the additional texts. We have the features section coming up. Let's see. We have the features, and they also have this one for the content. It might be faster to just, it was this one, quickly grab the content for the site like this. Now we can set it too light and 80 percent of opacity to make it a little bit less meaningful and can have this one in black and also have this one. Okay. Now we just have to decrease the line height here, like this. It's just like in case of the main title. Now let's create the three most important features of the app and service. Let's create a rectangle with a 300 pixels width. This will be our guide. It won't be visible in the empty slot. We'll just use it as a guide. You just position them. Now we can paste the content inside it. We have the automated tracking, which will be just one. The font size should be 18 pixels. Then we have a description like this. This is only 16 pixels and the right hand is 24. Here also the width can be 300 pixels like this and maybe a half Learn more button and link. In the brand color, and also with the small icon, sharpen like. In order to create that one, we need to have a six by six square and remove to fill at the borders, and also set the thickness to two. Now just hit Enter, it will open this shape and you have the scissors, and you can just remove two of those. Now I just have to rotate it like that, and just position it. You can now just group and place it in the middle. Perfect. Now we have to create a small icon, it's a 50 by 50 rectangle. We can use one of our brand gradients again. About 14 pixels of border radius with smooth corner and also apply some shadow like in case of the Call-to-Action button in the navigation. We can just grab a color and set it to 20 in the opacity, or actually just 15, and then we can place the Play button in it. If we go to Icons, Features and the Play, but we can position it. Keep in mind that positioning the Play button can be a little bit tricky, so don't trust the numbers try to trust your eye. Around that. Just group them and place them in the middle. Great. Now we just have to repeat these steps. Now let's create an interactive separation between the two features section. Maybe I just use the TV show posters. Let's create a rectangle with a width of 220 pixels and the height of 330 pixels. Maybe I use border radius of six pixels, and maybe I position them 30 pixels between each of them like this. Set shadow with 0, 10, 20 and 10 percent for opacity, and maybe I need seven of these, so one more like this. Now we can group them together, placed in the middle and position it like this. Now we can change the fill of these two image and just start using the images so we have in the TV show posters. We have the images that we need. You can just simply drag and drop there and it's done. Let me know which one of these is your favorite or is there any new TV shows here that you haven't watched yet, or if you watched them, which was your favorite one. I'm just curious. Let's see House of Cards right here in the middle and The Flash, and the last one. Perfect. All right. We have an interactive phase and visually interesting separation between the different sections. Now we can focus on creating the actual case section. Now create the showcase section of the applications, so let's create a subtitle here. Grab the content, grab the other one, perfect. Set the width to 460 and align it to the left. This one as well, set it to bold and the font size is 46 with the line height of 50. The line height should be around 28, and also decrease the opposite, so it gets less attention. That one is better between the elements. Position it like this. We have to create these interruptive Tagore's. If we use the different shadows technique again. This is the first shadow, and we have a second one as well, like this. Let's set the width to 340 and the height to 54, and set the text. Now we can grab the icons. So within the icons you have a folder for the actual case, and within that you have the dashboard. Just place it inside it and position it. Perfect. Now just copy these and get the content for the other buttons. Perfect. Just grab the icons. Great. Now let's use the screenshots that we have. So first start with the application screenshot. Let's just create a rectangle with the width of 820 and the height of 511. This will be the mask that we will use. Just place it below the separator. Now if we grab the screenshot, so we have the web app mock-up. Just place it in here. The width can be 820 as well. Try to position like this just above the rectangle that we created. Now you can just group them and use the rectangle as the basis of the mask. Now you can set the border radius to six and also apply the shadow, which will be 0820, and the opposite will be a bit 10. Now you see that we have rounded corners, and we also have the shadow. Perfect. Now we can also add the iPhone mock-up here as well. So set the width to 65 and also add shadow. Great. Now we just position it around here. Awesome. So this way there is preview to that application as well. You can see the Eiffel mock-up in full as well. Then the user clicks through these different modes. The content within this can change according to selected Tagore here. Now we can create the testimony as a section. Let's just create the big rectangle which will be the basis of this section and just set the background to black. Place it 140 below the previous section. Now we can place the content in here, and just copy paste those and change the color to white. We will also need this small subtitle right here. Say that it's community. And we have the content. Awesome. Just change the position a little bit so we have a much more active space around this element. Just create the button, which we have the print color and also Read more as text on it. Yeah, exactly. Set the font Weight to semi-bold. Also, central line it. Just find you on the details. Also, the font size should be 16. You can also have the same shadow just like here. That we use this color for shadow. Now, let's create the cards for the testimonials. Just create a rectangle with a width of 260 by 210 and set the porter radius to 10 pixels and you can also use this most corners feature. Set the background color to white and decrease the opposite it to eight. Then let's create a circle for the profile image and then also a text layer. Make sure it's left aligned. It should be semi bold and two and a half pixel font size. Now, from the fruit rack, just grab the Twitter icon and you can just update the color and set the opposite it to 30 percent like this. Now, I can just grab one of these testimonials. Just place it in there. Update the line height and also decrease the opposite and make sure it is positioned perfectly. Now, we just need to add a date and set it, opposite it to 50 percent and just a regular one. The way this card works is that when the user clicks on it, it's feed will be directed to the actual tweet. Or you can use also Facebook or the actual Facebook post. This is really important because otherwise, if it's just the name and the opinion or just a quote here, most of the users are saying that it's a fake quote and they are saying that the business owner or the designer or developer just figured it out and it's just a fake opinion. But actually tying this one to an actual Tweet or Facebook message and linking them together. It is the best way to create testimonials because that way the user can validate for themselves that, "Okay, this is a real opinion." "It is a real quote and that is the original Facebook post or tweet to it." It's really important to do this way because this way gives much more credibility to our landing page. Now, we can just group everything together and create a second version with the other. You can use quotation marks or you can just use the text, it's up to you and just update the height. What if you have more examples for the course? You can use more examples as I have to. So you can customize this. Now, let's just select every second of the profile pictures and go to content generator personal photos and female and also use the text layers of this one. Also, go to content generator personal names and female. Just go for the mayor photos as well as the names. This is how you can quickly generate 3-D content into your design. So just names and perfect. Now, we can also prepare this together and just update the spacing a little bit. Perfect, now, we can decrease the height of this background and group everything together and use the background layer as a basis of the mask. Perfect. Now, we arrived at the last part of the landing page, which is not a call to action section. It is very easy because the [inaudible] are existing elements. Like this one, you can just place it right below the testimonial section like this and we can update the content here. It wasn't center aligned. So I just fix this one here as well. Perfect. Now, I just update the content in there and we can also use the existing [inaudible] gap that we created like this. Now, we can have some icons for the social profiles of the company. We can start with them on Twitter, then Facebook, and YouTube, and distribute them evenly. Okay, just group them, set the opposite it to 20 percent and align them in the middle. Now, we have the footer, which has been really simple. Just set it to semi bold and five pixels to center line it. Set it up to 30 percent and also put this closer. Great, and just have to reposition the height of the art board. Perfect. Now, we are ready with the next version of the landing page. Congratulations for completing the textbook version of this landing page. I hope that this was useful. Now, we can continue and focusing on the mobile version as well. Let's keep watching. 9. Designing for mobile: Let's create the mobile version of our landing page. First, we will need an output again and then for mobile I usually go with the iPhone 8 or the iPhone 10 sizes. But in our case, both sizes are identical because the width of the iPhone will be the same. Let's pick the iPhone 10 output and make it longer just like in case of the desktop version. Now we can use the same elements that we used during the desktop version and we can just reuse them again. We've modified settings. We have the navigation bar, it's full width and then we have the brand logo, just like that. Then if you have a look at the navigation, these links are encodings, so they are just scrolling to the different sections of the page, and I think that the [inaudible] use for unnecessary for the mobile version, what is really necessarily is to go to Action button. Instead of making this navigation bar crowded with a lot of different options, I just want to keep the essential and the most important button, which is the Get Started button, like this. Now, let's just copy and paste the other elements from the hero section. We have the title, subtitle and call to action part, and we just copy and paste them here. We will update the font sizes so as try to appear 42 pixels with 48 pixels of line-height, like that, and the width will be 343 pixels. This way, we have a 16 pixels of negative space both sides, and we will update the navigation accordingly as well. For this text we will have the font size of 18, and the width here will be the same. Also, don't forget to update the line height as well. We just need to update the call to action part, and we will also need the brand logos. We can scale it or we can also update the spacing view if you want. So maybe just scale it a little bit like this and update the spacing. Now we can just grab the visuals and make them 60 percent in scale. You can also copy the phone and update the width to 300 pixels. Now we can also continue with copying the features section. Font typo there. If you have a look at the text here, we can see that there is only one word on the last line. So in order to avoid that, maybe it's a good idea to update the font size, so that's one technique. But in case we change the text, then we will have to change the font size as well. You can tailor it to the content itself, but in a general rule I also like to keep these left aligned because if you have a look at the other sections and the other feature parts, it will make more sense and it will look more consistent. When we copy these, you can just have to align these elements as well. You can just repeat the same process with the other features as well. Here, you have an option to center align everything if you would like, or you can just left align everything. The only thing to keep in mind that to be consistent here. So if you decide that you want to center line this one then, you should do the same with the rest but if you would like to go with left align just like I did, be sure to left align everything here as well. We can also scale this entire line of TV shows. Maybe it's too big. I like this. You can also update the spacing to 16 or 15 pixels each side. Now we can continue with the showcase part. So just like before, we will just copy and paste the content and update the font size. This should be 32 pixels with a line height of 38 pixels. Also, set the width and center it. This one be at 16 pixels with a line height of 24 pixels. Also update the width and center it. Great. We can also copy these toggles. Great. Then, we can just copy the phone. Here, I only kept the iPhone mock-up since, when the visitor views this website on their phone, probably they would like to have a feeling of how the application will look like on their phone. They won't really be interested in the text replication at this moment. But you can also include that as well. In order to have a more simpler view and give it more context to the user. I recommend only using the iPhone 10 mock-up in case of a phone view. Now, we can have the community section, the testimonial section. Just like in case of the desktop version, the idea is creating the background and then copy the text. Also update the content as well. Copy the button as well. Now, we just have to copy the cards. In order to do that, we will use and nail the card in a different way. Instead of positioning them in a vertical way we will position them horizontally. So let's just have some area to play with here. Great. We can just put them side by side. We will update the height of each card so each card will have the same height. Great. We can just paste them in here. We won't need to rest for now. Great. Now we just update the spacing. Perfect. Finally, we just have to create the footer call-to-action part. In order to do that, first, just copy and paste these features block of text. We can center align everything and update the content. For the call-to-action part, we can just use the same email input field from the Hero section. We just have to copy the social icons and the footer text. Make sure that the opacity is 20 percent and update the distances. Make sure that you center align everything. You can just make this regular and only 11 pixels in case a font size. Great. We just need to update the height of this ad board. Amazing. The last touch that I usually do at this point is to group everything together in order to have a cleaner sketch file. So we can group these and you name that as navigation. Then, this is the "Hero". Name this Hero, and this here with features. This is the TV shows. Then we have the app showcase. testimonials. Finally, we have the footer call-to-action. We can just update and sort these as they appear within the document. First is navigation, then we have the Hero, and then the features, then TV shows and app showcase, testimonials and footer call-to-action. Amazing. Now we are ready with our design. It is ready to hand off to a developer. You can work on animating it and start developing it and make this a real website. Now you have the picture perfect design for the desktop version as well as for the mobile view. The developer can go from this document or you can take it further and make your landing page a prototype, or even a real website. 10. Class project: Hey there. Congratulations for almost completing this course. Now it's your turn. I would like you to create a landing page design, just like we did in the previous videos. If you already have a product or service, you can create a new landing page design in order to get more customers and increase conversions. In case you have a great idea for an awesome app or service, you can also design the landing page for it to measure people's interest. Or if you're a designer, and you would like to update your portfolio, you can redesign your homepage, or in case you have a newsletter, you can design the landing page in order to get more subscribers. Finally, if you'd just like to focus only on the visual parts, you can use the same project brief, like we did during this course, and create a new landing page for our short record, we're using the same text and images. Make sure to post your projects below, and I will be here and help you and give you feedback anytime. 11. Finishing: Congratulations, you've successfully completed this class. I hope it was helpful and you learned a couple of new techniques. I'm really looking forward to see your designs within the class projects, and if you need help, feel free to ask anytime. Please don't forget to leave a review if you enjoyed this class and share it with others as well. In case you would like to see my other projects, download my free design resources or read in-depth design articles. Be sure to check out my Triple Profile, and in case you would like to be notified about my newest projects, you can stay up to date on Twitter. Also let me know if you're interested in future classes, whether it is prototyping or front-end developing. Again, thank you so much for sticking around and I hope to see you next time. 12. Bonus: Dribbble workflow: Hey there, welcome in this bonus lesson. In this video, I will show you how I prepare my designs for a Dribbble. If you open our sketch file, I really create another page just for the Dribbble shot. Just copy paste design that I will include within this shot. For the Dribbble we will have a strict rule for uploading, which is so the width has to be 800 pixels and the height has to be 600 pixels. This will be image that you could upload on Dribbble. Here I just copy that design and update the height to 900 pixels, so only the Hero section and the Navigation is visible. Now I will convert this design into just a regular image. In order to do that, just check this background color just to have the background fill the tool to regular white and then you can just add it to a JPEG as the format. I just drag and drop this design and now I have the image right here. This will be included within this Dribbble shot. As a background, I will create a rectangle and I will set the color to white and just add one percent of saturation just a little bit. It's not completely light, it's usually have a tint of a blue or purple, just like it within our design, like this. Now, I set the width to 750 or display on between the numbers and suits possibly yes, the 720 and that I took the center. I'll just create another rectangle for the mask and center it. Now we can group these two together and does it as a mask and set the border radius to four or six, fix us, leave it always four at the moment. Now we can apply a shadow for this group and also make sure that for the shadow, we are also using a little bit of tinted dark blue with a blue shade to it. This will make the design more important and in line with the Dribbble trends lately. Just like this. Now, in case to make this shot a little bit more interesting, if you use the cards, just like we demand that we use during the design process and to add edit database of character too. We can just group these and skin to 60 percent and place them behind. I would just try to align it perfectly. Now just do the same with the other one as well. Now if you have a look at it, you can see that the browser itself or the website itself, it seems to be transparent in a weird way that you still see the navigation bar. But then the diagram that I meant is collapsed with the content as well. It making it really nice and interesting visual effect. That's literally in line with the clients on Dribbble nowadays. Yeah, basically this is one version of doing a shot or the other one that I should use is just place the rectangles in an interesting and the appealing way. Maybe just try to play with the positioning of them so the background is not just a boring white and it is rectangles you can make it more interesting and more appealing to your followers and maybe for others who are looking for inspiration. Now the only step that you have to do is to actually export this artwork, so in a 1x and PNG format, you can just easily export it to your next app just like that and now you can upload it to Dribbble. That's it. You have the Dribbble shots ready. Thanks again for joining me for this class and I hope you learned something and it was useful. I am really looking forward to your feedback and also for your reviews. Thank you so much and have a great day.