Responsive Web Design Sketch Tools

In this tutorial I'll take you through my design process for creating a responsive design in Sketch. To keep things to the point, I'll talk about a responsive landing page I designed for a travel app a while back.

If you want to learn every aspect of Sketch for web designers, try our free Sketch tutorial, which gives you 19 videos dedicated to teaching everything you need to know to use the software effectively.

Otherwise, let's get right into creating a responsive design in Sketch!

The Basic Setup

Every design project has some sort of setup. For this specific one, I'm going to briefly talk about content and wireframes before jumping into the responsive design process in Sketch.

First Things First, the Content

It is generally good practice to get hold of the content before you start a design project. That's exactly how I start all of my projects (for what it's worth, it's part of my contract—something I recommend you put into practice too). This tutorial focuses on the UI side of things, omitting the important UX questions like why certain content was chosen, page goals and so on.

While discussing content with your client or your team you will need to think about the content on both small and large screens. I suggest writing the content for mobile first, write everything out in a Google Doc. Next, open the doc on your phone to determine if it's just right or if there is too much of it. If you're scrolling through pages and pages of written out content on your phone, you know you need to address that right away.

Always, no matter what, cut your content significantly.

"Get rid of half the words on each page, then get rid of half of what's left." –Steve Krug, Don't Make Me Think

Once you're satisfied with the mobile content, you're welcome to add more to the tablet and desktop version. Larger screens have more screen real estate to handle more detailed information.

You will go through revisions, of course. Don't get too hung up on it at this stage. The content should be close to final but it doesn't have to be written in stone.

To learn more about a content-first approach, read through James Deer's article:

Agreeing upon content for all site versions is the first step in setting up your design. You now know what to expect. It's absolutely okay to keep the content the same throughout, just as it is to have certain content appear or disappear depending on the screen size.

What Kind of Content Are You Looking For?

The most common type of content on the web is written text. However, there are other things including images and graphics (i.e. photographs or illustrations), videos, quotes, audio files (i.e. podcasts), games or even embedded content through iframes.

You don't have to have all the videos and podcast episodes nailed down. At the very least have a description of the visual or auditory content. That's what I did for this client. I knew roughly what kind of graphics I wanted for each section to further explain the value proposition of each section. But, I didn't have the actual graphics at the time the content was discussed. I just described it.

Wireframing

The next step is to represent the content visually. With this project I chose to do simple, low-fidelity wireframes. I wanted to quickly and visually draw out the content. I made two wireframes, one mobile, and one desktop because they each had different content requirements. Both of them give you a general idea of the visual structure of the landing page.

You can use whatever tool you are most comfortable with for wireframes, but I used Sketch here. You can create low-fidelity pen and paper wireframes too. It doesn't matter. You could even use the techniques discussed later in this tutorial to create responsive wireframes.

Let's jump into responsive UI design with Sketch.

The Responsive UI Design

It will make our lives easier if we first identify content that is the same across all variants and content that's unique to specific screens.

In this design, the following elements are present across all screens:

Headings, including h1 and h2 (although they are present across all screens, they are responsive)
Buttons
Links
Quotes
Backgrounds

Elements unique to different screen sizes:

Graphics (the graphics will be responsive too)
Text Paragraphs

Perfect. Now we can get started on creating these elements appropriately.

Designing the Basic User Interfaces

My basic button for both desktop and tablet is a rectangle that's 352px by 40px with a 5px border radius. The background is #7455FF. Within the resizing properties, select to pin the object to its left and right edges and set a fixed height.

Next is the text layer, the button's copy, with a Note Sans UI font, bold, and a 16px font size. It's white or #ffffff. Its alignment width is set to auto and there are no other settings set on the text layer. If you want to, you can turn the button into a symbol, though it's not necessary for this specific design because the button only appears once throughout the page.

When you combine the two elements into a group (or a symbol), you should be able to resize the width of the button no problem, with the text staying in the center no matter the button's width.

Another thing you can do is use the Anima plugin for Sketch. It allows you to create fluid screens that resize while keeping their properties together such as spacing, padding or height. It's great for layouts with forms.

We can use Anima to stick different header elements together while resizing it from mobile to desktop. It will also give us a good indication of how these elements will behave in relation to one another in other screen sizes than the ones we are designing in–the sizes in between like a larger phone or a tablet.

However, for what we are doing today, this plugin doesn't add too much.

Responsive Typography in Sketch

This landing page design calls for some large and beautiful headings. In the desktop version the h1 is 72px while h2 is 32px. 72px is way too much for mobile. We'll need to make the h1 heading responsive. It's not as simple as fluid typography is in CSS but it is doable.

We need to create a style for each h1 heading then save it as a text style with the right naming convention or syntax. This will allow us to later select the necessary h1 as needed while designing the rest of the page. It's not perfect and pretty manual, but so it goes.

For h1 these are the following styles: Noto Sans UI, bold, size 72 (desktop), size 48 (tablet) and size 32 (phone).

The same syntax can be applied to organize symbols as well. For example: Style-name/sub-name/specific-style

So, in order to organize our typography, we can use the following syntax for large h1 for desktops: Headings/H1/Desktop, for tablet: Headings/H1/Tablet and for phones: Headings/H1/Phone.

