CAPSTONE: Responsive Product Design

Module: UI / Product Design | Level: Hard | Estimated Time: 4-5 days
Skills: Web Design, Layout, Visual Design, iOS, Android


Whether you’re on your laptop, phone, or tablet, browsing a website should be seamless. Pages should look beautiful across every device, and functionality should cleverly adapt to different screen sizes. That’s the magic of responsive design.

In this brief, you’ll design a responsive product that adapts to desktop, tablet, and mobile. Your design will rely on:

  1. Fluid grid layouts that adjust to fit the screen
  2. Flexible images/text/elements that can appear, disappear, or change size
  3. CSS media queries customizing the page’s appearance at different widths

To get started, think about:

  • Existing responsive design. See examples linked in the Resources section below, or view websites while resizing your browser window. Note how layout and important page elements adjust to different resolutions.

  • Navigation. Hamburger menus, dropdowns, tabs, and accordions take up less space on small screens.

  • Usability. When might people use their fingers rather than a mouse? Buttons are easier to tap than links, and users can swipe, pinch, and interact with touchscreens.

  • Information hierarchy. Keep designs minimal as you scale down, prioritizing key information and actions.

  • Breakpoints. At what screen sizes should layout and content change? Identify 3 - 5 page widths that accommodate large, medium, and small screens.


Design a responsive product with different views optimized for desktop, tablet, and mobile. You can create a fictional product or redesign an existing website.

Include a link to a working prototype, and images of how your design appears at small, medium, and large screen resolutions.

Get Credit

  • Upload the finished project to your Skillshare portfolio.

  • Write a blurb explaining your design approach and points of feedback you’d like to receive.

  • Add the link to your project to this Project Signup Sheet. We highly recommend linking to your project in Telegram too.

  • Give feedback on another student’s project.


Helpful Articles
Basic Design Resources
Skillshare Classes

results matching ""

    No results matching ""