Simona De Silvestro

The official 2013 website

simona-portfolio-preview

The Problem

After a better 2012 year, Simona switched over to KV Racing due to HVM Racing being stuck with Lotus Racing cars. KV racing offered Honda racecars and a racing partner Tony Kannan, this meant that Simona needed new branding and colors fast due to switching racing teams.

The Solution:

Research & Wireframes

According google's research article called "Users love simple familiar designs", it discusses that the average user makes a gut feeling on whether or not they want to stay on a website within 50 milliseconds. So the first impression of a website is really important and it depends so many different factors such as site structure, colors, spacing, symmetry, amount of text, fonts and more.



So when I started designing Simona's website it was important to make a design that was simple and familiar but visually grabbed your attention. I wanted to follow the simple traditional logo to the left and menu to the right. Then have a visually capturing hero image and three important media links that we found users going to the most on previous websites. Those media links included the mobile app downloads for iPhone and android devices, the indy car website to allow users to see Simona's racing stats and lastly the commercial that gave an overview of Simona's career highlights.



The last part of the front page is based on showing off Simona's sponsors. You might be thinking... users don't want to see that. Technically that is true in the regard that clicks were not as high on those links than they were on other links. However in the racing world, it is almost a given silent rule that you always feature your sponsors up front because they are the ones supporting you. So this goes back to the google article of familiar design because every Indy Car drivers website shows off their sponsors.

simona-wireframe

The Solution:

Design

Colors

When it came to coloring the wireframes, I had a color selection of only three different colors: dark blue, blue, green and white.

simona-colors

Header

Originally the header was just a blue background but I found that to be really uninspiring. So I added some green highlight stripes and made the opacity layers different each green stripe. The last thing I did was add a ray of light photoshop layer with a 35% opacity to give the header a fade effect on the sides.



header-line-2

Hero Image

I went though hundreds of photos that were shot at a practice day for Simona. The photo I came across was one that many would consider to be just a throw away shot. It was Simona looking down at her helmet in deep concentration. I thought this is the shot I have looking for. A stronger determined to win Simona.



The problem with the photo itself was the shot did not tell a story. I was looking to tell a story of a brighter sunnier day of victory ahead. Unfortunately, the photo did not convey that.



So I went to photoshop and began splicing elements of photography together. The Indy Car audience is from another photo, the blue skies and road are from a separate photo too. Once I had all these objects into place, the problem is none of them seemed like they fit together. The trick to blending them all in together was using the blur tool on all the objects except Simona. This way Simona would be the absolute focus of the photo but the background would create a sense of awe.



1440-simona

The Solution:

Coding

What excited me about doing Simona De Silvestro's website in 2013, was learning how to do responsive design. Instead of following the same path of everyone else by using Bootstrap, I decided to build the website from the ground up.



I did this for two reasons:

  1. To make a website that looked original
  2. Learn how to code responsive design


While looking through my old code, the most interesting thing that I did was create media queries for desktops, tablets and phones. Here is a look at my pre sass file structure for my css stylesheets.



CSS Code Structure

		     
			
			/*
			 * Main stylesheet
			 *
			 * -----> SUMMARY <-----
			 *  1. MAIN
			 *  2. NORMALIZED STYLES
			 *  3. HEADER
			 *  4. NAVIGATION
			 *  5. MAIN CONTENT
			 *  6. SIDEBAR
			 *  7. BUTTONS
			 *  8. FOOTER
			 *  9. TABLET
			 *  10. MOBILE
			 */		
			  
		  
		 

The Result

Simona LOVED it. Seriously she went nuts over it. Which making the client happy is one of my favorite things to do. It was a great year for Simona too. After 2013, Simona De Silvestro went back to Europe to try out to become the first ever female Formula One driver.

Other Pages

simona-about-preview

About

simona-photos-preview

Photos