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:
- Fluid grid layouts that adjust to fit the screen
- Flexible images/text/elements that can appear, disappear, or change size
- 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.
Upload the finished project to your Skillshare portfolio.
Write a blurb explaining your design approach and points of feedback you’d like to receive.
Give feedback on another student’s project.
- Examples of Responsive Design: Media Queries, Responsive Design, R/GA
- Best Practices & Examples of Excellent Responsive Design
- UI Design Guidelines for Responsive Design
- A Hands-On Guide to Mobile-First Responsive Design
- How to Make a Website Responsive in Just 15 Minutes
- Designing for a Responsive Web
- Responsive Web Design (Breakpoint) Cheat Sheet
- How to Use Media Queries in Responsive Web Design
Basic Design Resources
- Templates: HTML5 Up, W3Schools, Templated
- Testing Breakpoints: Responsinator, Screenfly, Resizer, Google Mobile-Friendly Test