Help
Options
Didn't know it?
click below
click below
Knew it?
click below
click below
Don't Know
Remaining cards (0)
Know
retry
shuffle
restart
0:00
Embed Code - If you would like this activity on your web page, copy the script below and paste it into your web page.
Normal Size Small Size show me how
Normal Size Small Size show me how
UI/UX - Week 8
WTWD 610 - Developing a Design System
| Term | Definition | Example |
|---|---|---|
| Design System | A comprehensive set of design standards, documentation, and principles along with the components and patterns used to achieve a consistent user experience across different platforms and products. | Creating a design system that includes a color palette, typography guidelines, button styles, and grid systems to ensure consistency across all digital products. |
| Color Palette | A selection of colors used consistently throughout a design to create a harmonious and cohesive visual experience. The color palette often includes primary, secondary, and neutral colors. | Defining a color palette with primary colors for branding and secondary colors for accents in a design system. |
| Typography | The style, arrangement, and appearance of text within a design. Typography involves choosing fonts, sizes, spacing, and alignment to ensure readability and aesthetic appeal. | Specifying the use of "Roboto" for headings and "Open Sans" for body text in a design system. |
| Components | Reusable UI elements that can be consistently used across different parts of a product or project. Components help maintain consistency and improve efficiency in the design process. | Creating components like buttons, forms, and navigation menus in Figma to be reused throughout a project. |
| Patterns | Standardized solutions to common design problems. Patterns provide a consistent approach to solve similar design challenges across different projects. | Using a modal pattern for pop-up dialogs that require user interaction. |
| Documentation | Detailed guidelines and instructions on how to use the design system, including specifications for colors, typography, components, and patterns. Documentation ensures that all team members follow the design system consistently. | Creating a documentation site in Figma that outlines how to apply the color palette, typography, and components in design projects. |
| Usage Guidelines | Rules and best practices for implementing the elements of a design system. Usage guidelines ensure that the design system is applied correctly and consistently. | Providing guidelines on when to use primary versus secondary buttons in user interfaces. |
| Consistency | The uniformity of design elements across different parts of a digital product. Consistency helps create a cohesive and intuitive user experience. | Using the same button styles and color schemes throughout a website to maintain a consistent look and feel. |
| Scalability | The ability of a design system to grow and adapt to different projects and requirements without losing its integrity or consistency. Scalability ensures that the design system can handle increased complexity and new elements. | Developing a design system that can be easily expanded to include new components as the product evolves. |
| Atomic Design | A methodology for creating design systems based on breaking down a design into its smallest parts (atoms) and then combining them to form more complex components (molecules, organisms, templates, and pages). | Using atomic design principles to create a button component (atom), which is then used in a form (molecule), and the form is part of a user registration page (organism). |
| Visual Coherence | The visual harmony and consistency across all design elements in a project, ensuring that all parts of the design work well together and create a unified look. | Applying the same color palette, typography, and spacing rules to all pages of a website to achieve visual coherence. |
Created by:
ProfJordan
Popular Computers sets