Page 1

Project No.1 The Dream Painter

1. Inspiration & Definition

Interactive Responsive Website Group Project Summer 2015 Vancouver,Canada

View Our Site: More Details: the-dream-painter The Dream Painter

It was the spectacular works of Ruslan Khasanov,a visual artist from Russia,inspired me and my team. After we observed her works done with pigments, oil ,and soap, those three elements creates wonderful pictures together, it seems dreamy and romantic.

is an interactive Website published in 2015 , it

was a summer session project during my study in the Centre for Digital Media(SFU).

Art works by Ruslan Khasanov, As an interactive website with visual shock,my team and I expect that The Dream Painter could not only be a chic visual website, but also to provide more inspirations or use as wallpaper as well as other visual uses,even for further business use like graphic production or an online Plug-in for designers’s daily works and inspirations. As an old saying goes in China “What you dream at night reflects your thought of the day,," The website is projected to allow user to upload a life photo of theirs, thus generating a whole brand new interaction page which due to the 5 colors of their photos. This generated motion could interact by user’s mouse move or gestures.

Yufei YAO (Michelle) Project Manager HTML Programmer Interaction Designer

After searching for lots of visual experimental websites, we decided to make something rather shocking&stunning than simply “useful”. For intense,the “I remember” is an interactive visual website allows people to upload their photos, store it as a memory. The interaction with mouse move and the shocking interface was really a great experience!

Other Group Members: Atom YE WebGL Programmer

Inspiration: Website “I Remember”&”Christmas Experiments”

Limon ZHANG Visual Designer


Produced in Center For Digital Media, Year 2015.


2. Brianstorming & Planning

3. Design Research & Interviews

Allowing pictureuploading and information collecting. Ashely | 24 As a design student myself, I particularly like colourful designs and graphics.I usually save those great design websites to my own folder, and also fascinated about products with great packing;)!

Express user’s Dream. Chloe | 19 I started to notice lots of products nowadays have those beautiful covers! Most of them are artistic stuff like soap,bath salts , with the well-designed pack I could sometimes buy those stuff when I don’t need them, simply because I love the patterns and design.

Save&Share the generated Motion.

Overall Audio & Visual Effects

I tried a game called “Journey”once, don’t know whether it count as a visual website, but the atmosphere and design was so cool!I love this kind of websites, maybe they do not have particular function, but still could makes me occupied in my leisure time!

Adjust the generated page by user themselves.

David | 25 My favourite Website might be Instagram!I usually l see other friend’s works on it .For products with delicate packs, I can’t get my eye off them!


After group discussions & brainstorming, we decided several main themes we would like to conduct further researches.(See above) During the daily works , we worked out the research methods and some basic instructions to works on later.As we decided to make an interactive website, though the whole design theme remain uncertain, we are fully motivated with this program;)

Helen | 24 I’ve seen few interactive websites before as for I remember,it was truly fun and unforgettable!Working as a designer, I love those brand new experiences and visual designs, they make me feel delighted!


In order to explore our design visions,we interviewed 6 young adults about their favorite visual websites,their opinion about visual design,what they are pursuing when the visit those websites,and what they feel about well-designed products with nowadays with visual shocked covers, etc.

Taylor | 23 For me I haven’t really seen any impressive visual websites, during my daily life I love to pick out some presents for my friend with creativity and visual-design elements! I tried VR once in a shopping mall ,that was absolutely brilliant experience!I love the way to interact with the change environment,with gestures and my positions.And I love the feeling of participation.

Courtney | 22 I usually use Pinterest and Wehearit to get more pretty pictures!Although it’s not that often for me to visit visual websites particularly, I still enjoy the extraordinary design cloths with great patterns! I like those abstract lines and patterns.

4. Vistion Statement

5. First Prototype & User Participation

After the interviews, & design researches, we decided the Vision Statement for “The Dream Painter(Dream-Paint)”,would be like:

In order to explore the interaction and our color-capturing core function, we held a user test with physical prototypes.


User could experience the fantastic chemistry as the work done by Ruslan Khasano, using pigment,soap and oil to create a motive prototype.

As the website caculated Top 5 colors, we use pigments to recreate those colors.

Add soap and oil to create fansy effects by user themselves. Interview each user about this experience.

We invited about 10 MDM students to join our user test;)

LOGIC FLOW Take a picture Via Mobile in Daily Life.

We let all users pick 1 photo from their phone and upload to the prototype website.

Upload to our website.

Create a brand new interactive motion.

Let user to “draw” with those colors.

Capture 5 main colors from the picture.

Color Capture System is one of our core feature, we developed it using the knowledge of: (i).Javascript:get the information of HSV data of each pixels of the picture, divided into few ranges, define which 5 is the most common color. (ii).HTML5 Canvas: “re-paint” it on the website.

Shake the box to create a mixture or whatever they enjoy;)

Analyse the feedbakcs.

We asked 10 users 9 questions about this prototype using experience. The questions were designed aiming to reflect whether user thing it’s dreamy,fun,cool,and interesting enough visually. The answer to these questions are generally positive, 8 out of 10 users think it’s dreamy but 2 of them thinks it’s too abstract to be a dream. Furthermore,some users added that it would be great to have a digital Website online so they could share their “work” to social media platforms.This provides us more inspirations.



6. Visual Design & Coding

CODING As well as contributing the visual design part, we got down to coding the whole website in order to make it launched successfully on time.

When we get down to visual design, we confirmed the format we would like to generate: A main elements(as a ball), few surroundings(as the triangles in the picture), and the overall colors and atmosphere, expressing the dreamy feelings and emotions.

Click the button to upload your life photos;)

The Ball could be seen vigorously in the starting page, becoming clear gradually with the upload process.

Our used techniques including basic Web Script Languages like: HTML5 for the whole framework,CSS3for the animations and effects ,Javascript for data transmission We also developed two main functions including:

1 Color-Capturing System One of our major feature is to calculate the HSV value of each pixels from the uploaded picture.To put this feature into reality,we were greatly challenged because none of us had former strong coding experiences. After identifying and calculating the top 5 HSV value in user’s uploaded picture, we have to figure out a way to “re-paint”these colors. We started to learn HTML5 Canvas as a key method to pursing this great feature.HTML5 Canvas allows us to reproduce these colors and bring them on the website.

Let users adjust their generated picture.

2 Website Interactions The dreamy and fancy visual interactions are supported by the WebGL techniques. We explored lots of demos used WebGL and put it into practice in our own project, in order to create an ideal visual effect. Download/Reset/Share your work with motion stored in gif.


7. Complete! & More WEBSITE Launched!

The logo for “The Dream Painter” is based on linear strokes with colorful dots, which represents our original intention for developing this project: A Fun, Cool and Visual-Oriented Website.

After our debug and testing, the website””was finally launched! Although we didn’t fully fulfilled all the functions designed, but it was truly an incredible experience due to the comments by our users;)

Now the dream painter’s is already launched! We hope that it could not only be a visual website for fun, but mostly could provide more inspirations along with business profits to designers or visual artists,even maybe developed into a plug-in like low poly or Adobe Color CC some day;)


“The Dream Painter”could allow users to save their “works”,or put it into other uses. Like this business card or desktops;)Show you creative work to the world NOW!


The Dream Painter - Portfolio  

A detailed documentation for the art project (an interactive website) published in 2015.

The Dream Painter - Portfolio  

A detailed documentation for the art project (an interactive website) published in 2015.