Color for UI
Lesson 1 of 1
  1. 1
    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 y…
    Start
  2. 2
    Contrast Constraints
    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…
    Start
  3. 3
    Brand Color
    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…
    Start
  4. 4
    Accent Colors
    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…
    Start
  5. 5
    Buttons
    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…
    Start
  6. 6
    Forms
    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…
    Start
  7. 7
    Semantic Colors
    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…
    Start
  8. 8
    Default Colors
    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…
    Start
  9. 9
    Neutral Colors
    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…
    Start
  10. 10
    Whitespace
    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, …
    Start
  11. 11
    Accessibility
    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…
    Start
  12. 12
    Iterations
    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…
    Start
  13. 13
    Review
    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: …
    Start

What you'll create

Portfolio projects that showcase your new skills

How you'll master it

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