We are back again with new tutorial, in this tutorial i will teach you how to design a beautiful web template in Sketch app V3, we will divide this tutorial in two parts, in the first part i will show how to use sketch to design a beautiful web template, in the second part we will convert the sketch template to an HTML5/CSS3 template with awesome animations, so get ready and let’s get started!
Before we dive into the tutorial, we need to download a couple of assets that we will use along the way, the first asset are the fonts, for our tutorial we will need four beautiful fonts, the first one is a premium font called Againts(you can download a sample here), and the two other free fonts are Josefin Sans, Maven Pro and Pitch Display(you can buy the premium version here), the second asset are the icons we will be using the amazing business line icons created by our friends at icon8 exclusively for Pixelhint, you can download the pack for free here, and the last asset are the images all the images that will be using are by unsplash.
The Tutorial :
Let’s start first by setting up our artboard, press “A” and draw a 1500x3300px artboard then rename it to “Home Page”
We need to add some guidelines to the artboard, guidelines will help us to keep our layout organized, well-spaced and clean, for that press “ctrl + R”(or view > canvas > show rulers) to show the rulers, then add two vertical guidelines, add the first one at 200px and the second one at 1300px.
Now let’s start creating the slider, first add a horizontal guideline at 800px the same way as we did in the step before.
Press “R”(or Insert > Shape > Rectangle) to select the rectangle tool, then create a 1500x800px rectangular shape.
Rename the rectangle layer to something like “img_holder”, select the layer then press “ctrl + G” to create a group, rename the group to “Slider”, we will be using groups as a way to organize the layers.
Select the “img_holder” rectangle layer, then go to the “Fills”, and apply the “linear gradient” to the rectangle, set the top color to #FF512F and the bottom color to #DD2476.
After that go to “Insert > Image” and add an image of your choice to the artboard.
Place the image layer right before the “img_holder” layer as you can see in the image below.
Select the “img_holder” layer, then press “cltr + cmd + M” to create a mask for the slider image, and rename the image layer to “slider_img”.
Select the “slider_img” and change the opacity to 12%.
In this stage we need to add another guideline that we will use later for the header section, so go and add a vertical guideline at 100px.
Select the text tool by pressing “T”(or go to Insert > Text), set the typeface to “Againts”, color to white(#fff), the size to 80px and the alignment to center, center the caption horizontally with the artboard, add place it 345px from the top.
Let’s move to the slider navigation, go and add a new vertical guideline at 700px.
Select the text tool(T) set the typeface to “Maven pro” and the color to white, then add a navigation item and center it horizontally like you can see in the image below, for the first line i set the weight to bold, the size to 20px and uppercased it, for the second line i set the weight to regular, the text size to 16px and lowercased it.
Duplicate the navigation item two more times, change the text and align each item like the image below, with a space of 90px between each item.
Now let’s add the active state to the first item, go to the first navigation item and change the text color of the second line to #EA297F, then select the rectangle tool(R), set the fill color to white, draw a 120x25px rectangle, place it’s layer behind the navigation item text, and align it vertically and horizontally like the image below.
Select the first item layer with the white rectangle layer and group them, rename the group to “Active Item”.
Now go and select the three slider navigation items layers, press “cmd + G” to group them, then rename the group to “Slider Nav”.
It’s time to design the header section, select the text tool, set the typeface to “Josefin Sans”, the color to white(#fff) and the size to 30px, then write the name of the website, in my example i named it “Dali.”, make sure to align it vertically and horizontally with the header guidelines that we added previously.
Select the text layer and press “cmd + G” to create a group, then rename it to “Header”, and place it before the “Slider” group.
Now let’s create the hamburger icon for our expandable menu, for that grab the “Rectangle” tool by pressing “R”, and draw a 60x70px rectangle, place in the top and align it with right guideline, then set the fill color to #A22B1C and the opacity to 30%.
Group the rectangle layer, rename the group to “Hamburger Icon” and place inside the “Header” group.
Select the rectangle tool by pressing “R”, draw a white 23x2px rectangle, set the x position to 1258px and the y position to 48px, and place it inside the “Hamburger Icon” group.
Duplicate the rectangle two more times, and align vertically like the image below with a space of 5px between each element.
Now that we have finished the header section, let’s create the expanded version of the header with the navigation menu items.
First rename the “Header” group to “Header (normal)”, then duplicate it by pressing “cmd + D”, and rename the duplicated group to “Header (expanded)”.
Hide the “Header (normal)” group by clicking the little eye icon.
Select “Header (expanded)” group and move it by 100px from the top of the artboard.
Now delete only the hamburger menu icon, and leave just the transparent red rectangle.
Select the transparent red rectangle layer, change the fill color to white(#fff), and the opacity to 100%.
Pro tip : to select an element in the artboard, hold “cmd” then click on the element.
Let’s create the close menu icon, for that grab the rectangle tool(R), set the color to #C33D2B, draw a 30x2px rectangle, and rotate it by 45°, make sure to place it inside the “Hamburger icon” group.
Duplicate the rectangle and change the rotation to 135°.
Select the two rectangles and press “cmd + alt + U” to merge both of them, rename the layer to “Close Icon”, then center the icon horizontally with the white rectangle, and place at bottom of the white rectangle by 20px.
Time to create the navigation menu, let’s add the navigation background first, press “R” and set the fill color to white, then draw a 1500x100px rectangle and place it at the very top of the artboard.
Rename the navigation menu layer to “Bg Nav”, group it and renam group to “Navigation”, place the “Navigation” group before the “Hamburger Icon” group.
Now let’s add the navigation menu items, for that select the text tool(T), set the typeface to “Maven Pro”, the weight to medium, the color to #555555, the size to 16px, alignment to center, the character spacing to 0.85 and the line to 20, then add the menu items, and place them inside the “Navigation” group.
Using the alignment tools, make sure to align the menu vertically and horizontally with white background, like the image bellow.
Features Section :
Before we move on we need to add our grid, we need a four column grid, we will use some math to calculate the grid, and it’s not complicated to understand.
The operation is pretty simple, we need a 4 columns grid with a gutter of 60 pixels, to calculate the width of the columns, we need to add the gutter(which is 60px) to the layout width(which is 1100px), divide it by 4(number of columns) and subtract the gutter.
Columns width = ( (layout width + gutter) / number of columns ) – gutter
Columns width = ( (1100 + 60) / 4 ) – 60
Columns width = 230px
Add an additional horizontal guideline at 940px.
Go and add your icons, center and align them with the columns and guidelines that we have added in the two previous steps, select all the icons and set the fill to a vertical gradient, change the gradients top color to #DD2476 and the bottom color to #FF512F.
With the four icons still selected, hit “cmd + G” to group them and rename the group to “Features”
Now select the Line tool by pressing “L”, set the fill color to #353535, the thickness to 1, draw a 20px vertical separator line and place it 30px right below the icon.
Select the line that we just draw, go to Borders in the right panel and click the little settings icon, select the rounded end and set the Dash to 4px.
Repeat the same process for the other 3 features.
Select the text tool(T), set the typeface to “Maven Pro”, the weight to bold, the color to #5D5D5D and the size to 16px, add the feature title and align it with the rest of the elements, place the title 30px below the separator we added previously.
Follow the same process and add the titles to the rest of the features.
Now select the layers of the three elements(icon, separator and title) of each feature and group them(cmd + G), rename the groups to “F1”, “F2”, “F3” and “F4”
Add a new horizontal guideline at 180px.
Now let’s create a “find more” button to our features, select the Rounded tool by pressing “U”, set the radius to 40px, the fill color to #C81967 and draw a 200x40px rounded rectangle, align it with the guideline we have added in the step before, and center it horizontally with the artboard.
Hit “T” to select the text tool, set the typeface to “Maven Pro”, the weight to bold, the size to 14px and the color to white, then add the text the button.
Select the text and rounded rectangle layers, hit “cmd + G” to group them, then rename the group to “Find More Btn”.
Here is a preview of what we have done till this stage, it’s looking good, isn’t it?
Projects Section :
Next is the project section, first we need a couple of guidelines to our layout, go ahead and add two new horizontal guidelines, the first one at 1371px and the second one at 1521px.
We will add a background for the projects, to differentiate it from the other blocks around it, for that press “R” to select the rectangle tool, set the fill color to #F2F2F2, then draw a 1500x797px, make sure to align it with the guidelines.
Select the layer of the rectangle that we just added, and press “tab + cmd + L” to lock it, then group it(cmd + G) and rename the group to “Projects”.
Select the text tool(T), set the typeface to “Maven Pro”, the weight to Bold, the text color to #555555, the text size to 30px, and the alignment to center, then add a title to the section(“FROM THE PROJECTS” in my example).
With the the same text settings, change the text weight to Regular, the size to 16px, add a small subtitle, center it horizontally and place it 30px below the title.
Go and add another new guideline at 1740px(150px below the subtitle).
Now grab the rectangle tool(R), and draw a 230x300px rectangle and align it with the guidelines as the image below.
Add an image to the artboard and make sure to place it before the rectangle we have created in the step before.
Select the rectangle layer, then press “ctrl + cmd + M” to create a mask for the project image we have added previous step, as you can see in the image below.
We will add a nice light black shadow over the top of image to make our project title, that we will add later more visible and stylish, to do that select the rectangle tool(R), set the fill to a vertical gradient, change the gradient top color to black(#000000) with alpha value of 65%, and the bottom color also to black with the alpha value to 0% to make it transparent, and draw a 230x300px rectangle, make sure to place the shadows layer in before the image layer.
Select the text tool, set the typeface to “Maven Pro”, the weight to bold, the color to white, the font size to 20px, the alignment to left and the line height to 23px, then add the project title and place it at the top left by 30px.
Select the four project layers(mask, image, shadow and the title), group them by pressing “cmd + G”, and rename the group to P1.
Duplicate the P1 group three more time, and align them with guides like the image below, change the images and the titles and rename the groups to P2, P3, P4.
Let’s add the hover state to the first project item, inside the P1 group add a white 73x20px rectangle(R), place it 10px below the title and align it vertically.
Select the text tool, set the typeface to “Maven Pro”, the size to 14px, the color to #555555, the alignment to left and the line height to 17px, add a small project subtitle, place it inside the white rectangle that we have added in the step before and center vertically and horizontally with the rectangle.
Select the project shadow layer, go to the fill gradient and change the alpha value from 65% to 100% to make the shadow more stronger.
Now select the light gray background rectangle layer that we have added in the first step, and change the height of the rectangle to 819px.
Now that we have finished the projects section, which come up very nice and elegant, let move on to the testimonials.
Add a new guideline at 2340px(150px below the projects section).
Let’s add a circle mask for the testimonials author image, for that press “O” to select Oval tool, draw a 80x80px, and align it to the left with guideline that we have added previously.
Select the circle layer, go to the fill, select the “Pattern Fill” option, choose the testimonial author image then set it to “Fill” instead of Tile, you can download the testimonials images i’am using here.
Press “T” to select the text tool, set the typeface to “Maven Pro”, the weight to Bold, the color to #5F5F5F, the Alignment to left, write the name of the testimonial author and his/her company, change the author’s company name weight to Regular, align it with the top of the author image and push it to the right of the author picture by 40px.
Select again the text tool, set the typeface to “Pitch Display”, the text weight to Regular, the color to #F4F4F4, the font size to 190px, and add the opening quotes(“), place them 20px under the testimonial author name.
With the quotes layer selected, press “tab + cmd + O” to convert the text to outlines.
Next we will add the testimonial text, select the text tool, set the typeface to regular “Maven Pro”, change the color to #7F7F7F, set the size to 16px, the alignment to left, add the testimonial paragraph and change it’s width to 380px, put it below the quotes and push it by 10px from the top and the left of the quotes as the image below.
Group all the testimonial layers and rename the group to “T1”, Duplicate the “T1” group three more times, rename the duplicated groups to “T2”, “T3”, “T4”, then align them like the image below, make sure to keep a space of 60px between the top and the bottom elements.
Now group the four testimonial groups(T1, T2, T3 and T4) and rename the group to “Testimonials”.
Below is a preview of the testimonials section.
Now let’s move on to the map section, go ahead and add a new guide line at 2878px(150px below the testimonials section).
Select the rectangle tool and draw a 1500x500px rectangle(we will use this rectangle to mask the map image), align the rectangle with the guideline that we have just added, and press “cmd + tab + L” to lock the layer.
Add the map image on the top of the rectangle we created in the step before.
Now select the rectangle layer and press “ctrl + cmd + M” to create a mask for the google map image, group the two layers then rename the group to “Map”.
Last but not least the footer section, the footer is pretty basic with just need to display a minimum of information that will be useful for the visitors.
First we will start by adding a background for the footer, for that select the rectangle tool(R), change the fill color to #3D3D3D, draw a 1500x260px rectangle and place it right below the map.
Press “T” to select the text tool, set the typeface to “Maven Pro”, the weight to regular, the color to #E5E5E5, the font size to 16px, add the links, and place them 100px from the top of the footer.
With the same text settings add the copyright text and place it 30px below the links.
Next we will add the social media icons, select the text tool(T) again, select the “Socialico” typeface(download the socialico font here), change the text color to #E5E5E5, set the text size to 26px, the Alignment to right then add the social media icon, in my example i’am using facebook(F), twitter(L), google+(G) and the vimeo(V) icons, place the icons 100px from the top of the footer.
Group the footer layers and rename the group to “Footer”.
Go back and select the “Home Page” artboard, then change it’s height to 3638px.
Update : the second part of this tutorial is available now, you can now learn how to convert this sketch template into a responsive Bootstrap 4 template
Get Free Update !
Join our mailing list today and receive exclusive web design tutorials and high quality free web resources.