Color Theory of Me Interactive Experience

Skills: Creative Direction, UI Design, Branding, Creative Writing
Tools: Figma, Adobe Illustrator, Adobe Photoshop

Created in spring 2025 for Digital Storytelling

“Color Theory of Me” is a digital, interactive memoir built in Figma that blends personal storytelling, color theory, and UI design. Created for a digital storytelling class, the project uses interactive layouts and microinteractions to explore how color shapes emotion, identity, relationships, language, and expression. Each section is uniquely styled based on its thematic content, with shared UI elements for cohesion.

Process Highlights

  • Wrote and structured a “braided essay”—a type of creative nonfiction that nonlinearly weaves different narrative threads related to a single topic—that combined personal narrative with color theory research
  • Created mood boards and gathered visual references (palettes, color systems, swatches)
  • Designed six interactive sections, each with a unique layout and interaction model
  • Maintained cohesion through consistent UI elements (navigation, type, spacing, transitions)
  • Used microinteractions and non-linear navigation to support user exploration and braided essay format

Content & Design

Each section of the site mirrors the content it explores—for example, the “Color as Relationship” section uses a color wheel, while “Color as Language” features a paint-swatch book. These designs create both visual interest and narrative clarity. Despite the variety, users navigate consistently through recurring elements like typography, spacing, and navigation (below).

  • Introduction: Sets the stage with the history of my color fascination and the basics of color theory. Black and white, minimal layout with ample white space.
  • Color as Emotion: Connects my personal associations of colors with moods, musics, seasons, and more to cultural and psychological color associations. Painter’s palette with clickable swatches.
  • Color as Identity: Blends my fashion evolution with research into color-personality theory. Gradient timeline of my favorite colors through life stages.
  • Color as Relationship: Explores how I use color to organize and design spaces, and how color theory principles like harmony and contrast influence those choices. Interactive color wheel.
  • Color as Language: Shows how I and others interpret and describe color through idioms, words, and metaphors. Swatch book with flip-card interactions.
  • Color as Expression: Showcases personal and historical artwork with “gallery label” captions explaining color choices. Horizontal scrolling museum gallery.

Please note that as this was created for a class project in which we merely proposed our story as if we were trying to receive funding for its full creation, it is an early mockup and is not finalized.

Key UI/UX Takeaways:

  • Designed with user autonomy in mind: users can explore non-linearly, as each section stands alone.
  • Balanced aesthetic variation with structural consistency to reduce cognitive load.
  • Incorporated storytelling mechanics (like section-specific interactions) to reflect the meaning behind the content.
  • Maintained accessibility through clear hierarchy, readable type, and simple navigation.