Page 1

1

An Educational iPad Application Project

Bei Yan

03308140 415-999-5818 beiyan1021@gmail.com Academy of Art University Graduate School of Web Design & New Media Final Proposal 04/30/2013


Autobiography 1 Resume 2 Elevator Pitch 3 Thesis Abstract 4 Statement of Interest 5 Proof of Concept 6 Strategic Process 21

Visual Process 28

Table of Content User Experience Process 48

Technical Process 74

Portfolio 75 Analysis 80 Conclusions 81 Project Links 82 Bibliography & Credits 83

2

Competitive Analysis 22 Competitive Matrix 26 Unique Position Statement 27 Inspiration for Visual Design 29 Mood boards 31 Visual Design Process 33 Final Visual Design Guidelines 44

Target Audience 49 Personas 50 Mind Map 53 Information Architecture 54 Wireframes 55 Key user flow 65 User Testing Process 68 Project Form 74 Technology Used 74


11

Autobiography

My name is Bei Yan. I liked painting when I was a little girl. I lived in Beijing for a long time. Beijing is a wonderful city, which combines Chinese traditional culture with international culture. My undergraduate major was industrial design. I fell in love with design through my four years of studies, and I became curious about styles of design that are totally different from my own. How do people who have different cultural backgrounds create such different design styles? I wanted to know more about different cultures and wanted to try different lifestyles to understand this amazing world better, so I moved to San Francisco, a totally different city compared to my hometown. For me, studying overseas is an opportunity to expand scope of knowledge and increase my understanding of design. I have absorbed a lot of new things in Academy of Art University. I also have found that I know little about my hometown’s culture, especially now seeing it from a different perspective. I think there is still a lot of stuff I need to study and understand. I want to express myself by design, and I try to create and explore a way of integrating western and eastern culture in my design work. For me, the most important aspect is to use design to make people feel happy and enjoy their life more.


2 BEI YAN B E I

Y A N OBJECTIVE

EDUCATION

940 Post St Apt. 31, San Francisco, California, CA 94109 415-999-5818 beiyan1021@gmail.com bei1021design.com

To obtain a position as a web designer or user interface designer, where I would be able to use my knowledge in a design team. Academy of Art University Masters of Fine Art in Web Design & New Media Beijing University of Technology Bachelors of Science in Industrial Design

Resume

EXPERIENCE

San Francisco, California September 2010 – Present Beijing, China September 2006 - June 2010

Pop 17 , San Francisco, September 2012- December 2012 Web design intern • Assisted programmer to redesign company website • Assisted team member to edit photos of interviews San Francisco Baking Company,San Francisco, April 2012- May 2012 Web design intern • Assisted photographer in taking photos of cookies • Assisted web designer in building company website Beijing Hollysys Science and Technology Ltd. ,China, July 2009 - August 2009 Graphic design intern •Designed the logo to meeting the strategic needs of the company •Assisted with visual identity design of the company Hanwang Technology Company, China,June 2008 - August 2008 Graphic design intern •Worked with upper management on branding •Assisted with development of advertising New Oriental Education & Technology Company, China, August 2007 - December 2007 Campus sale agent •Promoted and sold educational products •Improved my oral communication skills

SKILLS

Design Visual Research Information Architecture Task Analysis Wireframe Design Interface Design Usability Testing

Softwares

Languages

Adobe Photoshop Mandarin Illustrator English InDesign Premiere After Effects Flash Omnigraffle HTML5/CSS3, JavaScript(Basic)


3

Elevator Pitch

Core concept Design a iPad application about Clouds Problem How to educate children and attract them to like clouds Solution Combine some interactive function and beautiful photos about clouds


4

Thesis Abstract

My thesis project is to develop an iPad application “See Clouds” for children to gain knowledge about clouds, or simply enjoy their beauty and have fun. Everyone can see cloud very easily. Some people don’t pay attention to cloud. They may miss some beautiful nature scenery. I think there is a change to design an application about cloud to help them know that there are many beautiful scenes in the sky. The project will primarily focus on children between 6-12. The goal of this project is both educate and make people more aware of the beauty of nature. The application will have three main parts: identifying cloud; exploring cloud; sharing or see cloud photos. The application will explain cloud types and provide photos for people who want to identity clouds or who just want to spend time to have fun and see different kinds of cloud photos. User will not only learn about cloud formation, types and other details, but also can enjoy beautiful cloud scenes in a unique interactive experience.


