A New Visual Language: Storytelling

For the last 2 supervisor meeting, Mr O'Neill and I spent a long time discussing what's the relationship of the data visualization and animated interaction part in my project. It's really confusing that why we need this kind of visualization in a fashion adviser website.  So when I find Klanten's book named Visual Storytelling in the library, it really opened my mind.

This new language suggested that there are always questions and curiosity after when audience see the data, these feelings come from their experience of life. And there are also many pieces of funny historical information behind the changing data. If we could introduce the information through some well-known stories, it will help to pass understanding and involve emotion. "The essence of visual storytelling is this combination of emotional reaction and narrative information. "(Andrew Losowsky). Moreover, through the idea of story telling, it's more effective to gather images and interactive design to express the visual concept.

So my goal is to tell the story behind the dresses we show or the choice we made. For example, the style we write for the story by choosing different color or the history of the evening dresses over the past 100 years.

Reference:
R. Klanten (2011) Visual Storytelling: Inspiring a New Visual Language. London, Gestalten.

Something about 3D

A Classroom I Created in Class, with the help of Link

This semester we had a module of 3D practice, and I learned a lot about modeling, animation, lighting, UV maps and so on. They are amazing and of great fun. But I think I still have to difficulty to transfer what I see as 2d to a 3d model, and it's hard for me to image what they look like and how then move from different angles. This's what have trouble me since I was doing 3D computer games with OpenGL in my undergraduate. So it's possible that I would avoid using Maya for my project.

Set Proportions by stylepilot.com

So when once Thomas recommended a website named stylepilot which used Flash to allow the users to changed the body shape on stylepilot.com, I began to think that maybe I could prepare a series of images and display one of them as the users change the data. That means I could do the scale or other changes with computer techniques like Python or Js online.

And if this doesn't work out, I shall try the online 3D technique name WebGL, which allow you to do a lot of changes to 3D object in realtime online. It's similar to OpenGL that I'm familiar with, but it's still under development and the coding is very complexity.

By the way, I saw some video about 123D of AutoDesk, I think it's a helpful tool for me to build models of different body shape if I just have to take some photo of people.

The Data I Will Collect and Their Interaction

As my project is an experiment of information graphic, it's certain that data will play an important role in it. To find out the user's preference of dressing, we need data of fashion, such as body shapes, colors, occasions and personal styles.

I have posted several blogs about these fashion definitions, so here I will focus on the measurement of the data. I did some search in the library, but wasn't able to find any clear tool of this. So I have to get some information from the internet, and I was glad to find a website named 'the chic fashionista' which offers many useful way to measure the body shape and so on. Here's the data I will use in my project:

• For Body Shape(Summarize from HOW TO TAKE ACCURATE BODY MEASUREMENTS  )

1. Shoulder Line: A straight line from one outer edge to the other;

2. Bust Line: Around the fullest part of the chest;

3. Waist Line: Around the narrowest part of the torso, avoid holding breath;

4. Hips Line: Around the widest part of the hips, with feet close together;

5. Rise: A line from natural waist down to crotch;

6. Inseam: Crotch to the inside of ankle.

Interaction: The user should be able to input these data and let the future website to calculate their body shape, or they could just choose the body shape from the 5 images we offer.

• For Occasions

The different kinds of Occasions have been summarized in the blog occasions.

Interaction: The user should be able to choose the occasion from a list of images or small animations.

• For Colors(Summarize from SEASONAL COLOR ANALYSIS)

1. The quality of skin tone;
2. The color of hair;
3. The color of eyes;

Interaction: A cute face should be offer on the website that users could choose the color of their skin, hair and eyes from a list and the face will change according to their options.

• For Styles(Summarize from Fashion Style Quiz)

1. Options: classic, trendy, dramatic, eclectic, romantic, Bohemian, sporty, urban;
Interaction: All of these styles could be chosen from a list of cute animations.

• For Registration and Login

1. User name(Neccesary);
2. Password(Neccesary)
3. Email(Neccesary)
4. Age(Optional)
5. Job(Optional)

Interaction: The user name and email should be check in real time from the database, job could be picked up from a provided list.

All these datas should be saved in a database, use the username name as the key, to produce a profile for the users.

