Responsive Web Design 101: Bringing your UI to life using Sketch

Christina Barsan, Co-founder of Eat Design Sleep

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

      2:40
    • 2. What is Responsive Web Design?

      1:27
    • 3. Which is best Mobile or Desktop first?

      1:39
    • 4. Content is King - So Let's Start Here

      1:05
    • 5. Wireframing and Prototyping

      1:28
    • 6. Basics of Designing in Sketch

      7:13
    • 7. Creating a Responsive Grid

      3:20
    • 8. Laying Out your Design in Sketch

      3:20
    • 9. Optimizing Images, Type, and UI Elements for Best Results

      6:28
    • 10. Coding your site for RWD

      2:20
    • 11. Handing Off Assets to Developers

      2:22
    • 12. Conclusion

      0:44

About This Class

Join digital designer Christina Barsan as she teaches you how to bring your user interface to life on various devices using Sketch. You'll learn to think responsively as Christina guides you through her process of designing successful online experiences. In this class you'll learn about:

• What RWD is 

• How to choose between a mobile vs desktop first approach

• Creating content outlines

• Wireframing and prototyping your designs

• The basics to using Sketch

• Creating responsive grids

• Laying out your designs in Sketch

• Optimizing your images, type, and user interface elements

• Coding your site

• How to handle handing off assets to development teams

This class is for anyone interested in learning how to use Sketch to make their sites responsive, whether you are creating a splash page or a more complex site. After this class you'll walk away with a wealth of  knowledge around responsive design and how to apply them to your next web design project.