Lena Lekkou's profileLicense Adobe SAE EU ATHENS's profile

Wes Anderson Tribute

Wes Anderson Tribute
This is a web design project that I have done back in 2014 when I was studying Web Design & Development at SAE Athens. It's a case study for a website that is a tribute to Wes Anderson movies. This is my first ever website that I developed the concept, designed the UI's and developed in HTML / CSS. 
You can find the mockups that were used for this presentation on Freepik.
Research
First of all I watched every movie that Wes has created, made screenshots, wrote down nice quotes from the movie and search for the little details that might be useful.
Colors & Icons
Every film page has it's own color based on the colors in the movie and every film page has it's own favicon  : )
Flowchart
Navigation between the pages
The idea behind the navigation between the pages was that it's like a book that you flip pages and can change between the "chapters". On the desktop these "chapters" are on the right while on the mobile it's on the bottom. 

Although when I started developing this website on HTML / CSS found out that the idea with the right navigation was very difficult to handle in responsive design (and of course it wasn't very user friendly).
Mockups
UI Elements
For every different movie I hand-picked my favorite snapshots in order to create the image gallery and the Polaroid gallery every webpage has.
Element of surprise 
Surprise #1

For every movie I had imported the movie's soundtrack that is hidden behind the image of a radio. In every page you can find a different radio image that is suitable for the specific movie.
Surprise #2

While I was watching Wes' movies again I discovered that in every movie there is a yellow object, which I found very interesting and I wanted to implement it on the website.
Surprise #3

I hidden a webpage from a mini clip that Wes was filmed and it's about the love affair of Jack. So the only way to find this webpage was behind these two Polaroids. 
The HTML / CSS Implementation 
Of course there are a lot of issues with interaction that I can see now, but it was my first website : )
Image Gallery using JavaScript
Reflecting on that project now
I had a lot of fun researching and developing the idea behind this website and that part I would not change it.

But if I had time to redesign this, I would definitely consider to think again the idea of the navigation. It's not user friendly enough and probably will confuse some of the users. 

My choice of colors need more work, because it's too hazy for digital devices and some texts are not readable.

I wanted to find a font that reminds me of Wes Anderson's aura and I chose one calligraphic and one like a typewriter, but I think that I lost the mark on user experience. Especially the calligraphic font is very difficult to read. 
Production Year : 2015
Wes Anderson Tribute
Published:

Wes Anderson Tribute

Wes Anderson Tribute - Web Design Project

Published: