Module 3- exploring design systems

In your sticker sheet, you can create swatches for your colors by:

1. Creating shapes, like small circles or squares 2. filling them with colors you choose 3. labeling each shape with the hex code for that color

What are the two common states for components?

Active and inactive

Grouped items in a design tool are basically a what?

Component

How to make a sticker sheet

Create a blank frame and copy and paste the elements and components that are frequently used throughout your design to the sticker sheet. These are useful for other designers and developers who need the design to begin coding.

Scalable

Describes a system that's able to maintain performance levels when workload increases

Design systems

Design system is a series of reusable elements, and guidelines that allow teams to design and develop a product following predetermined standards

How does a robust design system support a designers day-to-day work?

Design systems, create consistent guidelines for colors and images that help with brain recognition.

Support code for developers

Design systems, support code for developers to help developers, build out designs correctly, design systems often include the code to create each of the provided elements or components. Compiling all this information in a comprehensive design system ensures that all the different elements in your designs will carry through to the final product.

A design system can be useful to many people in the company. Which of the following groups are likely to use a design system?

Designers and developers

Brand guideline example

For example, a design system outlines rules about how to use your companies, brand colors in your designs, and which colors should be used for icons and typography

Internationalization

How to make your product work in other languages and countries.

States example

Imagine what a button would like it if was clicked or didn't click. The button must look like it was pressed on(using ripple effects or ripple effects)

Elevation

Material's design's system for adding layering or depth to your interface. The background screen is usually at 0 elevation, while a button might be at 4 elevation, so it appears to be lifting off the screen

How are design systems set up?

Most design systems include: •visual styles •guidelines for how to apply them •UI patterns •supporting code for developers

Do all design teams have a fully developed design system?

No, but those who do find that it elevates the quality of their interactions and products.

How is scalability helpful when working at startups?

This can be helpful at startups. If there is a design system that's already set up with a specific color palette and typography it's makes it easier to iterate. And makes it easier to onboard new team members

Guidelines for how to apply design systems

This is where the design principles editorial guidelines and implementation guidelines are defined. Clear rules about how certain components are styles should be used within a product help designer stay consistent

Including a design system in your case, study showcase, the creative and strategic design choices you've made while in reaching portfolio for future job opportunities. True or false?

True

One benefit of a design system is that it creates consistency for designers and users. When designers have a specific set of elements to work from, they can increase the speed of the production, decrease, inconsistencies, and focus on innovative solutions that focus on the user. True or false?

True

UI patterns

UI Patterns include elements like text, color or icons: •Components: which are made up of elements like a button or form label •Modules: which are groups of components, like a header with a logo, or a navigation bar at the top of the page •Templates: which groups of modules put together to form pages. Each of these sections of a design system usually includes detailed notes about which elements, components, modules and templates are the most important, and how often to use each one.

A designer needs to change all the buttons in a design to have rounded corners. What is the fastest way for them to make this update?

Update all the button instances by updating the main button on the sticker sheet.

States

Visual representations that communicate the status of a component or interactive element

Sticker sheets also ease the collaboration process if you're working as a part of a large team. When you share you designs with developers, a sticker sheet

Will clarify the coding process as they work on each component. The sticker sheet will also serve as a style guide for follow designers and help them stay consistent as well for example, if a products button has rounded edges, your team will know not to create sharp, rectangular ones.

Design systems help teams..

combine all of these different guidelines in one place, including important information like: brand guidelines, components, color pallets, and more.

A button is a

component made up of elements like text, color, and shape.

Visual styles

defining the styles for core visual design elements like typography, color palettes, and iconography helps companies express their brand more consistently. it also helps UX designers improve the users experience.

Developers are able to take a design and know what code needs to be written through a..

design system built by both designers and developers

Important features like navigation and alerts have _______ elevation so they are visible to users

higher

The way you interact with design systems as a new UX designer, will depend on the..

size of the company you are working for. At larger companies you will use a design system that's already been set up. Smaller companies might expect you to help build a new design system.

You are creating an alternative design for an app using the material baseline design kit in Figma. You find a style for the navigation bar you'd like to add to the app. You copy the selected style from the (blank) page and paste it to the new page.

sticker sheet

Sticker sheets

sticker sheets are a collection of elements and components that make up part of the design system.

A designer begins a new project by reviewing the elevation section in the material baseline design kit in Figma. Which of the following design feature should they apply a higher elevation to?

• Buttons • Alerts • Navigation

What pages in a public design system can new designers access for additional information and download baseline design kits for Figma?

• Components • Design • Resources

The sticker sheet will contain the design system's most-used assets, including:

• Reusable UI components, such a buttons, menus, cards • Typographic elements, including typefaces, and font families • Color choices, including an overall palette and specific component colors • Icons representing recurring actions or navigation choices a user might interact with

What are some ways the designer can incorporate an existing design system into their designs in Figma?

• a designer can mix and match their own elements with elements from the design system • a designer can use components from existing design system and customize them to match the brand

Visual elements included in design systems

• color • iconography • layout • copy • animation • elevation • typography • illustration

With a sticker sheet, designers can:

• copy assets from the sticker sheet and paste them into the design • share the sticker sheets with teammates and other collaborators • update, all instances of and acid by updating the original in the sticker sheet

Which of the following are benefits of the material design color tool?

• text accessibility information related to contrast in size • text color is automatically adjusted for optimal contrast • preview, lighter, or darker tones of a primary color

In what way should a new designer on a team use the company's design system?

• to ensure their designs are consistent with the company's brand • to familiarize themselves with the brand's color palette and easily apply them to their designs.

Sticker sheet example

• usually includes buttons, icons, colors, typography etc. • Carefully documenting elements and components makes it easier to track and prevents errors and inconsistent in designs

Benefits of design systems

•Create consistency for designers and users.(designers are limited to a certain set of elements, there's less chance that they'll introduce inconsistencies in the product of the companies brand.) It's also easier for designers to create the buttons and for users to notice them in a product. •They help reinforce a company's brand identity: design systems keep the visual design elements, consistent within a product and a across products(Ex: google always using red, yellow, green, and blue, across all platforms where google products are offered) •That they're scalable: The term scalable describes a system that's able to maintain performance levels when workload increases. • They save time and money by increasing efficiency for individuals and teams: A system that can be uniformly applied to designs decreases questions among the team, making the work finish quickly. •Design systems help designers and developers work together more effectively(stay on same page from the start)