banner_500.jpg

Fiat 500

Fiat 500

banner_500.jpg
 
fiat_logo.png
 
 

It all started when…

...looking for a story to tell, using an icon of Italian design, history and prime example of functionality. I was totally enamoured of this adorable piece of the automotive industry - The Original Fiat 500. Designed by Dante Giacosa and launched in July 1957, Fiat 500 was produced for post-war Italy, being quickly recognised as "people's car". 

So what was so extraordinary about the car that caught my attention? Well, first of all, the size - being 9.7 ft (2.97 m) long, 4.2 ft (1.3 m) in width and 4.5 ft (1.35 m) in height Fiat 500 was the smallest car produced in the world at the time. Second of all, the design:

It is a clear expression of form following function, a logical and economical use of materials, and a belief that quality design should be accessible to all.

No wonder why Fiat 500 became part of the collection of New York Museum of Modern Art in 2017!

 

Navigation

Exploring the ways of telling the short story, I was looking for basic and non-distractive ways of navigation, that wouldn't take away from the content and design.

The main page would contain "controversial" hamburger menu, for the list of potential sub-pages and dots that help the reader navigate throughout the main narrative content.

Keeping it as minimal as possible, I want the story to be a focal point and design to be the complimentary addition to the whole experience.

nav_500.gif
 

Design

scheme500.jpg

Design is the central part of the process. My intention was to display the narrative in a non-distractive way, where colours, typography, images and layout can grab readers attention.

For the type section, I've used Montserrat (headings) and Georgia (body) together. Mixing serif with sans-serif fonts is a classic approach in typography, I also wanted to create a clear hierarchy in the content, preserving traditional qualities at the same time.

Vibrant colours combined with less saturated ones are here to add contrast, enhance and empower the content. The colours would change form page to page, to reduce the chance of predictability.

The work is one of the examples where I decided not to use or follow the grid system. Often perceived as a lazy and inconsiderate approach, it was a conscious choice. I feel that having a freedom of freely arranging the elements can prevent the design from being boring and predictable when scrolling through the content. This is also to give a reader a fresh and progressive structure of the pages.

 

Interactions

Interaction model created with Photoshop and AfterEffects. Minimalistic animations are used to complement and reveal the content in a meaningful way.

Thank you for reading!