Cinderella by Phil Porter

Last night I went to see the play of Cinderella, by Phil Porter in Dundee Rep. It's so amazing that all the children and adults I can see loved it.

There's many things that I can learn from the play.  First is the way it told the story, as written in the website, it recreate the story like this:

Cinderella works all day for her father in a floating retirement home for elderly magicians and their assistants. And when she’s not bailing out the family business, she’s bailing out the water! 

Back on dry land, the Queen announces that a ball will be held to find the dashingly handsome young prince a wife, but Cinderella’s wicked stepsisters are determined to ruin her dream of attending the Royal ball. 

With only the retirement home’s magicians to help her, who will work the magic Cinderella needs to get to the ball?

 I liked it because no matter how the background changed, it still focus on the magic and dreams, just as it said in the play "sometimes all you need is a little magic". Especially, it gave the characters some new dispositions. Cinderella was recreated as a girl no so weak, but still kind-hearted and have a strong sense of responsibility. She didn't go to the ball for the prince, instead she just wanted to be happy and beautiful for just one night. That's more understandable in nowadays. And the prince was someone who want to be "true me" and miss the simple but happy live before becoming a member of  nobility. And obviously, every audience loved its funny details.

For the stage, the play only had 3 scene: the ship(Cinderella's room and the magicians' dinning room), the castle. I think this is really intelligent because this covered the most famous part of the story already. In my project, I will also concentrate on the castle and Cinderella's room.

Another impressive thing I got from the play was to catch the audience's attention by casting a drop of light to a certain character on the stage. I can do it with HTML5, like the example I collected before on Normal Mapping with Javascript and Canvas.

There was one thing that really impressive me after the play. A lady asked her friend how she thought of this show, her friend said "I love it, it's happy, maybe because it's so easy to understand". That reminded once we talked about the definition of animation in  class, we looked back to a lot of early animations of producers such as Disney. Most of they are simple and just make you laugh. Nowadays, the development of technique allow the outcome of animation to have more possibility, but I think there's something that never change. That's take animation as a tool to write out what you see and feel from life, to recreate this into something simple and easy to accept, to help people better understand and pursuit something meaningful.

Mind Map for the Presentation

Mindmap

As it is shown in the map, for the areas I'm studying, my blog can be divided to three part: fashion, technology and visualisation. As for the contain, it can be identified as inspiration, context and practice.  Welcome to visit them.

The small images used in the map came from a series of open source from zcool.com.cn.

Reading List of Books and Websites

Fashion:
1. Kim Johnson Gross and Jeff Stone(1998) What Should I Wear? London, Thames and Hudson Ltd.
2. Sophie Woodward(2007) Why Women Wear What They Wear. Oxford, Oxford International Publishers Ltd.
3. Jay Calderin(2009) Form Fit Fashion. United States of America, Rockport Publishers, Inc.
4. Simon Traves-Spencer and Zarida Zaman(2008) The Fashion Designer's Directory of Shape and Form. London, Quarto Publishing plc.
5. Style Makeover HQ(n.d.) [Online] Available from: http://www.style-makeover-hq.com [Accessed 21st Nov. 2011].
6. Patrick and John Ireland(2007) New Fashion Figure Templates. London, Batsford.
7. Magazine of Elle and Marie Claire.
8. the chic fashionista(n.d.) [Online] Available from: http://www.thechicfashionista.com/body-shapes.html [Accessed 4st Dec. 2011].

Story:
1. C.S.Evans(1919) Cinderella. London, William Heinemann.Ltd.
2. Jeffrey Scott(2002) How to Write For Animation. United States of America, Overlook.

Technology:

