Learn

You’re a new designer starting a job at a company that makes photo editing software. The company already has a well-established web presence. You’ve been tasked with designing a searchable gallery of images users have created using the software. Where would you begin?

If the company has a well-documented design system, our lives probably just got a lot easier!

Design systems often include, according to the Nielsen-Norman Group:

  • Style guide: Style guides are often focused on visual design and branding. For example, what are different colors used for? How should the logo be treated? How are different typefaces used? How large should header text be? Some style guides may include further guidance on written content, UX copy, or interaction design.
  • Component library: Component libraries are repositories of reusable design components that designers can easily copy into new designs. For example, if a designer needs to add a button to an input form, they could copy a component from the component library.
  • Pattern library: Pattern libraries are repositories of reusable design patterns which focus on layouts that could include multiple components and focus on content structure. For example, a login pattern might include multiple components such as a header, text input fields, a button, and potential error or success indicators.

These systems allow UX and UI designers to focus on the flow of user behavior, rather than needing to redesign specific components every single time they come up. They also keep design consistent for users. There’s still room for creativity, but a lot of repeat effort is saved on problems that have been solved before.

Different organizations document their design systems differently, and different aspects of the system may live within different tools. For example, some organizations might maintain an internal wiki with their style guide, while their component library is maintained in digital design software like Figma or Adobe XD for easy duplication into new design prototypes.

Instructions

We need to design a pop-up that allows existing users to log in and add photos to the gallery on the website. We can copy components from the company’s existing design system to create a design that’s consistent with the existing brand guidelines.

Use the component library to the left to wireframe a login pop-up in the workspace that includes the following:

  • A pop-up that will display over the current page
  • Two text input fields for username and password
  • A “Log In” button using the “Primary Button” style
  • A “Create an Account” button using the “Secondary Button” style for users who might have clicked the wrong button initially

NOTE: Right-click on elements to be able to change properties about the element, including text and colors.

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?