Fiat 500

Year
2017
Time2 min read

Fiat 500 website, splash image

It all started when…

...I was 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. MoMA, 2017

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

Fiat 500 scheme, dimension specifications ><

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.

Fiat 500 website - navigation concept including hambuger menu and indicators. It changes colour based on the page content ><

Design

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.

Fiat 500 engine and differential scheme, isometric view ><

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.

Fiat 500 website concept - first introductionary screen ><

Second screen, brief introduction including history behind Fiat 500 ><

Third screen, short text about technical specs and production facts ><

Outro screen, with big Fiat 500 logo and white colour variant of the car ><

Interactions

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

Animation of the Fiat 500 website concept including interaction model ><

Thank you for reading!