• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Visualizing Works by Hyemi Song
 

Visualizing Works by Hyemi Song

on

  • 3,088 views

It is an interactive data visualization project of the other 63 works that I have done from 2002 to 2010. ...

It is an interactive data visualization project of the other 63 works that I have done from 2002 to 2010.
I have focused on how to communicate an information to people with a color system effectively for this project.

Statistics

Views

Total Views
3,088
Views on SlideShare
3,084
Embed Views
4

Actions

Likes
5
Downloads
0
Comments
1

2 Embeds 4

http://twitter.com 3
http://meinspiration.posterous.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Project Title: Visualizing Works Please Visit!!! http://hyemisong.com/
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Visualizing Works by Hyemi Song Visualizing Works by Hyemi Song Presentation Transcript

    • 2002~2010 Visualizing Works All by Hyemi Song
    • Introduction Motivation Since 2002, I have been working on various arts and design projects as a student and a professional designer. From my experiences, I have got lots of inspiration, new points of view about matters, a lot of different skills to share my ideas and diverse experiences with other people and emotions that I could have in my life and so on. These experiences make me grow and give me a broad perspective about my works. Recently, I feel that I should remind myself about my first intention that I had long time ago. Because, I decided to do projects that focus on data visualization and user experience design more deeply. Therefore, I have a chance to arrange my past works and practice my next advanced data visualization project. According to my time line, the first round was from 2002 to 2010. And I just began the second round from this year. It means that this time is like a turning point for me as a designer. And I can not guarantee how many rounds I could do in my life. However, I am going to have an anniversary project at the every end of the round to refresh my mind and works. 1995 20020627 DREAM INCUBATION 1 ROUND 20110717 I’m here! 2 ROUND Overview It is an interactive data visualization project of the other 63 works that I have done from 2002 to 2010. I have focused on how to communicate an information to people with a color system effectively for this project. Two years ago, one of my teachers suggested me an article,"An algorithm for generating color scales for both categorical and ordinal coding" It was about an algorithm of colors and how they can see the categorical and ordinal encoding. According to the paper, they are studying a program to combine the advantage of the absolute recognition by hue and the advantage of the relative recognition by the lightness for an information design. The point of the result is to find out if data is composed of a scale of the lightness and random hue changes. It was designed so that the hue doesn't interrupt the information of the lightness made. Finally, I inspired the result that's why I decide to study the way to imprint the information to the user with a color system. For the process, I refer a book Visualizing Data that Ben Fry wrote and lots of data visualization studies. Data + Color Information
    • What to read...
    • Data Acquisition From all my works done within an eight year period, I selected 63 important works and gave importance to details like the client, the date and the tools to prepare a raw data from which to work on. 1. Temperature of my mind 2. Paik Nam June 63 3. Faces 4. KT olleh square 5. Sennheiser 6. ........ Example Temperature of my mind Date Design Type Workshop Lecture Award Tool 2007.6 Information Design Dynamic Information Design Workshop Dan Boyarski (Cannegie mellon University) Adobe Design Achievement Awards_Hornerable mention winner Adobe Illustrator, After Effects
    • Data Mining Data analysis classified the information into two main categories: first are design types which included interaction, motion, graphic and unclassified data. The second category showed the year. Less important information like months and work types referring to individual academic abilities and commercial worth, were deleted from the main categories.
    • Data Mining
    • Data Mining
    • Data Mining
    • Data Mining
    • Data Mining Data analysis classified the information into two main categories: first are design types which included interaction, motion, graphic and unclassified data. Date Design Type Workshop Lecture Award Tool ...... Design Type (Interaction,Graphic,Motion,e.t.c) Date (year,month) Work Type (Individual,Academic,Commercial) The second category showed the year. Less important information like months and work types referring to individual academic abilities and commercial worth, were deleted from the main categories. Main category Design Type (Interaction,Graphic,Motion,e.t.c) Year Design Type(Interaction, Graphic, Motion, e.t.c) Date(year,month) Work type(Individual, Academic,Commercial) Sub category + Work Type (Individual,Academic,Commercial)
    • Data Mining interaction 2010 5 2008 7 2007 4 2006 1 motion etc. 2 2009 graphic sum(year) 2 1 6 1 8 5 4 13 4 1 10 11 2005 4 11 1 3 2004 2 2003 3 2002 2 5 7 13 21 63 sum(design type) 19 10 3
    • Objective Main objectives are extracted based on previous process. By Design Type... How many works have been created for each different design types from 2002 to 2010. Which design type dominated from 2002 to 2010. By Year... How many works are created a year? What is the percentage of each design type that is created in a year? What is the percentage of different product types that are created in a year? The flow of the work history from 2010 to 2011 Main design types that hyemi was interested in Inferring the direction of the works that hyemi might do in the second round
    • Design Insight
    • Design Insight from 2002 to 2010 I think that color and visual structure show the entire impression about the project. For this reason, I analyzed visual elements of the 63 works and isolated design keywords for this project. All keywords affected the decision of visual metaphor/structure and main color system. Analysis All Projects from 2002 to 2010
    • Design Insight from 2002 to 2010 Extract Colors from the Projects Line, Layered, Mixed, Organic, Smooth, Musical, Time based, Logical Low / Mid saturation Visual Metaphor & Structure Color System
    • Direction_Design Insight from 2002 to 2010 Analysis all keywords and finding directions Key Word Line, Layered, Mixed, Organic, Smooth, Musical, Time based, Logical, Low/ Mid Saturation Core Value Harmony Repetitive Structural Direction for the visual structure Direction for the color system Harmony Repetitive Structural Harmony Repetitive Structural 3 Diminutional structure and simple objects not strong saturation and too much different hue
    • Sketch & Visual Structure_Design Insight from 2002 to 2010 Visual classification of categories that use 3-dimensional graphic elements became the primary choice for this project. A 3D hexagon like a pagoda showed the four design types assigned to every side of the hexagon. This will allow works in a category to be listed among the Y axis by the time sequence.
    • Color_Design Insight from 2002 to 2010 Color combinations extracted from 63 works provided the color set. According to tests, strong tinting of colors on any background color showed low legibility. Saturated primary color and secondary color on a dark background swelled much and had high legibility. The color set comprised two warm and two cold colors in order to divide the information by using saturated tertiary colors and warm colors like red, red-orange and deep yellow, as the dominant colors. Cold color like light blue and an assortment of colors were also applied in order to identify four design types, interaction, motion and graphic, as well as, undefined data. Finally, the background color was black which was adjusted to dark blue in order to provide unity of colors. For the information For the visual value High Legibility Harmony accurate separation between each design type not strong saturation and too much different hue
    • Color Test 1 Background Color : 0X000714 Applying different Hue on each design type Primary color has accurate color identity and these can be shown clearly on a dark background color. For this reason, I tested 4 colors which have different hue and similar brightness, but on a dark background color. This composition has clearer visibility. However, the primary colors are too strong. 1. Red, Yellow,Blue and Green (50% warm color, 50% cold color) This composition is clear for a visibility However, primary colors are too strong. 0xf3382e 0x9e1500 0xf5ec1d 0x9e9908 0x79c556 0x418131 0x4869b3 0x253b76 2. Secondary and tertiary colors (50% warm color, 50% cold color) Visibility is maintained but it is still strong. Moreover, magenta stands out conspicuously. 0xf23c78 0x9d1a47 0xfac917 0x9e9908 0x79c556 0x418131 0x4583b5 0x253b76 3. Tinting colors (50% warm color, 50% cold color) Both visibility and feeling are too weak. Very dark background color, makes bright color look weaker. Also, all 4 colors cannot be recognized easily because of its low saturation. 0xdb7e83 0x8f4c50 0xfac917 0x9f8000 0x7eb36c 0x487540 0x70aebb 0x41727b
    • Color Test 2 Background Color : 0X000714 Applying less then 3 types of Hue with a gray scale Gray is a true neutral color and Its energy imparts void, emptiness, lack of movement,emotion, warmth and it identifies characteristics.And because of this, gray can stabilize the vibration of other colors. That’s why I try to apply gray scale on this test 1. Red, Yellow,Green and Gray (75% warm color, 25% cold color, 25% gray scale) The color gray makes a relaxing mood although the 3 colors mix well. That’s why I try to apply a gray scale on colors of the design type in this test. 0xf23c78 0x9d1a47 0xfac917 0x9e9908 0x64c9b2 0x007e70 0x9b9a8d 0x61615e 2. Tinting red and blue and light Gray (25% warm color, 75% cold color, 25% gray scale) Hue is restricted to 2 colors: blue and red. Also, low saturation and high brightness make a smooth color composition.But tinted and shaded blue are not be distinguished easily when these are applied the design. 0x516c86 0x2d455b 0x7daab3 0x4b6f75 0xf9a9b9 0xa16a78 0x9b9a8d 0x61615e 3. Primary Red, Tinting Blue, Primary Yellow and Yellowish Gray. (50% warm color, 25% cold color, 25% gray scale) Contrast between high saturated red and tinted blue make mode livelily and similarity of the yellow and yellow gray is stable. However, color variation is not in same level. 0xf3352e 0x9e1400 0x79c7c8 0x488284 0xd6bb3a 0x877812 0xaca484 0x716d55
    • Color Test 3 Background Color : 0X1c252d Tinting color on a tinting and saturated background color A color is influenced by a background color. According to last tests, although tinting colors are applied, these are swelled quite much against dark background color because saturated and tinted colors appear more brilliant against a black background than shading colors. Moreover, strong color tinting makes colors weak to be read. For this reason, I increase the range of the saturation and brightness of the background color and test some sets of colors 1. High tinting Color with different hue (75% warm color, 25% cold color, 25% gray scale) The high tinting colors balance the color of the background by raising the saturation level a bit. And gray shades could make other colors vibrant. On the other hand it is not easy to have an accurate subject if there are a lot of saturated colors present. Consequently, using the gray shade is impertinent to identifying design types because of its unique character despite of the background color. 0xf0a78b 0xad7762 0xece981 0xa8a75b 0xb7d3a7 0x809979 0xd2d2d2 0x989a9b 2. Tinting Color with different hue (50% warm color, 50% cold color) The brightness is reduced and different hues are used. However, yellow and green look like similar colors. 0xf1764b 0xa54e29 0xffffff 0xc9b755 0xBAD80A 0xc4db9b 0x6ec5d2 0x42828b 3. Tinting Color with different hue (50% warm color, 50% cold color) If the brightness is reduced more the more different hues are used. The saturation level also increases. 0xe75e5d 0xa73c3c 0xb19f6b 0x84784d 0x5ec376 0x358f52 0x6ec5d2 0x49909b
    • Background Color : 0X1c252d Final Color Set 0xf1317f 0x912e51 0xf7782b 0xa54d29 0xfed700 0x927c00 0x00b7b1 0x4b7671 R G B 241 29 127 247 120 43 165 77 41 0 184 177 R G B 145 46 81 145 46 81 146 124 0 75 118 113 1. Red,-purple, Red-Orange, Deep Yellow and Blue-Green (75% warm color, 25% cold color) Information design has a primary goal that the result has not any problem to communicate.Though, a set of colors has good point visually, if it interrupts a legibility of the information, color system needs to be changed. According to the tests, strong tinting color on any background color is unsuitable for the legibility. Using saturated color is also needed for accurate difference between design types. However, saturated primary color and secondary color on a dark background color are swelled much. In addition, 4 colors that are sorted by the range of 50% for each warm and cold colors have a problem on the unity of colors. For the reason, I make a decision to use saturated tertiary color mainly on more brightened background color than the color that is used in test1.Tertiary color is made by mixing primary and secondary colors so it has a possibility to mix naturally with any other colors. And, I can reduce the hue of colors by increasing the brightness and saturation of the background color. Moreover, the main hue spectrum is focused on warm colors like, red, purple, red orange and deep yellow except blue green for proper unity of colors. Blue green is matched to the design type, E.T.C., because it has less identity than the other 3 design types, interaction, motion and graphic.
    • How to read...
    • Initial IA Depth 1 ★Checking a number of works each design type with By Design Type By Year About (Intro) Share SNS ★Reading description, image, movie E.T.C. Objective information date, title, award, institute, client ★Comparing the amount of works each year ★Checking design types that is made in same year ★ Checking design type and product type of selected works ★ Checking percentage of design types and product types of selected years About (Bio) Depth 2 ★Reading descriptions about hyemi and resume ★Visiting sites related to hyemi song ★Download hyemi’s Resume ★Introduction about this project ★Clicking the button linked to the page shows the process of the project ★Facebook ★Twitter Relative information
    • Wireframe_Only design type and year screens 1 Visualizing Works Main Screen (“Design Type” Page) 2002-2010 About Year 4 2 1 3 2 Title “About” Button ➡The button is linked to “About” page include “Bio”and”Intro” 3 “Year” Button 4 3D Cube Graphic (including 63 Projects Buttons) ➡The button is linked to “Year” page ➡3D cube rotates to 90,180.270,360 degrees horizontally by clicking of the “Design Type” button ➡63 Buttons are linked to the each project page. 5 3D Graphic (including “Design Type” Buttons) ➡63 Buttons are linked to the each design type. 5 6 6 Copyright All reserved hyemi Song tF 1 2 3 ➡Each button is linked to Facebook and twitter each F Main Screen (“Year” Page) Visualizing Works 2002-2010 SNS Share Buttons 4 2010 Interaction Individual Interaction Individual Visualizing Works 2002-2010_Individual_2010 1 5 Detail Information of the selected project 2 Design Type Volume percent of the selected project ➡Interaction,Graphic,Motion,Etc : design type ➡Individual, Academic, Commercial : work type 3 6 Initial Information of the selected project ➡Year, design type, work type ➡A line is drawn from the location of the No. 3 to the place of the 7 selected object. 4 Selected object ➡Etch object is related to one of the 63 projects. 5 Year grid circle ➡The circle has a grid that shows each year from 2002 to 2010 6 Copyright All reserved hyemi Song tF F 63 objects ➡63 objects are rounded according to clockwise
    • Color There are two kind of bars. For one, a shading color bar is linked the subpage which effectively shows my design style including project’s process, award winnings and any other features, whilst a shading color bar shows only the works’ basic information when users do mouseover on the bars since these projects were classified as projects which have less value to reveal my design & art preference and skills. When it comes to the colors, shading colors were used to indicate the fact that certain works have not detailed description since shading or tinting colors could give the affordance to the people that this project is less important information than vivid colored one. Interaction Graphic Motion E.t.c Including detailed description no detailed description Main color set Sub color set 0xf1317f 0x912e51 0xf7782b 0xa54d29 0xfed700 0x927c00 0x00b7b1 0x4b7671 R G B 241 29 127 247 120 43 165 77 41 0 184 177 R G B 145 46 81 145 46 81 146 124 0 75 118 113 0x515d63 R G B 0x35434a 81 93 99 53 67 74 R 28 G 37 B 45 Background Color : 0X1c252d
    • Design Prototypes
    • Let’s read...
    • Final Design
    • Final Design
    • Final Design
    • Final Design
    • Final Design
    • Final Design
    • Final Design
    • Final Design
    • Final Design
    • Conclusion “Raw data has no value in itself, only the extracted information has value.” In 2007, I remember the moment that I met this comment in an Information Design class at sadi (Samsung Art & Design Institute). At that time, I was impressed with it because I felt that finding value from the raw data was similar with making a story and it was one of the ways to solve a complex problem that I was attracted. Basically, I have been interested in the method of storytelling with various media. So Information Design was regarded as a new way to share my idea. Fortunately, I had a chance to work a calendar design with raw data in the Information Design class. I designed a calendar with 358 diaries that I wrote in 2006. In the project, I tried to show my emotional flow and the point that people could infer my work pattern. Finally, I had got an honorable mention winner prize with it in an international competition, The 2007 Adobe Design Achievement Award. Those experiences really shocked me and I could understand how information design has such a power to show the idea. A keen interest about the information design has been growing steadily in me as I faced the end of the first round as a designer. Actually, the concept of dividing the rounds of work for a long period was made by me to refresh my consciousnesses. So, recently, I made a decision to do interactive information design project with my works that I have done from 2002-2010 to celebrate the success of my first round. Every moment of the process was not easy from planning to design and development. Especially, finding a core value and a good color set were one of the big problems. Even though that is the case, I did a number of tests for the color set. It was quite strict to find the point that satisfied with the legibility of both the legibility of the information and the aesthetic design. At first, I tried a high saturated color on a very dark or bright background colors. But those cases were good for legibility, on the other hand, I could not match the colors well to the design concept. Accordingly, I tried to use saturated tertiary colors mainly on more brightened background color. Finally, I could find more suitable color set to reflect the main purpose. Next problem was the development, because I am not a professional developer so I had to study with lots of case studies on the internet by myself. But It was interesting though, I should spend plenty of time to solve small problem often. Because, I could understand the development process more clearly. For reference, this project made in the environment with AS 3.0, Flash, PV3D, Flex and XML. Data visualization is one of the fields that is in the public eye. This flow is influenced by the present IT industry. According to the article"Information Visualization, Going Public" that was written by Margarida Fonseca in19 April 2010, he said "Soon, data visualization will appeal strongly to society on a more general level, once people realize that they can use both data and tools to analyze. In other words, we have been exposed to more data visualizations during the recent years as there are now conditions that allow for us to built them”. And In the article "Decision making 2.0 with data visualization?" that is written by Ekaterina Yudin on april 20, there is a phrase, Val Harian, Google’s Chief Economist, draws analogies to food and points out that food is a kind of data and data is like food. We used to be data poor, now the problem is data obesity. But we must not run straight to data dieting. We need to focus on quality of data samples and choose carefully structured data or “more locally sourced fine dining, then, less allyou-can-eat buffet”. Those articles suppose the future value of the information design clearly and have something in common with the reason why I hope to study data visualization work continuously. In conclusion, all of the facts in the field of new media and design inspired me to incubate my dream day by day and I'm satisfied that I could think about that every moment. So, I hope and I look forward to meet a gorgeous subject and make more advanced data visualization project based in this project "2002~2010 Visualizing Works" soon. Thanks for everyone! July.17.2011 Hyemi Song
    • Hyemi Song http://hyemisong.com/ http://twitter.com/#!/BohyemianSong ham311@gmail.com https://vimeo.com/hyemisong