Learn

Earlier in this lesson, we discussed design patterns in depth. Design patterns are made up of smaller, more static design components, such as buttons, menus, and form fields, which are typically documented in a brand’s design system.

As an example, let’s think about the role of buttons in digital design.

Within early digital interfaces, many buttons were skeuomorphic and imitated physical designs. For example, a play button on a music player might have resembled the play button on a radio.

As digital design has evolved, users have come to recognize both skeuomorphic and flat design buttons as clickable elements that will cause some sort of action, whether it’s navigating to the next step in a flow, submitting a form, or activating a feature.

In summary, buttons are clickable elements often used to highlight certain calls-to-action or links on a website. They are a common design pattern used across all kinds of websites and applications.

In designing buttons, we should consider questions like:

Where does a button make sense over a text link or other clickable element?
Buttons are associated with some of the actions that a user needs to take. For our flight booking example, this might mean using buttons for submitting the search form and to book the selected flight.

What text should be included on the button?
Text on buttons should be concise and make it clear what action will occur once the button is clicked.

How will users know the state of the button?
Does the button change color or style on hover or when it is pressed?

What different types of buttons will exist in this design system?
Should there be different button styles for primary and secondary calls-to-action (CTAs)? What color should a “delete” or “disable” button be, versus a button that advances a positive action? Does the “submit” button for a form have a special style compared to other call-to-action buttons?

As we design buttons, we can reference some existing design pattern listings, such as Buttons on Patternfly and Buttons on UI Guideline.

Instructions

With the questions from the exercise above in mind, examine the button styles to the right. Consider the usability heuristics and UX design best practices we’ve discussed in earlier lessons.

Which styles do you think best match the design of the system to the real world? Which styles do you think appear the most clickable? How might you alter each of these styles to design complementary primary and secondary buttons for the same website?

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?