Productivity App Design System
Module: UI / Product Design | Level: Medium | Estimated Time: 2-3 days
Skills: UI Patterns, Visual Design, Branding
Design systems define the visual building blocks of your product: how components look, feel, and should be used. With a strong design system, you can quickly and easily prototype new pages and features while keeping the UI perfectly consistent. In this app, you’ll create a design system focused on UI components for a productivity app (e.g., to-do list, appointment manager).
Begin by brainstorming how people use this product. What are its main features and design patterns? What do the user flows look like? From there, you can identify UI components that appear throughout the app. Note that your kit doesn’t need to contain every visual element of your app—just the major components that will be used again and again.
Be sure to cover:
- Typographic scales
- Color palettes
- Icons, buttons, checkboxes, and other assets
- Input elements (e.g., text fields, datepickers)
If appropriate, you might also include additional components: notifications, alerts, tool tips, dropdown menus, progress bars, lists, etc.
Lastly, your kit should also include at least three UI layouts for specific screens, such as “New Reminder,” “Daily Task Overview,” “Set Goal,” or whatever else you like.
Create a graphic, PDF, or web-based design system that shows all the UI elements used in a productivity app. You can create your own fictional app or redesign an existing one.
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.
- Setting Up a Design System
- Design Systems Sprint 1: The Interface Inventory
- Harmonious Typography and Grids
- Shopify Polaris Design System
- Building a Visual Language - Airbnb
- The Harmony Design System