A Meeting with Ms. Stevenson in Textile Design Office

I made an appointment with Ms. Stevenson in Textile Design Office as Sharon suggested last week, and it turn out to be quite helpful. The main purpose of this meeting was to solve some problem of the dressing part of my project.

For the issue of copyright, Ms. Stevenson suggested that if I use the classic design of certain age, it's unlikely to cause any problem. But I should pay attention that I shouldn't draw out the specific detail of a certain dress.

 For the dress-up rules, she and some other ladies in the office suggested me to look into the shows and books by Trinny&Susannah. And she was also very kind to show me some classic style of 50s and 60s such as vionnet.

So after the meeting, I started to read the books like 20th Century Fashion and tried to do some data visualization in this area.

The First Script & Storyboard and Advice from MAV

Storyboard:

Storyboard Version 1.0

Script:

Characters: Cinderella, Two Stepsisters, Fairy Godmother, Prince Smarmy

Part I: A Small Animation About Cinderella

Cinderella watched her two stepsisters leaving the house, disappeared in the door.

Cinderella: Oh, I really wished to go to the party. All I want is one night, a wonderful evening which is different and happy.

She looked at her grey dress sadly.

Suddenly, the Fairy Godmother appeared with a sparkle.

Fairy: Poor girl, come on, I can help you go to the ball.

Cinderella: But I don’t have an evening dress.

Fairy: I can make one for you. What kind you dress do you want?

Cinderella (said in hesitate): I don’t know. Maybe something like the one my sister dressed tonight?

Fairy: I am worry that style might not fit in you. 

Cinderella: I’m sorry but I really have no idea. I have never go to a ball before.

Fairy (took out a magic mirror): Don’t worry. Just tell me some data about your self? This magic mirror will tell you what you should wear and make you beautiful.

Part II: Data Interaction

Cinderella: Magic Mirror on the wall, what should I wear tonight?

Mirror: I can help you if you tell me your body shape?

(Show several body shapes on the mirror that you can choose)

Cinderella choose the “unknown” option.

Mirror: Well, don’t worry. Just tell me some data of yourself?

Using a fairy stick with sparkle to draw a line on Cinderella’s shoulder, bust, waist, and rise. After each measurement, you can enter the data.

Show the result of the body shape.

Mirror: Good job, now could you tell me the color of your skin and hair?

(Show a color board to choose from.)

Mirror: Hmm, and tell me where you are going to meet you princess tonight?

(Show some occasion.)

Mirror: Great, here’s some advice for you, want to try them on?

(Show several clothes)

Cinderella picked one(in fact, the user did this)

Cinderella got dress and turn around.

(3 Options: 1.Fantasy, exactly what I want; 2. Well, I’m not sure; 3.Oh, I hate it!)

1. Cinderella went with the pumpkin car happily. Then asked the user “do you want to know what most pretty women choose nowadays? If yes, show the data visualization part.

2. Cinderella can watch the data visualization part, or do a test about personal interest, or do a test about the person she is going to me tonight, then get more advice and choose another dress.

3. Cinderella kicked the mirror and choose another dress or do more test.

Mirror: Would you like to tell me your name and a key password so that I can remember you?

Part II: Data Visualization.

Do some visualization effect from the data of the website user and other data about fashion interest.

Context:

Women’s favorite color over the past 10 years;

Dresses over the past 100 years;

Hair styles over the past 100 years;

Classify Data: traditional chart, the tree structure-data, the mesh and relational data, the mutative process data, the sub-category data, the timeline data, the heat map-data, the thematic data, the mutative process data.

Advice:

From Peer Review:

For the dress part, there are still too many models to draw, so maybe I should reduce the animation in this part;

The drawing style seemed much too like a wedding style, I should stand on the water color style I imagined in the beginning.

The animals in the storyboard seemed to be a good idea for interaction. Maybe I should do more in the part.

I should make more connection with the social networks or companies like facebook or ebay.

What's lucky for me is that I could get a lot of help from my classmates.

From my Supervisor Mr. O'Neill:

Cindy has moved forwards with a first attempt at a storyboard for her interface designs. This has been very helpful in supporting discussions about how to develop her ideas. Cindy should continue to develop the story board more fully working through various iterations of her design ideas. This process should help in planning out how things will work in her final project.
 The final project will be completed using processing.js and be delivered as a web based interface.

