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
16 students are watching this class

Project Description

Overview

Design a single page of a mobile events application featuring your favorite movie or band using Sketch. The design should resize to a variety of sizes using the Sketch resizing tools you’ve just learned about.

Assignment

Create a responsive single page design in Sketch. Feel free to share your entire process from blank canvas to finalized responsive design.

  1. Design the page at a single size. Keep in mind how you want items to resize as the canvas gets larger or smaller.
  2. Group your layers as needed, and apply the relevant resizing tool to each element.
  3. Test how the resizing applies to the design.
  4. Modify the resizing rules, if necessary, until the design resizes correctly.
  5. Celebrate the creation of your app page and all your new skills!

Deliverable

Upload images of your design at different sizes and a video or GIF of your final design as you resize it.

Resources

  • Options to record your finalized video/GIF
    • Windows Movie Maker (Windows) or Quicktime (Mac)
    • Giphy (Convert your finalized video to GIF)
    • RecordIt

Thanks to...

Student Projects