Destressing Images Design Process

Made by: Zoey

Table of contents

1. design proposal for your destressing image project and Mood Board
2. sketches of your destressing images
3. organize feedback from classmates on destressing images, decide on direction for prototype
4. first prototypes of destressing image
5. organize feedback from classmates on second prototypes of destressing images
6. second prototypes of destressing images
7. organize feedback from classmates on destressing image, final version 1
8. destressing image, final version 1
9. final Destressing Images 02

In today's society, the pace of the world is fast, people have a lot of pressure about work, family, friends or study but there are not enough ways to destress. Elderly people too. They can not have the same pace as us, which makes them feel pressure. Some people can easily get digestive stress, and some people can not destress. Pressure is already a part of our lives, and we may not be able to make it go away, but we can do something we love or look at pictures for stress relief to improve it. So we want to help people reduce stress by creating images for stress relief. So we also did some research and investigation.

Every people in the world have a lot of pressure, pressure is also part of your life. Pressure is not bad; some pressure can improve people, but if people have too much pressure, it will affect people's psychology and physiology. So we are doing some research about pressure and making a destressing image to help people relax. After we finish the research we will show that to the lobby of CIT, the elderly assisted living facility, and on our website. Our research tells us the color of nature like blue and green can make people feel relaxed but is not mean blue is the best choice, If we use blue in the food images people will feel disgusted. It's just like red, Red let most people feel angry and nervous but when we use it on the food image people will have an appetite. I will focus more on color because people can recognize color before shapes. The circle makes people feel relaxed, The reason why is a circle is made of soft lines, So Triangle is a bad choice because it has many angles. Also, the nature pictures like the sea, sky, and forest make people feel destressed. However, if you use the blue sky with red fire, a circle shape with a red emoji face, or Too many shapes at the same time people will not feel relaxed. Every people in the public space like MRT station or on the street, people is noisy and busy. also, the people inside the CIT very body are working so hard and they feel tired each day. In the elderly assisted living facility too, they do the same thing every day and they can not move very easily so they may feel bored. Therefore we are going to put our destressing image on the public screen, CIT and old center, to help some people to feel relaxed, that maybe is a big help for them.

Designer: Zoey Lin

Client: The worker in CIT and elderly place

Project: Destressing image

1. 15 of nature’s most awesome, must-see shows | CNN Travel. (n.d.). Retrieved 23 November 2022, from https://edition.cnn.com/travel/article/nature-must-see-shows/index.html
2. Blue Streak. (n.d.). The Nature Conservancy. Retrieved 23 November 2022, from https://www.nature.org/en-us/magazine/magazine-articles/belize-blue-bonds/
3. Fenomena langka di tengah pemandangan Aurora Borealis yang spektakuler. (n.d.). BBC News Indonesia. Retrieved 24 November 2022, from https://www.bbc.com/indonesia/vert-tra-61936258

1. What is the exact problem? How clearly can we state the problem?
   1. Every people in the world have a lot of pressure, pressure is also part of your life. Pressure is not bad; some pressure can improve people, but if people have too much pressure, it will affect people's psychology and physiology.
2. Who are the clients?
   1. The worker inside the CIT
   2. The elderly
   3. Public
3. Where will this be used?
   1. The elderly assisted living facility
   2. The lobby of CIT.
4. What does our research tell us?
   1. Color: Blue and green, No red
   2. Shape: The shape can not be any many angles
   3. Playful, Humorous, and Novel can make people feel relax
   4. Line: Soft line, least angling
   5. nature, sea, and sky can make people feel relax
5. What are the important tensions or conflicts?
   1. The blue sky with red fire
   2. circle shape with red emoji face
   3. Too many shapes at the same time
6. What are the especially surprising points that arose from the empathizing exercise?
   1. Public space
      1. Too many people
      2. Too noisy
      3. Too Busy
   2. CIT
      1. Too many people talk at the same time.
   3. Elderly Center:
      1. Too open
      2. Too dark
7. Do we have any insights into the problem?
   1. Because kids can recognize color before shapes so I should pay more attention to colors.
