A Microsite — Project 6 for UX/UI Bootcamp Ironhack, Berlin
The Task
We had to create a ready to build microsite for desktop and mobile devices in four days. The focus was more on design and animations than research.
My Topic
Having a background in Graphic Design and the Film Industry, I decided to create a Film Festival which shows Sci-Fi silent movies to be part of a series of events celebrating the 50th anniversary of the 1st moon landing, happening at a planetarium in Berlin.
Because Silent Films can be very(!) silent — there will be a musician playing music. His name is Stephan von Bothmer. He’s composing and playing music for silent movies. Those events are called Stummfilmkonzerte/Silent movie concerts. Besides working with him before, I became a big fan of his work!
Visual Inspiration
So I did some design research and checked other film festivals, cinema websites, the musicians and the planetariums…
From there, I decided to provide a better overview of the movies and to adapt the planetariums visual language.
I collected some pictures for inspiration and came up with this moodboard. While diving into the topic I felt a huge contradiction: film and music deal with emotions and human affairs — science is focussing on data and technology! So I had to find a design solution which attracts both: the film lovers and the scientists at the same time!
But also they have something in common: movies as well as the stars need the darkness to reveal their whole magic/beauty!
Also I made a design tile with the most important design elements which I adapted from the planetariums website. They are using the font family of UNIVIA in different styles which has a futuristic and technological look and can be referred to the new NASA-logo. It’s super legible, even in a smaller size as a bodytext. I decided to limit the use of colours to turquoise and dark blue to create a clean, contemporary look.
Designing with Sketch was not a problem anymore, this projects challenge was doing animations in Principle which I used for the first time. I enjoyed it pretty much — just went nuts when things kept jumping around because of similar or wrong layer names…but well, next time it will be better, hopefully!
So here’s my High-Fi prototype for desktop:
And the mobile version:
Conclusion
I’m pretty happy with the result, knowing that it’s not perfect at all! But with more time you can fix everything. I’m really looking forward to do more animations, for that I really need to structure my files neatly!
Next steps
- to ease up the design a bit as it is quite tense
- finish & animate mobile version
- work on design details
- send both to the musician and convince him to redesign his website (is any web-dev in?)
