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.
Creating our Tablet, and Mobile artboards
Hello there, and welcome back.
In Part 4 of this 5 Part tutorial series, We’re going to be taking the (Desktop) design we created previously, and go ahead creating Artboards for Tablet (iPad Portrait), and Mobile (iPhone 6 Portrait).
Now, we could have used the pretty awesome plugin Sketch Constraints to simplify the process of creating our Artboards for mobile devices, but because I want you to learn a little more about the in’s, and out’s of Sketch, we’re going to do it the manual way.
It pays to learn the basics first I always feel.
Ok. So we have our existing Desktop Artboard design at the ready, and now we need to create it’s Tablet, and Mobile variants.
Creating our Tablet Artboard
Let’s make a start…
So, create a new Artboard (A), and choose iPad Portrait from the Inspector panel.
Then go ahead, and give ourselves ample height (8000px will do) to play with. We can trim the excess (if not required) at the end.
Quick note to make: As the 2 Artboards we are about to create (Tablet & Mobile) are in Portrait layout. We won’t need to use the Grid Guides we set for the Desktop artboard. That is due to the fact that the Grid system we have in place, switches to 100% width on Tablet (Portrait) and below.
The only thing we’ll need to setup are margin guides for the left, and right of the device screen, and we can also thrown in a quick guide for the height of the device screen (in the case of the Tablet Portrait it will be 1024px), just so you can visualise (as a rough guide) how much of your design will be visible on the device screen before scrolling.
Use the shortcut Ctrl + R to bring up the Rulers, so we can start adding some guides to our artboard.
As I’ve mentioned before, Sketch has an infinite canvas and because of this the Rulers are not fixed, and it allows you to set your own zero origin.
Now, you can click anywhere on the Ruler to add your Guides, and they’ll stay visible as long as your ruler is visible (Remember the shortcut, Ctrl + R).
To move a guide, you have to grab it inside the ruler, and then you can move it around freely, keeping note of the numbers so you can place it exactly where you want.
Also, you can easily remove a guide by grabbing it inside the ruler, and then dragging either left, or right out of the canvas.
So, let’s go ahead and add 3 guides to our Tablet artboard.
The first guide, 20px from the left, and the other, 20px from the right of our Artboard. And then the 3rd one, 1024px from the top, like the screenshot here…
For your left, and right guides, all your elements will now snap nicely to these throughout the tutorial.
Now whilst working on our Tablet, and Mobile artboards we will be doing a combination of things. From copying, and pasting elements across from our Desktop artboard, and then modifying them, to using Symbols (and modifying these also) that we created previously, as well as removing certain design elements to better suit our new layouts.
Sounds a bit much? It’s really not. Let me show you step, by step.
Back to our Tablet Artboard…
So we’ll work our way down the artboard like we did before with our Desktop design…
- About Section
- Portfolio Section
- Blog Section
- Contact Section
Let’s get that header into place shall we?
Ok, from your Desktop artboard, copy across the header image, and overlay to your Tablet artboard.
Of course, our new artboard only has a width of 768px, so we’ll need to adjust that image, and overlay somewhat.
Firstly, make sure (with both the overlay, and background image layers selected) that both are positioned at (0) zero on your X, and Y axis.
Then we can look at resizing both of those elements to sit correctly on our Tablet artboard.
So, again with both layers selected, and the padlock icon on, to keep proportions, change the width to 768px (which is the width of our Tablet artboard).
And because we are now working on smaller screen sizes, there are certain elements that we will be stripping away from our design.
So further down in the inspector panel, remove the 10px border on the overlay.
We should now have something like the following sitting pretty on our Tablet Artboard…
Now we’ll get the logo, and navigation into place.
So again, copy the logo, navigation, and divider across from your Desktop Artboard into your Tablet Artboard.
Then, with them all selected, align them correctly to your artboard with the following settings…
And now we’ll do a little resizing on some of those elements we just pasted in.
Select your logo image, and then reduce it’s size (keeping that padlock on) to 133px Width.
And with the divider line, reduce it’s Length to 728px.
Onto the Navigation.
We’re going to keep our navigation similar to the Desktop version, just reduce the text size, and spacing somewhat. We’ll get to Hamburger icons on our Mobile Artboard later on.
Select all your navigation links, and take the point size down to 12, and then tighten up the spacing between each link to 30px.
Then align your navigation links to your guide, so they are 20px from the right edge of your artboard.
Select your image logo, and all your navigation links, and then choose Align Bottom from the alignment options in the Inspector.
And you should now have something like the following…
Now for the large header message ‘We are design personified’.
Using the Styled Text option in your Toolbar, drop in your Header Title Accent (We are design), and your Header Title (Personified).
Now STOP!!! No. It’s not Hammer time. Just stop for one moment!
Remember, that the text we just dropped in, has a Text Style attached, so if we go ahead and start tweaking (so it fits our Tablet artboard) it’s going to replicate onto our existing Desktop artboard. Not cool!
So let’s remove the text styles from both of those text layers, by selecting each text layer, and then choosing No Text Style from the select menu in the Inspector panel.
Now, we can go ahead and tweak the size, etc… and then create a new text style.
So for the ‘We are design’ text add the following settings…
And then for the ‘Personified’ text, the following (remember Type > Uppercase also)…
And create a new text style for each of those text layers. Maybe calling them something like ‘Header Title Accent (Tablet), and ‘Header Title (Tablet)’.
Now, you have separate text styles, that work independently for the different artboards, and it’s something we’ll be doing again throughout our Tablet design, and also when we work on our Mobile artboard later.
Let’s create our About section.
Again, like we did with the header (and hopefully using text styles that you created for your Desktop artboard), drop in a Section Title (Time to say), and Section Title Accent (Hello).
And like we did for our header, remove the Text Styles (No Text Style), and then create the following settings for the 2 text layers…
And then create 2 new Text Styles, something like the following…
For the block of introductory text, just copy, and paste across the text layer from our Desktop artboard. Again. Remove the text style, and then add the following settings to that text layer…
Then create a new Text Style, and give it a new label, ie; Section Paragraph (Tablet).
Now, let’s copy, and paste across the Megaphone icon, from our Desktop, to Tablet artboard, and then reduce it’s size (200 x 210px), and align it with our text…
And finally, let’s get one of our dividers in there, to finish this section off.
So, go ahead and drop in the Symbol divider you created for your Desktop artboard.
Yup. Fits like a glove!
Or maybe not.
Let’s fix that.
So with the Symbol you just placed on your Tablet artboard selected (and so we don’t affect the Symbol for our Desktop design), choose Duplicate Symbol from the select menu in the Inspector.
And then, go ahead and rename this new Symbol, ie; Section Divider (Tablet).
You now have 2 Symbols working independently of each other, 1 for your Desktop, and 1 for your Tablet design.
And now, ladies & gentlemen, I introduce to you the extremely handy Scale tool in Sketch.
Now we know that the width of our artboard (minus the 2opx margin either side) is 728px, so with your Symbol selected, click on the Scale icon in the Toolbar, and choose 728px in the Width field (all other fields will adjust to reflect this input), and boom! Everything will scale proportionally.
You should now be looking good…
Onto the portfolio section now folks, where, following some of the instructions I’ve shown earlier in this part, I think you’re gonna sail through it.
In fact, I have so much faith in you young Skywalker, that I’ll show you how to setup the first portfolio item, then you can run with the rest. May the sketch be with you…
So drop in the 2 new Text Styles that you created earlier, and alter the text accordingly.
And now onto our portfolio project items.
Let me just mention something here briefly, before we move on.
There are a few different ways that you could take the images from your Desktop, to Tablet artboard. Some of which I have shown you in the previous tutorials (Unsplash plugin etc…) But for now, I’ll assume your current images are Bitmaps, so we’ll go ahead with a simple copy & paste, and make use of the Scale tool again.
So you should have something like the following (layout wise, at least), currently on your Desktop artboard…
For this tutorial, and to keeps things a little more fast paced. We’re going to be dropping just 4 portfolio items into our Tablet artboard.
We’ll also be tweaking the design slightly to cater more for Tablet/Mobile users, such as having the text visible (without hover) on all items, and adding a dark overlay to compensate for this, and also removing some of the hover elements, because as we know touch devices, and hover don’t always mix.
Hope that’s given you a heads up?
So go ahead, and copy & paste across the first project image, and then using the Scale tool, increase the width to 728px so it fits nicely into our Tablet artboard.
Please Note: I know we could adjust the image size via the Inspector panel, like I’ve shown you before. But I find that from time to time, doing it that way doesn’t always round the numbers off correctly, and you have to then manually tweak the numbers to remove a .5px here, and a .5px there. Scale speeds up the process, and is on point everytime.
Now draw a Rectangle (R) to cover our image, and then using the Shared Style we created in the previous tutorial, add the Thumb Overlay to it.
And now drop in the 2 Text Styles we created for the Desktop artboard.
One for the Category Title, and the other for the Client Name.
You will see that they seem a tad, too small on our Tablet design, so, as we did earlier, firstly remove the Text Styles (No Text Style) from both text layers, so the changes don’t affect your Desktop design.
And then add the following settings…
Then, create new Text Styles for them, and label them accordingly, ie; Category Title (Tablet), and Client Name (Tablet).
Align everything nicely, and there we go!
Soooo. It’s time for you to take the reins!
Remember you have your Text Styles, and Shared Styles already in place, so you can zip through this.
So, go ahead, following the steps I’ve shown you above, create 3 more project items to sit below the one we’ve just created, and I’ll see you back here in a few…
So we should have something like the following…
To finish up this section, we’ll drop in a couple of Symbols. The button symbol that we created in the previous tutorial, and our section divider from earlier.
For the Blog section, firstly drop in 2 Text Styles for your section heading, and then replace the text accordingly.
And for our post excerpts, we’re going to follow a similar method to how we tweaked our project items earlier.
So for our first blog excerpt, copy & paste across the image from our Desktop design, and then using the Scale tool, reduce the width of the image to 728px.
And then drawing a Rectangle (R) over the top of our image, go ahead and apply the Thumb Overlay style to it.
For our post excerpt date, and title, we’ll drop in the 2 Text Styles we created for our Desktop artboard (these were the hover styles).
Remove those Text Styles, add the following settings, label them accordingly, and then create 2 new styles.
Now go forth, and add 3 more post excerpts to this section, drop in a button Symbol, and a divider, and I’ll see you back here in a short while.
Cool. You’re back.
Now with the Contact section, we’ll be adjusting the layout quite considerably to make it more suited for Tablet (Portrait) screens, in both aesthetics, and functionality.
Something like the following is what we’re aiming for…
So, firstly, lets add in the section title, and the contact details to the left hand side of the artboard.
Use the following settings for the contact details text…
And then copy & paste across the contact form from your Desktop artboard, and place it alongside your contact details.
Do the same for your map image, and Scale this to 768px Width, as our map is the full-width of the artboard.
And then lastly, copy & paste your pin (map marker) icon across, and with both the icon, and drop shadow selected, Scale this down to 40px Width, and then position it on your map.
Ok. Let’s finish up our Tablet artboard with a Footer!
Now before we go any further.
Select the whole footer (background, social icons, copyright text, etc…) in your Desktop artboard, and convert it into a Symbol, and label it something like Footer (Desktop).
Now back to your Tablet artboard, and go ahead and insert the new Symbol you just created.
Which won’t quite fit our artboard of course.
So we need to make some small tweaks, and get it looking tip-top!
Please Note: We could have used the Scale tool on this whole element, but some minor adjustments will work perfectly fine here, and allows us a little more control of the icon sizing, and spacing.
Firstly, right-click on the Symbol (either in the Layers List, or on the element itself on the Artboard), and choose Detach from Symbol.
Then go ahead, and reduce the width of the dark background (with only that layer selected), to 768px Width, and keeping the height of 200px.
Then tighten up the spacing on the social icons, so everything fits nicely into your Tablet footer.
You’re aiming for something like this…
Once everything is looking great, and with all the footer elements selected, convert it to a Symbol, and label it something like Footer (Tablet).
Quickly, before we finish up our Tablet design.
Trim off any excess pixels from the bottom of the artboard.
In my case it was 906px. How did that happen?
So using a little math again (and with the artboard selected in the Layers List), we can soon fix that…
And we’re all done for our Tablet artboard. Nice work!
Creating our Mobile Artboard
Like we did with our Tablet design, we will be removing certain elements on our Mobile artboard, and turning the navigation more ‘mobile friendly’.
We’ll also be repeating the process of using existing Symbols, Text Styles, etc… removing the styles, tweaking for the mobile artboard, and then packaging them back up into new assets.
So, go ahead, and create a new Artboard (A), choosing the iPhone 6 option in the Inspector.
Increase the Height for the artboard to something around 5000px.
And then, using the Rulers (Ctrl + R), add 3 guides to your artboard.
20px from the left, 20px from the right, and 667px from the top.
Copy across the overlay, and header image from your Tablet artboard, and then using the Scale tool, reduce the width to 375px, and then align it to the artboard.
Then from your Styled Text, drop in the Header Title Accent, and Header Title styles that we created for our Tablet artboard.
In the Inspector panel, remove the Text Styles (No Text Style) for both layers (so we don’t affect the styles for our Tablet design).
Now add the following settings for each of the text layers…
Make note also to remove the Shadows from these 2 text layers. From an aesthetic standpoint, the shadows are effective on Desktop, and Tablet devices, but a little distracting, and superfluous when you move down to Mobile screen sizes.
And then create 2 new Text Styles. Labelling them something like ‘Header Title Accent (Mobile), and ‘Header Title (Mobile)’.
For the navigation bar, using the Rectangle tool, draw in a layer with the following settings, and then copy, and paste in the logo we have used on the Tablet artboard.
Now let’s add in our Mobile navigation icon. It’s Hamburger time. Yummy!
Let’s fire back up the IconJar app, and then drag & drop in the Menu icon.
Tweak the icon colour, and then align the logo, and the menu icon vertically.
And we’re all done for the mobile header.
Moving onto the About section, we’ll be keeping it simple, and removing the megaphone icon.
Also, we’ll be stripping the section divider to it’s most basic… A line, basically (no fancy icons required).
Ok, for the section title drop in the 2 Text Styles that we created earlier for the Tablet artboard, remove the styles from each text layer (No Text Style), and then add the following settings…
And then create 2 new Text Styles, and label them accordingly.
For the introductory text, I’ll let you go ahead and fix that up yourself.
Following the steps I’ve mentioned throughout this tutorial, you’ll have no problem setting this up. You’re a Text Style superstar now!
Just aim for something like the following…
Now for the section divider, where I mentioned that we’re going to strip it back to a simple 1px line with a splash of colour. Yup. That simple.
So do just that with the Line tool (L), and give it a Hex (#) value of A2CB75.
Now this seems like a little overkill here (and you could quite easily use a Shared Style, drawing out a 1px line as you go), but go ahead and make this into a Symbol.
Ok. Onto the Portfolio section.
Drop in the Text Styles that you created for the About section, and change the wording accordingly.
For the project items in the Portfolio section, go ahead, and copy & paste (from your Tablet artboard) the overlay, and image from your first project.
Then, like we have done previously, use the Scale tool to reduce the width of those 2 elements (overlay, image) to 335px, so it fits nicely between the guides.
Then align it correctly within those guides.
Now for the Category, and Client Name, we can go ahead and use the Text Styles that we created for our Tablet artboard.
And like we’ve done before, once you have dropped those onto your artboard, remove the styles (No Text Style), make the changes below, and then create 2 new styles, ie; Category Title (Mobile), and Client Name (Mobile).
Now it’s over to you.
Remember you have your Text Styles, and Shared Styles already in place, so you can zip through this like you did with the Tablet artboard.
So, go ahead, and create 3 more project items to sit below the one we’ve just created, and I’ll see you back here soon…
Welcome on back.
You should now have something like the following in place…
Quickly drop in the button, and divider Symbols, and that’s the Portfolio section all wrapped up.
Job well done!
With the Blog section, firstly drop in your title Text Styles, change the wording, and that’s your section title in place.
Now we’ll move onto our post excerpts.
But, we’re going to have to treat our post excerpt images a little differently on our Mobile artboard.
We could, like we did from our Desktop, to Tablet artboard, copy & paste across our image, and overlay, and then use the Scale tool.
But, and because we’re using a landscape format for our excerpt images, if we were to apply the Scale tool, the following would happen…
Because we’re on a narrow screen size now (iPhone 6 Portrait), when we scale the image down, the height of the image is just too short to cater for the text we will need to place onto it.
Now, there’s a multitude of ways we can work around this, but I will show you one way, which also allows me to show you another handy feature of Sketch in the process.
There’s always something new to learn in Sketch folks!
Ok. So copy & paste across from your Tablet artboard, the overlay, and image for your first blog excerpt…
Snap both layers to your left hand guide.
Then grab your overlay layer and reduce it’s width, so it sits inside of the guides (make sure the padlock is open in the Inspector, so it does not reduce in height too).
Now, with your image layer selected move it horizontally, until your happy with the part of the image that is visible between the guides.
Then double-click on your image layer, and you will see the Bitmap Editing tools appear in the Inspector panel.
With the Selection tool, select the area of your image between the guides.
And then click the Crop tool to crop your image to the selected area.
Once you are done editing, click anywhere outside the image, or press on Finish Editing to exit.
Like I mentioned before, there are many (simple) ways to work around this, but it was my way of quickly showing you the functionality of the Bitmap Editing tools.
For the post date, and post title, drop in the Styled Text you created for your Tablet design.
Remove the text styles.
Then add the following settings for your text layers.
Label them, and then package them back up as 2 new Text Styles.
Now, go ahead, and following some of the methods I’ve shown earlier, create 3 more project items to sit below the one we’ve just created.
And you should end up with something like the following…
And then drop in a button, and divider Symbol to finish up this section.
Ok. We’re onto the Contact section.
Pretty straightforward, with just a few changes to our contact form to improve the UX at this screen size.
Firstly, drop in your title, and then contact details (adjusting for the mobile screen size).
Now, with the contact form, we’ll be aiming for the following…
Like I mentioned just earlier, to improve the UX (User Experience) when our contact form is viewed at smaller screen sizes, we will be dropping the rounded icons that sit to the left of the form fields, and using the check, and cross icons in their place, which still allows the user to receive similar feedback from the form when interacting with it.
So, go ahead and copy & paste across the contact form from your Tablet artboard.
Remove the rounded icons, and then reduce the width of the text fields, and textarea from 370px to 335px, so they fit nicely between the guides.
You can also have a play around with the colours of the text fields, and labels if you want to follow my example to the letter, or pixel for that matter.
From IconJar, do a search for the Check, and Cross icons.
And drag them into your artboard, tweak the colours to your liking, and then align them correctly inside of your fields.
To finish up this section, we’ll be adding in our Map, and Pin icon, and we’ll be using a combination of the Bitmap Editing tools (Crop), and the Scale tool.
So, copy & paste across the map, and pin icon from your Tablet artboard.
Please Note: We have done a fair bit of copying, and pasting from one artboard to the next (hey, why not, all the artboards are in one window), but when you start on your next project, creating Symbols as you go, will refine the process even more. But you knew that already!
Firstly, with the map, reduce it’s height to 250px (keep that padlock closed), position it correctly on the artboard, and then with the Bitmap Editing tools, crop it to fit the artboard.
For the pin icon (map marker), make sure both the icon, and drop shadow are selected, then using the Scale tool, reduce the width to 30px, and then position correctly on your map.
Contact section is all wrapped up folks.
Just the footer now, and we’re all done!
We’re aiming for the following…
Drop in the footer Symbol that you created for your Tablet artboard.
With the Symbol still selected, choose Duplicate Symbol from the select menu in the Inspector.
And with this new Symbol, rename it, ie; Footer (Mobile).
Resize the dark background layer to 375px (Width), and 350px (Height).
And then go ahead, and align your social links vertically, and reduce the width of your copyright text so it sits inside the artboard correctly.
Like I showed you previously, trim off any excess pixels from the bottom of your artboard, and woop woop, I think that’s a wrap!!
Coming up in Part 5…
In the final part of this tutorial series, I’ll be showing you how you can easily prepare your designs, ready to hand off to developers, using the fantastic Zeplin app.
Thanks for reading the article,
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.