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
About Clouds
Clouds Types
http://domain.com
Web Page Title
Clouds Photos
Log In
LOGO
About Clouds
Clouds Types
Clouds Photos
Hello, Welcome to See Cloud Website! You can find all kinds of information and photos about cloud here. Enjoy:)
About Clouds About Clouds
Clouds Photos
Clouds Types Afternoon
Morning
Log in
Clouds Types
Clouds Photos text
Morning
Upload Photos
Password Create New Account
LOGO LOGO
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
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
!"#$%#&'%()*+,-.
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.
http://domain.com
Upload Photos
Cirrus
Web Page Title
http://domain.com
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
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:
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