C4 (Case Study)

The first challenge in redesigning the C4 website was to translate the horizontal page spread layouts in the book to a vertical scrolling format.

Page Spreads (Book)

Project Page (website)

Low-fidelity sketches were developed, followed by mid-fidelity and high-fidelity wireframes as content and client feedback was compiled and accommodated.

The client and I decided a better design solution than the slideshow depicted in the wireframes, would be full bleed video. The reason being two-fold, first it collapses an entire section of the scrolling homepage. “The Company” section and subsequent quote and text are placed directly over the video. C4’s commitment to integrity and quality are the first thing a visitor to the site experiences. It was also a chance to depict the work that C4 does and push the website beyond what can be done on a static printed page. 

Side by side comparisons of the old and new website.

Homepage (Old)

• Changed slideshow for full bleed background video.

 

• Stronger worded About section appears directly over video as a company "ethos", rather than beneath the slideshow and within the same visual hierarchy as other less crucial information.

Portfolio and Contact pages brought into the main scrolling homepage design for easier navigation on today's multitude of screens.

• Massive and somewhat ridiculous footer redesigned.

• Red logo, tan and white wood texture all replaced by the more minimal and sophisticated grayscale palette found in the book.

Homepage (New)

Contact (Old)

Portfolio (Old)

Project Page (Old)

• Layout grid templates reminiscent of the spreads from the book were created for a cohesive, branded design and a user centric approach to the presentation of the page content.

• Larger, more beautiful photography showcases the different C4 building projects much better. 

• More robust copy was written to better tell the story of each individual property. 

• Mobile (below) removed the video background for faster loading. Retained the company ethos and quote.

Project Page (New)

 Mobile Homepage (New)

Project Page (New)

Project Page (Old)

 Mobile Homepage (Old)

Fonts:

Eurostile Extended

Nebiolo Type Foundry

Turin Italy

 

Servus Slab

Dada Studio Warsaw, Poland

Eurostile Extended Black

Servus Slab Regular Italic

Servus Slab Regular

Servus Slab Bold Italic

Servus Slab Regular Italic

©2020 Studio Principle

S—

—P

  • Black Twitter Icon