Module 2: Design systems and style guides
The power of consistency
Practice Assignment
1. Why is consistency important in UX design? Choose the best answer.
- To enhance user experience by reducing confusion and frustration
- To ensure all design elements are unique
- To make the design look more colorful
- To reduce the amount of text in a design
2. What are the benefits of using design systems in a project? Select all that apply.
- Faster development time
- Improved design quality
- Reduced maintenance costs
- Increased use of animations
3. Liora is working on a large-scale design project without a design system. What challenge is she most likely to face? Choose the best answer.
- Decreased creativity
- Decreased collaboration
- Inability to complete the project
- Maintaining consistency across the project
4. Which of the following are specific benefits of using a design system in UX projects? Select all that apply.
- Facilitates easier updates and redesigns
- Simplifies the onboarding process for new team members
- Reduces the need for usability testing
- Ensures uniformity across different platforms
5. Martin is presenting the benefits of a design system to his team. Which of the following points should he emphasize? Choose the best answer.
- Design systems reduce the need for user feedback.
- Design systems are only useful for large teams.
- Design systems increase the number of design variations.
- Design systems improve design quality and speed up development.
Activity: Create a simple design system
Practice Assignment
In this activity, you’ll have the opportunity to organize the components you've already created into a simple design system. You’ll take the mid-fidelity wireframes you created in Figma and iterate on them using the Fluent 2 design system. This activity will help you understand the benefits of design systems and style guides, as well as apply a consistent design language to your wireframes. By the end of this activity, you will have a clearer understanding of how design systems can streamline your design process and improve the consistency and efficiency of your designs.
Inventory your mid-fidelity pieces
The first step of this activity is to take an inventory of the parts and pieces you have already created in your mid-fidelity wireframes. Look closely at each component and determine which ones align with the Fluent design system. This involves identifying elements such as buttons, icons, typography, colors, and other UI elements that are consistent with Fluent's design language. Make note of any components that may need to be revised or updated to better align with Fluent. This initial inventory will serve as the foundation for organizing your design system and ensuring consistency throughout your project.
Select and organize Fluent components
Now that you have inventoried your parts and pieces, it's time to select the components you want to use from the Fluent design system. Go through your design file and identify the main three to five components that you want to align with Fluent. This could include buttons, cards, navigation bars, or other key elements that are foundational to your design. Once you have selected these components, organize them in a way that makes sense for your project. Group similar components together and ensure that they are easily accessible for future use. This step will help you begin to integrate Fluent components into your design and establish a cohesive design system.
6. What is the value of organizing components in a design system at this stage? Select the best answer.
- It helps to identify the parts and pieces that need to be created from scratch.
- It ensures that all components are visually appealing.
- It establishes consistency and efficiency in design.
- It reduces the need for user testing.
7. What is one of the main benefits of organizing components in a design system? Select the best answer.
- To ensure that all components are visually appealing
- To reduce the need for user testing
- To simplify the design process for beginners
- To facilitate collaboration among team members
8. What challenges did you encounter while selecting and organizing components in your design system?
Challenges encountered while selecting and organizing components in a design system might include:
- Ensuring all existing components align with the design system (such as Fluent 2).
- Deciding which components need to be updated or redesigned to meet design system guidelines.
- Organizing the components in a way that is logical and accessible for future use.
- Balancing the consistency of the design system while maintaining flexibility for unique design elements.
Unveiling design systems
Practice Assignment
9. What are core components of a design system? Choose the best answer.
- User personas and journey maps
- UI components, code snippets, and style guides
- Customer feedback and surveys
- Market analysis reports
10. Which of the following elements are typically found in a design system? Select all that apply.
- Advertising strategies
- Design tokens
- Component libraries
- Accessibility considerations
11. Emma is exploring different design systems to understand their structure. What is one of the main purposes of a design system? Choose the best answer.
- Create unique designs for each project.
- Gather user feedback.
- Standardize design elements and improve collaboration.
- Replace the need for design tools.
12. When organizing components into a simple design system, what should be included? Select all that apply.
- Style guides
- Marketing materials
- Code snippets
- UI components
13. Saniah is evaluating whether a design follows the Fluent 2 design system. What should she look for to determine adherence? Choose the best answer.
- Unique design elements that differentiate the product
- Integration of elements from multiple design systems
- Use of Fluent 2’s UI components, design tokens, and adherence to its style guides
- Custom user feedback forms that are innovative
Style guides: The language of design
Practice Assignment
14. Quinn is working on a new project and wants to ensure that her team maintains a consistent design throughout the product. What is the primary role of style guides within a design system? Choose the best answer.
- Defining the visual language of a product
- Providing user feedback mechanisms
- Defining marketing strategies
- Outlining development processes
15. Carlos is creating a style guide for his company's new app. Which of the following should he include as key components of a well-defined style guide? Select all that apply.
- Iconography
- User journey maps
- Typography
- Color palettes
16. Why did an engineering company implement a style guide to improve its design process? Choose the best answer.
- Increasing the marketing budget
- Speeding up the development of new features
- Improving design consistency and brand identity
- Reducing the need for user testing
17. Maria is applying design system principles to a grocery shopping app. To achieve a consistent user experience, which elements should she focus on? Select all that apply.
- Aligned spacing and layout
- Uniform color usage
- Unique design elements for each page
- Consistent typography
18. Lisa is an entry-level UX designer at a tech company. She has been asked to review the latest app design to ensure it follows the company's style guide. Which of the following tasks is she most likely to perform? Choose the best answer.
- Writing code to implement new features
- Creating a marketing plan for the app
- Conducting usability tests with users
- Checking for consistency in typography, color schemes, and spacing
Project: Style guide integration for the grocery shopping app
Practice Assignment
Project scenario
Welcome to the next phase of your capstone project! In this part, you'll explore the world of design systems, where you'll apply principles to your existing mockups. Think of yourself as a UX designer at a startup developing a mobile app to simplify grocery shopping for busy professionals. You've conducted user research, created an information architecture, and developed initial low-fidelity and mid-fidelity mockups. However, these mockups lack consistency in color, typography, and button styles. Your task now is to refine your designs to ensure a seamless and consistent user experience.
Objective
The purpose of this project is to integrate insights from user research, IA, and design systems to achieve cohesive and user-friendly mockups.
Instructions
Before you begin, open the The Grocery Shopping App Template PowerPoint file that you’ve saved previously to a location that is easily accessible. If you have not yet downloaded the PowerPoint file, do so now. You will continue to add to this PowerPoint file throughout the certificate and at the end, this will be your completed portfolio. There is guidance on what to include in the beginning slides and template slides towards the bottom of the PowerPoint deck. Use the completed portfolio to showcase your work and share with potential employers, demonstrating your skills and experience in UX/UI design.
For this project, you will continue using the summary of user needs, IA diagram, and mid-fidelity wireframes that you used and created in previous projects. In addition, you will use:
A style guide template that you can customize.
Fluent 2’s design system.
Step 1: Review user needs
Review the user research summary to identify user needs related to the app's interface, such as clear navigation, discoverability of music, and easy playback controls.
Summary of user needs
Reduced time commitment: Users want to streamline the grocery shopping process to save time in busy schedules.
Meal planning support: Users struggle to plan healthy meals throughout the week and need tools or resources to simplify this task.
Recipe inspiration: Users desire easy-to-follow, delicious, and healthy recipe options that fit their dietary preferences.
Efficient shopping: Users seek a way to avoid impulse purchases and make efficient grocery shopping decisions based on a pre-defined plan.
Budget-conscious options: Users want to find affordable and healthy meal options that fit their budget.
Seamless purchasing: Users need a way to seamlessly purchase groceries directly within the app, eliminating the need for a separate shopping trip.
Step 2: Style guide integration
It’s now time to reference Figma’s style guide template and Fluent's design system and select the different categories to define your style guide. Follow the steps to add the template and design system to your Figma environment.
Figma’s style guide template
Download the provided Figma style guide template and explore the design elements, such as the color palette, typography, and buttons. Once the Figma file is downloaded, it will be ready to use!
Fluent 2 Design System
Navigate to Microsoft’s Fluent 2 Design System
Select Design: Dive into our Figma UI kits.
19. What should you do to prepare for applying design systems principles to existing mockups? Select the best answer.
- Examine the IA diagram and understand how different sections of the app are organized.
- Skip the review process and begin applying style guide decisions to your existing mockups.
- Review the user research summary and identify user needs related to the app’s interface.
- Conduct additional user interviews to gather more data.
20. Why is it important to create a style guide for your app's mockups? Select the best answer.
- To ensure that every screen in the app has a completely unique look and feel.
- To ensure consistency in design elements such as color palette, typography, and buttons across the app, enhancing user experience and brand identity
- To add complexity and variety to the app’s design, making it more visually appealing to users
- To make it easier to hand off the design to a different designer or development team.
21. Why is it important to apply the style guide decisions to your mid-fidelity wireframes? Select the best answer.
- To make the wireframes more interactive
- To increase the complexity of the wireframes
- To ensure user feedback on the app’s structure and flow is not influenced by distracting visual inconsistencies
- To add visual appeal to the wireframes
Style guides
Graded Assignment
22. Fill in the blank: ____________ serve as a reference for designers and developers, providing guidelines for visual styles like colors, typography, and imagery.
- Color palettes
- Spaces
- Icons
- Style guides
23. Fill in the blank: A ____________ ensures that a product's visual elements, such as typography, color schemes, and iconography, remain consistent across different platforms and applications.
- mood board
- UI inventory
- style guide
- design token
24. You're working on a design project with a team of UX/UI designers. What would be the advantage of using a design system in this collaborative environment? Choose the best answer.
- Enhancing the visual appeal of the final product
- Ensuring design consistency and reducing redundancies
- Automating the creation of design mockups and prototypes
- Streamlining user research and data collection
25. Which of the following principles are core to the Fluent 2 design system? Select all that apply.
- Expressive typography
- Adaptive layouts
- Accessible design
- Minimalist aesthetics
26. Which of the following features are commonly found in applications designed with the Fluent 2 design system? Select all that apply.
- Transparent backgrounds with blurred effects
- Vibrant, saturated colors
- Rounded corners on UI elements
- Highly stylized and decorative icons
27. Which of the following statements describes the relationship between Fluent 2 and accessibility? Choose the best answer.
- Fluent 2 relies on developers to implement accessibility features separately from the design system.
- Fluent 2 prioritizes accessibility by offering built-in tools and guidelines for inclusive design.
- Fluent 2 is inherently accessible due to its use of rounded corners and soft colors.
- Fluent 2 only focuses on visual aesthetics and does not consider accessibility in its design principles.
28. Which of the following elements contribute to a consistent design language? Select all that apply.
- Unified visual style for buttons and interactive elements
- Clearly defined spacing and margins between UI elements
- Varied placement of navigation elements throughout the app
- Unique illustrations and imagery for each screen
29. Fill in the blank: Incorporating a consistent ____________ can help users navigate the interface more easily and understand the relationships between different screens.
- icon set
- animation style
- navigation pattern
- color scheme
30. Which of the following practices would help you apply a consistent design language to your design? Select all that apply.
- Using a variety of fonts and colors for visual interest
- Reusing UI elements across different screens
- Referencing a style guide or design system for guidance
- Maintaining consistent spacing and alignment between elements
31. You are tasked with evaluating a design system's effectiveness. Which of the following aspects would you consider crucial to assess? Choose the best answer.
- The visual appeal of the design system’s website or presentation
- The clarity and comprehensiveness of the documentation
- The number of UI components included in the library
- The design system’s adherence to the latest design trends
32. Which of the following scenarios highlight the need for a design system or style guide? Select all that apply.
- A development team wants to increase the speed and efficiency of their workflow.
- A company is launching a new product on multiple platforms and wants to ensure a consistent user experience.
- A team of designers is struggling to maintain a unified visual language across different projects.
- A company is conducting user research to gather feedback on a new product feature.
33. Fill in the blank: In the context of design systems, a _____________ refers to a reusable piece of code or design element that can be easily incorporated into different parts of a product's interface.
- sitemap
- component
- user flow
- style tile
34. You are reviewing a set of UI designs for a new Microsoft application. Which of the following design elements are aligned with the Fluent 2 design system? Select all that apply.
- A rounded button with a subtle drop shadow
- A stark, high-contrast color palette with neon accents
- Motion that feels natural and responsive to user interactions
- Typography that prioritizes legibility and clear hierarchy
35. Fill in the blank: In Fluent 2, the concept of ____________ refers to the way that elements in a design respond to user interaction, providing visual and tactile feedback.
- accessibility
- hierarchy
- motion
- material
36. You are creating a mobile banking app. Which of the following strategies will help you maintain a consistent design language? Choose the best answer.
- Using different button styles for primary and secondary actions
- Varying the font styles and sizes for different sections of the app
- Creating custom icons for each unique function in the app
- Applying a standardized grid system for layout and spacing
37. Which of the following practices can help you maintain a consistent design language? Select all that apply.
- Experimenting with different layout structures for each screen
- Regularly referring to the project’s style guide or design system documentation
- Seeking feedback from other designers and stakeholders to ensure alignment
- Using a predefined set of UI elements and components
38. Which of the following scenarios indicate that a design system is effectively fulfilling its purpose? Select all that apply.
- Designers are able to quickly assemble new interfaces using existing components.
- The design system’s documentation is rarely updated or referenced by the team.
- Developers are frequently encountering inconsistencies between different parts of the product.
- The product’s visual design remains consistent across different platforms and devices.
39. You are a UX designer tasked with creating a consistent user experience across multiple platforms for a large e-commerce website. Which of the following would be the most beneficial resource to achieve this goal? Choose the best answer.
- Design system
- Design token
- User flow diagram
- Component library
40. Which of the following design choices would be considered compliant with the Fluent 2 design system's accessibility guidelines? Select all that apply.
- Using a color palette with high contrast between text and background
- Implementing consistent keyboard navigation throughout the interface
- Using small, decorative fonts for body text
- Designing interactive elements with clear focus states
41. You are an e-commerce website. Which of the following approaches is most effective for ensuring a consistent user experience across different product pages? Choose the best answer.
- Designing a unique layout for each product category
- Using a modular template system for product information
- Incorporating different navigation patterns for each product page
- Implementing a wide variety of interactive elements on each page
42. You are designing a multi-page website. Which of the following would be the most effective way to ensure visual consistency across all pages? Choose the best answer.
- Creating a unique color scheme for each page
- Establishing a master template with shared elements
- Using different navigation menus on each page
- Developing a custom icon set for each page
