Programmering 1 - projektgrupp 2

7 december 2016 - Malmö University
20162-K3870 - Interaction design: programming I

Project group 2:
Daniel Alfredsson alfredsson.d@gmail.com
Max Forslund max.forslund1995@gmail.com
Gabrielle Holmgren gabriellemeh@gmail.com
Adam Terne adamterne@gmail.com
Elias Widqvist elias.widqvist@gmail.com

Assignment

In the course Programming 1, we were tasked to create an advent calendar, which would be displayed at school. The requirements for the calendar was that it needed to contain animations, the hatches should open automatically with timed Javascript functions in order, from December first to today’s date.

Vision

We didn’t want to go with the conventional christmas theme. Instead we wanted to encourage charity and kindness. We wanted to catch people's attention with bright colors and a nostalgic nineties feel. Our initial idea was to place christmas gifts, that represented the 24 hatches, on a world map (see sketch 1 & 2) and animate a zoom that brings you to the place in the world were the charity would go.

Design choices

To catch the attention of our target group, students and teachers at Malmö Högskola, we decided to go with a nostalgic nineties feel. To do that we picked a color theme with bright vivid colors, we made the animations to look old and simple like they did back in the day. We also added GIFs to appeal to the younger part of our target group. The simple design and animations also worked well with the limited resources we had to work with.

Result and reflection

We are pleased with the result but there are definitely some things we would have done in a different way if we were to do it all over again. For example, we started coding too early, before we had made final decisions on the design and layout. Had we started out with sketching and discussing the design and layout we could have spent more time perfecting the code and adding more fun, visual elements to the page. We also wish that the animations would have worked smoother, even though we couldn’t foresee the lack of processing power in the Raspberry Pi that was used to display the calendar at school.
We’ve learned a lot about animating DOM elements with Javascript, CSS and jQuery during the project. The most important lesson that we’ve learned is probably the importance of planning and structuring the work beforehand, something we could’ve done better.

Color scheme

Moodboard

Sketch 1, zoomed in on map.

Sketch 2, overview of calendar.

Photo 1, calendar live at school

Photo 2, calendar live at school