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.

Left: Page Spreads (book)                               
Right: 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.
Together with the client we 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.

Left: Homepage (old)
Right: Homepage (new)

• 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.
Left: Portfolio Page (old)
Right: Contact Page (old)

Left: Project Page (old)
Right: Project Page (new)

• 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: Removed the video background for faster loading. Retained the company ethos and quote.






Fonts:
Eurostile Extended
Nebiolo Type Foundry, Turin Italy

Servus Slab
Dada Studio Warsaw, Poland



©2021 Studio Principle