Concept 2: Design Principles Part 1 Color Theory
🎨 Welcome to Your Color Magic Adventure!
Design Principles Part 1 - Color Theory
🎯 Today's Super Mission
Get ready to become a color wizard! Today we're diving into the amazing world of colors and learning how they can make people feel happy, excited, calm, or even hungry! You'll discover the secret behind why McDonald's uses red and yellow, and why your favorite games use certain colors!
📋 Prerequisites
- Required Knowledge: Understanding of basic UI/UX concepts from Lesson 1
- Technical Skills: Ability to use a web browser and navigate design tools
- Design Experience: Basic understanding of what makes good visual design
- Previous Lessons: Concept 01 - Introduction to UI/UX Design
⏱️ Time Requirements
- Preparation: 5-10 minutes (opening color tools, reviewing color wheels)
- Core Activity: 30-40 minutes
- Extension Tasks: 15 minutes (optional color palette creation challenges)
- Total Estimated Time: 45-60 minutes
Agenda
- Basics of Color Theory
- Color Harmony and Palettes
- Psychological Impact of Colors
- Color Accessibility in Design
- Applying Color Theory in Figma
Introduction to Color Theory
Definition: Color theory is the collection of rules and guidelines regarding the use of color in art and design.
🌟 Fun Design Fact!
Colors are like magic spells! They can make you feel different emotions without you even realizing it. Ever notice how YouTube's red makes you excited to click? Or how Spotify's green feels fresh and fun? That's color magic!
The Color Wheel
Primary Colors: Red, Blue, Yellow
Secondary Colors: Green, Orange, Purple (created by mixing primary colors)
Tertiary Colors: Combinations of primary and secondary colors
🤔 Design Thinking Moment Why do you think there are only three primary colors? What makes red, blue, and yellow so special that they can create all other colors? How might understanding color relationships help you design better interfaces?
💡 Try This!
Think of the color wheel like mixing paint in art class! When you mix red and yellow, you get orange (like a sunset!). When you mix blue and yellow, you get green (like grass!). It's like a recipe for making new colors!
Color Harmony
- Complementary: Colors directly opposite each other on the color wheel.
- Split complementary: A base color plus the two colors on either side of its complement.
- Analogous: Colors that sit next to each other on the color wheel.
- Triadic: Three colors evenly spaced around the color wheel.
- Tetradic: Four colors forming a rectangle (two complementary pairs) on the wheel.
- Square: Start with key color to start then identify the other colors that are equidistant (Square)
- Monochromatic: Different shades and tints of a single color.
🌟 Fun Design Fact!
Color harmony is like creating the perfect team in your favorite game! Some colors work perfectly together (like red and green in Christmas), while others create exciting contrast (like orange and blue in finding Nemo!). The best designs use colors that are BFFs!
Color Properties
Psychological Impact of Colors
| Type | Colors | Impact |
|---|---|---|
| Warm Colors | Red, orange, yellow | Energy, Warmth |
| Cool colors | Blue, Green, Purple | Calm, Trust, Peace |
| Neutral colors | Black, White, Gray | Balance, Sophistication |
Color Associations:
- Red: Passion, urgency
- Blue: Trust, stability
- Green: Growth, health
- Yellow: Happiness, caution
- Purple: Luxury, creativity
🤔 Design Thinking Moment How might cultural differences affect color perception in global app design? If you were designing an app for users worldwide, how would you research and account for different cultural color meanings?
💡 Try This!
Next time you're in a fast-food restaurant, look around! Notice how many use red and yellow? That's because red makes you feel excited and hungry, while yellow makes you feel happy and cheerful! It's like color psychology in action!
Cultural Considerations
Be aware of different meanings in different cultures. A good example is:
- Yellow:
- Good in Thailand - Represents royalty.
- Bad in France (historically) - Used to symbolize betrayal and jealousy.
- White:
- Good in Western - Symbolizes purity, peace, and weddings.
- Bad in some Asia - Associated with mourning, death, and funerals, especially in China and India.
🌟 Fun Design Fact!
Colors are like different languages around the world! The same color can mean totally different things in different countries. It's like how a thumbs up means "good job" in some places but might be rude in others!
Color Accessibility
- Contrast Ratios: Importance for readability
- WCAG Guidelines:
- Minimum contrast ratio of 4.5:1 for normal text
- Use tools to check contrast (e.g., WebAIM Contrast Checker)
- Designing for Color Blindness:
- Use patterns and textures in addition to color
- Avoid problematic color combinations (e.g., red and green)
Applying Color Theory in UI Design
- Creating a Color Palette:
- Start with a base color reflecting brand identity
- Use color harmony principles to select additional colors
- Best Practices:
- Limit the number of primary colors (usually 2-3)
- Ensure sufficient contrast between text and background
- Test colors on different devices and lighting conditions
Using Color in Figma
- Color Styles:
- Create reusable color styles for consistency
- Organize colors into categories (e.g., primary, secondary, accents)
- Applying Colors:
- Demonstrate how to apply colors to shapes, text, and components
Plugins and Resources
- Introduce Figma plugins like "Color Blind" simulator
- Use resources like Adobe Color for palette inspiration
Case Study - The Use of Color in the Slack Interface
Objective: Analyze how Slack utilizes color to enhance usability, brand identity, and user experience.
Discussion Points:
- How does Slack's color scheme support its brand identity?
- In what ways does the ability to customize colors enhance the user experience?
- How does Slack address accessibility in its use of color?
🔧 Troubleshooting Guide
Common Issue: Can't Access Figma Color Tools
Symptoms: Figma website won't load, color picker not working Solution:
- Check your internet connection
- Try a different browser (Chrome/Firefox work best)
- Clear browser cache and cookies
- Try Figma desktop app if browser version fails Prevention: Bookmark Figma.com and use a modern browser with stable internet
Common Issue: Colors Look Different on Different Screens
Symptoms: Color palette looks different on phone vs computer Solution:
- This is normal - screens have different color calibrations
- Test your designs on multiple devices when possible
- Use standard web-safe colors for consistency
- Focus on color relationships rather than exact shades Prevention: Always consider how colors will look across different devices
Common Issue: Trouble Creating Color Harmony
Symptoms: Colors clash or don't work well together Solution:
- Start with a color wheel tool or app
- Use proven harmony rules (complementary, analogous, triadic)
- Begin with 2-3 colors maximum
- Use online color palette generators for inspiration Prevention: Practice with simple color combinations before complex palettes
Common Issue: Accessibility Concerns with Color Choices
Symptoms: Text is hard to read, fails contrast checks Solution:
- Use WebAIM Contrast Checker tool
- Ensure 4.5:1 contrast ratio minimum for normal text
- Don't rely on color alone to convey information
- Test with colorblind simulation tools Prevention: Always check contrast ratios and use colorblind-friendly palettes
🔑 Key Takeaways
- Main Concept: Colors evoke emotions and can dramatically impact user experience and brand perception
- Design Skill: You can now create harmonious color palettes and understand color psychology
- Tool Mastery: Understanding of color wheel, harmony rules, and color accessibility principles
- Real-World Application: Professional designers use color psychology to influence user behavior and create memorable brand experiences
📋 Quick Reference
- Important Terms:
- Primary Colors: Red, Blue, Yellow (cannot be created by mixing)
- Secondary Colors: Green, Orange, Purple (made by mixing primaries)
- Color Harmony: Pleasing color combinations based on color wheel relationships
- Contrast Ratio: Measurement of color difference for accessibility (minimum 4.5:1)
- Figma Shortcuts:
- I: Eyedropper tool to sample colors
- Ctrl/Cmd + C: Copy color styles
- Design Pattern: Use color psychology to guide user emotions and create cultural-appropriate designs
🎉 You Did It!
Amazing work, color wizard! You've just mastered the magical world of colors! Now you understand why your favorite apps use certain colors and how they make you feel. You're ready to create designs that can make people happy, excited, or calm just with color choices!
💡 Try This Challenge!
Look at 3 different apps on your phone and identify what emotions their main colors are trying to create. Is TikTok trying to be fun and energetic? Is a meditation app trying to be calm and peaceful? You're now a color detective!