Checklist Design
📃 Pages🧱 Elements🌊 Flows💡 Topics🖌️ Brand
👋 Check-Ins
Checklist Design
🏠 Home📃 Pages🧱 Elements🌊 Flows💡 Topics🖌️ Brand🛎 Check-Ins
🎨

Colors

Colors represent your story in a product's interface. They inform the mind emotionally and intellectually on what's happening, and what decision to make next. In short, color is all about influence.

The color of a button influences how a user reacts to its intent. The color of a brand influences a user's choice to commit. The contrast, depth and saturation of color all influence how an element is communicated. A good experience lets color effectively influence.

Checklist

Color psychology

How color can impact how people think, feel, and act

⭐️ Utilise the psychology e.g. destructive button is red, approved message is green

⭐️ Research the cultural differences in color, dependent on who your audience is

⭐️ Don't add colors just for appearance, they will always communicate something to the user

Branding values

How your brand colors incorporate into the experience

⭐️ Primary, secondary and tertiary brand colors can translate the hierarchy of actions

⭐️ Color can represent your brand's style: traditional or modern, fancy or grungy

UI states

Showing success, error and warning elements through color

⭐️ Don't rely on color only to convey state, combine it with information e.g. explain there is an error when an element's color changes to red

Contrast

How colors combine in a purposefully different way

⭐️ Change your design to grayscale to test contrast from hue and value intensity

Combinations

How colors work together as a palette

Articles
The role of color in UX
Toptal
Color Theory: brief guide for designers
Tubik
Designing With Color Contrast for Improved Usability
Awwwards
Tools
Coolors
Adobe Color Wheel
Culr
Other
topics
View all
Purple arrow indicating card for topics content is a link

🚹

Accessibility

🌑

Dark mode

🔤

Typography

✍️

UX writing

Checklist Design
Created by George Hatzis
PagesElementsFlows
TopicsBrandApp
Check-InsAboutPrivacy
This website was made with Webflow (affiliate link).