Design for All Sizes and Screens: Responsive Design in Sketch | Bryan Zavestoski | Skillshare

Design for All Sizes and Screens: Responsive Design in Sketch

Bryan Zavestoski, Independent UI/UX Designer and Educator

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (18m)
    • 1. Introduction

      2:24
    • 2. What is responsisve design

      3:44
    • 3. First Sketch Resizing Option Stretch

      2:03
    • 4. Second Resizing Option Pin to Corner

      2:19
    • 5. Third Resizing Option Resize Object

      1:41
    • 6. Final Resizing Option Float in Place

      1:42
    • 7. Bringing it All Together

      4:26

About This Class

Note: As of Version 44, Sketch has updated how their resizing options work, and it is much different than when this course was recorded. Some of the Sketch specific content may no longer be relevant, but this course should still give you some information on the basics of responsive design.

This course will teach you the basics responsive design and explain how to designing responsive layouts. It will focus on the new resizing tools in the design app Sketch. Sketch has quickly become the most widely used tool for web and mobile design, replacing Photoshop for many designers. In a recent update, Sketch introduced the ability for objects to respond and adapt to changes in . 

Sketch defines four different behaviors on how objects should resize:

  • Stretch
  • Pin to corner
  • Resize object
  • Float in place

We will focus on the uses of each resizing option, and finish by combining them all in our class project.

This course is for anyone with an interest in web design. It will not be going over the absolute basics of Sketch, so some familiarity with Sketch or another design application is helpful, but not necessary.

Transcripts

