Learn Color For UI

Learn how the judicious use of color and contrast can help make website user interfaces easier to navigate.

Start[missing "en.views.course_landing_page.learn-color-design.course_illustration" translation]
Color for UI
Lesson 1 of 1
  1. 1

    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 y...

  2. 2

    Contrast is a great way to differentiate elements on a page. However, by doing so to all elements, it can cause a cognitive overload for users. When there are a lot of competing elements, everythin...

  3. 3

    Each company, whether it be an internet startup, a sports team, or a multinational clothing label, has a defined brand color. For instance, Facebook has its iconic blue, as does Twitter, while Coca...

  4. 4

    While brand colors typically dominate the makeup of a web site, accent colors are equally important. These supplementary hues provide small pops of color within your designs and can be used to draw...

  5. 5

    Buttons are one type of element where accent colors can be used effectively. As these provide ways for the user to navigate, submit a form, or move onto the next task, the color of a button can det...

  6. 6

    Form inputs are another type of component that use color to indicate an action to a user. Similar to buttons, form inputs have certain states. There is the default state, which is how the user vie...

  7. 7

    In addition to your brand and accent colors, you have to remember to provide additional indications to the user when something goes right or wrong. People make mistakes. We're all human. So when d...

  8. 8

    Next, let's discuss default or structural colors. Almost every site you design will incorporate black, white, and shades of gray in some way. These default colors are used often as the color for te...

  9. 9

    It's important to consider how contrast will also be affected when using different colors for backgrounds and text. Neutral colors, or hues with low lightness and/or saturation, make for good base...

  10. 10

    Space is an important aspect of creating balanced and harmonious layouts in web design. As a designer, it's important to understand how space can enhance as well as hurt your designs. Whitespace, ...

  11. 11

    Making sure that the colors you choose for your UI components are accessible is a really important aspect of visual design. Using contrasting colors will help users that need assistance understan...

  12. 12

    As a Visual UI designer, aesthetics are important to the overall user experience. However, if usability and aesthetics conflict, it's always best to err on the side of usability. Testing and itera...

  13. 13

    Congratulations! You gained some knowledge on using color for UI design and how to ensure your websites are usable while remaining aesthetically pleasing. Remember, the keys to designing for UI: ...

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo

Learn Color For UI

Start[missing "en.views.course_landing_page.learn-color-design.course_illustration" translation]