Before building the library, learn to take inventory of the designs to group and categorize common components and patterns to aid in planning.
- [Instructor] Before writing any code…for your design system,…do an audit and create an inventory of the design patterns.…Here is an example of some of the components…from my own website.…You can take screenshots or assemble your design files.…It doesn't have to be pretty.…Just use whatever format works for you.…If you're working on a redesign,…take inventory of your current designs.…The next step is to categorize the components…into groupings, such as colors, typography, icons,…and various UI patterns.…These categories can also be used for organizing your CSS.…
However, at this stage,…decisions about the overall architecture don't need…to be decided yet.…Use this step to identify what exists,…what can be reused or thrown out.…Mark the inconsistencies, and think about how to unify them.…Create a color palette and organize the colors…into associations, such as brand colors,…accent colors, borders, links,…and however else your product uses color…to communicate with the users.…Take note of where a particular color appears…
- The pros and cons of design systems
- Open-source frameworks
- Planning a design system
- UI patterns and component libraries
- Style guides
- Building the CSS architecture
- Formatting rules
- Using standardized classes, naming conventions, and templates
Skill Level Beginner
Responsive CSS Workflow with Sass, Bourbon, and Susywith Carrie Dils2h 59m Intermediate
1. Getting Started
2. Creating a Design System
3. Building the CSS Architecture
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.