Colorwheel - Front-end Coding Project

An responsive website I designed and coded for novice art learners learn colors

Play with the interactive tool!

Context: CMU HCII, Programming Usable Interface Course Project, Individual Work

Skills and Tools: HTML, CSS, Javascript, Bootstrap, jQuery, Visual Design, Micro Interaction DesignPrototyping

Brief

This website is a place for novice art learners to learn color wheel and to test resultant colors when blending two colors. The reason why I’m particularly interested in this topic is that color is one of the key ways to describe and categorize our visual world. Better understanding colors provides learners a more precise way to understand the world and describe it. The gist of this site is that starting with just three primary colors, we can get all the colors of the rainbow.

Play with the interactive tool!

Github: https://github.com/TANJIASI/PUI_Final_preview

01

Content

The website has two parts, the first is the most fundamental and important color theory, the Color Wheel, found under the “Learn the Color Wheel” tab. The other is a supporting tool for them to test resultant colors when mixing colors found under the “Try the Blending Tool”.

Color wheels show us how colors are related and what are primary, secondary and tertiary colors. There are three sub pages under the Learn the Color Wheel section, which are primary colors, secondary colors and tertiary colors. The Blending tool is where users can actually test resultant colors when mixing any two of the colors from primary, secondary, and tertiary colors.

The two main parts are a combination of receptive learning and active learning. By looking at the colored canvas with color names and description overlaid, the learners could remember better the colors receptively. The color tool, on the other hand, gives learners opportunities to blend by themselves in a more exploratory way.