<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>zhangyangchen</title>
	<atom:link href="http://zhangyangchen.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://zhangyangchen.com</link>
	<description>yangchen&#039;s portfolio and blog</description>
	<lastBuildDate>Tue, 03 May 2011 22:28:37 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.2</generator>
		<item>
		<title>Loxal</title>
		<link>http://zhangyangchen.com/loxal/</link>
		<comments>http://zhangyangchen.com/loxal/#comments</comments>
		<pubDate>Tue, 26 Apr 2011 05:53:56 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Blog]]></category>

		<guid isPermaLink="false">http://zhangyangchen.com/?p=865</guid>
		<description><![CDATA[Since I started working in Designit, a Europe&#8217;s design consultancy, it has been a long time without any update here. Because most new works are not allowed to share recently. This is a video I made to introduce a very cool and young company &#8211; Loxal which is founded in New York by my friends. [...]]]></description>
			<content:encoded><![CDATA[<p><object width="680" height="383"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=20720800&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed type="application/x-shockwave-flash" width="680" height="383" src="http://vimeo.com/moogaloop.swf?clip_id=20720800&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" allowfullscreen="true" allowscriptaccess="always"></embed></object></p>
<p>Since I started working in Designit, a Europe&#8217;s design consultancy, it has been a long time without any update here. Because most new works are not allowed to share recently.<br />
This is a video I made to introduce a very cool and young company &#8211; Loxal which is founded in New York by my friends. It is about the local merchant and its loyal customers. Loxal is a web-based platform that facilitates the creation and management of loyalty programs by small and mid-size merchants.<br />
It takes around 50 hours including amending the script and discussion with my friend. I appreciate this chance to practice my AE skills and enjoy the freelance working experience. Maybe I should try more?</p>
]]></content:encoded>
			<wfw:commentRss>http://zhangyangchen.com/loxal/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Kool(k)</title>
		<link>http://zhangyangchen.com/koolk/</link>
		<comments>http://zhangyangchen.com/koolk/#comments</comments>
		<pubDate>Wed, 26 Jan 2011 08:22:17 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[After Effects]]></category>
		<category><![CDATA[Processing]]></category>

		<guid isPermaLink="false">http://zhangyangchen.com/?p=800</guid>
		<description><![CDATA[A learning and organizing System for cooking]]></description>
			<content:encoded><![CDATA[<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="960" height="510" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=18873070&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed type="application/x-shockwave-flash" width="960" height="510" src="http://vimeo.com/moogaloop.swf?clip_id=18873070&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" allowfullscreen="true" allowscriptaccess="always"></embed></object></p>
<p>Kool(K), is a Controller-Free Kitchen Environment by using two 3D depth cameras and sensors. It has the possibility to analyze all the values from different sensors of appliances and record the cooking process. Users can easily share their own timeline-based recipes which are automatically generated by Kool(K) with the world. Meanwhile, it encourages people to try and improve the recipes which are existent. Thus, it is also a Learning and Organizing System for cooking after using for a while. They can track their own cooking and food habits, collect recipes from the world, and organize and plan their cooking time of multi-dishes.</p>
<p><br class="spacer_" /></p>
<table style="width: 960px;" border="0">
<tbody>
<tr>
<td><a href="http://zhangyangchen.com/wp-content/uploads/2011/01/Uncle-Buck.jpg" rel="lightbox[800]" title="Uncle Buck"><img class="alignnone size-full wp-image-811" title="Uncle Buck" src="http://zhangyangchen.com/wp-content/uploads/2011/01/Uncle-Buck.jpg" alt="" width="680" height="470" /></a></td>
<td valign="top">
<p style="padding-left: 30px;"><span style="background-color: #c0c0c0;"><strong>Background</strong></span></p>
<p style="padding-left: 30px;">As technology evolves, ubiquitous computers will also come in different sizes, each suited to a particular task in the kitchen. There is a design opportunity to design a smart system or appliance to inspire people to enjoy cooking.</p>
<p style="padding-left: 30px;">This is a nine weeks individual project in collaboration with <a href="http://www.electroluxdesignlab.com/">Electrolux design lab</a>.</p>
<p style="padding-left: 30px;">&nbsp;</p>
</td>
</tr>
<tr>
<td><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="680" height="395" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=19201537&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed type="application/x-shockwave-flash" width="680" height="395" src="http://vimeo.com/moogaloop.swf?clip_id=19201537&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" allowfullscreen="true" allowscriptaccess="always"></embed></object></p>
<p><a href="http://zhangyangchen.com/wp-content/uploads/2011/01/Timetable.jpg" rel="lightbox[800]" title="Schedule"><img class="alignnone size-thumbnail wp-image-823" title="Schedule" src="http://zhangyangchen.com/wp-content/uploads/2011/01/Timetable-150x150.jpg" alt="" width="150" height="150" /></a> <span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; font-size: 11px; color: #000000; line-height: normal;"><a href="http://zhangyangchen.com/wp-content/uploads/2011/01/DialogsFromInterView.jpg" rel="lightbox[800]" title="DialogsFromInterView"><img class="alignnone size-thumbnail wp-image-817" title="DialogsFromInterView" src="http://zhangyangchen.com/wp-content/uploads/2011/01/DialogsFromInterView-150x150.jpg" alt="" width="150" height="150" /></a> <a href="http://zhangyangchen.com/wp-content/uploads/2011/01/startPoint-01.jpg" rel="lightbox[800]" title="Initial idea about the kitchen system"><img class="alignnone size-thumbnail wp-image-840" title="Initial idea about the kitchen system" src="http://zhangyangchen.com/wp-content/uploads/2011/01/startPoint-01-150x150.jpg" alt="" width="150" height="150" /></a></span></td>
<td valign="top">
<p style="padding-left: 30px;"><span style="background-color: #c0c0c0;"><strong>Question</strong></span></p>
<p style="padding-left: 30px;">On the wide scope of this project, I investigated several kinds of phenomenon, cultures and cooking methods in the kitchen. I also am interested in finding out what will happen when kitchen applications become connected.</p>
<p style="padding-left: 30px;">I started with some interviews include an extreme user who is a Swedish chef and observing their daily culinary process after going through some papers.</p>
<p style="padding-left: 30px;">Through the interviews, I found a conflicting situation why people like cooking but they usually have fast food or frozen food.</p>
<p style="padding-left: 30px;">From these two doubts, I had a plan to understand them and to design something to supply creative ways to affect their cooking habits.</p>
<p><br class="spacer_" /></td>
</tr>
<tr>
<td><img class="alignnone size-full wp-image-812" title="Auestionnaire" src="http://zhangyangchen.com/wp-content/uploads/2011/01/Auestionnaire.jpg" alt="" width="680" height="455" /></p>
<p><a href="http://zhangyangchen.com/wp-content/uploads/2011/01/28_responses_for_Question.jpg" rel="lightbox[800]" title="28_responses_for_Question"><img class="alignnone size-thumbnail wp-image-816" title="28_responses_for_Question" src="http://zhangyangchen.com/wp-content/uploads/2011/01/28_responses_for_Question-150x150.jpg" alt="" width="150" height="150" /></a> <a href="http://zhangyangchen.com/wp-content/uploads/2011/01/Team_Discussion.jpg" rel="lightbox[800]" title="Team_Discussing"><img class="alignnone size-thumbnail wp-image-829" title="Team_Discussing" src="http://zhangyangchen.com/wp-content/uploads/2011/01/Team_Discussion-150x150.jpg" alt="" width="150" height="150" /></a></td>
<td valign="top">
<p style="padding-left: 30px;"><span style="background-color: #c0c0c0;"><strong>Understanding</strong></span></p>
<p style="padding-left: 30px;">I did a survey with my classmate Joachim to find out a few things we think would be very interesting to look at, namely how we manifest a food style, and how it may evolve and which influences it is subject to.</p>
<p style="padding-left: 30px;">If you would like to know more about it , please download the result of the Survey from here: <a href="http://zhangyangchen.com/wp-content/uploads/2011/01/Result_-Cuisine-thoughts-Google-Docs.pdf">Cuisine thoughts</a></p>
<p style="padding-left: 30px;">After collocating these information, I listed some key pints below:</p>
<p style="padding-left: 30px;">Exoticism inspires their cooking.<br />
People like cooking and sharing food with friends.<br />
Recipe is a popular way to learn cooking, but it has its limited.</p>
</td>
</tr>
<tr>
<td><a href="http://zhangyangchen.com/wp-content/uploads/2011/01/Cooking_analysis.jpg" rel="lightbox[800]" title="Web"><img title="Web" src="http://zhangyangchen.com/wp-content/uploads/2011/01/Cooking_analysis-1024x398.jpg" alt="" width="680" height="264" /></a></p>
<p><img class="alignnone size-full wp-image-844" title="designOpportunities" src="http://zhangyangchen.com/wp-content/uploads/2011/01/designOpportunities.jpg" alt="" width="680" height="215" /></td>
<td valign="top">
<p style="padding-left: 30px;"><span style="background-color: #c0c0c0;"><strong>Ideation</strong></span></p>
<p style="padding-left: 30px;">Based on the research, I illustrate an information map to describe the process of cooking from three elements which are people’s activities, ingredients and appliances.</p>
<p style="padding-left: 30px;">On this map, I pointed three design opportunities on three different steps during cooking.</p>
<p style="padding-left: 30px;">Here is a storyboard below to explicate my initial idea that people can create and share &#8220;recipes&#8221; easily.</p>
</td>
</tr>
</tbody>
</table>
<p><img class="alignnone size-full wp-image-836" title="conceptScenario" src="http://zhangyangchen.com/wp-content/uploads/2011/01/conceptScenario.jpg" alt="" width="960" height="416" /></p>
<table style="width: 960px;" border="0">
<tbody>
<tr>
<td><img class="alignnone size-full wp-image-848" title="Dynamic Recipe" src="http://zhangyangchen.com/wp-content/uploads/2011/01/DynamicRecipe.jpg" alt="" width="680" height="322" /></td>
<td valign="top">
<p style="padding-left: 30px;"><span style="background-color: #c0c0c0;"><strong>A dynamic recipe?</strong></span></p>
<p style="padding-left: 30px;">As for the scale of the concept, there are many aspects I have to consider. I decided to focus on the dynamic recipe. Since we are familiar with social network and it is not an innovation in this system.</p>
<p style="padding-left: 30px;">The dynamic recipe is generated based on timeline by the system via receiving values from different sensors in the kitchen. Thus the benefit of this new recipe is that users have an overview of the whole cooking process.</p>
</td>
</tr>
<tr>
<td><img class="alignnone size-full wp-image-849" title="trackingPeople" src="http://zhangyangchen.com/wp-content/uploads/2011/01/trackingPeople.jpg" alt="" width="680" height="401" /></td>
<td valign="top">
<p style="padding-left: 30px;"><span style="background-color: #c0c0c0;"><strong>Developing</strong></span></p>
<p style="padding-left: 30px;">In order to complete the system from technology to user experience, and integrate them into design, I played with sensors and a 3D depth camera which is Kinect in this case to make a prototyping for test.</p>
<p style="padding-left: 30px;">In this phase, programming is most challenging part for me. I used a processing library for hacking Kinect to track people&#8217;s activities.</p>
</td>
</tr>
<tr>
<td><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="680" height="383" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=18932611&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed type="application/x-shockwave-flash" width="680" height="383" src="http://vimeo.com/moogaloop.swf?clip_id=18932611&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" allowfullscreen="true" allowscriptaccess="always"></embed></object></td>
<td valign="top">
<p style="padding-left: 30px;"><span style="background-color: #c0c0c0;"><strong>Gesture interface</strong></span></p>
<p style="padding-left: 30px;">Considering the situation of cooking, for example, a wet hand, I designed a gesture interface instead of touchscreen or something else.</p>
<p style="padding-left: 30px;">Here is a short video to show which kind gestures have been used in this system.</p>
<p style="padding-left: 30px;">&nbsp;</p>
</td>
</tr>
<tr>
<td><img class="alignnone size-full wp-image-856" title="Kookwireframes-01" src="http://zhangyangchen.com/wp-content/uploads/2011/01/Kookwireframes-01.png" alt="" width="680" height="360" /></p>
<p><br class="spacer_" /></td>
<td valign="top">
<p style="padding-left: 30px;"><span style="background-color: #c0c0c0;"><strong>GUI</strong></span></p>
<p style="padding-left: 30px;">I started with wireframes to design the UI. I would like to keep the interface simple and efficient. The purpose of it is to afford limited information to help cooking.</p>
<p style="padding-left: 30px;"><span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; color: #000000; line-height: normal;"><a href="http://zhangyangchen.com/wp-content/uploads/2011/01/interfaceIntheKitchen.jpg" rel="lightbox[800]" title="3 Interfaces for 3 functions"><img class="alignnone size-thumbnail wp-image-808" title="3 Interfaces for 3 functions" src="http://zhangyangchen.com/wp-content/uploads/2011/01/interfaceIntheKitchen-150x150.jpg" alt="" width="150" height="150" /></a></span></p>
</td>
</tr>
<tr>
<td><img class="alignnone size-full wp-image-852" title="presentation" src="http://zhangyangchen.com/wp-content/uploads/2011/01/presentation.jpg" alt="" width="680" height="453" /></td>
<td valign="top">
<p style="padding-left: 30px;"><span style="background-color: #c0c0c0;"><strong>Result</strong></span></p>
<p style="padding-left: 30px;">Kool(K) is shown to Electrolux by projecting the UI animation on the worktop to simulate the scene in the near future as the photos on the left.</p>
<p style="padding-left: 30px;">Please watch the proposal video at the top of this page.</p>
</td>
</tr>
</tbody>
</table>
]]></content:encoded>
			<wfw:commentRss>http://zhangyangchen.com/koolk/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>X-ray Box</title>
		<link>http://zhangyangchen.com/rfid-magic-box/</link>
		<comments>http://zhangyangchen.com/rfid-magic-box/#comments</comments>
		<pubDate>Wed, 01 Dec 2010 00:24:51 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Blog]]></category>

		<guid isPermaLink="false">http://zhangyangchen.com/?p=777</guid>
		<description><![CDATA[I thought it would be good to share some work I have been doing last month. We had a 5 weeks prototyping experience course which brought a lot of fun to us. Here is one interesting result I made at the end of the second week. I named this prototyping X-ray Box and you can [...]]]></description>
			<content:encoded><![CDATA[<p>I thought it would be good to share some work I have been doing last month. We had a 5 weeks prototyping experience course which brought a lot of fun to us. Here is one interesting result I made at the end of the second week. I named this prototyping X-ray Box and you can find the documentation at the end of this post to explain how I made it.</p>
<p>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="680" height="383" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=16927847&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed type="application/x-shockwave-flash" width="680" height="383" src="http://vimeo.com/moogaloop.swf?clip_id=16927847&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</p>
<p>Documentation:</p>
<p>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="680" height="395" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=17380681&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed type="application/x-shockwave-flash" width="680" height="395" src="http://vimeo.com/moogaloop.swf?clip_id=17380681&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</p>
<p><a href="http://vimeo.com/17380681">Video Effects, RFID and Wireless</a> from <a href="http://vimeo.com/user1535767">Yangchen</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://zhangyangchen.com/rfid-magic-box/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Cat, Pad and Food</title>
		<link>http://zhangyangchen.com/cat-pad-and-food/</link>
		<comments>http://zhangyangchen.com/cat-pad-and-food/#comments</comments>
		<pubDate>Thu, 25 Nov 2010 22:53:33 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Prototyping]]></category>
		<category><![CDATA[Action Script 3]]></category>
		<category><![CDATA[App]]></category>
		<category><![CDATA[Arduino]]></category>

		<guid isPermaLink="false">http://zhangyangchen.com/?p=752</guid>
		<description><![CDATA[Feed your cat by shaking and tipping your iPad]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-753" title="cat&amp;food" src="http://zhangyangchen.com/wp-content/uploads/2010/11/catfood.jpg" alt="" width="960" height="538" /></p>
<table style="width: 960px;" border="0">
<tbody>
<tr>
<td>
<p><a href="http://zhangyangchen.com/wp-content/uploads/2010/11/sketch.jpg" rel="lightbox[752]" title="sketch"><img class="alignnone size-full wp-image-773" title="sketch" src="http://zhangyangchen.com/wp-content/uploads/2010/11/sketch.jpg" alt="" width="680" height="454" /></a></p>
<p><a href="http://zhangyangchen.com/wp-content/uploads/2010/11/writing-down-the-value-of-accelerometer.jpg" rel="lightbox[752]" title="writing down the value of accelerometer"><img class="alignnone size-thumbnail wp-image-770" title="writing down the value of accelerometer" src="http://zhangyangchen.com/wp-content/uploads/2010/11/writing-down-the-value-of-accelerometer-150x150.jpg" alt="" width="150" height="150" /></a> <a href="http://zhangyangchen.com/wp-content/uploads/2010/11/Making-the-wood-base.jpg" rel="lightbox[752]" title="Making the wood base"><img class="alignnone size-thumbnail wp-image-771" title="Making the wood base" src="http://zhangyangchen.com/wp-content/uploads/2010/11/Making-the-wood-base-150x150.jpg" alt="" width="150" height="150" /></a> <a href="http://zhangyangchen.com/wp-content/uploads/2010/11/presentation.jpg" rel="lightbox[752]" title="Presentation"><img class="alignnone size-thumbnail wp-image-772" title="Presentation" src="http://zhangyangchen.com/wp-content/uploads/2010/11/presentation-150x150.jpg" alt="" width="150" height="150" /></a> <a href="http://zhangyangchen.com/wp-content/uploads/2010/11/Testing-in-a-real-environment.jpg" rel="lightbox[752]" title="Testing in a real environment"><img class="alignnone size-thumbnail wp-image-774" title="Testing in a real environment" src="http://zhangyangchen.com/wp-content/uploads/2010/11/Testing-in-a-real-environment-150x150.jpg" alt="" width="150" height="150" /></a></p>
</td>
<td valign="top">
<p style="padding-left: 30px;"><span style="background-color: #c0c0c0;"><strong>INFO</strong></span></p>
<p style="padding-left: 30px;">This week, We had a course called Mobile Hacking with Matt Cottam and Brian Hinch from <a href="http://tellart.com/">Tellart</a>.</p>
<p style="padding-left: 30px;">The design brief for these five days of concept development and prototyping was to consider non-verbal communication and telepresence as constraints, while creating systems in which people could use their augmented mobile devices to interact with their pets when they were away from home.</p>
<p style="padding-left: 30px;"> </p>
<p style="padding-left: 30px;"><span style="background-color: #c0c0c0;"><strong>CONCEPT</strong></span></p>
<p style="padding-left: 30px;">Erik, Maria and I worked as a team designed an application in which a light sensor allowed you to see if your cat&#8217;s food is running out on your iPad. Then by shaking the iPad you could shake a box of food back at home to call your cat, and by tilting the screen with the same gesture as pouring cat food from a box, you could refill the bowl. Meanwhile, a proximity sensor allowed you to see if your cat is closing or not.</p>
<p><br class="spacer_" /></p>
</td>
</tr>
<tr>
<td>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="680" height="395" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=17024845&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed type="application/x-shockwave-flash" width="680" height="395" src="http://vimeo.com/moogaloop.swf?clip_id=17024845&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</td>
<td valign="top">
<p style="padding-left: 30px;"><span style="background-color: #c0c0c0;"><strong>DOCUMENTATION</strong></span></p>
<p style="padding-left: 30px;">Despite the model clearly being a sketch made of wood and hardware store parts, it was wireless and it worked.</p>
<p style="padding-left: 30px;">Here is a video documentation about the process of this project.</p>
</td>
</tr>
</tbody>
</table>
]]></content:encoded>
			<wfw:commentRss>http://zhangyangchen.com/cat-pad-and-food/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Fallen</title>
		<link>http://zhangyangchen.com/fallenstop-motion/</link>
		<comments>http://zhangyangchen.com/fallenstop-motion/#comments</comments>
		<pubDate>Sat, 16 Oct 2010 17:42:55 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Visualisation]]></category>
		<category><![CDATA[Photography]]></category>
		<category><![CDATA[Stop Motion]]></category>
		<category><![CDATA[workshop]]></category>

		<guid isPermaLink="false">http://zhangyangchen.com/?p=457</guid>
		<description><![CDATA[A stop motion experiment]]></description>
			<content:encoded><![CDATA[<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="680" height="455" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=15895036&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed type="application/x-shockwave-flash" width="680" height="455" src="http://vimeo.com/moogaloop.swf?clip_id=15895036&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p>It is one week workshop, collaborated with Jenn. This workshop was led by Timo Arnall (Oslo School of Architecture &amp; Design) and Matt Cottam.</p>
<p>In this week, we looked over film-making, cinematography, animation and other time-based techniques that allow us to explore ideas and story.  The aim of this workshop is to temporarily break-free from pixels, screens, digital tools and interfaces, and clever use simple objects and tools from the world, expose new ways to see, understand and communicate our work.</p>
<p>&lt;fallen&gt; is a story about a pencil which is guided by a pencil sharpener to another world.</p>
<p>Here is the documentation of  this workshop.</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="680" height="463" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=15784817&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed type="application/x-shockwave-flash" width="680" height="463" src="http://vimeo.com/moogaloop.swf?clip_id=15784817&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p><a href="http://zhangyangchen.com/wp-content/uploads/2010/10/SettingLight.jpg" rel="lightbox[457]" title="Setting Light"><img class="alignnone size-thumbnail wp-image-562" title="Setting Light" src="http://zhangyangchen.com/wp-content/uploads/2010/10/SettingLight-150x150.jpg" alt="" width="150" height="150" /></a> <a href="http://zhangyangchen.com/wp-content/uploads/2010/10/Processing.jpg" rel="lightbox[457]" title="Processing"><img class="alignnone size-thumbnail wp-image-564" title="Processing" src="http://zhangyangchen.com/wp-content/uploads/2010/10/Processing-150x150.jpg" alt="" width="150" height="150" /></a> <a href="http://zhangyangchen.com/wp-content/uploads/2010/10/dragonStopmotion.jpg" rel="lightbox[457]" title="Dragon Stopmotion Screenshot"><img class="alignnone size-thumbnail wp-image-563" title="Dragon Stopmotion Screenshot" src="http://zhangyangchen.com/wp-content/uploads/2010/10/dragonStopmotion-150x150.jpg" alt="" width="150" height="150" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://zhangyangchen.com/fallenstop-motion/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Ixd Jingle</title>
		<link>http://zhangyangchen.com/ixd-jingle/</link>
		<comments>http://zhangyangchen.com/ixd-jingle/#comments</comments>
		<pubDate>Thu, 14 Oct 2010 23:12:48 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Blog]]></category>

		<guid isPermaLink="false">http://zhangyangchen.com/?p=437</guid>
		<description><![CDATA[I was playing with paper and shadows, since i did not get to do that before. I would like to try how it looks in stop motion. And I also got some inspiration from Julien Vallee &#8216;s work. limited by the time, Erik and I made the rough version of the interaction design jingle can be [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-full wp-image-439" title="jingle" src="http://zhangyangchen.com/wp-content/uploads/2010/10/jingle.jpg" alt="" width="960" height="642" /><a href="http://zhangyangchen.com/wp-content/uploads/2010/10/projector.jpg" rel="lightbox[437]" title="projector"><img class="alignleft size-full wp-image-438" title="projector" src="http://zhangyangchen.com/wp-content/uploads/2010/10/projector.jpg" alt="" width="960" height="642" /></a></p>
<p>I was playing with paper and shadows, since i did not get to do that before. I would like to try how it looks in stop motion. And I also got some inspiration from <a href="http://www.jvallee.com">Julien Vallee</a> &#8216;s work.<br />
limited by the time, Erik and I made the rough version of the interaction design jingle can be found <a href="http://www.vimeo.com/15876724">here</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://zhangyangchen.com/ixd-jingle/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Airborne</title>
		<link>http://zhangyangchen.com/airborne/</link>
		<comments>http://zhangyangchen.com/airborne/#comments</comments>
		<pubDate>Sun, 03 Oct 2010 18:44:18 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Game Design]]></category>
		<category><![CDATA[Action Script 3]]></category>
		<category><![CDATA[Flash]]></category>

		<guid isPermaLink="false">http://zhangyangchen.com/?p=499</guid>
		<description><![CDATA[A multi-touch game app designed for iPhone &#038; iPad]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone" title="Two players playing the game on iPhone" src="http://zhangyangchen.com/wp-content/uploads/2010/10/twoPlayers.jpg" alt="" width="960" height="538" /></p>
<table style="width: 960px;" border="0">
<tbody>
<tr>
<td>
<p><a href="http://zhangyangchen.com/wp-content/uploads/2010/10/Sketchs-for-Coding-.jpg" rel="lightbox[499]" title="Sketchs for Coding"><img class="size-thumbnail wp-image-543 alignnone" title="Sketchs for Coding" src="http://zhangyangchen.com/wp-content/uploads/2010/10/Sketchs-for-Coding--150x150.jpg" alt="" width="150" height="150" /></a> <a href="http://zhangyangchen.com/wp-content/uploads/2010/10/Coding.jpg" rel="lightbox[499]" title="Coding"><img class="alignnone size-thumbnail wp-image-711" title="Coding" src="http://zhangyangchen.com/wp-content/uploads/2010/10/Coding-150x150.jpg" alt="" width="150" height="150" /></a> <a href="http://zhangyangchen.com/wp-content/uploads/2010/10/Testing.jpg" rel="lightbox[499]" title="Testing"><img class="alignnone size-thumbnail wp-image-710" title="Testing" src="http://zhangyangchen.com/wp-content/uploads/2010/10/Testing-150x150.jpg" alt="" width="150" height="150" /></a> <a href="http://zhangyangchen.com/wp-content/uploads/2010/10/Screenshot-of-the-game.jpg" rel="lightbox[499]" title="Screenshot of the game"><img class="size-thumbnail wp-image-542 alignnone" title="Screenshot of the game" src="http://zhangyangchen.com/wp-content/uploads/2010/10/Screenshot-of-the-game-150x150.jpg" alt="" width="150" height="150" /></a></p>
</td>
<td valign="top">
<p style="padding-left: 30px;"><span style="background-color: #c0c0c0;"><strong>INFO</strong></span></p>
<p style="padding-left: 30px;">In this one week project, our aim is to design a flash game which can be played on multi-touch devices.<br />
 I worked with Joachim, and created an air-fighting game on iphone/ipad.</p>
</td>
</tr>
<tr>
<td>
<p class="alignleft">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="swfobj_0" width="680" height="451">
      <param name="movie" value="http://zhangyangchen.com/wp-content/uploads/2010/10/airborne.swf" />
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="http://zhangyangchen.com/wp-content/uploads/2010/10/airborne.swf" width="680" height="451">
      <!--<![endif]-->
        
      <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object>
</p>
</td>
<td valign="top">
<p style="padding-left: 30px;"><strong><span style="background-color: #c0c0c0;">DEMO</span></strong></p>
<p style="padding-left: 30px;">Here is a version I made for web browser left. I used &#8220;mouseEvent&#8221; instead of &#8220;touchEvent&#8221; in this demo. <br />
 Please click &#8220;START&#8221; to play, enjoy!</p>
</td>
</tr>
<tr>
<td>
<p>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="680" height="395" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=15785635&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed type="application/x-shockwave-flash" width="680" height="395" src="http://vimeo.com/moogaloop.swf?clip_id=15785635&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</p>
</td>
<td valign="top">
<p style="padding-left: 30px;"><span style="background-color: #c0c0c0;"><strong>DOCUMENTATION</strong></span></p>
<p style="padding-left: 30px;">Here is a documentation of this workshop which gives an introduction to Multi-touch, with focus on designing and coding basic prototypes, working with touch-events &amp; gestures, user interaction and final tests on a touch-device. And we explained the codes of this game in it.</p>
</td>
</tr>
</tbody>
</table>
]]></content:encoded>
			<wfw:commentRss>http://zhangyangchen.com/airborne/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>What&#8217;s interaction design</title>
		<link>http://zhangyangchen.com/whats-interaction-design/</link>
		<comments>http://zhangyangchen.com/whats-interaction-design/#comments</comments>
		<pubDate>Thu, 09 Sep 2010 17:26:29 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Blog]]></category>

		<guid isPermaLink="false">http://zhangyangchen.com/?p=431</guid>
		<description><![CDATA[I have been asked about these questions below a lot of times, even at the beginning of this semester. What is interaction design(IxD)? What is the different between product design and IxD? Mike, our former programme director answered these questions in a pretty clear way. Product design focuses on user, emphasis on &#8220;use&#8221;, so product [...]]]></description>
			<content:encoded><![CDATA[<p>I have been asked about these questions below a lot of times, even at the beginning of this semester.</p>
<p>What is interaction design(IxD)? What is the different between product design and IxD?</p>
<p>Mike, our former programme director answered these questions in a pretty clear way.<br />
Product design focuses on user, emphasis on &#8220;use&#8221;, so product is the mediator; IXD focuses on &#8220;person&#8221;, emphasis on &#8220;social practice&#8221;, and technology is the mediator.<br />
That&#8217;s why interaction designers don&#8217;t make physical products mostly. Their design which is much wider than product can be a web, a method, a service, etc.</p>
]]></content:encoded>
			<wfw:commentRss>http://zhangyangchen.com/whats-interaction-design/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Unet System</title>
		<link>http://zhangyangchen.com/unet-system/</link>
		<comments>http://zhangyangchen.com/unet-system/#comments</comments>
		<pubDate>Sun, 30 May 2010 18:42:21 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Service Design]]></category>
		<category><![CDATA[After Effects]]></category>

		<guid isPermaLink="false">http://zhangyangchen.com/?p=495</guid>
		<description><![CDATA[A service solution for service house to visualize information in a valuable, distinct and interactive way.]]></description>
			<content:encoded><![CDATA[<table style="width: 960px;" border="0">
<tbody>
<tr>
<td>
<p><img class="alignnone size-full wp-image-496" title="ServiceHouse" src="http://zhangyangchen.com/wp-content/uploads/2010/10/ServiceHouse.jpg" alt="" width="680" height="383" /></p>
</td>
<td valign="top">
<p style="padding-left: 30px;"><strong><span style="background-color: #c0c0c0;">BACKGROUND</span></strong></p>
<p style="padding-left: 30px;">This project was done in collaboration with <a href="http://www.sogeti.com/">Sogeti</a>, who was working with Social services department of <a href="http://www.umea.se/">Umeå Kommun</a> (Municipality) to develop an IT system to support their daily work processes. The result is to deliver a final concept that shows how the collaborating department at the Umea Municipality can be assisted in making informed decisions efficiently.</p>
<p style="padding-left: 30px;"><span style="font-size: 13.2px;">We, Nirvana and I, as a team looked into the service houses within the social service department. Service houses in Umeå are where elderlies can live under daily supervision.</span></p>
</td>
</tr>
<tr>
<td><a href="http://zhangyangchen.com/wp-content/uploads/2010/05/Sofieborg-Servicehus.jpg" rel="lightbox[495]" title="Sofieborg Servicehus"><img class="alignnone size-thumbnail wp-image-724" title="Sofieborg Servicehus" src="http://zhangyangchen.com/wp-content/uploads/2010/05/Sofieborg-Servicehus-150x150.jpg" alt="" width="150" height="150" /></a> <a href="http://zhangyangchen.com/wp-content/uploads/2010/05/interviewManager.jpg" rel="lightbox[495]" title="Interview the Manager"><img class="alignnone size-thumbnail wp-image-722" title="Interview the Manager" src="http://zhangyangchen.com/wp-content/uploads/2010/05/interviewManager-150x150.jpg" alt="" width="150" height="150" /></a> <a href="http://zhangyangchen.com/wp-content/uploads/2010/05/interviewElderly_family.jpg" rel="lightbox[495]" title="Interview Elderlys family"><img class="alignnone size-thumbnail wp-image-730" title="Interview Elderlys family" src="http://zhangyangchen.com/wp-content/uploads/2010/05/interviewElderly_family-150x150.jpg" alt="" width="150" height="150" /></a></td>
<td valign="top">
<p style="padding-left: 30px;"><span style="background-color: #c0c0c0;"><strong>INITIAL RESEARCH</strong></span></p>
<p style="padding-left: 30px;">We visited one of them in Umeå which called Sofieborg Servicehus several times to understand their work. After five interviews with the elderly family and employees there, we got an overview of the hierarchy of Umea Municipality.</p>
</td>
</tr>
<tr>
<td>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="680" height="510" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=16520703&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed type="application/x-shockwave-flash" width="680" height="510" src="http://vimeo.com/moogaloop.swf?clip_id=16520703&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="680" height="510" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=17177403&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed type="application/x-shockwave-flash" width="680" height="510" src="http://vimeo.com/moogaloop.swf?clip_id=17177403&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</p>
</td>
<td valign="top">
<p style="padding-left: 30px;">On the left there are two videos which one is clip from our interview documentations to show staffs working details in service house. Other one is <span style="border-collapse: separate; color: #333333; font-family: Helvetica, Arial, sans-serif; line-height: 18px; font-size: 12px;">the analysis on how is the current situation in terms of information sharing and what is the scope of it.</span></p>
</td>
</tr>
<tr>
<td>
<div id="_mcePaste">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="swfobj_1" width="685" height="720">
      <param name="movie" value="http://zhangyangchen.com/wp-content/uploads/2010/05/informationflowChart.swf" />
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="http://zhangyangchen.com/wp-content/uploads/2010/05/informationflowChart.swf" width="685" height="720">
      <!--<![endif]-->
        
      <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object>
</div>
</td>
<td valign="top">
<p style="padding-left: 30px;">Based on interview and analysis, I made a flash chart to describe the hierarchy of service house and the information sharing in Umeå Kommun. Click each levels to look through the information details.</p>
<p><br class="spacer_" /></p>
</td>
</tr>
<tr>
<td>
<p><img class="alignnone size-full wp-image-735" title="Solution" src="http://zhangyangchen.com/wp-content/uploads/2010/05/Solution.jpg" alt="" width="680" height="600" /></p>
<p><a href="http://zhangyangchen.com/wp-content/uploads/2010/05/brainstorming.jpg" rel="lightbox[495]" title="brainstorming"><img class="alignnone size-thumbnail wp-image-554" title="brainstorming" src="http://zhangyangchen.com/wp-content/uploads/2010/05/brainstorming-150x150.jpg" alt="" width="150" height="150" /></a> <a href="http://zhangyangchen.com/wp-content/uploads/2010/05/ethnographic-workshop.jpg" rel="lightbox[495]" title="ethnographic workshop"><img class="alignnone size-thumbnail wp-image-553" style="border: 0px initial initial;" title="ethnographic workshop" src="http://zhangyangchen.com/wp-content/uploads/2010/05/ethnographic-workshop-150x150.jpg" alt="" width="150" height="150" /></a> <a href="http://zhangyangchen.com/wp-content/uploads/2010/05/ethnographic-research.jpg" rel="lightbox[495]" title="ethnographic research"><img class="alignnone size-thumbnail wp-image-555" title="ethnographic research" src="http://zhangyangchen.com/wp-content/uploads/2010/05/ethnographic-research-150x150.jpg" alt="" width="150" height="150" /></a></p>
</td>
<td valign="top">
<p style="padding-left: 30px;"><strong><span style="background-color: #c0c0c0;">CONCEPT</span></strong></p>
<p style="padding-left: 30px;">Because the staff in retirement house are the front level to face the clients who are selectezd by hospital and selection committee, we focused more on them in our case. After <span style="border-collapse: separate; color: #333333; font-family: Helvetica, Arial, sans-serif; line-height: 18px; font-size: 12px;">ethnographic research and </span><span style="border-collapse: separate; color: #333333; font-family: Helvetica, Arial, sans-serif; line-height: 18px; font-size: 12px;">brainstormings, </span><span style="border-collapse: separate; color: #333333; font-family: Helvetica, Arial, sans-serif; line-height: 18px; font-size: 12px;">we set o</span>ur goal of the project is how can we make the information sharing  between the Umeå Kommun’s different levels of management and the service house staff more efficient.</p>
<p style="padding-left: 30px;">There is a graphic to show our solution for the goal. We designed four channels for all the related people in the system to reach the data base to get the information they need. It was important to make the system for each group that the information is not overload or lost.</p>
<p style="padding-left: 30px;">All the tools that are included in this system are<span style="border-collapse: separate; color: #333333; font-family: Helvetica, Arial, sans-serif; line-height: 18px; font-size: 12px;"> feasible and familiar to each group.</span></p>
<p style="padding-left: 30px;"><span style="border-collapse: separate; color: #333333; font-family: Helvetica, Arial, sans-serif; line-height: 18px; font-size: 12px;"> </span></p>
</td>
</tr>
<tr>
<td>
<p>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="680" height="383" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=16142558&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed type="application/x-shockwave-flash" width="680" height="383" src="http://vimeo.com/moogaloop.swf?clip_id=16142558&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</p>
</td>
<td valign="top">
<p style="padding-left: 30px;"><span style="background-color: #c0c0c0;"><strong>RESULT</strong></span></p>
<p style="padding-left: 30px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #222222; line-height: 19px;">Here is our story of the concept.</span></p>
</td>
</tr>
</tbody>
</table>
]]></content:encoded>
			<wfw:commentRss>http://zhangyangchen.com/unet-system/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Starry Sky</title>
		<link>http://zhangyangchen.com/muti-layering/</link>
		<comments>http://zhangyangchen.com/muti-layering/#comments</comments>
		<pubDate>Wed, 17 Mar 2010 09:38:40 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Graphic Design]]></category>
		<category><![CDATA[After Effects]]></category>

		<guid isPermaLink="false">http://zhangyangchen.com/?p=294</guid>
		<description><![CDATA[A project was collaborated with Umevatoriet to design a mobile phone app based on AR technique.]]></description>
			<content:encoded><![CDATA[<table style="width: 960px;" border="0">
<tbody>
<tr>
<td><a href="http://zhangyangchen.com/wp-content/uploads/2010/03/interface.jpg" rel="lightbox[294]" title="interface"><img class="alignnone size-full wp-image-375" title="interface" src="http://zhangyangchen.com/wp-content/uploads/2010/03/interface.jpg" alt="" width="680" height="383" /></a></td>
<td valign="top">
<p style="padding-left: 30px;"><span style="font-weight: normal; font-size: 13px; color: #222222; line-height: 19px;"><span style="background-color: #c0c0c0;"><strong>INFO</strong></span></span></p>
<p style="padding-left: 30px;">I worked with <a href="http://www.umevatoriet.se/static/en/">Umevatoriet</a> which is an observatory and planetarium to design a graphic advertisement.  The  main mission of the campaign was to inspire young people’s interest in natural sciences.</p>
<p style="padding-left: 30px;">The goal of this project is exploring the possibilities of using graphic form, layering and animation in interface design.<span lang="EN-US"> These approaches attempt to explore a visual structure for interfaces that break the traditional boundaries of GUI design.</span></p>
</td>
</tr>
<tr>
<td>
<p><a href="http://zhangyangchen.com/wp-content/uploads/2010/03/inspiration.jpg" rel="lightbox[294]" title="inspiration"><img class="alignnone size-full wp-image-360" title="inspiration" src="http://zhangyangchen.com/wp-content/uploads/2010/03/inspiration.jpg" alt="" width="340" height="208" /></a><a href="http://zhangyangchen.com/wp-content/uploads/2010/03/planetarium.jpg" rel="lightbox[294]" title="planetarium"><img class="alignnone size-full wp-image-365" title="planetarium" src="http://zhangyangchen.com/wp-content/uploads/2010/03/planetarium.jpg" alt="" width="340" height="208" /></a></p>
</td>
<td valign="top">
<p style="padding-left: 30px;">Inside the observatory there is an artificial starry sky – a planetarium that makes it possible to view events in space. Furthermore, there are more exciting experiments and actives for children in Umevatoriet.</p>
</td>
</tr>
<tr>
<td><img class="alignnone size-full wp-image-359" title="Information_layers" src="http://zhangyangchen.com/wp-content/uploads/2010/03/Information_layers.jpg" alt="" width="680" height="427" /></td>
<td valign="top">
<p style="padding-left: 30px;"><span style="font-weight: normal; font-size: 13px; color: #222222; line-height: 19px;"><span style="background-color: #c0c0c0;"><strong>RESEARCH &amp; ANALYZE</strong></span></span></p>
<p style="padding-left: 30px;">After interviewing with Umevatoriat and Umea citizen, I noticed that most of people, don&#8217;t know where Umevatoriat is but they felt a lot of interest to visit it. Thus, my idea is to find a solution to make the relation between city Umea and Umevatoriat closer.</p>
<p style="padding-left: 30px;">One concept is that masking the solar system on the map of Umea. The position of sun is the same location of Umevatoriat. According to the map, I selected some pots on the earth orbit which are available in the city to install the outdoor advertisements. Blue circles display the sign locations in the center of  Umea.</p>
<p style="padding-left: 30px;">On the basis of this analyses, I separated all information into 3 different categories based on content and behaviors how to get information in normal life.</p>
</td>
</tr>
<tr>
<td><a href="http://zhangyangchen.com/wp-content/uploads/2010/03/map.jpg" rel="lightbox[294]" title="Umea map and solar system"><img class="alignnone size-full wp-image-362" title="Umea map and solar system" src="http://zhangyangchen.com/wp-content/uploads/2010/03/map.jpg" alt="" width="340" height="157" /></a><a href="http://zhangyangchen.com/wp-content/uploads/2010/03/map2.jpg" rel="lightbox[294]" title="some spots on the map"><img class="alignnone size-full wp-image-361" title="some spots on the map" src="http://zhangyangchen.com/wp-content/uploads/2010/03/map2.jpg" alt="" width="340" height="157" /></a></td>
<td valign="top"></td>
</tr>
<tr>
<td>
<p><a href="http://zhangyangchen.com/wp-content/uploads/2010/03/differentScreenSolutions.png" rel="lightbox[294]" title="differentScreenSolutions"><img class="size-full wp-image-358 alignnone" title="differentScreenSolutions" src="http://zhangyangchen.com/wp-content/uploads/2010/03/differentScreenSolutions.png" alt="" width="339" height="196" /></a></p>
<p>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="340" height="255" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=17076663&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed type="application/x-shockwave-flash" width="340" height="255" src="http://vimeo.com/moogaloop.swf?clip_id=17076663&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</p>
</td>
<td valign="top">
<p style="padding-left: 30px;"><strong><span style="background-color: #c0c0c0;">CONCEPT GENERATION</span></strong></p>
<p style="padding-left: 30px;">Considering the huge cost of building a lot of tangible dome screens around the city, I offered another solution using the screen of  a mobile phone to display information.</p>
<p style="padding-left: 30px;">In order to add more interaction between  a physical real-world environment  and the screen-based universe, I found another interesting technology Augmented Reality which I tested on my  laptop with the cam.</p>
</td>
</tr>
<tr>
<td>
<p><a href="http://zhangyangchen.com/wp-content/uploads/2010/03/interfaceSketch.jpg" rel="lightbox[294]" title="Sketch"><img class="alignleft size-full wp-image-380" title="Sketch" src="http://zhangyangchen.com/wp-content/uploads/2010/03/interfaceSketch.jpg" alt="" width="680" height="350" /></a></p>
<p><br class="spacer_" /></p>
</td>
<td valign="top">
<p style="padding-left: 30px;"><span style="background-color: #c0c0c0;"><strong><span style="background-color: #c0c0c0;">DESIGN</span></strong></span><strong><span style="background-color: #c0c0c0;"> PROPASAL</span></strong></p>
<p style="padding-left: 30px;">The concept used mobile phones to browse information of Umevatoriat.  People in proximity of the mark area can spontaneously sign in, and connect to the Starry Sky application via their Bluetooth-enabled mobile.</p>
<p style="padding-left: 30px;">Based on augmented reality and location service, citizens can easily browse current information about Umevatoriat and Universe in the mark areas around Umeå,</p>
<p style="padding-left: 30px;">The mark on the ground is an abstract pattern  about Umeå map to evoke curious and help people without mobile phone to reach Umevatoriat.</p>
</td>
</tr>
<tr>
<td>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="680" height="383" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=17198867&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" /><embed type="application/x-shockwave-flash" width="680" height="383" src="http://vimeo.com/moogaloop.swf?clip_id=17198867&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1&amp;autoplay=0&amp;loop=0" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</td>
<td valign="top">
<p style="padding-left: 30px;">Here is the video to show the concept.</p>
<p><br class="spacer_" /></p>
</td>
</tr>
</tbody>
</table>
]]></content:encoded>
			<wfw:commentRss>http://zhangyangchen.com/muti-layering/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