5

Statement of Interest

Like many others, but perhaps myself even more, I have loved the beauty of clouds since I was a child. They seem to move with a sense of freedom and serenity. When sunlight touches them, it’s easy to feel inspired. This has led me to take many photos of clouds. I decided to develop a iPad application to help people understand and appreciate their beauty. From the project, I hope to improve my visual and user experience design skills. I will use Photoshop, Illustrator, After Effect, Edge, HTML, and CSS3 to create my project. Through this project, I hope to achieve a new level of user interface design and animation design.


Proof of Concept


Proof of Concept

7

Task 1

User wants to know different cloud types and information, such as "cumulus".

3. User see the text (about what are clouds). 4. User slide to next page. 1. User sees the homepage. 2. User taps the first button to go to "explore clouds" page.


Proof of Concept

1. User sees the tutor page. 2. User taps the page.

8

1. User sees the "swipe" animation.


Proof of Concept

User swipes the "Low-level clouds".

9

1. User sees the cumulus cloud. 2. User taps it.


Proof of Concept

1. User sees the cumulus cloud information. User hears the audio at the same time. 2. User taps the small images(or user can swipes).

10

1. User sees the cumulus photo. 2. User swipes to see next photo(or user can tap the small photos).


Proof of Concept

11

Task 2

User wants to know some basic information about cloud.

3. User see the text (about what are clouds). 4. User slide to next page.

User taps the first button to go to "explore clouds" page.


Proof of Concept

12

3 User taps the "what are clouds?".

1. User sees animation and information. 2. User taps the "replay" button to see it again. 3. User taps the button to see next page.

2


Proof of Concept

1. User sees animation and information. 2. User taps the button to see next page.

13

1. User sees animation and information. 2. User taps the button to see next page.


Proof of Concept

1. User sees animation and information. 2. User taps the button to go back to "explore clouds" page.

14


Proof of Concept

15

Task 3

User sees a cloud in the sky. She wants to take a photo and upload it to this application.

3. User see the text (about what are clouds). 4. User slide to next page. User taps the second button to go to cloud photos page.


Proof of Concept

User sees the "cloud photos" page. User taps the upload button.

16

User taps the first button to take photo.


Proof of Concept

User uses camera to take a photo.

17

1 User adds some descriptions. 2 User taps share button to upload photo.


Proof of Concept

1. User uploads the photo to the gallery.

18


Proof of Concept

19

Task 4

User wants to log in to her own page.

3. User see the text (about what are clouds). 4. User slide to next page. User taps the third button to log in.


Proof of Concept

1. User input her name and password. 2. User taps the submit button.

20

User goes to her own page.


Strategic Process


Strategic Process

Competitive Analysis 22

Web Weather for Kids This is an educational website for children. There is a lot of cloud information and pictures in this weather website for kids. Kids can learn about cloud from this website.

PROS: T h e we b s i t e h a s a l l k i n d s o f c l o u d knowledge and information. There are many photos and comments about clouds, and the information is helpful for users to better understand clouds. The articles are easy for kids to read. The website contains mini interactive games. CONS: The visual design is bad. It looks boring. The website doesn't attract users to study and spend time on it. The users can’t concentrate on the article because the layout of articles and photos is disorganized. The layout is also hard for users to read.


Strategic Process

Competitive Analysis 23

Science-edu This is a website where people can learn about clouds. The website has a blue background and includes some short descriptions about different cloud types and other diagrams.

PROS: Navigation is clear. Users can find different catalogs ver y easily. The website can automatically display all of the information. Users can listen to audio to study about clouds. There is a “show help� button that tell users how to use the other buttons. Users can download all of the text transcript of the audio. CONS: The website's visual design is not good, and it looks tedious. The website uses ugly buttons, and the font size is too big. The pictures are small and their quality is very low.


