UI Color Theory: Build Accessible Palettes in Figma

Unlock the power of color in UI design! Learn to build accessible color palettes that captivate users and meet WCAG standards in this comprehensive course.

Developed by Ruben Cespedes, Principal Product Designer at Dell Technologies and an Adobe Partner with over 20 years of experience, this course provides a step-by-step approach to confident color selection for any UI project. Discover how to use color to guide the eye, reinforce brand identity, and enhance usability – avoiding common pitfalls that lead to user confusion and accessibility failures.

What You'll Learn:

• Core Color Theory: Master the fundamentals of color theory, including hue, saturation, brightness, temperature, and contrast.
• Palette Creation: Learn simple, effective methods for selecting a base hue and expanding it into harmonious primary, secondary, and accent colors.
• Accessibility & WCAG: Thoroughly check color accessibility using WCAG tools and learn practical techniques for fixing low-contrast color pairs.
• Light & Dark Themes: Develop robust light and dark themes using scalable color tokens in both Figma and Adobe XD.
• Advanced Techniques: Explore gradients, overlays, and subtle background tints to add depth and visual interest.
• Brand Consistency: Work effectively with brand guidelines to ensure your color palettes align with both business objectives and user needs.
• Real-World Examples: Analyze real-world case studies showcasing successful color applications and common color mistakes.
• Hands-on Project: Apply your knowledge by redesigning two screens of an existing app or website. This includes:
  • Auditing existing palettes for contrast and hierarchy.
  • Building a new palette in Figma or Adobe XD.
  • Implementing the palette across various UI elements (headings, buttons, backgrounds, forms, icons).
  • Exporting a token sheet for developers and creating before/after mockups.
  • Receive direct feedback on your projects during Q&A.

Tools & Resources:

• Figma Starter File: Includes pre-built color styles and WCAG checker plug-ins.
• Adobe XD Template: Provides ready-made variables for efficient color management.
• PDF Cheat Sheet: A concise guide to color terminology and quick contrast ratio calculations.
• Bonus eBook: "Conquering UI Design" (over 5,000 copies sold) – a 100-page resource to reinforce your learning.

Who is this course for?

• UI/UX Designers: Looking for reliable color workflows.
• Graphic Designers: Transitioning into digital product design.
• Product Managers & Developers: Reviewing and managing color tokens.
• Anyone seeking visually appealing and accessible palettes for their projects.

No coding experience is required. A basic familiarity with Figma or Adobe XD is sufficient.

Join today and master the art of color! Create interfaces that are not only beautiful but also clear, engaging, and accessible to all users. I'll be actively participating in the course to provide support and guidance.