Winter 2011 Process Book of 3-D Graphic Studio GDRS 730 | 3-D Graphics Studio Professor Jason Fox Course Description Students explore theoretical and practical applications of experience and interaction design through projects addressing form, physical space and tactile response. Course content consists of readings, lectures and assignments, which interpret, involve and transform human engagement with the 3-D realm. Projects evolve from conceptual origins and progress to constructed physical objects.
“The turning point in the process of growing up is when you discover the core of strength within you that survives all hurt.” —Max Lerner
CONTENTS
Project Description
4
Research
6
Proposal
14
Inspirations
19
Brand Identity
19
Prototype |ı
34
Prototype ¤
41
Prototype 3
61
Final Product
74
Applications
96
“Creativity is a state of mind in which all of our intelligences are working together. It involves seeing, thinking and innovating...[creative people] make unique connection often unseen by others” —Craft, Jeffrey&Libeling
Project Description
Learning Objecticves • • • •
•
to propose a 3D design problem to interact with multiple problem solving methodologies to document and user interaction as a component of problem of problem solving to interact with an related industry professional in a collaborative manner in the prblem solving process to document (in an organized manner) the complete journey-from start to finish-of a design problem
Brief Find a problem and solve it using a systematic approach to understanding the changenge and its need to be resolevd. The challenge over the ten weeks course is to 4
seek out, research, investigate, discuss, write about, collaborate and resolve a three-dimensional design problem. The task is to “package” the solution and create a trade show experence that inform (or “sells”) the solution.
The Problem
5
Research What Cause Computer Disease?
6
Existing Solution Eye problem
Physical pain/ache
7
Tips
Ergnomics product
Physical exercise
8
My Direction Exercise tutorial
Color Consideration (good for eyes)
Increase fun
Media Consideration
9
Causes & Disease Match
Ergnomics Product Price Research
Expensive
10
Survey
11
Product Research
Naming
Go Gorilla GOrilla GGG GolaGola (reminds people of Cocacola?) GollaGolla
13
“Don’t mend the sheepfold after a sheep is lost; don’t take precaution after suffering a loss.” - Ancient Chinese Proverb Proposal If you… love computer games have knots in your back are a social media person have a design related major feel back popping when you stretch think your body is flexible enough to challenge all the pose in this kit are addicted to Facebook and check every single status that your friend post put you hand on at the top of your shoulder blade, press hard with your fingers, and you feel sore You might need GollaGolla!
The Problem Working with computer for whole day is not rare nowadays. Personally, I am a frequent computer user. I spend more than 4 hours play with my computer or surf the Internet everyday. At some busy day I might spend more than 8 hours continuously using computer. I didn’t realize that prolonged computer use could damage my physical health until two years ago, I suffered from Wrist Resting Syndrome/WRS (disorders caused by mouse overuse). Aware of it happens again, I consciously wear wristband while using mouse (mostly I used table-let instead) and start
to pay attention to various computer diseases. However, how does computer using relate to disease? Here are some voices from the world. •
•
“In the recent all-computer based lifestyle and the substantial growth of computer use, requires people to excessively looking at the computer screen has contributed the percentage increase to 65 of vision impairment problems such as Computer vision syndrome (CVS) and longsightedness among teens aged 15 and above….”(World Eye Health Day) People who work on computers are more
•
than doubling their risk of heart disease and increasing their chances of premature death. (UK News) “… two or more hours of screen time each day may place someone at greater risk for a cardiac event.” (Dr. Emmanuel Statements from University College London’s ¬public health department)
So what causes computer disease? Prolonged computer use; bad lighting of the surrounding environment; lighting reflection and glare; and incorrect or inappropriate computer screen’s position may cause vision impaired such as red eyes, trouble changing focus, tired eyes; contact lens discomfort due to dry eyes, cyclic momentary blurred near vision, increase glare sensitivity and Computer Dependency Syndrome; sitting on the same position and focusing on the screen for a long time might cause glaucoma; bad posture, high speed typing for prolonged computer use might lead to different level of Repetitive Strain Injury (RSI), which includes Musculoskeletal disorders, neck pain, back pain, Carpal Tunnel Syndrome, Tenosynovitis DeQuervains, Thoracic Outlet Syndrome, Shoulder Impingement Syndrome, and Tennis Elbow; prolonged computer use also might cause stress, headache, varicose vein, high blood pressure, or osteoporosis; radiation from monitor might lead to aging of the skin, or the worst case, cancer. Additional, Over snacking might cause Long-term obesity. Over 4
hours using of the computer will double the risk of heart attack. Incorrectly computer using is like an invisible killer. Most of people know prolonged computer using is bad. But meanwhile, how many people consciously avoid prolonged computer using? Approximate 90 per cent of the people who filled in the survey gave a negative answer. A lack of conscious, which one must take breaks while longtime computer using is common. Current Solution The current status of how people improve their computer using environment or circumstance roughly can be divided into two kinds, usage of ergonomics computer supplies and physical activity. Ergonomics computer supplies are products that are scientifically concerned with designing safe and comfortable computer use, such as ergonomic keyboards, ergonomic mice, trackballs, arm supports, and so on. They provide people with comfort and productivity while helping to reduce repetitive stress injuries. Relatively, the product might cost up to hundreds. Physical effort includes regular exercise, dietary supplements that might be beneficial to your heath system (such as Vitamin A, Vitamin C), attention to sustenance (balanced meal). However, people who do regular exercise still need to be conscious of taking breaks during computer use. Especially people who are too lazy to do regular exercise and also lake of conscious to take a break. 15
Improvement of Physical Activity Build an ergonomic computer workstation if you can afford the spending. At lease use a support or a mouse and keyboard for your convenience and use a chair that can support the position of your back. Before you use the computer, adjust the position of monitor, adjust the distance between the eyes with the computer Glance (at least 60 cm), adjust your seat so that the position of the hand to be parallel to the table when you use the keyboard. Make sure the view between the eyes to the monitor pointing slightly downwards, make sure the position of hands on the keyboard should form an angle of 90 degrees, as well as leg. During the usage of the computer, rest your eyes with eye blink, eye drops, use adequate lighting, wear glasses, use anti-glare screen. Vitamins (Vitamin A and C), vegetable, fruits, and B-carotenes-rich food are good for eyes. Take frequent breaks. Do not use a computer without interruption (more than 2 hours), stood up, a little sports (stretching) and walk a minute (1 minute) periodically before continuing your work. Additionally, Washing face, blink drips of water on face can help skin. Squeezing tennis ball can do wonders for joints and muscle. Proposed Solution and usage To make people aware of computer disease and encourage them to take a break or do some exercise every 30 minus while using computer, 16
I propose to design a computer gymnastics game kit to fight for a healthier computer using circumstance. The package will encompass the actual product, mobile diveces(smart phont app) and computer wallpaper/screen saver. The actual product might include a timer, a user guide, gymnastics cards that can be set on the desk as well as fit in the pocket. For example, you set the timer at 30 minus. After 30 minus later the timer rings, and you pick a card from the card set on your desk. It says: Eyeball exercise! Look up to down for five times and look left to right 5 times. You follow the instructor and finish the exercise. This exercise can help relief the pressure. If you want to do more exercise, you can pick another one. It might say: Imaging you are a gorilla and there is banana hanging on the ceiling. Try to reach it! (with the illustration of the posture on the card) 10-20 times! This can stretch your arm muscle and decrease the pressure on the neck and shoulder. Moreover, you can just pick several cards and put them into your pocket and do the exercise anytime you want. To enhance participator and increases their activity, I would like to make the exercise fun. Target Demographic The Target Demographic is young frequent computer user in the age of 18-30, mostly college student centered. These people are more likely neglecting the aware of disease because the youngness. They potentially have more curiosity and tendency of experiencing “silly� thing (such
as image themselves as gorilla) than the older. They have limited budget to buy ergonomics computer supplies
1. Do you consciously avoid using the computer? Yes No Sometime
5. Do you have any of the following symptoms after prolonged computer use? Tried eyes Dry eyes Shoulder pain Back pain Neck pain Muscle ache Stress Wrist / Joint ache Headache Pain knee Blurry vision
2. How long do you use the computer everyday? Less than 2hours 3 to 4 hours 4 to 6 hours 6 to 8 hours more than 8 hours
6. What do you do during the break? Watch movie, talk to people, walk, eat, shop, do some exercise, cleaning room, go to bathroom, bike, make tea/coffee, cook, Facebook, yogurt, smoke, drinking water, wonder in house, wish I got one, waste time, dance.
3. How much will you spend buying ergonomics supplies? Less than $10 $10- $50 $50 - $100 more than $100
What I’ve noticed from the survey:
Target Research | Survey Analysis (p=people) (20 participators in totally, all students)
4. How often do you take a break when you are using the computer? Every 30mins Around an hour Until I feel tired Never
1. Most of the people lack of the conscious of taking breaks. 2. Most people spend more than 4hours in front of the computer. 3. Students are likely avoid spending money to improve the incorrectly computer using situation. 4. Eye problem and shoulder/back problem are the two main problems. 5. Most of the people don’t have a regular break time while using computer. 17
6. People don’t really know how to rest during the break. GollaGolla Items Actual product: • User guide (go to download gymnastic graphic from website) • Timer/alarm (to remain people taking breaks) (not necessary) • Gorilla sticker (to remind people go gorilla) • Gorilla gymnastic/exercise cards • Gorilla advice/suggestion cards(might be the backside of the card) In computer: • Website for downloading wallpaper or screensaver • Screensaver or wallpaper (with gymnastic instruction) • iPhone/iPad application
18
“Creative ideas flourish best in a shop which preserves some spirit of fun. Nobody is in business for fun, but that does not mean there cannot be fun in business.” —Leo Burnett
Inspiration & Brand Identity This section includes inspirations and brand identity. Inspirations includes collected images of Logos, typeface treatments, color combinations and character stylizations. The brand identity section includes Logo, different valuations, color pallet and character. In the early stage of Logo design, I was looking for a friendly, hand drawing combined with digital style, modern and fun appearance. Later on, I was more focused on approaching a pop-looking, energetic and conversational image. As well as typeface, I was looking for a warm, friendly, soft-aged, modern and energetic appearence, which also can make a good combination with the gorillar character in the exercise instruction illustrations.
Logo Inspirations
Typeface Inspirations
21
Gorilla Studying
22
Logo Sketching
1 2
3 23
Typeface
Gill Sans
Museo 700
Bryant
Clarendon BT
ITC American Typewriter
Forte MT
MrsEaves
Bello
body text
Logotype warm friendly pop modern energetic
24
Developing
creating bodyline incoorprated the image into the negative space
simplified shape wild animal serious looking curvy organic
creating stroke contrast
creating conversation
approaching harmonious and balance
25
Disscution & Feed Back
Gorilla from classmates
26
Developing
27
Improvement
conversational
equaly sized
adjusted stroke weight avoiding repetition balance the weight of bubble creates positivity alive
raised up
Thined Bello Uppercase 90% scaled visually balanced
28
Logo Variation
Logo
Mark
Minimall use (lower the ½in height)
29
Color Inspirations
30
Color version
Pantone 7533 U C 30 M 35 Y 60 K 80
R 61 G 33 B 52
Pantone 7495 U C 51 M 31 Y 76 K9
R 130 G 142 B 89
Pantone 7499 U C2 M4 Y 31
R 250 G 237 B 188
C 10 M3
Y 75 K 11
M 42 Y 81 C 50 Y 15 M 30 Y 15 M 11 Y 65
31
Gorilla Inspirations
32
Character
Too cartoon Too cute Less gorilla
Too weak Lack of wild energy
Too realistic Not flexible
Wild Flexible Serious
Hand drawing juggle lines
+
33
“The gold of prototyping is to give form to an idea to learn about its strengths and weakness and to identify new directions for the next generation of more detailed, more refined prototypes. Creative ideas flourish best in a shop which preserves some spirit of fun.” —Change by Design
Prototype
Instruction Illustration Package
User Testing
Feedback
Prototype 1
In the first prototype, 47 cards are created. The exercises are chosen from exercises books and website researches. It is a combination of indoor exercises, office exercises, yoga poses, stretches, tips for correctly computer usages and healthy advises. In 47 cards, there are 8 cards of Head & Neck stretches, 11 cards of Upper body stretches, 9 of Limbs stretches, 9 cards of Lower body section, 5 cards of Take a break section and 5 cards of Yoga Pose section.
Cards
35
36
37
38
“Early prototypes should be fast, rough, and cheap. ” —Change by Design
User Experence
The first prototype is focused on testing weather the exercise and the instruction works or not. It contants 47 cards with instruction on the front and illustration on the back.
Featured User: Position: manager and frequent computer user (more than 6 hours a day) Environment: Limited office space Status: Recently went to healthy center and got some poorly designed instruction of stretches which help to relieve the stress of prolonged computer use. Feedback: helpful in general; lovely size. Favorites cards: Toe stretch, Deltoid muscles, eyeball, banana break, bathroom. Suggestion: Some instructions are confusing; can not do yoga pose at office; no place to attach it on the screen or set on the table.
39
Next step: Correct instruction, choose more practical informations, start doing illustration, start making container and more test!
40
Prototype 2
In the second prototype, 44 cards are chosen, 7 cards of Head & Neck stretches, 9 cards of Upper body stretches, 9 of Limbs stretches, 7 cards of Lower body section, 7 cards of Take a break section and 5 combination card. The Yoga Pose section is removed because the difficulty and the awkwardness to practise in the public space. In the break section, 2 bathroom cards are added because most of the people mentioned that going to the bathroom is the first time of taking a break when they usng on computer.
Card Size
A common pocket size Cute shape Comforable holding 3.5’ x 5.5’
3.5’ x 5’
3.5’ x 3.5’
2’ x 3.5’
0.75’ x 1.185’
41
Layout
Museo 700 10points spacing Clean shape Easy to read Character feature
Cards
43
Process: Information on the card are modified again and agian. While doing user testing, lots of feedback and correction are gave from them.
44
45
46
47
Package
Where to place the product in the environment? How to make it stay on the table? What size should the container be?
Easy access Stable Reasonable size
Easy access Stable Reasonable size
48
Easy access Stable Reasonable size
Easy access Stable Reasonable size
Easy access Stable Reasonable size
49
Prototype Package
1
50
3 2
51
1
2
3 Stable Easy access Easy to understand how to use the product
52
3
53
User Experence
The second prototype is focused on testing the corrected instructions and illustrations. Featured User: Position: Student (Frequent computer user) Environment: Limited space Feedback: Nice box, easy to use, doesn’t occupy so many space, clear and nice illustrations, enjoyed doing the stretch Favorites cards: Finger dance, Toe stretch, eyeball, banana break, look at greenery Suggestion: Several instructions are misspelled
54
55
Next step: Correct instruction, full color version, paper choice, texture choice, package design, and, of course, more test!
56
Color Version
Take a Break
Limbs
57
Head & Neck
Lower Body
58
Combination
Upper Body
59
Paper & texture test
Paper: Red river 50pl Warm white Covered with matte contact paper (water proof)
60
Paper: Epson 120g Bright white Covered with glossi contact paper (water proof)
Prototype 3
In the third prototype, 50 cards are included, 7 cards of Head & Neck stretches, 9 cards of Upper body stretches, 9 of Limbs stretches, 7 cards of Lower body section, 7 cards of Take a break section, 7 combination card, 2 shuffle the deck cards and 2 blank cards. In the blank card, people can make notes or create their own GollaGolla combination. Meanwhile, the actual package design are in the process as well as the copywritering of the product.
61
1
2
62
1
2
IT TAKES A To
get the monkey
Back
Front
63
64
Front
Back
IT TAKES A To
get the monkey
65
Doublesided Printing test
66
Print & Adhering
contact paper
help from friend
67
Cutting & Corner Rounding
68
69
rounded corner
70
More testing
71
Box...and More Boxes
difficult to make two piece match
difficult to make it fluent to flip
72
73
Die Cut & Wrap
74
front
back
IT TAKES A To
get the monkey
75
Final Cards
Head & Neck
Keep your head facing forward
Relax your facial muscles
Look up and down 5 times
Raise your eyebr ow and hold for 3-5 seconds, then r elax
Close your eyes f or 3-5 seconds
Repeat 3-5 times
Repeat
Upperbody
Why Lowerbody
Reduces eye pressure
Why
Relieves nervous tension on your face
Limbs
Take a break
Combination
Shuffle
Blank
Tip 76
Open your mouth at the same time to relieve more tension
Gently rotate your neck clockwise 3-5 times
Keep your head facing forward Look from left to right 5 times
Then rotate counterclockwise 3-5 times
Close your eyes f or 3-5 seconds Repeat
Why
Improves circulation and reduces the muscle tension on your neck
Why
Reduces eye pressure
Why
Stretches neck muscl e
77
Shoulder Rotation 1 With your arms hanging loosely at your sides
Stand with your arms out in front and crossed over
Raise one arm until it is perpendicular to your body
Gently tilt your head downwar d
Reach your hands forward as far as possible
Raise the other arm over your head and spin it 5-8 times
Keep your shoulders relaxed and hold for 5 seconds
Repeat on the other side
Repeat 5-8 times
Why
Tip 78
Stretches the back of your neck
This pose can be done either sitting or standing
Why
Tip
Separating the shoulder blades can relieve shoulder str ess
Facing downward can stretch neck muscles at the same tim e
Why
Tip
Stretches the muscles along the arm and relieves stress
This pose can be done either sitting or standing
Shoulder Lifts Pull your shoulder blades toward each other
Bring your shoulders to your ears until you f eel a slight tension in your neck and shoulders
Hold the pose f or 5-8 seconds, then relax
Hold your left a rm above your elbow with your right hand Look over your left shoulder Gently pull your elbow towar d the opposite shoulder until a stretch is felt
Hold for 3-5 seconds, then r elax Repeat 5-8 times
Hold 8-10 seconds Repeat 3-5 times on each side
Why
Tip
Relieves the stress of your shoulder, chest and upper back
This pose can be done either sitting or standing
Why
Tip
Relieves the tension in the shoulder and neck a rea
Why
Stretches your deltoid muscles, back of upper a rms and neck
Think: “Shoulder up, shoulder dow n�
79
Shoulder Elevation
Shoulder Rotation 2
Raise your shoulder Lower the other side downward Repeat 3-5 times on each side
Stand with your arms hanging loosely at your sides
Reach and clasp hands behind your back
Raise your shoulders and gently rotate them
Raise arms with your back straight until you f eel tension on your back
Rotate in the opposite dir ection
Hold 3-5 seconds
Repeat 3-5 times
Relax and repeat 3- 5 times
Why
80
Relieves your shoulder muscles and neck
Why
Relieves shoulder stress
Why
Stretches muscles along the arm, wrist and upper back
Shoulder Circulation With your arms hanging loosely at your sides, rotate your arms clockwise 8-10 times
Sit on a chair Hold onto your upper left leg just above and behind the knee
Repeat counterclockwise
Gently pull your bent leg towa rd your chest Hold for 5-8 seconds Repeat 3-5 times on each side
Why
Tip
Relieves the stress of your shoulder, chest and upper back
This pose can be done either sitting or standing
Why
Tip
Relieves the stress of your shoulder joint
This pose can be done either sitting or standing
Why
Tip
Stretches hamstrings and lower back muscles
This pose can be done either sitting or standing
81
Stand with hands on your hips Gently turn your torso at your waist and look over your shoulder until you feel the stretch
Stand with feet shoulder-width apart
Sit on a chair with your f eet on the ground
Keep body upright and bend to the left
Place your right hand on the back of the chair and your left hand on right knee
Hold for 5-8 seconds
Hold for 5-8 seconds
Repeat 3-5 times on each side
Repeat on the other side
Gently rotate spine to the right Hold for 5-8 seconds Repeat 3-5 times on each side
Why
Tip 82
Stretches back and side
Why
Tip
Stretches abdomen muscl e
Why
Tip
Stretches back muscle and abdomen
Do not over-twist the spine
Sit on a chair
Stand with your arms hanging loosely at your sides
Lean forward to stretch
Put your hands on your hips and stand with your f eet shoulder-width apart
Gently and slowly bend your body back and forth 8-10 times
Keep your head down and your neck relaxed
Gently twist your waist to the left until feeling tension
Hold for 10-20 seconds
Back to the middle and twist to the right
Use you hands to push yourself upright
Why
Tip
Stretches and reduces muscle tension on the bac k
Do not push yourself too ha rd to touch the ground
Repeat 5-8 times
Why
Tip
Stretches and reduces the muscle tension on the back and abdominen
Why
Keep your legs relaxed
83
Place your right hand on right shoulder and your left hand on left shoulder
Sit on a chair with one f oot on the ground and the other one 90 degrees to your body
Circle the elbow s
Push your toe back and forth 5-8 times
Ten circles in each dir ection
Repeat 3-5 times on each side
Why
Tip 84
Relieves shoulder tension and stress
This pose can be done either sitting or standing
Why
Stretches the leg muscles and relieves joint ach e
Why
Improves leg circulation
Place your palms together in front of you
Crumple a piece of paper or cloth into a small ball
Move your hands downward, keeping palms together
Hold it tight in one hand f or 3-5 seconds
Hold for 5-8 seconds
Repeat 3-5 times
Rotate hands back and forth around 5-8 times
Why
Relieves wrist, forearm and hand stress
Why
Tip
Why
You can use the same paper over and over again
85
Front Lunge
Finger Dance
Head up, back str aight, feet 6 inches apart Step forward as shown Return to standing position Keep your back leg str aight Repeat on the other leg
Why
86
Stretches wrists and lower a rms
Why
Stretches legs muscles
Why
Take A Break
Take A Break
Take A Break
Eat A Banana
Tip
If you don’t have a banana with you, eat an apple or other fr uit
87
Take A Break
Pick one NECK ca rd Pick one SHOUL DERS card
+
Tip 88
Why
Pick one FINGERS ca rd
Pick one FINGERS ca rd
Pick one WRISTS card
Pick one SHOUL DERS card
Pick one WRISTS card
Pick one NECK ca rd
Pick one LOWER BACK card
+
Pick one SHOUL DERS card
+
+
+
+
Why
A combination f or graphic artists
+ +
Why
A combination f or keyboard operators
Why 89
Pick one card from each stretching catego ry
+ ++ +
Why 90
A combination f or when you feel stressed-out
Tip
Create your own GollaGolla combination!
Final Product
91
92
93
94
95
“Good things come in small packages” —Unknown
Applications To enhance the user interaction with GollaGolla Gymnastics, applications for smart phone and computer were created. In this section, the illustrated application user interface is based on iPhone app. It includes the full set of GollaGolla cards and timer, which helps to remind people to use GollaGolla while using computer. The computer wallpaper is designed to be an additional support for those who are already using GollaGolla cards. Each wallpaper contains a combination of three to five exercises.
96
iPhone app
97
Story Board
Timer
Loading page
Main Menu
Catalog
Favorite
98
Double click to illustration Swipe to get another card
Shake to get a random card
Click shows menu
Click shows menu
99
Apple app store
100
iPhone app
shake to get a random card
shake
101
Wallpaper
The wallpaper is designed to support GollaGolla cards. User can follow the information on GollaGolla package and download the wallpaper from GollaGolla website. The purpose of wallpaper is to remind computer users. User can set wallpaper as well as screen saver changing automatically every 30 minuets to get a different combination of 2 to 5 GollaGolla exercises.
102
Front Lunge
103
104
Further Considerations
For the further development of GollaGolla product, pocket size product such as a mini set of GollaGolla cards might be conceded. Also, more options of different exercises as well as exercises for other purpose might be added into Golgotha brand.
105