PROCESS DOCUMENT d
COSC2285 - Design for interactivemedia 3 - a2
interactive data visualization Rmit Vietnam SGSC - SEM 3/ 2013 - S3360598 - NGUYEN MAI ANH
1. Project Introduction 2. Project Timeline 3. Concept brief 4. Dataset 5. Methodologies & Materials 6. Evidence of Visual Research 7. Sketches 8. Design Explorations 9. Mock-up design 10. Story Board 11. Interaction Development 12. References
dreams - interactive infographic
project introduction
This is a project of making interactive data visualization. Which includes: finding information, researching and collecting data/ statistics according to a chosen topic. After having the data, designer will make a design to best display these data that interests the viewer, then use html5/ flash/ processing to make the design interactive. In once sentence, the project is about creating interesting experience for user when achieving specific information.
project timeline DIM3 - COSC2285 - G1 - ASS2 - Interactive Data Visualization s3360598 - Nguyen Mai Anh WORK PLAN - TIMELINE Week 6
Week 7
Week 8
Sat20/11 21/11 22/11 23/11 26/11 27/11 28/11 29/11 Sun Wed Thurs
Fri
Sat
Tues Wed Thurs
Fri
Mon
Tues
Thurs
2/12
3/12
5/12
Week 9 Sat 6/11 Sun Fri
Mon Fri 9/12 13/12
Schedule Finding Topics
*
Research
*
Inspirations
*
Wireframe Visual Research, Sketches, Mboards, Explorations
*
*
*
*
12 *
Week 7B - 28/11 Project Schedule 3 topics Research Wireframes Moodboard Sketches Week 8B - 5/12 More Researh Final Wireframe Moodboards Design Explorations Interactive factors & Technology MOCK-UPS
Mockups Coding
Week 9A - 9/12 Finalize Mock-Ups
Process Doc + Soft Copy * Print materials to be shown in milestones (7B, 8B)
CALENDAR
4pm Working Receive Feedbacks/ Finalize
Week 9 - 13/12 SUBMISSION
concept brief topic: dreams With this topic, I present the familiar dreams that people usually have in percentage, their meanings are also included. In addition, I show a comparison of male and female dreamers in term of: familiar/ unfamiliar characters in their dreams, reoccurring dreams probability. I also present some interesting facts & numbers about human’s dreams. All information is achieved through academic researches and psychology journals (see the references part for details)
GOALS: My goals when choosing this topic is to make an interesting & informative visualization for the chosen topic, which can attract the viewer both by design and content. Generally speaking, most people would be interest to know what their dreams mean as well as other dream-related knowledge, since dream is a part of our daily life but we rarely understand it. In fact, there is lots of information about it in the Internet; however, very few of them can really capture attention for lacking of visual style or interesting user’s experience. Therefore, this interactive data visualization, having both the content and design, will help viewer to understand deeper something very personal to them, everyone can relate to it: DREAMS.
Dreams don’t lie. Those dreams when you sleep are parts of your life.
REPRESENTATION: Dream-catchers, feathers, circles. I use dream-catcher as the representation for the topic because people can easily relate it with dreams. Dream-catcher meant to catch good dreams and protect its owner; therefore it can bring a positive, delightful atmosphere to the design. Feathers and circles are other elements in the dream-catcher; they can go along with it.
dataset
Common dreams:
Female & male dreamers:
Threats to self – being chased, falling –
33%
45% (Male)
58% (Female)
Family unit – Family members in danger/Pregnant –
Unfamiliar Characters 55% (Male)
42% (Female)
Bonding – sexual activities –
Reoccurring dreams
70% (Female)
Body abnormalities – falling teeth, illness –
Familiar Characters
65% (Male)
Males dream of males more often than female dream of males Men are more likely than women to dream about sex Sources: http://www2.ucsc.edu/dreams/Info/statistics.html; http://dailyinfographic.com/na ked-in-a-dream-infographic http://www.livescience.com/17290-facts-dreams-nightmares.html http://facts.randomhistory.com/interesting-facts-about-dreams.html
Dreams meaning: Being chased, falling - lack of control of life, a decision must be made soon Pregnant/ Family members in danger – the urge to connect, protect and be protected by the family OR having the desire to do something but not doing it Sexual activities – looking for a mate- desire to have sex Falling Teeth – Worry of your image in public Adventure – Processing to solve a problem Flying, Powerful – desire to reach a certain state/ power / you are happy with your life Naked – you are vulnerable and are trying to be stronger in your life/ desire for freedom Unable to do something - frustrating and irritated by something/ someone Failing a test - your fear of failing in your current job – insecurity Sources: http://www.dreamon.demon.co.uk/cats.htm http://www.understandmydreams.com/common_dreams.php http://www.huffingtonpost.com/2011/07/13/dreams-about-being-pregnant_n_891547.html
17%
Challenge – hunting, adventure –
6%
Superiority – wining, powerful, flying -
20%
7%
6%
Vulnerability – naked, go toilet with other people looking at – Obstruction – unable to do something – Inferiority – failing a test –
1%;
2% Others –
2%
6%
Sources: http://www.understandmydreams.com/common_dreams.php http://www.dreamon.demon.co.uk/Stats/stats.htm
facts & numbers The average person has about 1,460 dreams a year. That’s about 4 per night By the time we die, most of us will have about 6 years for dreaming Most of us dream every 90 minutes, and the longest dreams : 30-45 minutes 40% of dreams are nightmares, and 30% of them involved talking vocally 1 in 8 of us will experience lucid dreams 95% of all dreams are quickly forgotten shortly after waking 80% of all dreams are in colour Sources: http://facts.randomhistory.com/interesting-facts-about-dreams.html http://www.behance.net/gallery/Dream-Infographics/5885427 http://psychology.about.com/od/statesofconsciousness/tp/facts-about-dreams.htm http://www.dailymail.co.uk/sciencetech/article-1321592/Is-film-Inception-reality-Studies-suggest-lucid-dreams-control-action-rise.html
methodologies & Materials
1. Finding topics
methodologies & Materials
2. 3 chosen topics
methodologies & Materials
3. Moodboards & Sketches
methodologies & Materials
3. Moodboards & Sketches
methodologies & Materials
4. chosing 1 topic
methodologies & Materials
5. researches
evidence of visual researches
Dream your life
DREAM DREAM Dream
Dream Dream
Dream
Dreamcatcher
1. dreams
evidence of visual researches
1. dreams
evidence of visual researches
2. inspirations
evidence of visual researches
2. inspirations
evidence of visual researches
3. websites & Inforgraphics
evidence of visual researches
3. websites & Inforgraphics
sketches 1. wireframes
sketches 2. elements
sketches 3. icons
sketches 4. digital sketches
design exploration 1. typography Agency FB
Tw Cen MT Condensed
Maven Pro Light 200
Tw Cen MT
Dreams don’t lie. DREAMS DON’T LIE.
Dreams don’t lie. DREAMS DON’T LIE.
AvantGarde
Underwood Champion
Dreams don’t lie. DREAMS DON’T LIE.
Dreams don’t lie. DREAMS DON’T LIE.
Space1
Capture it
Dreams don’t lie. DREAMS DON’T LIE.
Dreams don’t lie. DREAMS DON’T LIE. Bellevue
Dreams don’t lie. DREAMS DON’T LIE. Above are all the typefaces i had tried for the design. I was looking for typefaces that look strong, classic but a bit feminine and subtle. The design also follows this style. The dream-catcher is already girlish but the content of this design is mainly statistics and scientific facts, if I use too many girlish elements the design might not keep the strong and trustworthy aspect of scientific proofs. In term of design, I was looking for a combination of fonts which are not really alike but also not too different.
Dreams don’t lie. DREAMS DON’T LIE.
Dreams don’t lie. DREAMS DON’T LIE. OCR A Exteneded
Dreams don’t lie. DREAMS DON’T LIE. Considering all of that, I tried working with different combinations, until I think that : ORC A Extended and Tw Cen MT Condensed can work well together. So I chose these two fonts. ORC A Extended is simple with wide kerning and look very technical, while Tw Cen MT Condensed is thick, strong with small kerning and looks classic. They are different to supplement each other, but also similiar with strong and straight stroke, therefore, they can be a good match.
design exploration 2. colours
MOck-ups design The design is on one single page (2560 x 8000) , there are 3 parts of it : part 1- welcome, part 2- Meaning of Dreams and other facts, part 3 - Female & Male Dreams .
1. part 1
MOck-ups design The design is on one single page (2560 x 8000) , there are 3 parts of it : part 1- welcome, part 2- Meaning of Dreams and other facts, part 3 - Female & Male Dreams .
2. part 2a
MOck-ups design The design is on one single page (2560 x 8000) , there are 3 parts of it : part 1- welcome, part 2- Meaning of Dreams (A) and other facts (B), part 3 - Female & Male Dreams .
3. part 2b
MOck-ups design The design is on one single page (2560 x 8000) , there are 3 parts of it : part 1- welcome, part 2- Meaning of Dreams (A) and other facts (B), part 3 - Female & Male Dreams .
4. part 3
MOck-ups design The design is on one single page (2560 x 8000) , there are 3 parts of it : part 1- welcome, part 2- Meaning of Dreams (A) and other facts (B), part 3 - Female & Male Dreams .
4. part 3 (cont)
Storyboard The design is on one single page (2560 x 8000) , there are 3 parts of it : part 1- welcome, part 2- Meaning of Dreams (A) and other facts (B), part 3 - Female & Male Dreams . User will use the website by scroll down the website’s length , either by mouse or click the button - the page will automatically scroll to the assigned point.
1. part 1
This is an animation, when the user fisrt visited the website or click the button to go back to this page, the animation will play back. The animation: at first, there is only the flower in the middle . Then the white cirlce fades in. Then the circle and the flower spin 360 degree while the “DREAM” letter fades in and enlarges from the middle of the circle.
When the user hover over this button, the white circle will disappear and the feather inside will change from transparent to white. When the user clicks it, the page will smoothly scroll down to part 2.
Effect is similar to the 1st button,when clicked the page will scroll back to this page (part 1) Effect is similar to the 1st button,when clicked the page will scroll to part 3
When the user hovers the mouse over the “DREAM” letter above, the Dream letter will change color to grey (# 7e7f74). When “DREAM” is clicked . This line “Dreams don’t lie ......” will appear from left to right in typing motion (like someone is typing the line in the screen)
The Buttons are set static , they stay at the samplace in the screen , scroll up or down doesn’t affect the position of the buttons
Storyboard The design is on one single page (2560 x 8000) , there are 3 parts of it : part 1- welcome, part 2- Meaning of Dreams (A) and other facts (B), part 3 - Female & Male Dreams . User will use the website by scroll down the website’s length , either by mouse or click the button - the page will automatically scroll to the assigned point.
2. part 2A
At first, there will be just the white circle , the flower inside it, and the whirt icons , on the screen. When user hover the mouse over any icon , the blue pointer the black number, black icon and the type of dream accordingly will apear. When they click on the icon, the blue circle and the text inside it will appear. When the user want to turn of the blue cirlce, black number, text and icon, they just need to click them again. If they don’t click, the effect will stay there until they click another icon. The blue pointer will spin accordingly to the mouse movement make by the user when they move it around the white icon.
Storyboard The design is on one single page (2560 x 8000) , there are 3 parts of it : part 1- welcome, part 2- Meaning of Dreams (A) and other facts (B), part 3 - Female & Male Dreams . User will use the website by scroll down the website’s length , either by mouse or click the button - the page will automatically scroll to the assigned point.
3. part 2b These lines will apear by running down from the top when the user scrolls down to this part by the mouse. At first, there will be just the white line and white feathers. When the user hover over any feathers , the line and the feather will turn blue , the number will appear. When the user click the feather , the text will appear. If the user want to make the blue line and feather and text disapper, they just need to click it again. If they don’t click, the effect will stay there until they click another feather.
At first, the circle and number will stay like this. When the user hover the mouse over, the blue circle and black text will apear (like the blue circle on the left). If they move the mouse to another circle, the previous blue circle & text will disappear, and another blue circle & text will appear accoridingly to where the mouse is at. If they want to keep the effect, they need to click it, then when they move the mouse out, the effect will still be ther until they click it again or click another circle.
Storyboard The design is on one single page (2560 x 8000) , there are 3 parts of it : part 1- welcome, part 2- Meaning of Dreams (A) and other facts (B), part 3 - Female & Male Dreams . User will use the website by scroll down the website’s length , either by mouse or click the button - the page will automatically scroll to the assigned point.
4. part 3
The blue circle is for male dreamers, and pink circle is for female dreamers. At first, there will be just the text in the middle and the two dream-catchers with no fill color. There are two way to use this interface: 1. The user click the text in the second paragraph in the middle. They are white, but when hovered over and clicked they will turn black . When one of the text is clicked : the colored pointers appears in both dream-catchers, spins around until it meet the according lines and feathers, then the feather will change color from white to pink & blue and the number appear at the end of the feather 2. The user can hover around the circles, then the pointers will appear and move accordingly to the mouse direction, when the pointer is click at 1 of 6 point of the six lines (in both circle) the same effect will happen like in 1 (except the spinning).
Storyboard The design is on one single page (2560 x 8000) , there are 3 parts of it : part 1- welcome, part 2- Meaning of Dreams (A) and other facts (B), part 3 - Female & Male Dreams . User will use the website by scroll down the website’s length , either by mouse or click the button - the page will automatically scroll to the assigned point.
4. part 3 (cont)
When the user scrolls down the page to this point, by mouse, the text will appear from left to right in typing motion
interaction devel0pment Researches Embeded swf http://www.ehow.com/how_8238422_embed-swfs-play-paramaters.html http://stackoverflow.com/questions/137326/best-wayto-embed-a-swf-file-in-a-html-page http://help.adobe.com/en_US/as3/dev/WS4B441C24BAE3-4110-91FD-A4E5EEFB2467.html http://help.adobe.com/en_US/dreamweaver/cs/using/ WSc78c5058ca073340dcda9110b1f693f21-7cada.html#WSC1C75461-D317-4f3d-867B-B8E61C6A891Ba Play & stop button for SWF in CSS http://www.ehow.com/how_8300597_insert-swf-fileshtml-autoplay.html Smooth scrolling http://css-tricks.com/snippets/jquery/smooth-scrolling/ http://codereview.stackexchange.com/questions/13111/smooth-page-scrolling-in-javascript
For most part of the interaction in my design, i can find some source codes and tutorials in the Internet to follow. So it is possible to do. However, i still can not find the code for the spinning effects which i described in the storyboard (part 2a and part 3), and i also can’t find the code to make somethign start to play when scroll down by mouse (part 2b and part 3 -cont ). So either i have to change the interaction into something achievable or i have to contiue figuring a way to make them
Hover over effect of button’s transformation http://tympanus.net/codrops/2013/02/06/interactive-infographic-with-svg-and-css-animations/ http://learn.shayhowe.com/advanced-html-css/transitions-animations
references Behance. 2013. Dream Infographics. [online] Available at: http://www.behance.net/gallery/Dream-Infographics/5885427 [Accessed: 13 Dec 2013]. Cherry, K. 2013. Dreams - 10 Facts About Dreams. [online] Available at: http://psychology.about.com/od/ statesofconsciousness/tp/facts-about-dreams.htm [Accessed: 13 Dec 2013]. Dreamon.demon.co.uk. 2013. Dream Statistics. [online] Available at: http://www.dreamon.demon.co.uk/ Stats/stats.htm [Accessed: 13 Dec 2013]. Dreamon.demon.co.uk. 2013. Dream Studies - The Nine Categories. [online] Available at: http://www. dreamon.demon.co.uk/cats.htm [Accessed: 13 Dec 2013]. Facts.randomhistory.com. 2013. 99 Interesting Facts about Dreams. [online] Available at: http://facts.randomhistory.com/interesting-facts-about-dreams.html [Accessed: 13 Dec 2013]. LiveScience.com. 2013. 7 Mind-Bending Facts About Dreams. [online] Available at: http://www.livescience. com/17290-facts-dreams-nightmares.html [Accessed: 13 Dec 2013]. Mail Online. 2010. Is film Inception a reality? How we’re learning to dictate our dreams. [online] Available at: http://www.dailymail.co.uk/sciencetech/article-1321592/Is-film-Inception-reality-Studies-suggest-lucid-dreams-control-action-rise.html [Accessed: 13 Dec 2013]. Martinez-Moncada, D. 2013. Naked in a Dream? [infographic]. [online] Available at: http://dailyinfographic.com/naked-in-a-dream-infographic [Accessed: 13 Dec 2013]. Romano, N. 2013. Dreaming About Being Pregnant? Find Out What It Might Mean. [online] Available at: http://www.huffingtonpost.com/2011/07/13/dreams-about-being-pregnant_n_891547.html [Accessed: 13 Dec 2013]. Understandmydreams.com. 2013. Understand My Dreams - Dreams Statistics. [online] Available at: http:// www.understandmydreams.com/common_dreams.php [Accessed: 13 Dec 2013]. Understandmydreams.com. 2013. Understand My Dreams - Dreams Statistics. [online] Available at: http:// www.understandmydreams.com/common_dreams.php [Accessed: 13 Dec 2013]. Www2.ucsc.edu. 2013. Dreams: Statistical Analysis. [online] Available at: http://www2.ucsc.edu/dreams/ Info/statistics.html [Accessed: 13 Dec 2013].