Learn
Color for UI

Introduction

When diving deeper into the use of color in web design, there's more to creating a usable experience than just selecting beautiful, harmonious colors.

While aesthetics can enhance the display of your website, an important part of being a designer is ensuring your audience understands how to interact with your product and make effective decisions to solve their goals.

As you continue to grow as a designer, you'll begin to look at a site holistically through the eyes of a user. More importantly, when it comes to color, applying the right hues to actions and messaging that the user will perceive and act on will be a powerful tool to improve the UI of your site.

In this lesson, we'll explore

  • How to use contrast to imply hierarchy on a page and draw a user's attention
  • How to establish brand and accent colors and then how to properly apply them
  • What states are necessary for buttons and forms
  • How to properly provide feedback on error, success and warning messages
  • How to use neutral colors to effectively communicate your content
  • Why whitespace is important to the usability and aesthetic quality of your designs
  • How to ensure your website is usable for all individuals

We will be applying the knowledge you learn during this lesson to update the wireframe to your right.

Please note that the browser view of the website has been scaled to fit the viewport's size. If you expand your browser view the site will change based on the viewing area.

Let's begin by talking about contrast constraints.

Instructions

Move on to the next exercise when you're ready!

Community Forums
Get help and ask questions in the Codecademy Forums
Report a Bug
If you see a bug or any other issue with this page, please report it here.