Strategic Process

Competitive Analysis 24

Color Uncovered This is an educational ipad application. User can learn about color. There are some interactive features in this application. User can compare different colora and read some articles about color.

PROS: The visual design is appealing. The application uses black and white as their main colors and combined with different vivid colors. There are many interactive features in this application. User like to explore all the features to learn. CONS: There are all kinds of layouts in different pages. User will confused and need some time to adapt to the new layout. There are many different colors in every page. The fonts are very small. User don't want to spend time to read the articles and explanation.


Strategic Process

Competitive Analysis 25

Wild Friends This is an educational ipad application. User can see many photos of wild animals. The app also contains short descriptions for each wild animal and displays their habitat on a map.

PROS: The app updates photos frequently. Users can choose favorite photos to collect. All the photos are high quality. Users can choose a “slide show mode” to see beautiful photos. Users can connect with their Facebook or Twitter accounts. CONS: There are too many buttons on the page. User doesn’t know which part is most important. The app requires an Internet connection all the time.


Strategic Process

Competitive Matrix 26

Weather for kids

Science-edu

VISUAL DESIGN LAYOUT EASY TO LEARN EASE OF USE CONTENT

EXCELLENT

AVERAGE

POOR

Color Uncovered

Wild Friends

See Clouds


Strategic Process

Unique position Statement 27

Based on my comparative product research, I found that the many cloud knowledge websites don’t have a good balance between aesthetics and content, so I want to combine information and images in a better way. My "See Clouds" project will be more focused on user interface design. I will design some parts like a sky page to emphasize the features of a cloud: free, relaxing, and changeable. The application will express the beautiful side of clouds and add some interactive animations to attract children to use and help them understand. User can not only become knowledgeable about clouds, but also get a pleasurable visual experience and have fun with the application. At the same time, the application will be simple for children to use.

Educational Fun Simple Beautiful

My Project


Visual Process


Visual Process Got Milk

Inspiration for Visual Design 29 UK-energy-guide


Visual Process Cloud type diagrams

Inspiration for Visual Design 30


Visual Process

Mood Board 31


Visual Process

Mood Board 32

Simple Happy Easy Cute Sky


Visual Process

Logo Sketches 33


Visual Process

Logos 34


Visual Process Fonts

Ubuntu Titling ABCDEFGHIJKLMNOPQRSTUVWXYZ

Branding 35 Color

R: 0 G: 174 B: 240

abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()_+

Bariol

R: 250 G: 87 B: 94

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()_+

R: 36 G: 56 B: 64


Visual Process

Icons 36

Final Version


Visual Process Different versions visual design (home page)

Visual Design Process 37


Visual Process

Visual Design Process 38


Visual Process Different versions visual design (Explore clouds page)

Visual Design Process 39


Visual Process

Visual Design Process 40


Visual Process

Visual Design Process 41


Visual Process Different versions visual design (Photos page)

Visual Design Process 42


Visual Process Clouds Illustrations

Visual Design Process 43


Visual Process Final Version

Visual Design Process 44


Visual Process Home Page

Final Visual Design Guidelines 45


Visual Process Explore Clouds Page

Final Visual Design Guidelines 46


Visual Process Explore Clouds Page

Final Visual Design Guidelines 47


Visual Process Clouds Photos Page

Final Visual Design Guidelines 48


User Experience Process


User Experience Process Primary Target Audience Children between 8-12 years old Elementary school students Understand English • Curious

unfamiliar things • Observe their life • Explore new thing

Secondary Young adult who like nature scenery

Target Audience 50


User Experience Process

Personas 51

Primary Users

QUOTE: “I want happy every day!�

Name: Goals: Profession: Location: Age: Home life: Hobbies: Internet Usage: Describe Previous Knowledge of the Topic: Profile:

Annie Ostroff She wants to gain knowledge about clouds and have fun. Student San Francisco 8 She lives with her mother and father. Swimming and drawing 5 hours per week None Annie is curious about everything. She likes playing and painting. She has enough time to create her own drawings. She usually surfs the Internet to find some interesting news and lovely pictures in order to find inspiration. She often uses his father's iPad to play games.