The reason that it says Headings/h1 in the drop-down, for now, is because we haven't added any other styles. So let's move onto h2 and add another layer of hierarchy into the text styles.

For h2, I'm using the following styles: Noto Sans UI, bold, size 73 (desktop and tablet) and size 18 (phone). Let's use the following syntax for h2 on phones:Headings/H2/Phone. For tablet we can do two things here, we can combine it with desktop and call itHeadings/H1/Desktop + Tabletor we can have two separate styles that are simply the same. I'm writing about this design after it's been finished so it's a little biased. I'm going to say let's separate the tablet from the desktop because it's a better design practice.

With typography styles in Sketch, you can really get detailed and organized with their syntax rules. However, as of this writing, there is no feature in Sketch, or no plugin, that resizes the typography for you the way fluid typography works through CSS. As of right now, it's still a manual process.

Using and Reusing Symbols

Up next, we are going to create symbols to reuse and make our lives a little bit easier. In this design, we have plenty of testimonials and quotes from past users; they need to be responsive.

Thankfully, the format for testimonials is going to be the same throughout the whole page so we only have to do this once for them. First, we have the person's name and then their quote. The two are different styles, however. Let's style the source first. I named the text style Testimonial/Source. The actual style of this element is: Noto Sans UI, bold, size 14, line height 24. Next, we have the actual testimonial. I named the text style Testimonial/Quote. Its style is: Noto Serif, regular, size 14, line height 24.

To create a symbol, select both of the text elements and click the Create Symbol icon in the top left of your toolbar. I named my symbol Testimonial.

Now, we need to edit the symbol in order for it to resize well for different screens sizes and for different quote sizes. Double-click on the newly made symbol to edit it.

First of all, we need to rename the elements within the symbol. By default, the name of a text layer is created from its own textual content. I renamed them to Source's name and Quote, respectively.

Next, we need to adjust the resizing settings for both of the text elements. They will have the same resizing properties. Neither will have a fixed width or height. But, they will both resize from their left and top edges. This will ensure as you resize the symbol, the text elements will stay where they belong.

To reuse the symbol click on the drop down from the top left of the toolbar that says Insert and navigate to the Testimonials symbol. Then click anywhere on the artboard to place it. To change the text paste content into the appropriate override inputs which we renamed before. Resize as needed.

Responsive Graphics

I'm using the term "responsive graphics" a little differently here. The idea is that the graphics will change depending on screen size. However, I'd still have to make the graphics manually for each screen. Unless they are fluid, like an input element or a button, they can't be made automatically.

To get a better understanding of what responsive graphics are, here is a link to an article I wrote about responsive icons but the idea is exactly the same for all types of graphics and images.

Reusing Graphical Elements

We can turn both the itinerary cards into symbols as well as the cards from under the social section of the landing page. Let's go with the social cards around the Day 3 graphic instead (it's a little more interesting).

Once again, select the card and turn it into a symbol. Double-click on it to edit the symbol. We want to make sure it resizes well both vertically and horizontally.

Starting with the background, we want to give it resizing properties that make the object pin to the top and left. The same goes for the two text layers. However, we want the image, or the avatar, to be pinned to the top right. Lastly, don't forget to change the titles of these elements to something more appropriate for when we are overriding its content.

And voila!

The Small Details Matter Too

Lastly, we also want to deal with the small design details. In this specific design, I reuse the small purple line with a dot a lot. I'm turning this purple indicator into a symbol too.

This symbol is made up of one circle that's 8px by 8px with a #7455FF background. The line's width doesn't matter too much but the default value is 122px. Its height is 2px. Again, with #7455FF background.

Within the symbol we need to do some resizing setting again. For the circle, we need it to stay the same size and in the same place. We're going to give it a fixed width and height and pin it to the top right edge. For the line, we will also give it a fixed height, but not a fixed width as we need it to expand in width. We will also pin it to the right edge when resizing.

This way, when we resize this symbol, it will only change the width of the line.

A Quick Background Trick

One more thing we can do is to set the backgrounds to be fluid as well. Heights of sections do differ between mobile and desktop layouts; this means you will have to move the background elements up and down to their right spot.

Here, the UI calls for a 16px white border. That means that the background layer needs to be 16px away from the edges of the artboard. All you have to do is select the background layer and, either using the Anima plugin or using the resize properties, pin all the edges of the background layer. So, pin it to the top, bottom, left and right. Now, when you'll resize the artboard, the background will follow suit!

And Everything Else?

Now that we have taken care of most of the design elements that can be made responsive or fluid or into reusable symbols, it's time to talk about the rest of the design elements on this page.

Simply put, this is where you roll up your sleeves and do your designs manually, one by one. Designing the map graphic will have to be done by hand because it's unique. The same applies to the layout and picking colors, and deciding upon typography.

Conclusion

Sadly, designing responsive interfaces in Sketch is not a piece of cake just yet. But there are techniques, even plugins, which will make your life a whole lot easier as a designer working in Sketch. I hope this tutorial has given you a good walkthrough of my own design process. Designing responsive UIs doesn't have to be tedious, a lot of it can be automated too.

Do you have any tips or tricks for designing responsive UI to share with us? Drop them in the comments below!