1. Jason Cranford Teague(2011) Css3. United States of America, Peachpit Press.
2. Buce Lawson and Remy Sharp(2011) Introducing HTML5. United States of America, Peachpit Press.
3. Emily Vander Veer(2011) Javascript for Dummies. United States of America, Wiley Publishing, Inc.
4.  webs.com(n.d.) [Online] Available from: http://www.webs.com [Accessed 22nd Nov. 2011].
5.  Google Logo(n.d.) [Online] Available from: http://addieworks.typepad.jp/google_logo_museum/2011/09/google-logo-%E3%82%B8%E3%83%A0-%E3%83%98%E3%83%B3%E3%82%BD%E3%83%B3-%E7%94%9F%E8%AA%9575%E5%91%A8%E5%B9%B4.html [Accessed 22nd Nov. 2011].
6.  canvasdemos.com(n.d.) [Online] Available from: http://www.canvasdemos.com/ [Accessed 22nd Nov. 2011].
7.  openprocessing.org(n.d.) [Online] Available from: http://www.openprocessing.org/ [Accessed 22nd Nov. 2011].
8. Ben Fry and Andy Oram (ed.) (2007) Visualizing Data. United States of America, O'Reilly Media, Inc.
9. Matt Woolman (2002) Digital Information Graphics. London, Thames & Hudson Ltd.
10. Peter Lunbbers, Brian Albers, and Frank Salim (2010) Pro HTML5 Programming:Powerful APIs for Richer Internet Application Development.  United States of America, Apress.

Drawings:

1. Preston Blair(n.d.) Cartoon Animation.
2. Richard Williams(2002) The Animator's Survival Kit.
3.  ~samuel123 @ deviantart(n.d.) [Online] Available from: http://samuel123.deviantart.com/ [Accessed 22nd Nov. 2011].
4. Complexity Graphics by Tatiana Plakhova http://www.complexitygraphics.com/

Something About a Magic Mirror