User Experience Process

Personas 52

QUOTE: “I want to know more about this world. �

Name: Goals: Profession: Location: Age: Home life: Hobbies: Internet Usage: Describe Previous Knowledge of the Topic:

Kent Waysack He wants to know about clouds and see many beautiful cloud images. Student New York 10 He lives in an apartment with his parents. Reading 1 hour per day

Profile:

Kent is a smart boy. He likes go to school to study. His parents encourage him to study by himself. He likes reading and usually goes to the Internet to gain knowledge about different things. He has his own iPad.

Little


User Experience Process

Personas 53

Secondary Users

QUOTE: “There are no repeat scenes in the sky.”

Name: Goals: Profession: Location: Age: Home life: Hobbies: Internet Usage: Describe Previous Knowledge of the Topic: Profile:

Lisa Steal She wants to know about different types of clouds in open air. College Student San Francisco 21 She lives with a roommate. Photography 3 hours per day Little Lisa is a college student. She loves her freedom life, so she doesn’t want to live at home anymore and lives with friends. Her hobby is photography. She often takes all kinds of photos, especially the landscapes and sky, because she loves nature scence. She will upload her photos on facebook and wants to share them to her friends.


User Experience Process

Mind Map 54


User Experience Process

Information Architecture 55

Home Page

Log in

Profile Page

Newest Explore Clouds

Clouds Photos

Popular Random

Upload Photo What are cloud?

How are clouds formed?

Why do clouds float?

Question1

Question2

High Clouds

Middle Clouds

Low Clouds

Cirrus

Altostratus

Stratocumulus

Cirrostratus

Altocumulus

Nimbostratus

Cirrocumulus

Fog

Contrail

Stratus

Log in

Upload Photos

Cumulus

Question3

Mammatus Clouds

Add Comments

Lenticular Water Cycle

Cumulonimbus

Question4

Cloud Introduction

Photo Galleries

Share to facebook/twitter/ Email


User Experience Process Sketches 1

Wireframes 56


User Experience Process Sketches 2

Wireframes 57


User Experience Process Sketches 3

Wireframes 58


User Experience Process

Morning

Afternoon

Night

Wireframes 59

Choose a  place  to   put  your  photo

Early Version Early vesrion contain the website and iPhone wireframes. After that, I change my project to the iPad application.

Search Photos

text

Web Page Title

Web Page Title http://domain.com

LOGO

http://domain.com

Google

About Clouds

Clouds Types

http://domain.com

Web Page Title

Clouds Photos

Log In

LOGO

Google

About Clouds

Clouds Types

Clouds Photos

E-mail

Hello, Welcome to See Cloud Website! You can find all kinds of information and photos about cloud here. Enjoy:)

About Clouds About Clouds

Google

Clouds Photos

Clouds Types Afternoon

Morning

Log in

Clouds Types

Clouds Photos text

Morning

Upload Photos

Password Create New Account

LOGO LOGO

Google

Web Page Title

http://domain.com

Night

Afternoon

text

Night

Search Photos Search Photos

Succeed

High Level Clouds • • • •

Available on App Store

Cirrus Cirrostratus Cirrocumulus Contrail

Middle Level Clouds

Clouds Types

Web Page Title

http://domain.com

Google

About Clouds

Special Clouds

Web Page Title

Web Page Title http://domain.com

LOGO

Low Level Clouds

LOGO

Clouds Photos

About Clouds

Clouds Types

LOGO LOGO

Clouds Photos

!"#$%#&'%()*+,-.

Google

About Clouds

About Clouds

Morning

TITLE

Cirrus are sometimes called “mare’s tails” because they appear to be brushed across the sky and are hair-like in appearance. Curled ends are common in this cloud type. They are usually quite thin and wispy, and blue sky is visible through portions of the cloud. These clouds are generally white.

Google

http://domain.com

Upload Photos

Cirrus

Web Page Title

http://domain.com

Google

Clouds Types

Clouds Photos

Clouds Types

Clouds Photos

Afternoon

Night

