Colors are beautiful

An educational tool for novice art learners

 

Date: 2018

TYPE: Programming, Web Design, UX, Interaction Design - project at the CMU HCII - Programming User Interface Final Project

 

 

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.

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.


How is it interesting and engaging - In term of the design of the site, 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.


The target audience - Novice art learners


External Tools (Javascript Libraries referenced)

Anime - http://animejs.com/

Fade Animsition - http://git.blivesta.com/animsition/fade/

Hamburgers - https://jonsuh.com/hamburgers

jQuery - https://jquery.com/download/

Bootstrap - https://getbootstrap.com/docs/3.3/javaScript/