Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Exercise 4: Apply Color to Website Wireframes


Using the same Figma file provided, navigate to Exercise 4: Apply Color to a Wireframe. Follow the instructions listed here:

  • Create a color palette of 3 colors and apply your color palette across all of the provided wireframes
  • The color palette should feel energizing, tech-forward, and inviting
  • You may choose any type of color scheme you’d like but keep in mind color harmony
  • If you want to use black, that does count as one of your three colors
  • Remember to balance out your color application with the addition of white space


  • Be strategic about you application, often times less is more
  • Remember your design principles. Find places to utilize repetition of color, and use color to aid your hierarchy
  • Keep in mind contrast and legibility in your choice
  • You do not need to add images or apply color to the image placeholder icons
  • If you begin to feel stuck or uninspired, take a look at design blogs, Pinterest, or Behance for some inspiration


After you are finished, be sure to share your Figma link with your instructor so they can review what you’ve done. If you plan to discuss your color exercises in your next session, be prepared to share your screen.

Assignment Submission
Scroll to Top