How To Design A Web Template In Sketch App

- - Tutorials

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!

Final Result:

Tutorial Final Result

Resources :

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”

screen_1

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.

screen_2

Slider :

Now let’s start creating the slider, first add a horizontal guideline at 800px the same way as we did in the step before.

screen_3

Press “R”(or Insert > Shape > Rectangle) to select the rectangle tool, then create a 1500x800px rectangular shape.

screen_4

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.

screen_5

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.

screen_6

After that go to “Insert > Image” and add an image of your choice to the artboard.

screen_7

Place the image layer right before the “img_holder” layer as you can see in the image below.

screen_8

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”.

screen_9

Select the “slider_img” and change the opacity to 12%.

screen_10

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.

screen_11

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.

screen_12

Let’s move to the slider navigation, go and add a new vertical guideline at 700px.

screen_13

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.

screen_14

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.

screen_15

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.

screen_16

Select the first item layer with the white rectangle layer and group them, rename the group to “Active Item”.

screen_17

Now go and select the three slider navigation items layers, press “cmd + G” to group them, then rename the group to “Slider Nav”.

screen_18

HEADER :

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.

screen_19

Select the text layer and press “cmd + G” to create a group, then rename it to “Header”, and place it before the “Slider” group.

screen_20

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%.

screen_21

Group the rectangle layer, rename the group to “Hamburger Icon” and place inside the “Header” group.

screen_22

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.

screen_23

Duplicate the rectangle two more times, and align vertically like the image below with a space of 5px between each element.

screen_24

Now that we have finished the header section, let’s create the expanded version of the header with the navigation menu items.

screen_25

First rename the “Header” group to “Header (normal)”, then duplicate it by pressing “cmd + D”, and rename the duplicated group to “Header (expanded)”.

screen_26

Hide the “Header (normal)” group by clicking the little eye icon.

screen_27

Select “Header (expanded)” group and move it by 100px from the top of the artboard.

screen_28

Now delete only the hamburger menu icon, and leave just the transparent red rectangle.

screen_29

Select the transparent red rectangle layer, change the fill color to white(#fff), and the opacity to 100%.

screen_30

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.

screen_31

Duplicate the rectangle and change the rotation to 135°.

screen_32

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.

screen_33

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.

screen_34

Rename the navigation menu layer to “Bg Nav”, group it and renam group to “Navigation”, place the “Navigation” group before the “Hamburger Icon” group.

screen_35

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.

screen_36

Using the alignment tools, make sure to align the menu vertically and horizontally with white background, like the image bellow.

screen_37

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

screen_39

Add an additional horizontal guideline at 940px.

screen_40

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.

screen_41

With the four icons still selected, hit “cmd + G” to group them and rename the group to “Features”

screen_42

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.

screen_43

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.

screen_44

Repeat the same process for the other 3 features.

screen_45

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.

screen_46

Follow the same process and add the titles to the rest of the features.

screen_47

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”

screen_48

Add a new horizontal guideline at 180px.

screen_49

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.

screen_50

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.

screen_51

Select the text and rounded rectangle layers, hit “cmd + G” to group them, then rename the group to “Find More Btn”.

screen_52

Here is a preview of what we have done till this stage, it’s looking good, isn’t it?

screen_53

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.

screen_54

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.

screen_55

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”.

screen_56

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).

screen_57

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.

screen_58

Go and add another new guideline at 1740px(150px below the subtitle).

screen_59

Now grab the rectangle tool(R), and draw a 230x300px rectangle and align it with the guidelines as the image below.

screen_60

Add an image to the artboard and make sure to place it before the rectangle we have created in the step before.

screen_61

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.

screen_62

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.

screen_63

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.

screen_64

Select the four project layers(mask, image, shadow and the title), group them by pressing “cmd + G”, and rename the group to P1.

screen_65

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.

screen_66

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.

screen_67

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.

screen_68

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.

screen_69

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.

screen_70

Now that we have finished the projects section, which come up very nice and elegant, let move on to the testimonials.

screen_71

Testimonials :

Add a new guideline at 2340px(150px below the projects section).

screen_72

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.

screen_73

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.

screen_74

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.

screen_75

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.

screen_76

With the quotes layer selected, press “tab + cmd + O” to convert the text to outlines.

screen_77

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.

screen_78

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.

screen_79

Now group the four testimonial groups(T1, T2, T3 and T4) and rename the group to “Testimonials”.

screen_80

Below is a preview of the testimonials section.
screen_81

Map :

Now let’s move on to the map section, go ahead and add a new guide line at 2878px(150px below the testimonials section).

screen_82

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.

screen_83

Add the map image on the top of the rectangle we created in the step before.

screen_84

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”.

screen_85

Footer :

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.

screen_86

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.

screen_87

With the same text settings add the copyright text and place it 30px below the links.

screen_88

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.

screen_89

Group the footer layers and rename the group to “Footer”.

screen_90

Go back and select the “Home Page” artboard, then change it’s height to 3638px.

screen_91

We are done!, we have finished the design of our website and it’s looking amazing and clean you should be proud of your self, to complete our journey we will convert this beauty to a beast, we will convert it to HTML5/CSS3, we will make use of javascript/jQuery to add interactivity and animations to the website, so stay tuned and subscribe to our newsletter to get notified when we release the tutorial, see you soon!

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.

  • It’s not bad

  • Great article! Thanks for your template design tutorial with Sketch, maybe i will try it in the future.

    • You’re welcome @ykcin:disqus and thank you for your comment.