Sketch App Tutorial Series: Part 3 of 5.

If you’re just getting started with designing for the web, a newbie to Sketch app, a Photoshop (or similar) user not quite ready to make the jump, or a developer looking to throw UI design into your repertoire, then these easy to follow tutorials will be perfect to give you a brief understanding of how Sketch works, and how to produce a gorgeous design for desktop, tablet, and mobile.

Finishing up our design for Desktop

Welcome back.

Ok. Let’s make some progress on Part 3 of this 5 part course.

Ok. So this far, you’ve hopefully started to find your way around Sketch, and gain some knowledge on some of the key features from the application. As well as getting stuck in with creating the first part of our Desktop design.

In Part 3 of this tutorial series, we’re going to complete our Desktop template design. So we’ll be creating the blog section, contact section, and footer.

Awesome! Let’s get down to creating some more design goodness folks…

The Blog section

So let’s jump into creating the blog section of our design.

Ok. Let’s get our section heading in place. Like we did with the Portfolio section previously, go ahead, and drop in 2 text styles from the Styled Text option in the Toolbar (You may have these labeled differently). Change the text to your liking, and then align them to your Grid.

And now we’re going to create some blog excerpts to go into this section, and aim for something like the following…

Designing our Blog posts

We’re going to drop in 4 blog posts into this section. So we’ll put the Unsplash It plugin we’ve used previously to good use.

Go ahead and create a Rectangle (R) that spans all 12 columns on our Grid, and 300px height.

And then Alt + Drag to duplicate that layer 3 times. Then, with all 4 shape layers selected, run the Unsplash plugin Plugins > Unsplash It or use the keyboard shortcut Shift + Cmd + U

So you should have something like the following sitting pretty on your Artboard…

Ok. Cool. Now let’s go ahead and add a title, and post date to these pretty blog image shall we.