8. What are the specifications of the project
   1. required tools
      1. Hydra
      2. SVG.js
      3. custom electronic circuits which use an Arduino through Johnny Five
   2. optional tools
      1. Inkscape
      2. GIMP
      3. Openshot
      4. Blender
      5. others
   3. functional requirements
      1. The image must work full-screen (full HD, 1920×1080).
      2. The image must be animated, meaning it changes over time. The loop must be at least 5 minutes long.
      3. The image must significantly react to the environment in at least one parameter that is obvious to a careful observer.
      4. The image must be based on your own written research report, which includes at least five citations.

Yuna's feedback

I think Zoey should keep is the fish part, the hydra part was pretty good-looking with your fish. The good part of Zoey's sketches is she uses color really well. The flowers and fishes are pretty good, and look relaxed and playful. For letting people feel more relaxed, I think the part of the flowers with hydra looks a little bit heavy. If the background is too heavy, it can't let people feel relaxed. I think if Zoey can improve that part it will be better.

Yiler's feedback

I think this one is the most relaxing one among all three of the sketches. It's detailed but the main color is still outstanding.（hydra1） This one is not so relaxing compared to the other two, because it looks like there are some fast movements going on in this picture.（hydra2） I think it would be more relaxing if the pictures could have less or slower movement going on, like the first one and the second one of the Hydra sketches.

Steve’s feedback

For Zoey's sketches, I think the work she did in Hydra was really good. Her first Hydra sketch looked like putting a bunch of paint in a bowl and swirling it slightly but not mixing the colors. I also really liked the color combination. I feel like with animation it would be a lot more relaxing. However, I felt like her second Hydra sketch was not as destressing. I felt like there was too much detail and it was a little overwhelming.

• *Red word is mean the part I need to change
• *Blue word is mean the path that I can keep

SVG

1. The flowers and fishes are pretty good and look relaxed and playful (Yuna)
2. All the color I use is cold color so I can put some warm color inside. (Lee)
3. It looks playful. (Lee)

Hydra

1. The hydra part was pretty good-looking with your fishes (Yuna)
2. I think this one is the most relaxing one among all three of the sketches (Yiler)
3. it would be more relaxing if the pictures could have a less or slower movement going on (Yiler)
4. The first Hydra sketch looked like putting a bunch of paint in a bowl and swirling it slightly but not mixing the colors, he also really liked the color combination (Steve)
5. Feel like with animation it would be a lot more relaxing. (Steve)

SVG

1. Make people feel cold and lonely (Lee)
2. The color of the tree and the flower are good but not for destressing images. (Lee)

Hydra

1. it was not as destressing, there was too much detail and it was a little overwhelming (Steve)
2. This one is not so relaxing compared to the other two, because it looks like there are some fast movements going on in this picture. (Yiler)
3. it would be more relaxing if the pictures could have less or slower movement going on (Yiler)
4. Feel like with animation it would be a lot more relaxing. (Steve)

SVG

1. The flowers and fishes are pretty good and look relaxed and playful (Yuna)
2. Flower one makes people calm and stop thinking (Lee)

Hydra

1. the flower part with the hydra looks a little bit heavy (Yuna)
2. Feel like with animation it would be a lot more relaxing. (Steve)

1. Put some warm color inside
2. Make the speed slower
3. Add animation
4. Give fish more space

Sketch 1 is the one that my classmate and I like the most, The color and the shape make people feel relaxed and playful. My next direction is to improve my Sketch 1.

When people make loud voices the fish will move

s0.initScreen()
src(s0)
.add(noise(),0.1)
.modulate(noise(() => a.fft[0]*0.09))
.scale(1.5)
.out(o0)

Fish is moving with the wave

s0.initScreen()
src(s0)
.add(osc(10),0.2)
.add(noise(1000),0.3)
.modulateScrollY(osc(20),0.1,0)
.scrollX(0.5,0.1)
.scrollY(0.5,0.1)
.out(o0)

water waves with fish

s0.initScreen()
src(s0)
.out(o0)