Tell Me, Magic Mirror!(Sorry, I couldn't find the artist)

I came across the idea of data visualisation about personal preference when I saw this picture last year.  I hope someday this project can really tell girls the ways to get beautiful be analysis the data of themselves. Anyway, what I want to talk about here is the relation among women, dress and mirror.

In the story of Snow White, the queens always wanted to get information about 'the fairest' from her magic mirror. In fact, she just wanted get admiration from it. As Woodward says in her book, the importance of a mirror is that 'Looking in the mirror is therefore a marriage of the intimate and the generic, as women consider their own dressed bodies in light of wider social ideals and expectations.' According to her theory, when a women find the girl in the mirror is exactly the one fits her imagination of herself and what she want the society to see as 'her', she will find this fits. That's why occasion,  body shape finess and preference colors are important factors when choosing the prefect dress.

That's why sometimes it's funny that we such a different 'me' in the mirror.

Can you spot your REAL shape? from dailymail.co.uk

In our last meeting, Dr. O'neill sent me an interesting website name Can you spot your real shape? This article describe an experiment that when looking at the same body shape, women see different shapes according to their expectation of themselves. So as for my project, I thing it's important that the user should tell the website some data of themselves before the advice about what 'fits' the user.

Another interesting question is that what will people usually do in front of a mirror? Here's something I read and find in life:
1. Really look at myself;
2. Try the clothes on, look carefully, turn around;
3. Take off the clothes, change to another one;
4. 2<-->3;
5. Smile when it looks good, or even dance with it;
6. Angry or disappointed when it doesn't fit, or even kick the mirror;
7. Talk to myself.


Reference:
Sophie Woodward(2007) Why Women Wear What They Wear. Oxford, Oxford International Publishers Ltd.

The Story of Cinderella

Cinderella Pumpkin Carriage

Once I was talking with Brian about my project, he gave me a good idea of digging into different versions of the story of Cinderella, and so I did.

First I watch some movie of Cinderella. One of them is Cinderella 1950 produced by Disney. I dont think much of this version, cause it pays too much attention to the mouses and the cat, which make me loose my patience. Another is Cinderella III A Twist in Time, also produced by Disney in 2007,  which post a question that if the slippers didn't fit Cinderella? Will the prince still fall in love with her? It's some kind of interesting that it make you really consider about the importance of the dressing to a woman.

Then I interviewed people from different country about their idea of Cinderella, this including friends from UK, New Zealand, China and so on. And found that most people learn about the story from the Disney movie, which means people have a similar concept of this story. When ask the question that Why do you think Cinderella wanted to go to the ball? Most of them thought it's because she wanted to meet the prince, or she was curious about the ball, or she wanted a change of her life.

I also read some books of Cinderella. Most children's books of the story are really simple and short, but one of them impressed me a lot. It's Cinderella told by C.S.Evans. The writer enriches the story with imagination of the detail, such as what people think in certain moments, but that means he also changes the story a lot. Anyway, it's funny to hear something different.

Choose Your Color

It's said that the right color can make you look younger, slimmer and brighter. It has something to do with your body shape, skin, hair and eye, and of course you should also choose your dressing color according the occasion.

Color and Season from Style Makeover HQ

When trying to understand the color in dressing, we should consider its culture, psychology and its change with season.

For culture, it means to understanding the connotations that a color carries from culture to culture and for different socia groups can clarify(Jay Calderin, 2009). It's important cause personal preference of color often connects to their cultural background.

As for psychology, it's that when we see a color, it might bring certain feeling to us. Blue may bring in the feeling of a clear sky and make you feel soothing. Red might be hot and stimulate. You can find more about Color Psychology by clicking this.

Changing seasons mean the past of time and switching of the occasions. There aren't any certain rules about what color to choose from, cause fashion is always developing. But we can offer some basic tips.

Spring: Besides of some basic color you are always wearing, may be this time, your want to add some warm, bright and clear color for yourself. Do remember to try navy, which is springtime classic.

Summer: In this hot time, maybe everyone want to try some cool color, which make your dressing breezy. But for beach occasion, you could also taste the sherbet, mangoes and candy-colored which may you smile.

Autumn: It's a time when the sun hangs lower and casts longer shadows, and brings us the color of nature. It's easy to wear black, brown and grey now, but do warm yourself up with wine reds, forest greens, cadet blues accessories.

Winter: It's really a free time, you can calm yourself down with dark colors, or just feel the heat with a red dress. Just try something exiting in the pale snowing days.

Reference:
1. Kim Johnson Gross and Jeff Stone(1998) What Should I Wear? London, Thames and Hudson Ltd.
2. Jay Calderin(2009) Form Fit Fashion. United States of America, Rockport Publishers, Inc.
3. Simon Traves-Spencer and Zarida Zaman(2008) The Fashion Designer's Directory of Shape and Form. London, Quarto Publishing plc.
4. Style Makeover HQ(n.d.) Do You Know Your Color? [Online] Available from: http://www.style-makeover-hq.com/seasonal-color-analysis.html [Accessed 21st Nov. 2011]

Dressing for Occasion

Street Chic From vogue.co.uk

These information are mainly found from the book What Should I Wear?

Seasonless Occasions:
birthdays, business dinners, movie dates, anniversaies, bar, weddings, weekend getaways, dinner for two, art opening, business conferences, theater.

Spring Occasions:
Easter, May Day, Mother's Day, Graduations.
Spring Basic:
white cotton skirt, silk knit sweater set, dark stretch cotton pants, denim jeans and skirt, blazer, spring suit, microfiber raincoat;
Tips:
1. While the winter cold is still on, do remember to prepare some woolen clothes;
2. The order of progression: wool to wool blends to silk to cottons and linens.

Summer Occasions:
Father's Dat, barbecues, beach parties, afternoon teas, baby showers
Summer Basic:
Capri pants, sundress, carryall bag, sunglasses, cotton sweater, sun hat, cotton T-shirt, swimsuit and cover-up, evening wrap, hoop earrings ,white cotton short, sandals.
Tips:
1. At the beginning of summer, dont miss the shinning colors that make you smile. But when the sun reaches its hottest, it's cool to wear no-color or frosty colors.
2. Cool and breezy is what we want from our simple summer dressing.

Autumn Occasions:
back to school, back to work, Harvest time, Halloween.
Autumn Basic:
long-sleeved T-shirt, turtleneck, sweaters, wool slacks, jacket, leather bag, leather boots, wool suit, cocktail dress.
Tips:
1. Autumn is a good time for you to wear the color of nature;
2. Do remember to warm yourself up with woolen and leather jacket;

Winter Occasions:
Christmas, New Year's, sky trips, Valentine's Day.
Winter Basic:
silk blouse, evening pants, velvet scarf, black coat, two--ply cashmere sweater, boots, hat, evening bag, drop earrings.
Tips:
1. Winter is a time to try a mix of fabrics on yourself, to keep warm, but do remember to dress in layers.
2. December is an important time to social, dressing in red is a good idea.

Hat Occasions:
Weddings, Easter, Synagogue, Derby Day, Ascot, Garden party, Pool party.

Reference:
1. Kim Johnson Gross and Jeff Stone(1998) What Should I Wear? London, Thames and Hudson Ltd.

Dress According to Your Body Shape

Body Shape is an important factor for women to get dress, according to the books & website I had  read. Following is some information I collect for my project.

• Ways to find out your own body shape

One simple way is to stand naked in front of your mirror, look carefully to yourself, learn about your bustline, waistline, hipline, mid-thigh, knee length and ankle length.

Another way is to ask your friend to photograph you front, back and sideways. Then you can look into the picture and discuss with your friend. 

Of course, your can also ask your friend to give you some honest opinion.

• Different types of body shape

According to Style Makeover HQ, you can classify your height. If you are less than 160cm and without large body scale, you may call yourself Petite.  In Jay Calderin's book, she argues that women mature figure height is 1.65-1.68m, and petite height is 1.57-1.63m. I think this difference is not a great deal.

This is Style Makeover HQ's method of Identifying women's body shape.

Hourglass Figure

Hourglass Figure is a lucky shape,  the body vertical shape is balanced, and the bustline  and hipline are the same width, and the waist is well defined.

Inverted Triangle

Of this nice body shape, you might have a large bust or broad shoulders, narrow hips with well defined waist,  mostly long and slim legs, maybe a flat bottom.

Triangle or Pear Shape Body

You are with this body shape if your bustline is narrower than your hipline, and you have a well defined waist, typically a narrow shoulders, balanced or short legged, full thighs and round bottom.

Rectangle

Rectangle shape is typical for their bustline  and hipline are the same width, little waist, slender legs and arms, small to medium bust, balanced or long legs, flat bottom. 

Oval

This body shape is similar to apple. They have undefined waist line, wide hips, large stomach, and full bottom.

• Dress according to your body shape

Here's some suggestion for getting dress for each body shape.

Hourglass Do:

1. Fitted and semi-fitted clothes
2. Soft, clingy, flowing fabrics
3. Low to medium-low necklines
4. Dresses with defined waistlines
5. Straight and gently flared pants
6. Straight and gently flared shirts

Hourglass Dont:

1. Stiff, bulky, fabrics
2. Baggy styles
3. High necklines (unless you have a small bust)
4. Skirts with open pleats
5. Very tapered pants

Inverted Triangle Do:

1. Flowing fabrics
2. Low to medium-low necklines
3. Set-in sleeves
4. Three-quarter length sleeves
5. A good fitting, well adjusted bra
6. Tops and dresses that flow through the waist
7. A-line skirts
8. Flared pants

Inverted Triangle Dont:

1. Stiff, bulky, fabrics
2. Styles that emphasize your shoulders
3. High necklines
4. Big collars
5. Tapered skirts and pants

Triangle Do:

1. Accessories and designs to draw attention to your upper body
2. Short-sleeved tops
3. Shoulder pads to broaden your shoulders. This may sound very 80s advice, but they really do work. However, they should not be visible
4. Medium to high necklines
5. Garments to emphasize your waist
6. Skirts and dresses that are straight or slightly flared
7. Low rise pants to avoid gaping at the waist
8. Boot leg and straight pants

Triangle Dont:

1. Baggy garments
2. Stiff fabric
3. Garments that add bulk to your hips
4. Hems or design lines at hip-line
5. Open pleats on skirts or pants
6. Tapered skirts or pants

Rectangle Do:

1. Shoulder pads to emphasize your shoulders. This may sound very 80s advice, but they really do work. However, they should not be too large and definitely shouldn't be visible
2. Semi-fitted clothes
3. If you have firm upper arms, short-sleeves and sleeve-less tops and dresses
4. Medium to high necklines
5. Dresses that wrap or flow through the waistline
6. Straight to gently flared flat-fronted pants
7. A-line shirts

Rectangle Dont:

1. Clingy fabrics
2. Fitted clothes
3. Low necklines
4. Baggy tops
5. Baggy pants
6. Narrow skirts

Oval Do:

1. Ear-rings, necklaces and other focal points designed to draw an observer's eyes up towards your shoulders and face
2. Shoulder pads to emphasize your shoulders. This may sound very 80s advice, but they really do work. However, they should not be be visible
3. Semi-fitted and loose fitting clothes
4. Good fitting, well adjusted bras
5. Support underwear
6. Tops and bottoms in the same colors
7. Low necklines
8. Un-tucked tops
9. Tops and dresses that flow through the waistline
10. Straight flat-fronted pants in soft, flowing fabric
11. Straight and slightly flared skirts

Oval Dont:

1. Clingy fabrics
2. Fitted clothes
3. Fabric with large patterns
4. High necklines
5. Large lapels
6. Belts
7. Tucked-in tops
8. Pleats
9. Narrow or tapered skirts
10. Narrow or tapered pants

Reference:

1. Kim Johnson Gross and Jeff Stone(1998) What Should I Wear? London, Thames and Hudson Ltd.

2. Sophie Woodward(2007) Why Women Wear What They Wear.  Oxford, Oxford International Publishers Ltd.

3. Jay Calderin(2009) Form Fit Fashion. United States of America, Rockport Publishers, Inc.

4. Simon Traves-Spencer and Zarida Zaman(2008) The Fashion Designer's Directory of Shape and Form. London, Quarto Publishing plc.

5. Style Makeover HQ(n.d.) What's Your Body Shape? [Online] Available from:

http://www.style-makeover-hq.com/body-shape.html#top [Accessed 21st Nov. 2011]

The Changing Ideas and Mindmaps

As December is coming, all the classes of this semester are coming to the end. For this three months, I learn a lot by reading & practice, and my idea of the project has changed a lot with this.

I remember for the first workshop with John in Shanghai,  I was intended to focus on the visualisation of data, so the main idea is about visualizing different type of data. But at the beginning of this semester, I realized that I was more interesting in the dynamic online visualization, so I determined to try some thing on personal preference.

the first mindmap

drawing mindmaps in the workshop

The first mindmap in this semester really gave me a direction that maybe I should try more focus on the data type and the out come.  At that time I just thought that I wanted to made an online magic mirror. It made me think about how to do the research, what should I learn and how can I make the project more attractive.

Brian's help, the second mindmap

 This little note came after the talk with John, I asked Brian for advice. He's amazing and really help me to clear my mind. We decided to simplify the data as time is really limited, and what's more important, we made a list of what to do(script and storyboard, character, background, design, research, programming, animation) and from whom I could ask help for. And he suggested me to dig into different versions of Cinderella's story, which is really an helpful interesting research for me.

a more clear mindmap for research

This mindmap is from the research method lesson of John, drawn by Thomas. We discussed each other's project and it's of great fun. By certain questions, we really saw something brilliant coming out from our project. I was inspired that I should add some more element from the story of Cinderella & magic mirror into my project, so that it might be more fancy and easy to understand.

I was thankful that for these three months I gained so much help from the class and staff  . It's exiting to see my project to become clear and fancy with all these help and supervise.

Lev Manovich's Language of New Media

In Sharon's Context & Review class, Mhairi and I read some material about Lev Manovich, a professor of Visual Art. Here is something about his concept of new media.

For the definition of new media,  Professor Manovich think that the common idea that 'the use of a computer for distribution and exhibition rather than production' is to limiting.  He argues that the computer media revolution affects all stages of communication and all types of media, which is full of possibility and  allow us to do media, such as texts, images and sound in a completely different way.

To further his theory, he states the five principles of new media---numerical representation, modularity, automation, variability and cultural transcoding. I'm deeply impressed by the words of automation and variability.  Nowadays, computer technique  allow us to find out the preference of our audiences,  analysis them and show the difference works they really want. As for my project, which aims at visualizing the data of personal interest, I could create a profile for the user and find out their needs automatically, thus provide them variety of visualisation.

As for practice, Pro. Manovich created some great project for cinematograph, which means 'writing movement'. You can visit his works though images and video.

ImagePlot by Lev Manovich

Reference:
Lev Manovich. (2001) The Language of New Media, London, The MIT Press Cambridge