Table of Contents
Destressing Images Design Process
Design proposal for your destressing image project
Define
People are stressed out and they need something to help them relax. Too much stress can make people sick, whether it's a mental illness or a physical illness caused by stress. We want to let people who need to relax see the images we make to help people relax. We will put the distressing images we make on our own website, the lobby in CIT, and the Elderly daycare center. The research tells us that green and blue is the color that can help people relax the most. The lines that are soft like circles can let people relax. The shape like a triangle will let people feel nervous and dangerous because the lines are sharp. Fractal Patterns also can let people relax. Some examples include clouds, mountains, coastlines, cauliflowers, and ferns. Fractal Patterns are good, but if the patterns are too dense(密集), it will make people feel nervous and uncomfortable. Also, the images should be playful, but if it is too playful, then it will be too exciting(激動). When I think about Elderly Center, I think the elderly people in the Elderly Center might feel boring. The people in CIT lobby might feel too many people. The people in MRT Station might feel it is too many people and too crowded. Too solve this kind of problem, I think the images that we should make the things inside the image separate, but still have connection with each thing, and not boring.
Ideate
For images, I want my images is about ocean. You can see the 5 images that I find is all about ocean. I want to make a top view of ocean, and people can see the things in the ocean. The images will have some movement. The movement that the images will have is the wave of the ocean. When people touch the circuit, the wave of the ocean will come out. Also when people press the ocean, it will have the sound of ocean too. The color and shapes from our research might be useful to generate possible solutions. The color of ocean is blue, and there will be some tree beside the ocean. I will use svg.js to make the ocean and the tree part, and I will use hydra to add special effects to make the sea more like the sea.
Mood Board
- Designer: Yuna
- Client: Teachers, people that need to relax
- Project: Destressing Image Project
References
Planning
Define
What is the exact problem? How clearly can we state the problem?
People are stressed out and they need something to help them relax. Too much stress can make people sick, whether it's a mental illness or a physical illness caused by stress.
人們的壓力過大，他們需要一些方法能幫助他們放鬆。壓力過大會使人們生病，不管是心理上的疾病，又或是因為壓力而造成的生理上的疾病。
Who are the clients?
- Teachers
- people that need to relax
Where will this be used? Brainstorm a list… at least we will use it in the elderly assisted living facility and the lobby of CIT.
- Elderly Daycare Center
- CIT
- Wiki Page
What does our research tell us?
Color:
- Green and Blue can let people relax the most.
- Red will make people feel angry.
Shapes:
- Circles can relax.
- lines should be soft.
- Triangle will let people feel nervous.
Fractal Pattern:
- Fractal Patterns can let people relax.
- Some examples include clouds, mountains, coastlines, cauliflowers, and ferns.
What are the important tensions or conflicts?
- The images should be playful, but if is too playful it will be too exciting(激動).
- Fractal Patterns are good, but if the patterns is too dense(密集), it will make people feel nervous and uncomfortable.
What are the especially surprising points that arose from the empathizing exercise?
Elderly Center:
- Too Boring
CIT Lobby:
- Too Many People(?
MRT Station:
- too many people(人潮太多)
- too crowded(太擁擠)
Do we have any insights into the problem?
- Make the things inside the image separate, but still have a connection with each thing, and not boring.
Ideate
Brainstorm as many ideas for solving the problem as possible.
- explain the picture that I want to make in words.
What ideas from our research might be useful to generate possible solutions?
- Color & shapes
How could someone interact with your design?
- when they press the ocean, it will have the sound of the ocean.
How will you use SVG.js? How will you use Hydra? What other image-making tools would you like to use?
svg.js:
- Making the images that I want.
Hydra:
- Add special effects to make the sea more like the sea.
How can we interact with this through coding while it's running?
- what kind of live changes in the moments.
How will you use circuits and sensors to enhance your design?
- touch the circuit and then the waves(海浪) will come out.
Mood Board
- Designer: Yuna
- Client: Teachers, people that need to relax
- Project: Destressing Image Project
Sketches
💚🌊
☀️🌷
☀️🌊
Wave of Ocean🌊
//wave of ocean noise(10, 0.1) .color(0,3,5) .modulateScrollY(osc(20),0.3,0) .out(o0)
Stars⭐️
// stars
voronoi(80,3,10).color(2, 3, 5)
.out(o0)
Flowers🌷
//flowers
voronoi(50,3,5).color(4, 3, 5)
.scrollY(0.5,-0.1)
.out(o0)
Feedback from classmate
Click here to see Google Doc. Version
Sky / Heart Ocean:
- The star is pretty but the space between the stars is too close so it may not let people feel relaxed.
- The light blue part is the beach but I can not tell that, it looked more like the floor.
- A good thing that should be kept for future sketches is the space/galaxy concept. If done well, it could be very relaxing to look at. One thing that I thought made the images less destressing was, the details were too tiny and there too many details I think that made it more stressful.
Flower:
- The star is pretty but the space between the stars is too close so it may not let people feel relaxed.
- The flower one can be better, In flower one the color makes me confused because the color is mostly the same and in the presentation
- For the second one, the color of the petals are too close to the color of the sky behind. It is a little bit distracting and hard to focus on.
Wave Ocean:
- The blue wave is good and relaxing it has a big wave so it will not let people feel dense and tense
- The gradient in the third Inkscape sketch looks relaxing, the curly mountain under it is also relaxing.
Conclusion:
- choose the wave ocean one, and put the hydra wave with it. Also put the Heart Ocean’s Heart inside the wave ocean.
First Prototypes
🐥⛵️🌊
🐣🐬🌊
🐬🐢⛵️
🌊
s0.initScreen() src(s0) .mask(noise(10, 0.1)) .modulateScrollY(osc(20), 0.3, 0) .out(o0)
Feedback from classmate
Zoey:
- The one coolest thing that you found in their prototypes
- I like prototypes 1 and 3 I think the boat looks cool I like the color and the shape.
- The seagull looks cool. I can feel the weather in the picture is warm.
- Two things in their prototypes that are useful for helping people to destress that definitely should not be lost or removed
- The wave is relaxing, I feel soft and silky.
- The gradient sun makes me feel happy and relaxed so I think you can keep that.
- Two things that should be changed to make the image more useful for destressing
- I think the dolphins and turtles do not make me fill relaxed because they do not have color, they only have color blocks right now. And when I first saw it I didn't know what it that(the turtle one).
- The hydra prototype: The only thing I can see now is black and a little blue. and The other thing is I think the wave amplitude moves too big so it feels not relaxing.
Yiler:
- The gradient in the sky looks good, and the birds made the picture looks deeper and has more layers.
- Keep the gradient in the sky and the birds.
- I think the color of the ocean should be changed, because it looked a little bit too dark and that looks a little bit unnatural. The animals and boat in the pictures look more realistic than the background, and that looks weird.
Steve:
- The coolest thing about her drawing is the color of the ocean.
- The background colors and different items in the picture could be useful for destressing.
- To improve on this, maybe she can add more items in her picture or, she could add some animation to her picture.
Second Prototypes
Dark Blue
Light Blue
Purple
Light Bule with Balloon
Wave🌊
s0.initScreen() src(s0) .add(noise(10, 0.1), 0.01) //.color(0,3,5) .modulateScrollY(osc(20),0.1,0) .out(o0)
Kaleid
s0.initScreen() src(s0) .add(osc(25,-0.1,0.5)) .kaleid(30) .out(o0)
Pixelate
s0.initScreen() src(s0) .pixelate(20,20) .out(o0)
Feedback from classmate
Zoey:
- For each of the two prototypes:
- describe the two most important points that make the prototype relaxing;
- The wave is very relaxing it is smooth and soft. The gradient is excellent.
- The boat is moving with the wave it looks cool and relaxing.
- describe the two most important points that should be changed in order to make it more relaxing;
- I think you can let the seagulls move so it will not look like it is dying.
- The seagulls look like an “r” and the position of the seagulls is too unanimous.
- The boat is moving with the wave sometimes it cooks cool but sometimes it looks deformity.
- Choose from the two prototypes the one that is the most relaxing and explain why you feel so.
- I think Yuna can keep the first Hydra prototypes, Compare with the other two I think the first Hydra prototype is the most relaxing one.
Yiler:
- Removing the dolphin made the art style more consistent
- The brighter color for the ocean is also relaxing
- it might be more relaxing if the black edges on the sides are removed
- The hot air balloon is in a different art style, and that looks a little bit weird
- Keep the fullscreen one that has the wavy effect and SVG.js image
Steve:
- First prototype:
- I liked the color of the ocean and color of the background.
- I feel like the seagulls and the boat could look better.
- Second prototype:
- I like the wave effect on everything in the ocean and how the boat rocked.
- I felt weird when the sun and the sky was also moving like the ocean.
- Verdict: The second prototype is more interesting.