From Sharon:
The house should be bigger base on the story. For the dressing part, I could learn something from the children's dressing-up book.
For style suggestion, I could ask for some advice from Dan and Ms. Stevenson, who are good at fashion.

Reflective Writing

My project aims at creating an online animated data visualization system, which is based on female style preference and the story context of Cinderella. During the past 5 months, I have done a lot of technical preparation and concept design. When I think back on these times, I’m glad to see that the project have changed so much and everything become more clear.

For the context part, I’m really fond of the idea that as some kind of reflection of real life, data can tell us an interesting story if we could better comunicate with them. In this project, I use the data of figure to find the suitable clothing for women who pursue fitness and beauty. And then the story of Cinderella and Snow White came up to my mind. Sometimes girls might want to be a Cinderella, go to the ball with a shining dress and have a great evening. I hope using some background of the fairytales can make the visualization part more attractive. But as my supervisor suggested, such context will involve massive amount of character design and drawings, so for the next step I will do the storyboard and try to simplify the whole story.

As for the interaction and visualization, I tried to do it on the website with some programming works. The main point is ask the user to input their choices in a friendly way. Based on some research on fashion design and sociology, to gather the information and make up the dressing advice, we need data of occasion, color, age, body size and style preference. To make this part more funny, I will try to do it through the interaction with the magic mirror. And I also had a lot of discussion with my supervisor about the data to be visualize. In the end we came across a useful material, the fashion segments of female types done by Experian United Kingdom, which we believe would answer most people’s curiosity about women’s fashion style preference.

About the technique to realize all these design, at first I were excited by the powerful tool named Processing, but after several test, I’m afraid that it’s not easy to do the whole interaction part and it’s not very friendly to ask the user to wait for the Java environment to set up. And then I was inspired by the Image Sprite which was used by Google Logos and the new technique of HTML5. They own a lot of possibilities in online interactive animation. But still they might be not so enough for the project. In the beginning of this semester, my supervisor suggested me to look into Processing again, and I’m pleased to find that there’s a new tool to translate the processing code into javascript code, which means we can run the Processing programme really fast and cost less resource of the system. So I decided to try finishing the animation part in the language. 

During these five months, I’m afraid I have wasted so much time on hesitating about what to do and whether I could work out what I thought about. Maybe I should have done the storyboard earlier and tried to simplify the project according to the main goal. But I really do enjoy this process of exploration and looking for all these possibilities.

Test on ProcessingJs

test on http://siusinng.webs.com/

Just tried something funny in ProcessingJs, and glad to see that it worked quite well with the website and especially HTML5.

The steps of coding is about:
1. Design the animation and interaction;
2. Programming on Processing in PDE or Eclipse;
3. Do the website stuff and import the .pde you just finished with processingJs.js file, use HTML5 to leave a canvas node. See guidance in the official website http://processingjs.org/articles/p5QuickStart.html.

Something about animation:
1. One important thing is time, use the draw() and redraw() function to adjust the frames.
2.  The color might be different in browsers, do more test.

Lost and Found, for the Critical Reflection

This animation is based on the children book of Oliver Jeffers, and produced on Christmas eve in 2008.

It's about a small boy and a naughty penguin. One day, a penguin show up in the boy's house. The kindhearted boy thought it has lost its way, so he made a boat and try to help it to go back home. After a lot of difficulty, they reached the south pallor and say goodbye. Then they realized they have became part of each other's life and decided to be together as friends.

As for the characters, he boy is cool, kind hearted and smart. So we didn't see much facial expression and dialogue. The penguin is curiosity and lonely, and kind. And we can see a lot of action and facial express. But of cause, it did not talk, it looks like that it has the feeling and thinking like human.

This animation can remind all of us the style of Oliver Jeffers's children book.The color of the background is warm and relax, and the technical part of the water is also impressive.

It's a story that tells you a lot. Some people lost, some people found. In the world of friendship, we found each other. So we should try not to lose each other so easily.

Some Clothing Made with Illustrator

After reading the book The Fashion Designer's Directory of Shape and Form, I tried to create some of the clothing in the book by Illustrator. 

During the process, I thought the life drawing classes do me a great favor, because it gave me the sense of the scale and line of dress according to the human body. And the reflect transfer function of Illustrator also helped me a lot.

Skirt

Top

trousers

Programme of Study Proforma