Pipi 9 has been headless and is now getting a web front end. It has its own working Content Management System (CMS) but doesn't have a Design System.
Design Systems
"A design system is a collection of reusable components and clear standards that can be assembled together to build any number of applications. Design systems aid in digital product design and development of products such as mobile applications or websites. They may contain but are not limited to, pattern/component libraries, design languages, style guides (font, color, spacing, placement), coded components, brand languages, and documentation.
It serves as a reference in combination with a design language that ensures the many different teams involved in designing and building a product create cohesive products that look and behave like each other.
Notable design systems include Lightning Design System (by Salesforce), Material Design (by Google), Carbon Design System (by IBM), and Fluent Design System (by Microsoft). ..." From Wikipedia
Examples of Design Systems
Material design by Google
Apple Design ResourcesAudi User Interface Guidelines
Base: Uber's design system
Microsoft Fluent Design System
IBM carbon design system
UK Gov Design System
Spectrum: Adobe Design System
Nord Health Design System
GitLab Design System
More here
Useful Resources
Components
A component is a single, reusable chunk of a user interface.
Examples of components from UK Govt Design System
- Accordion
- Backlink
- Breadcrumbs
- Button
- Character count
- Checkboxes
- Cookie banner
- Date input
- Details
- Error message
- Error summary
- Exit this page
- Fieldset
- File upload
- Footer
- Header
- Inset text
- Notification banner
- Pagination
- Panel
- Phase banner
- Radios
- Select
- Skip link
- Summary list
- Table
- Tabs
- Tag
- Task list
- Text input
- Textarea
- Warning text
Component Resources
Design Tokens
"Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code. Design tokens represent the small, repeated design decisions that make up a design system's visual style. ... Tokens replace static values, such as hex codes for color, with self-explanatory names. ..." (From Material Design System)
Nathan Curtis has worked on many projects and has written many articles about design tokens.
Resources from The Component Gallery
Websites
- styleguides.ui is a collection of website style guide articles, books, podcasts, talks, tools, and examples.
- Awesome Design Systems is a list of design systems with a guide to their features.
- Design Systems Repo is a collection of design systems and design system resources.
Books
- Design Systems by Alla Kholmatova
- Atomic Design by Brad Frost (Free)
- Inclusive Components by Heydon Pickering
- Programming Design Systems by Rune Madsen (Free)
- Building Design Systems by Sarrah Vesselov and Taurie Davis
No comments:
Post a Comment