22.07.2011
Website, school project 2016 (bachelor)
The second year of our my bachelor we had a very unusual project in a web development course. We were three students that teamed up with a graphic designer from our school to make a website in memory of the victims from 22nd of July 2011. We decided to make a timeline that displayed the emotions the victims felt during this day, rather than a more traditional timeline of events.
Because our take on the assignment was very unusual the school interviewed us regarding the project. The focus of the interview was that the project was multidisciplinary, because the graphic designer we worked with was from another department (communication and design).
My role
I was a web developer for this project and I mainly worked on design and functionality for the scroll up, information and sound buttons (see third picture), as well the colours for the different emotions.
Learning outcome
I learned a lot from working with a graphic designer. She thought me about creating a concept from scratch and how much thought is behind it. In addition I learned about challenges related to working on the same code other developers.
Question (introduction)
The first thing you were asked to do was write your name in an input field. Then you dragged your name into one of the three boxes based on where you were that day
Introduction page
After choosing where you were this introduction to the web page was displayed
Timeline, 15:26
The start of the journey introduces the different emotions the victims felt during the tragic even. As you kept on scrolling downwards the clock ticked and you could see what happened at the given time, as well as text messages to and from the people at Utøya.
Timeline, 18:02
On the right you can see which emotions the different lines represent. The lock hid and showed the text names of the emotions.
As you kept scrolling the sound switched from rain to waves and the Utøya (the island) in the background gradually transformed from blue to red. The buttons in the bottom left corner were "to the top", information and volume adjustment