Design for All Sizes and Screens: Responsive Design in Sketch

Bryan Zavestoski, User Interface Designer

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

      2:24
    • What is responsisve design

      3:44
    • First Sketch Resizing Option Stretch

      2:03
    • Second Resizing Option Pin to Corner

      2:19
    • Third Resizing Option Resize Object

      1:41
    • Final Resizing Option Float in Place

      1:42
    • 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.

11 of 12 students recommendSee All

I enjoyed the course! This is not a tool I have used so far in Sketch though, so I was missing some initial examples as to when in the workflow this is used. I suppose it is to quickly up-or-downscale your initial design for other screens(?). :) The four rectangles at each far corner did not seem like something I could envision as a typical responsive layout, so maybe some other elements like text would have been helpful in those examples to show difference in object behaviour based on settings. The last section of the course was the most helpful to me, but I was missing information on what "resize-setting" ALL of the objects had that made them work the way they did. :) Was kind of left wondering there, but overall I enjoyed it and want to see more!
Johanna Jonasson

Designer

Does a great job explaining and helping me understand how to create a responsive app. I especially liked that he shared the shortcuts/command keys he was using. That was helpful to know.

145

Students

--

Projects

Bryan Zavestoski

User Interface Designer

Hi! I'm Bryan Zavestoski, a User Interface designer currently located in the mountains of California. I focus primarily on complex business-to-business web applications, but have worked on anything from mobile apps to interior design of a new office. I've worked primarily for startups of anywhere from 1 to 50 people, including a company acquired by Survey Monkey.

If I'm not designing, I'm probably running around outside, whether that means climbing, skiing, hiking, or just relaxing and...

See full profile