That’s a wrap! In this lesson, we got an overview of how to design user interactions and flows using existing design patterns and design systems. After this lesson, we hope you feel ready to tackle some larger-scale design problems and build larger flows and interactions beyond a single wireframe view, while optimizing for both user needs and business goals.

Here’s a summary of what we covered:

  • An affordance is what an individual expects can be done with an object given its properties and their own abilities. Designing with affordances in mind ensures that a user’s expectations of a given design align with what will actually happen when a particular action is taken.
  • Skeuomorphism is a design style that imitates physical design, to reference a familiar pattern, while flat design typically uses two-dimensional design elements and bright colors.
  • Design patterns are standardized solutions to common design problems, such as progress indicators, date pickers, and search results. Designers should always consider the user needs and business goals of a product to choose the best design pattern.
  • Design components are specific examples of elements that might exist within a given context. For example, a button designed in accordance with the style guide for a specific website section would qualify as a component.
  • Pattern libraries are repositories of reusable design patterns which focus on layouts that could include multiple components and focus on content structure. Pattern libraries can refer to both public listings cataloging design patterns from across the web, and internal pattern libraries used within a specific company’s design system.
  • Dark patterns are tricky or deceptive design patterns used in websites and apps that make users do things that they didn’t intend to. While dark design patterns may lead to short-term business gains, they ultimately diminish trust over time and do a disservice to the people using our designs.
  • Design systems are repositories of reusable components and patterns that can be used across a team or organization to ensure consistency across all design output. They often contain a style guide, component library, and pattern library.

Next, we’ll be applying these lessons to design wireframes for an entire product.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?