So, firstly for the date of the article, use the following settings with the Hex (#) value of 95BB6C (which should be saved in your Document Colors palette already).

And then for your post title, the following settings with the Hex (#) value of FFFFFF.

Let’s create Text Styles for both of those layers now. But we’re going to be doing 2 different Text Styles here (one for the Normal state, and one for Hover state). Let me show you in the next few paragraphs…

Select your post date text layer and then in the Inspector panel choose Create New Text Style from the dropdown.

Now give this a label ‘Post Date (Hover)’. And then do the same for your post title layer, and give it a label ‘Post Title (Hover).

Then using Alt to measure the distances. Make sure that your date, and title are nicely aligned to the bottom left of your blog image.

If you haven’t already. Make sure your 2 text layers are grouped. Something like ‘Date + Post Title’ will do.

Now, go ahead and duplicate that group using Alt + Drag placing another 3 copies onto your remaining blog images.

Now with that text group that we just duplicated, we’re going to create new Text Styles for them. But they still have the text style that we created earlier attached to them? Let’s fix that.

Select the date layer of one of those groups we just duplicated, and then choose ‘No Text Style’ from the dropdown in the Inspector. And do the same for the post title layer.

Cool. Now we have removed the text styles that we used on our first blog post, and now we can add a new one back in.

Select both the date, and title layer (where you just removed the text styles from), and give them a Hex (#) value of A5A5A5.

And then following the steps I showed your earlier. Create 2 new Text Styles for these 2 layers.

Label the post date layer ‘Post Date (Normal)’, and the post title layer ‘Post Title (Normal)’.

Then add those 2 new Text Styles to the remaining text layers that you duplicated earlier, so you have something like the following…

The legibility is not too great at the moment with those 3 blocks of text!

But this is where our Layer Styles come back into play.

Remember that thumb overlay we created for our Portfolio items? Well we’re going to re-use that here on the bottom 3 blog posts. So we end up with something like this…

Now that looks a little more presentable doesn’t it.

So go ahead and draw out a Rectangle (R) over each of the bottom 3 blog posts. Then select the 3 shape layers you just created and then choose your Layer Style from the dropdown in the Inspector.

Nice work!

Now, as we did for the Portfolio items in Part 2, we’ll quickly create a graphic that will appear in the centre of your image on hover.

Quick Tip: You could have just re-used the ‘View Project’ Symbol that we created in Part 2, with ‘Exclude Text Value from Symbol’ checked. But there’s no harm in showing you how to create that graphic again is there?

Create a circle at 70 x 70px, with a Hex (#) value of A2CB75, and then a text layer (ie; View Project) with a Hex (#) value of FFFFFF to place over the top of the circle. Make sure they are aligned correctly using the alignment tools in the Inspector, then select your shape, and text layer and turn it into a Symbol. Label it something like ‘Read Article Button’.

Now select the group (Symbol) you just created, and your image layer, and then use Align Horizontally, and Align Vertically in the Inspector panel to make sure all looks good.

Nearly done for this section.

Remember the ‘Section Button’, and ‘Section Divider’ Symbols we created for the Portfolio section? Cool. Drop them into your design. And there we go for our Blog section. All wrapped up!

The Contact section

Here we’re going to create a beautiful contact form. Oh yes. It will look mighty pretty. Something like that beautiful specimen below…

Let’s get our section heading in place. Like we did with the sections previously, go ahead, and drop in 2 text styles from the Styled Text option in the Toolbar. Change the text to your liking, and then align them to your Grid.

Creating our Map and Location Pin

Before we get to the contact form let’s create our map background, and the Location Pin icon first.

You can grab the map image from this download here.

Once you have a copy of the map image, insert that into your artboard.

Ok. Now, jump into Iconjar and do a search for ‘Location Pin’, and then drag that icon into your artboard.

Go ahead and increase the size of icon, and then give it the Hex (#) value of 95BB6C from your Document Colors.

Let’s give the pin icon a nice drop shadow for company hey?

With the Oval tool (O), draw out a small oval (surprise, surprise), and then apply the following, width, height, and colour settings…

And then apply the following settings, using the Gaussian Blur in the Inspector…

Now group the 2 layers together, making sure the icon is on the layer above.

Now place the icon onto your map, leaving space for where we’ll be adding the contact form shortly. Use the screenshot below as a guide…

Time to create that mighty pretty contact form you saw earlier. We’re going to be using layer Masks like we previously used in the About section (remember that megaphone icon?)

Ok. Let’s work on the container that will hold our contact details, and contact form.

With the Rectangle tool (R), draw out your shape to span the full 12 columns of the Grid, and then enter the following settings shown in the image below…

(We’re also adding in a border radius, and large drop shadow to our shape layer)

With your shape layer selected Ctrl + Cmd + M to convert it to a Mask.

Then create another Rectangle (R), with a Hex (#) value of 303030, and a height of 600px.

Now we want this new shape layer to be half the width of the white container we created first.

So we could go “Well the white container is 1160px wide, so half of that would be……….580px”. No. That uses way to much brain power (well maybe a teeny-tiny bit).

A better way (or 2 ways) is…

• With your dark layer selected go to the width field in the Inspector, and lets do some simple math. Enter 1160/2 into the field (which is a little division going on there), and boom! We have 580px.

• Or we can go with a percentage (%) based width. So enter 50% into the width field, which will automatically convert into the correct pixel value based on our parent layer (which in our case is the white mask layer at 1160px).

Whichever you choose is up to you. But either are great timesavers when working through a project.

Adding our logo, and contact details

Ok. Let’s get our logo, and contact details into the left hand section of our container.

If you haven’t downloaded it already, you can grab the logo image from here.

You know what?

I’ll let you set this section up (just adding an image, some text, and a splash of colour). I have great confidence in you young jedi. So go for it. And I’ll see you on the flip side…

You’re back! Let’s build our contact form…

Creating a beautiful contact form

So let’s just go over quickly what’s happening with the contact form.

We’ll be highlighting some active states on our form, again following similar principals to what we’ve done with the normal/hover states on our blog posts. Just so we have an idea of how some elements in our design will act like once live on a site.

You can see in the image above that as a user tabs through the text fields on the contact form the icon to the left becomes highlighted with the green, and the text field darkens, to highlight which field you are on, and to notify the user that they have entered something into that field, and it’s been accepted (ie; a real email address in the email field).

Working with icons again

Let’s get those icons in place for each of our text fields (Name, Email, Subject Line, Message Box).

Go ahead and create a circle (O) at 40 x 40px, with a Hex (#) colour of F1F1F1.

Now we want 4 circles vertically, with a 20px gap between each one.

We have 2 options here. Let me show you…

• You can (as we’ve done before) Alt + Drag to create 3 duplicates. Noting the distance between the layers as you drag out a duplicate
• Or make use of the Make Grid option. Select your circle shape, and then choose Make Grid in the Toolbar, and then enter the following settings…

We have 4 circle shapes, so 4 rows is cool, and then a 20px Margin between each one, and we only want them in 1 Column. Boom!

Now, I’ve shown you how to use the Make Grid tool on something pretty simple here (and in our case, Alt + Drag, would have been more than acceptable), but it’s great when you’re working with lots of layers that you want to arrange in a grid layout, without the fuss of laying them out manually, checking distances etc…

Back to it. With the first circle selected, give it a Hex (#) colour of 95BB6C.

Now we’re going to drop in various icons to sit over those circles. So we’re going to jump back into Iconjar (and using the search function in the app), to find the following icons to drag across to our design…

• User (Name field)
• Mail (Email field)
• News (Subject Line field)
• Pencil (Message field)

Once you have dropped these icons into Sketch. Change their colour, and then use the alignment tools in the Inspector to get everything looking great. And you should have something like the following…

Now let’s quickly create our text fields, and message box (text area).

Draw out a Rectangle (R), give it a Width of 370px and a Height of 40px, then duplicate that 3 times (using one of the methods that we used on the icons before).

Then add the following settings…

• Add a 2px Border Radius to all 4 shape layers
• Change the Height for the message box to 230px
• For the name field give it a Hex (#) colour of D5D5D5, and for the other fields F1F1F1
• Measure that the distance between your text fields, and icons is 10px

Nice work! Now you should have something that resembles the following…

Now, let’s add some text placeholders for our fields. Using the following settings shown in the image below…

Setting a Hex (#) colour of 666666 for the name placeholder text, and D5D5D5 for the email, subject line, and message box text).

Then make sure your placeholder text is aligned on the text fields correctly…

Just the Submit button to do, and then we’re all done!

Draw out a Rectangle (R) with the following settings…

And then a Text layer (T) with the following settings…

Great work! That’s our contact form, and contact section all done, and dusted.

Let’s finish up with a footer

We need to finish up our Desktop artboard with a bang!! Well, a couple of social icons, and some text equates to a bang, yeah?

And this is what we’re going to create in this last part…

Draw out a Rectangle (R) the full width of your artboard, 200px in Height, and give it a Hex (#) colour of 303030.

And now onto some social icon goodness…

From the Entypo (social icons) set you installed into Iconjar previously, go and do a quick search for the Twitter icon (it’s the one without the circle we need), and drag that into your design.

We’re going to slightly increase the size of all the social icons we drop into our design, so with the padlock on to keep proportions, enter the following settings (do the same for the other icons you drop in from Iconjar)…

Give your icon a Hex (#) colour of 95BB6C (remember to have the shape layer selected, not the folder).

Now, lets add some text to sit alongside your icon with the following settings…

And then with both the icon, and text selected, use the alignment tools in the Inspector to tidy things up.

Now, go ahead, and repeat this process for another few social platforms (ie; Dribbble, Instagram, Medium, Vimeo).

You’ll be cool. You’re becoming good at this!

Once you’ve created a few more of the social platform elements. Select them all, and then use the alignment tools in the Inspector to make sure everything is nice and tight.

Use the Distribute Horizontally option also, to space your elements out evenly in the footer.

Add a short piece of copyright text to appear underneath your social icons, and you’ll have something like the following…

And that’s a wrap for this part!!!

Oh. Just quickly before we finish up.

If you have any excess artboard underneath your footer (but you’ve nicely aligned everything before your footer). You’ll want to trim off that fat…

In my case, it’s 40px. So with your artboard selected in the Layers List.

Go over to the Inspector panel, and in your Height settings we’ll do a little math (like we’ve done previously remember), and subtract those pixels…

Great job. That wraps up this part.

Coming up in Part 4…

In Part 4 of this tutorial series, We’ll be taking our completed design, and venture into creating artboards for Tablet, and Mobile devices. Hope to see you again soon.

Thanks for reading the article,
Marc

Ready for Part 4.
Go to it here…

Oh. Before you go, don’t miss out on this amazing offer for Sketch users…

Want to rapidly improve your design workflow?

Meet Cabana. A Design System for Sketch that helps you work better, smarter, and faster than ever before…

Use the offer code MEDIUM20 to receive 20% OFF Cabana here.