Tips and Tricks For a Responsive Design Process in Sketch

Final product image
What You’ll Be Creating

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. Let’s get right into it!

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

serverpoint hosting banner

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:

You might also like More from author

Leave A Reply

Your email address will not be published.