XXXXXXXXXXXXXXXXX XXXXXXXX

Log In E-mail

Password Log In

Create New Account

Comments XXXXXXXXXXXXXXXXX XXXXXXXX XXXXXXXXXXXXXXXXX XXX

!"#$%&'"()"*"$*+,-"#%$$-#.(%/"%0"1-+2".(/2"'+%3$-.)" %0"4*.-+"%+"(#-"#+2).*$)5"67-"'+%3$-.)"*+-")%")8*$$" */'"$(,7.".7*.".7-2"#*/"9$%*."(/".7-"*(+5"

Leave a message

High Level Clouds • • • •

Cirrus Cirrostratus Cirrocumulus Contrail

Low Level Clouds

SUBMIT

Special Clouds

Web Page Title http://domain.com

LOGO

Web Page Title

Google

About Clouds

Clouds Types

Clouds Photos

http://domain.com

LOGO Hello, XXX

/*0%#&'%()*+,-%1*&2',.

Search Photos

text

Middle Level Clouds

Upload Photos My photos:

Google

About Clouds

Clouds Types

Clouds Photos


User Experience Process

12:00 PM

Wireframes 60

12:00 PM

Cloud Types

Back

12:00 PM

Clouds Types

Back

High Level Cloud

High Level Cloud

Cirrus

LOGO

Hide Text

12:00 PM

Cloud Photos Try to Blow!

Upload Photos

Cirrus are sometimes called “mare’s tails” because they appear to be brushed across the sky and are hairlike in appearance. Curled ends are common in this cloud type. They are usually quite thin and wispy, and blue sky is visible through portions of the cloud. These clouds are generally white.

Middle Level Cloud

Clouds Types

Back

Low Level Cloud

Clouds Photos Morning Clouds Types

Back

12:00 PM

Cloud Photos

Back

Clouds Photos

12:00 PM

Cloud Photos

Clouds Types

Back

Clouds Photos

12:00 PM

Cloud Photos

Afternoon

Clouds Types

Back

Night

Clouds Photos

12:00 PM

Cloud Photos

XXXX

My photos E-mail Password

Title Log In

Description

My favourite

Submit

Clouds Types

Clouds Photos

Clouds Types

Clouds Photos

Clouds Types

Clouds Photos

Clouds Types

Clouds Photos


User Experience Process

Wireframes 61

Final Version iPad application wireframes

Home Page

User can tap the buttons to go to another page.

My Page

User can sign up and get their page to upload cloud photos or collcet their favorites photos.


User Experience Process

Wireframes 62

Explore Cloud Page 2

1

3 User can swipe or tap to explore this page.

1 User can tap logo to go back to homepage. 2 User can tap it to go back to explore clouds page. 3 User can tap it to go to next page. 4 User can tap buttons to replay the animation.

4


User Experience Process

Wireframes 63

Explore Cloud Page 2

1

3 User can swipe or tap to explore this page.

1 User can tap the icon to go back to explore clouds page. 2 User can tap the small image to see photo of this cloud. 3 User can tap it to see different clouds.


User Experience Process

Wireframes 64

Cloud Photos Page 1

Cloud Photos Page (Upload) 2

4

3

1 User can tap the button to go to upload photo page. 2 User can tap the button to change different photos. 3 User can tap it to see this large photo and detail. 4 User can swipe the page to see more photos.

User can tap the button to take photo.


User Experience Process

Wireframes 65

Cloud Photos Page (Upload)

Cloud Photos Page

1 1 2

3

1 User can add some descriptions. 2 User share the photo to Facebook, twitter or Email. 3 User can tap the button and submit the photo.

2 1 User can tap the icon to hide the information. 2 User can add comments. 3 User can tap it submit comments.

3


User Experience Process

Key User Flow 66

Task 1 Annie saw some beautiful clouds in the sky and she wants to know more knowledge about different cloud types. She wants to see different cloud types and information.

• She taps the “explore cloud” button and goes to the “explore cloud” pages. • She sees the tutor and taps the screen.

Home Page

Tutor Page

Explore clouds

• She sees the “explore cloud” page and swipe “low-level cloud” section. • She sees the cumulus cloud and taps. • She sees this cloud information and swipe to see other cumulus photos.

Low-level clouds

Cumulus cloud

Photos


User Experience Process

Key User Flow 67

Task 2 Annie took some clouds photos in a iPad. She wants to upload her photo to the application.

Home Page

• She taps the “clouds photo” button. • She sees the clouds photos page and tap “upload photo” button. • She chooses a photo her took.

Cloud Photo

Take Photo

• She adds some description in this page. • She taps share button to upload it. • She sees her photo upload success.

Add description

Upload Success


User Experience Process

Key User Flow 68

Task 3 Annie wants to know how clouds are formed.

Home Page

• She taps the “explore cloud” button and goes to the “explore cloud” pages. • She sees the tutor and taps the screen. • She sees the “explore cloud” page and swipe “what are cloud” section.

Explore Clouds

See Animation

• She taps the "how are clouds formed". • She sees animation and information.

Continue to next page


User Experience Process

User Testing 69

Testing 1 (web site and mobile app ) 2012 July Moderator Guide

Conclusion/Closing Questions

Hello, my name is Bei Thank you for agreeing to participate in this evaluation. Today you will help me evaluate this Web site/mobile app. My goal is to see how easy or difficult you find the site/app to use. Throughout the session, I encourage you to say anything that comes to mind. If you find anything confusing or awkward or good, please let me know. I’m here to record your reactions and comments. Nearby we have a few people who also will observe your interaction with the site. I will ask you to perform different tasks on this site/app to see if it performs as you would expect.

• Overall, what do you think about this site and this app?

Here are some things that you should know about your participation: • This is not a test of you; you’re testing the site/app. So don’t worry about making mistakes. • There is no right or wrong answer. • I will be video recording this session for further study if needed. Your name will not be associated or reported with data or findings from this evaluation.

• On a scale to 1-5, how would you rate this site?

Before we begin, I'd like to ask you a few questions. How old are you? Do you often watches clouds in the sky? What do you want to know about cloud? When you see some beautiful clouds in the sky, what will you do? Do you have any questions? Let's begin! Task 1: Annie saw some beautiful clouds in the sky and she wants to go through “cloud types” page and sees information about high-level cloud, like “Cirrus cloud”. On a scale of 1-5, how easy was this task and why? Task 2: Annie wants to leave a message for a photo in the “morning clouds photo” page. On a scale of 1-5, how easy was this task and why? Task 3: Annie took some clouds photos in the night. She wants to upload her photo to the website. On a scale of 1-5, how easy was this task and why? Task 4:Annie sees a beautiful cloud in morning and she wants to take a cloud photo and upload the photo in mobile app. On a scale of 1-5, how easy was this task and why?

• Which part do you like in this website and app? And why? • Which part do you not like? And why? • Is there anything else that you feel needs to be done to improve?

Thank you for your feedback!


User Experience Process Testing Results

14 people test the website and mobile app 12 children

2

young adults

90% of people like the project concept Task 1: Annie saw some beautiful clouds in the sky and she wants to go through “cloud types” page and sees information about high-level cloud, like “Cirrus cloud”.

Success 100% Understand 90%

Task 2: Annie wants to leave a message for a photo in the “morning clouds photo” page.

Success 90% Understand 100%

Task 3: Annie took some clouds photos in the night. She wants to upload her photo to the website.

Success 80% Understand 100%

Task 4:Annie sees a beautiful cloud in morning and she wants to take a cloud photo and upload the photo in mobile app.

Success 90% Understand 80%

User Testing 70

“ “

I like cute things!

I've never seen such cloud before!

Feedback

• Consider using a grid system • Try a grid type/gallery • A semi-circle split into three clickable sections showing a morning/afternoon/night icon would be easy to understand • Try to use some interesting fonts for kids • Reduce upload photo steps • Add more icon on the button • Add share function


User Experience Process Testing 2 (iPad Application ) 2013 April

7 3

people test the iPad application

children

4

young adults

Task 1: User wants to know different cloud types and information, such as "cumulus".

Success 90% Understand 90%

Task 2: User wants to know some basic information about cloud.

Success 90% Understand 80%

Task 3: User sees a cloud in the sky. She wants to take a photo and upload it to this application.

Success 80% Understand 100% Feedback

• Add clear navigation bar • Many users don't know which part can swipe • Many users want to swipe tutor page, but it can't swipe • Tutor page overlay is possibly too dark • Add audio • Add a button to replay the animation

User Testing 71


User Experience Process

User Testing 72

• Change Tutor page Layout

• Add clear tips animations


User Experience Process

User Testing 73

• Add clear navigation icons • Add audio • Enlarge quit button and content text font size • Change title style • Add swipe tip

• Add replay button • Enlarge content text font size


User Experience Process

User Testing 74

• Add a page between clouds photos page and Camera


Technical Process Project Form iPad Application HTML5 Prototype Open with iPad Safari Technology Used HTML5 CSS3 JavaScript jQuery jQuery plugin - Smooth Div Scroll jQuery plugin - iosSlider Use Coda 2 to code basic structure Use Adobe Edge to Create CSS3 animation Use Adobe Edge to Create visual design Use Adobe After Effect to Create concept video

Project Form 75


Portfolio


Portfolio

CLASS: MAKING IDEAS VISIBLE TIME: 2010 FALL STORY BOOK

77


Portfolio

CLASS: TYPOGRAPHY FOR DIGITAL MASTERS TIME: 2011SPRING TYPE POSTER

78


Portfolio

CLASS: ADVANCED DIGITAL IMAGING TIME: 2011 FALL HOLIDAY CARD

79


Portfolio

CLASS: MOTION GRAPHIC TIME: 2012 SPRING IDN MAGAZINE INTERACTIVE COVER vimeo.com/42443307

80


81

Challenges

Solutions

What I learned

1. Don’t have enough coding experience 2. Don’t know how to draw cloud to demonstrate their type at the same time make them vivid 3. Don’t know where to find my target audience to test my project 4. Don’t familiar with the weather knowledge

1. Take coding classes and study 2. Try many different styles, practice and see other designers how to use cloud in different projects 3. Ask my local friends to find some children to test 4. Search on Internet and study some basic weather knowledge by myself

1. Use Adobe Edge to create CSS3 Animation 2. Code iPad prototype 3. Learn User experience skill 4. Create concept video and proof of concept video 5. Sharpen my illustration and visual design skill 6. Manage project schedule 7. Communciate with children and different people 8. Gain a lot of knowledge about cloud


82

Conclusion

In the beginning, I wanted to create a website and an iPhone application for this project, because I wanted to design different user interface. During the working process, I found that children had more chances to play with the iPad. They can interactive with iPad easier, so I combine my website and iPhone application structure to an iPad application. I want to code some CSS3 animation, but it is very hard to accomplish complex animations. I learned to use Adobe Edge by using time line to create them. I learned about usability and visual design issues from my instructors and friends. They gave me a lot of useful feedback and idea to help me improve my project. They also helped me find children to use the iPad application.


83

Project Links

Prototype seeclouds-app-project.com Video vimeo.com/64856112 vimeo.com/64856113


See Clouds 84

science-edu.larc.nasa.gov/SCOOL/tutorial/clouds/cloudtypes eo.ucar.edu/webweather/cloud3.html

Bibliography & Credits

weatherwizkids.com crh.noaa.gov/lmk/?n=cloud_classification wikipedia.org weather.ou.edu/~smglenn/clouds.html accuweather.com/en/weather-blogs/clarkb/pictures-from-the-week-111809to-112509-1/22315 asisbiz.com/Photos/Clouds/pages/Cirrocumulus-Clouds-Formations-SkyStorms-Weather-Phenomena-004.html weather.com.hk/learn/cloud2.asp 42explore.com/clouds.htm extremeinstability.com/stock/mammatus/index.html starrynightphotos.com/planet_earth/lenticular.htm

See Clouds  

See Clous is an educational iPad application for children. Everyone can see cloud very easily. Some people don’t pay attention to cloud. The...

Read more
Read more
Similar to
Popular now
Just for you