speed = 0.3
noise()
.scale(2)
.layer(
  src(o0)
  .mask(osc(10,0.1,3).modulateRotate(noise(),90,0))
  .scale(() => 0.09*(time%30),() => 0.09*(time%30))
  .luma(0.02,0.03)
)
.blend(o0)
.modulateScrollY(osc(10),0.1,0)
.out(o1)

render(o1)

Yuna

• For the hydra part, the picture quality is cool and has a kind of retro feeling. (那個畫質很酷，有一種復古DV的感覺
• The gradient is also cool and relaxing.
• The gradient background let people feel relaxed.
• The wave that she has makes people feel relaxed.
• The ocean does not only have fish, maybe can add some other things.
• The fish look a little bit strange, maybe can make it not that bending.

Yiler

• The dark blue gradient looks relaxing, and I think the sandpaper effect on the first Hydra prototype looks interesting.
• Keep the dark gradient, and the wavy effect in the first prototype.
• I think it might be more relaxing if you can change the red gradient on the top of the image because it looks sort of like blood. Also, I think you should make the fishes move because they look like dead fish being flushed away by the wave now.

Steve

• The coolest thing is the background color in her SVG.js drawing.
• The background layout and the background colors are quite useful for destressing.
• I think that fish that swims would make it very relaxing or making a mini game out of it would be fun to watch

The screen move then the mouse move

s0.initScreen()
src(s0)
.out(o0)

src(o0)
.add(noise(1000),0.1)
  .modulateScrollY(osc(10),0.1,0)
  .add(noise(),0.1)
  .scrollX(() => -mouse.x / width)
.out(o1)

render(o1)

I add some cute seaweed and let the fish move

s0.initScreen()
src(s0)
.modulateScrollY(osc(10),0.1,0)
.out(o0)

speed = 0.3
osc(o0)
.scale(2)
.layer(
  src(o0)
  .mask(osc(10,0.1,3).modulateRotate(voronoi(),10,0))
  .scale(() => 0.09*(time%30),() => 0.09*(time%30))
  .luma(0.02,0.03)
)
.blend(o0)
.out(o1)

render(o1)

I make the beach looks more real because I put a different layer on it

Yiler

1. Removing the red gradient helped a lot with making it more relaxing.
2. The seaweeds look nice, but they are stacked together.
3. I think maybe it would be more relaxing if you make some fishes move in different speed, because it looks like the fishes are dead and they are being flushed away now.
4. Removing some of the bubbles or animating them might also make it more relaxing.
5. The one with the yellow gradient on the top is more relaxing than the other one.

Steve

1. First prototype:
   1. The most relaxing things is the moving fish and the background color
   2. I feel like there could be more variation to the swimming fish. I would also like the first to act like a fish in a fish tank now, it is more like fish in a sea.
2. Second prototype (hydra):
   1. I liked the wave effect. ( I would add a second point but there is nothing else)
   2. To make it better, combine svgjs with hydra and make it so that the seaweed looks better.

Verdict: I like the animating gone with svgjs better but if hydra could be added, it would be great.

Yuna

1. Prototype 01
   1. The changes in the ocean’s color, this kind of gradient make people feel relaxed.
   2. The wave of the ocean and the speed of the feel relaxing too.
   3. Maybe the seaweed can have curve. a little bit like this picture↓↓↓
      1. 
   4. Maybe the fish can also swim back.
2. Prototype 02
   1. The wave makes this prototype relaxing.
   2. The fish are swimming and the feeling of overlap makes people feel like is more like in the ocean.
   3. The overlap is good, but it looks a little bit messy.
   4. The detail is a little bit too much, maybe make it less detail will be better.

Choose from the two prototypes the one that is the most relaxing and explain why you feel so.

I personally prefer Prototype 01, and I think this one is the most relaxing one. I think the yellow and blue gradient makes people feel warm, but Prototype 02 makes people feel a little bit cold. Also, Prototype 01 has less detail.

Actually, the fish will move but my computer has some problems so I can show out

s0.initScreen()
src(s0)
.add(src(o0),0.1)
.out(o0)

src(o0)
.add(noise(1000),0.1)
  .modulateScrollY(osc(10),0.1,0)
  .add(noise(),0.1)
.out(o1)

render(o1)

The fish can move and all the fish swim at different speeds.