Camille Pourignaux

Front-end Developer

image

Case study

Berlin

Solo project

Scroll Down

Context

Answering a simple but complex question: “What was my best travel experience ?” to enter the competition and attempt to win an internship at TravelBird, Amsterdam.

Travel

Reflection

The questions asked through this general interrogation are especially “What motives you to travel? What do you want to see, live and experiment on holiday? Would you rather spend hours to think about where you want to go or do you book your next adventures according to what inspires you on any given day?”. Well, it turns out that I went to Berlin last January, on a whim… I gather some travel anecdotes and photographs, let’s do this!

Visual Design

For this project, being totally free to do whatever I want, I wanted to explore a side of the web design that I didn’t know yet. So I decided to organize my content in several sections measuring exactly the screen dimensions. I gave all of them a specific colour, which will appear in the title, the footer, the menu and the decorating lines.

I gave strength to the layout of my texts by adding coloured lines, vertical and horizontal. This brings structure and stability. These texts are written in white, on a background composed of darken photographs.

About the navigation, I decided to simply use coloured empty circles, which fill themselves on hover or when they are focused. I didn’t want it to take too much place in the experience, but only report the user’s progression.

The last section of the website is dedicated to a photographs gallery. These are all darken, until the user moves his cursor above one of them. Then this single picture becomes clearer. This avoids cognitive overload.

working

Code

I’ve never had to manage such a visual, so I first searched information on the Internet to find the best way to code it. After that I started the integration. I added some scroll animations, for the decorative lines to appear progressively. I also used it to change the footer colour according to the active section.

This is the end

This work is now over. If it doesn’t allow me to get that internship, it has at least made me discover and practice the division of a website in “screen sections”. And I’ll keep a concrete memory of my travel.

Berlin Visit the website