Learn

Most of us have had the embarrassing experience of not knowing whether to push or pull a specific door handle. In these situations, is it our fault – or can we blame the door? When we see a door handle like the one pictured below, we are probably inclined to pull. This is because the shape of the handle affords pulling. If it turned out that this door needed to be pushed, that would be a confusing experience!

A door handle on a transparent glass door, which extends from the door in a shape that a person could grasp and pull.

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.

As we’ve learned from Usability Heuristic #2: Match between system and the real world, people tend to recognize design patterns from the physical world. As digital designers, we can build off what people already know to create the most intuitive designs possible.

As more of design moved into virtual spaces, many virtual designs relied on skeuomorphism, a design style that imitates physical designs, to reference a familiar pattern. For example, the J37 Tape plugin by Waves was designed to imitate a J37 tape machine.

A physical tape machine with two tape reels and a series of buttons and knobs, alongside a screenshot of a digital plugin, the Waves J37 Tape, that closely imitates the physical tape machine.

As more time has passed, we’ve seen new fully digital design patterns emerge, such as flat design. This style of design, which typically uses two-dimensional design elements and bright colors, can be cheaper, but can struggle with clear affordances. As digital literacy has increased and people have become more familiar with digital design, it has become more possible to use flat design while creating an intuitive user experience.

Continuing on the music theme above, the popular music production software Ableton Live uses flat design.

A screenshot of a digital music plugin from Ableton Live, with two-dimensional knobs and meters in simple colors.

As designers, we should consider how to take advantage of familiar design patterns to help people easily navigate our designs and reduce cognitive strain. We can do this by referencing existing design patterns, and by creating design systems to ensure consistency within a given brand or product.

In this lesson, we’ll cover some common design patterns and best practices for working with design systems as you design entire user flows. Let’s get started!

Instructions

Press “Next” to start learning about working with design patterns and design systems.

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?