1. Introduction: Hi, I'm Brian, a freelance interface designer. In this course, we will be focusing on the new re sizing tools in the design APP sketch. We will look at how these tools can be used to create designs that adapt toe all screen sizes. These tools make it simple to create designs that can respond to a variety of layouts, devices and sizes. I personally made the switch from Photoshopped to sketch about two years ago, and I have personally relied almost exclusively on sketch. Since then, many Web designers will tell a similar story of how they've left photo shop and now focus on designing with sketch. Why is sketch being adopted so quickly? Sketches a tool that was created with digital design in mind. Well, Photo Shop is a photo editor that has been hacks to work as a Web design tool. Sketch has become the app of choice for interface and Web designers because it focuses on Lee on the tools they need. Without all the three D tools, photo filters and other features that they rarely use, Sketch has now become an even better choice for Web designers. With the addition of the re sizing options added in mid 2016 by giving a designer the ability to modify how layer acts when it gets smaller or larger, designs can become much more flexible. This flexibility is important because mobile usage is exploding mobile Web usage past desktop usage for the first time in 2014 and it now makes up nearly 2/3 of all Web traffic . The time of designing for a single screen size or device is over. We now need a way to design for the flexible and ever changing future of APS and websites for the class project. We're going to be creating a single page oven events app. This page will be able to resize to a variety of screen sizes. This class is for anyone wanting to learn more about responsive design and how to create it . I will not be going over the absolute basics of sketch, so some experience with Sketch Photoshopped or another design tool will definitely be helpful. But I will be talking through each step I'm taking and some of the hot keys amusing as well . Even if you are new to sketch, you will get a great idea of what is possible when designing with sketch. So let's jump in and talk a little about what exactly responsive design is 2. What is responsisve design: you've probably heard the term responsive design thrown around. But what exactly does it mean? According to Wikipedia, responsive Web design is an approach to Web design aimed at allowing desktop Web pages to be viewed in response to the size of the device. One is viewing with. Basically, this means that your website or APP will change appearance based on the device someone is viewing it in. How many times have you looked at a Web site on your phone and had to zoom in to read the page? Responsive design helps avoid these cases and makes your content accessible everywhere and to everyone. Many designers prefer a mobile first approach to responsive design. This avoids the common problem of trying to fit everything from the desktop screen onto a tiny phone screen. By trimming down the content first, it is much easier to expand to a larger screen similar to responsive design. Adaptive design also changes appearance based on the size it is being viewed at. However, adaptive design only changes at a few specific points. While many design tools can create adaptive designs through using multiple art boards or documents, sketch is uniquely qualified to create responsive design because of its re sizing features . Now we'll take a look at a couple examples of adaptive, responsive and ah hybrid approach to Web design. I've gathered four different examples of the different types of design we can use to adapt to different sizes of screen. The first website, Apple uses an adaptive approach, so I'll resize this and you can see the image of the Mac book gets smaller as my view port gets smaller. It's not really a gradual change, though you can see how it sort of jumps to be the different sizes. And then, similarly, with the header, you can see it has every single option. Mac iPad, iPhone watch. And then as it gets smaller, it will snap to just including this icon on the left that allows you to get to all of those options. So this is an adaptive approach. We'll move on to the next one. Coca Cola Coca Cola uses sort of a hybrid approach you can see as I resize it. It will snap smaller pretty quickly, but then, in this middle section, you can see some of the images start to change sizes and the text re flows just a little bit before finally snapping to the mobile Vieux Port. So this uses a little bit of responsive design in this middle section, where the images and texture changing but is primarily adaptive. Our next example. McDonald's. They're fully responsive site. As I resize the view port, you can see the text changes sizes. The images change size. These images will always take up the full width of the screen, no matter what size it is. And then finally will go to target dot com. We have a couple options of items right here. As I resize it, you can see this one is also fully responsive. All of the images will resize and then you can also see in their featured categories. Here will go from Ah, six columns, five columns. The columns will actually get smaller. And then as we get even smaller than that, we'll scroll down and we have four columns. Then finally, it will get even fewer columns. The items are a little small right now. We scroll some more and they're down to three columns. So regardless of what Vieux port, you're viewing this at it still looks good. Here we have sort of a middle one. You can see nothing's totally standing out. Everything's taking up the amount of screen that they want full size. The images are a little bigger. They'll be a little more obvious but still adjust to every single size. 3. First Sketch Resizing Option Stretch: now that we've talked a little about responsive design and why we would want to use it. Let's see how we can use some of these techniques inside sketch. The first re sizing option we're going to look at is called stretch stretches, the default re sizing option. Anytime you create a group or a symbol with stretch, all spacing and objects will resize proportionally. What this means is that if we were to make our group twice asl ARJ, the objects inside the group and the spacing between those objects will all double. Let's jump into sketch and see how we can apply stretch to our designs. As we select a layer, we can look for the re sizing options in the right hand toolbar. As you can see, they're not there. The first thing I'm going to do is group thes five layers together with Command G. Once they're grouped, let's select all four boxes inside the group. I'm holding command and shift to select each layer inside the group. Now in the toolbar, we can see the re sizing option. As you may have guessed, it's already set to stretch. We can resize this group and see how the objects inside the group will act. Each object squashes air stretches to remain in the container. This box is 140 pixels tall and 140 pixels wide, and it's 40 pixels from each edge. If we divide the total group size by to both, the size and the distance from the edges are cut in half. Here, I'll select the icon inside of our text group. As I resize it, the icon very quickly warps to be almost unrecognizable. We'll need to find another re sizing option, which could work here. 4. Second Resizing Option Pin to Corner: next, we'll look at the second re sizing option pin to corner. When an object is set to pin to corner, it will maintain the same size. Regardless of how the outer group is resized. The position from the nearest edge will also remain the same, no matter how large a group gets. If an object was 10 pixels from the edge, it will stay 10 pixels from the edge. Pinter Corner does have one special case. If an object is centered between two edges, it will remain centered between those edges. As the group is resized, Penta Corner could be useful for positioning items in a mobile status bar or website header . For example. In IOS, there is a mobile signal and carrier on the left and the battery percentage on the right. If this status bar were to expand to fit a larger or smaller phone, we would want those items to remain near the edge of the screen. It can also be useful on a website to keep the main logo centered or to keep that main logo towards the left side of the screen. Now let's take a look at an example here. I've set up a similar document to the last video. First, we should select each of the layers and set them to pin to corner. So I'm holding command and shift to select each of these layers. And then I'll go over to the re sizing options. It's currently on stretch, which is the default, and then I'll change that to pin to corner. Now let's see how these react when I select the whole group. As you can see, each of the objects stays the same size. It also stays the same distance from each of the edges. Let's look at these just to make sure this object is of 140 pixels wide and 140 pixels tall , and it has a distance of 40 pixels from each edge. I'll select the whole group, resize it to be much smaller and then select that top left group again. As you can see, it's still 140 pixels by 140 pixels, and it still has a 40 pixel distance from each edge. To look at that custom case that I talked about, let's look at this top section here. I've already said our icon to be pinned to corner. So let's see what happens when we move the whole group. I'll make it larger and make it smaller. The icon stay centered. 5. Third Resizing Option Resize Object: Our 30 sizing option is called resize object. When sent to resize object, the distance from all four of the outer edges remains the same. The object will then resize to fill all of the remaining space resize. Object does behave slightly differently when layer is touching three sides of the outer group. When this is the case, a layer will remain the same size. This particular behavior can be useful for sidebars or mobile tab bars. We will often want these items to remain the same size, regardless of the total outer size. Resize object can be useful when applied to text. A large block of text can be used to fill all of the remaining space around. Other objects or text within a list item can be set to always fill the entire with of that list, regardless of if the list size grows or shrinks. Now let's see how resize object works. I'll start by selecting each of our inner groups and changing them from stretch to resize object. I'll select our outer group and start re sizing it as you can see our objects resize, but they'll maintain the same distance from the edges. Let's test that this block is 140 pixels by 140 pixels, and it's 40 pixels from one edge and 450 from the other edge. As I resize it up a little bit, we still have the distance of 40 pixels and 450 pixels from each edge, but the size of our object has changed. 6. Final Resizing Option Float in Place: Now we've made it to the fourth and final re sizing option flow in place. When set to float in place, a layer will always remain the same size. This is similar to pin to corner, but flow in place differs and how it modifies the space around the object. Well, Pinchuk Orner keeps an object the same distance from its nearest edge. Flow in place will adjust the spacing proportionally. It's best to think of this in terms of percentages. If an object is 10% from its nearest edge, it will stay 10% from that edge. As a group gets larger, the distance from the nearest edge will grow in appear pixel measurement, but remained 10% of the total group size. Float in place can be useful for icons inside of a tab bar or for text inside a table. If the tab bar or table is resized, all of the items inside will stay the same size but reposition themselves to be evenly distributed. So here's our final re sizing option float in place. I've already gone in and selected each of the squares and set them to float in place, So let's see how they react all, select our group, grab an anchor point and resize it. You can see all of the squares will maintain their same size, but the distances from the edges will get slightly smaller or slightly larger. I'll select it. It's the same default 40 and 40 that we've been seeing, and then I'll re selected the group, resize it down a little bit. You can see it's a little closer if we look at it again. 23.35 and 31.54 So it's really basing it off of the percentages rather than the actual pixel distances. 7. Bringing it All Together: Now let's bring all the re sizing options together into an actual interface. As I mentioned in the introduction, Our class project is a single mobile app screen based on your favorite band or movie. Here's an example, which uses each of the re sizing options. Here's our example Events at for the Class project. Let's take a look at an overview of the whole page by hitting command one. You can see I have six our board set up to for iPhone seven size to for iPhone seven plus and two for iPad Pro on the top. We have all of the default re sizing options applied, and on the bottom we have all of the custom re sizing options so we can make the pages resize how we like. Let's take a look at the APP all select our iPhone seven size command to to zoom into it and command zero to make sure we're at 100%. Zoom. We've got a lot of the default features for an IOS up. We have our status bar on the top, our title bar. Inside the APP. We have the time and location of our event and an ability to buy tickets. And then finally, we have the people attending the event and some of the icons to get to different parts of the app. Let's take a look at what happens when we resize it. I'll scroll over to our iPhone seven plus size it up. Everything still looks pretty good. Some things are getting a little stretched, but it's not super obvious right here. If we go to the iPad Pro Forever, however, I can resize it up here and you can see a lot of things have kind of acted. Not exactly how he would like them to. Our header bar has gotten really tall, and some of our icons are getting a little squashed. Some of the alignment is off a swell if we scroll down, some of the icons for the time in location have kind of gotten away from the text, and our profile images have turned into ovals rather than circles. Let's see how we can correct that. So now I'm zooming into our iPhone seven plus, with the re sizing options applied all size it up again. We don't get any stretch on the icons now, but it's not super obvious. So let's take a look at the iPad Pro again. I'll re size it up and then let's take a closer look. Our header bar has remained the same size and are icons don't look like they're stretched at all. If we click in here, we can see some of these objects are pinned to corner, so they'll stay the same size. And then this one, which is centered as floating place. So it'll stay centered all of the time. If we scroll down, we have our location and time those air sent to float in place and we can see that the icon stays right next to the images. Buy tickets. It's a little too large, but we do want it to be bigger when it's on the iPad. So here have sent it to resize object. What we can do. For now, we can just move time up a little bit, and we have a really big called action to buy the tickets. We can scroll down and see. Our people have spread out a little bit, and similarly with our icons, they've stayed the same size but have spread out. So we're pretty close to what we would want the iPad toe looking like with just a few applications of the re sizing options. None of our icons air stretched. Our profile images are still circles, and a lot of the text has spaced out as we wanted to. We will need to make some small updates, but nothing too major. So now that we've looked at an example, I'd love to see what everyone comes up with. Feel free to share sketches, ideas and your final screens. If anyone has a question, wants feedback or just wants to share their project, leave a comment below. In the community section of this course, one final note sketch does have some limitations. As you saw on our iPad example, the re sizing options only go so far. Designs still need to be manually modified when sizes are much larger or smaller than the original design. We have more flexibility and freedom in design than ever before, but there's always room for improvement. We'll see what the future holds. Thank you for taking this course. I hope you learned something, and if you enjoyed it, please leave a review of the courts below. Thanks again and happy designing