Nature’s Palette
Interactive website and handbook for user to learn palettes from nature lifebeings.
Interactive Design | Visual Design
This is a collection of color palettes from nature lifebeings, including most popular orchids (from Smithsonian Gardens orchid Pinterest collection), rarest butterflies in the world, and most poisonous frogs in the world.
I selected 10 species for each palette, and then used their picture (without background) to calculate the color proportions of their flower / wings / skin. The tool for such calculation is Image Color Summarizer built by Martin Krzywinski. This tool produces descriptive color statistics for an image. Reported will be the average, median, minimum and maximum of each component of RGB, HSV, LCH and L*a*b*. The color clustering function in this tool shows the representative colors of the image converged by the k-means algorithm.
Beside the palette bars, I assigned a background color for each palette. For orchids, the background is white, indicating the sky. For the butterflies, the background is green, implying leaves — most of the butterflies pictures are they staying on leaves. For the frogs, the background is brown, standing for the earth. It is nature’s amazing design that colors these lifeforms beautifully in the background. And I'm glad — and honored — to present these palettes.
· · ·
Word Map of Lyrics
Word map of lyrics which visualizes the pitch and total interval of words from three songs.
Visual Design | Typography
These word maps of lyrics visualizes three songs: Haydn’s “Kyrie” from Missa in tempore belli (“Paukenmesse”), Beethoven’s Symphony No. 9 “Choral” Mvt. 4, and Carl Orff’s “O Fortuna” from Carmina Burana, based on the algorithm interplaying each word’s pitch and total interval, thus objectively demonstrates the musical energy of these songs.
Each word’s y-position indicates its pitch, and the font size scales to such pitch’s total interval in the entire song: the higher a word’s pitch is, the higher its location will be; the longer a word’s total interval is — it is either repetitive or sustaining, or both — the larger its font size will be.
Haydn: “Kyrie” from Missa in tempore belli (“Paukenmesse”)
The white background and golden glowing words present a metaphor about this song — Purest prayer to God and Heaven.
Beethoven: Symphony No. 9 “Choral” Mvt. 4
The dark background and golden glowing words present a metaphor about this movement — For human who stands in gloom but keeps his quest for heaven and hope.
Carl Orff: “O Fortuna” from Carmina Burana
The red background and black shadowed words present a metaphor about this song — Strong passion, desire and fate from the hell.
· · ·
Poster Series for William Shakespeare Plays
Poster series designed for William Shakespeare plays: Macbeth, Romeo and Juliet, and Othello.
Visual Design | Typography
The main colors in this poster series, red and black, express the strong emotions in these three plays. I also use representative symbols for each play: bloody female hand for Macbeth, drug (in heart shape) for Romeo and Juliet, and handkerchief for Othello.
· · ·
Music on the Cloud
Interactive website for user to manually create sound clouds and enjoy harmonies among them.
Interactive Design | Front-End Development
This website was designed to provide an peaceful and enjoyable experience which connects color and music notes together, and then brings harmonies in both music and color aspects. User can enjoy the scene and sound they create.
· · ·
DesigningMultiplicity Logo Generator
An interactive logo generator for students to design their own thesis project logo in thesis show.
Website Design | Interaction Design | Front-End Development
This was a website I built for the MFADT thesis show 2015: an interactive logo generator using HTML5 / CSS3 / jQuery, with a GUI for students to design their own thesis project logo. I was invited by the MFADT thesis show’s preparatory team; they designed the graphics and concept and I implemented the functionality.
· · ·
Parsons × NWS
Interactive animation that was synchronized and projected with live-performed music.
Interactive Animation Design | openFramworks Development | Collaborated with New World Symphony
This was a project we collaborated with New World Symphony at Miami as a team for a course project. I created an interactive animation using openFramworks, which synchronized with a live-performed music piece “Beauties on Parade” within a suite “Hollywood Carnival”. The animation was projected to five big screens in a concert hall behind the Symphony.
· · ·
Good? Good. Good!
Interactive parallax website designed to inspire people to have a good mood to start a new day.
Website Design | Interaction Design | Front-End Development
This was a website I designed and implemented for a class project during my first semester at Parsons MFADT. It was created to inspire people in the morning and let them have a good mood to start a new day.
· · ·
She Shines Brand Website
Portfolio website designed for a jewelry design and metalworking brand.
Website Design | Branding
This was a portfolio website built by my design studio for a jewelry design and metalworking brand. I designed a neat and elegant style for this brand to harmonize with the character of the founder’s creations and herself. My fellow teammate and I also applied the full-viewport presentation to highlight the jewelry and metalworking products.
