Call: 01273 423 345 Email: info@veryownstudio.com

The divine proportion

Posted on September 30th 2015

A new portfolio style website is usually a significant undertaking for a company, so we feel it is useful for clients to understand the process involved behind deceptively simple phrases like ‘responsive design’ or ‘scalability’. One phrase a lot of our built environment clients are familiar with is the golden ratio, or divine proportion – from Euclid to Corbusier, the mathematical golden ratio can be applied to art, architecture and, nowadays, web design.

ConranandPartners_Mobile1

For Conran and Partners new website, the initial brief to Very Own Studio was to update their previous website, which was technically outdated, difficult to update and unresponsive. However our first content audit soon unveiled a large archive of beautiful images representing their impressive back catalogue of projects. We proposed that these images should take centre stage in a completely new website design.

Evidence from Conran and Partners website analytics, paired with emerging standards, demonstrated the second core part of our brief – it was essential for the new website to be responsive, presenting content as elegantly as possible whatever the screen size and format it was viewed from. We designed and developed the website with an underlying grid system based on six columns, changing to four columns on smaller screens. Our system is based on the divine proportion and defines the layout of all elements of the site, but most crucially, Conran and Partners images, our engaging central feature.

To maintain the proportions across a range of browser window sizes, we built the website with several ‘break points’ adhering to our grid system. You can see an annotated example below. This set of rules determines the size of key elements on the page to help maintain consistent proportions. For example, if you view the site from a desktop, try resizing the browser window and you will see the depth of the menu bar changes. We applied these break points to several elements of the site including type, logos and icons.

We designed a separate mobile version of the site, to ensure Conran’s images remain strong, even on a small smartphone screen. Following the same grid system, certain features such as the project image grid and menu buttons are optimised for mobile use.

Another major consideration, which again will be familiar to many multidisciplinary design and built environment clients, was how to present the different areas of Conran and Partners business? With their emphasis on collaborative working and teams working in architecture, interior design and industrial design, would it make better sense to set the three disciplines apart, or intersperse them? Both options had strengths and weaknesses, for example by presenting their combined portfolio together, we would emphasise the multidisciplinary nature of the practice, but it would make the visitor journey through the website less obvious. Working with the client, we reached a solution that played to the strengths of the three disciplines and articulated their brand ethos throughout the site, through clear navigation and filtering, well written positioning copy, new team photography and a balanced mix of strong project images on the homepage.

Our third challenge and the final point I’ll talk about here, was creating an effective, easy to use content management system, or CMS, behind the site. As essential as it was to design a beautiful and immersive site, it was as important that the new website ‘worked’ for the client team, making it easy for them to add to their continually growing portfolio and maintain the high standards we all aspire to. We achieved this with a CMS centred around uploading images according to our golden ratio grid system, giving the user full editorial control over how each project is presented.

As Corbusier once said, “good design really is simply intelligence made visible” and we have endeavoured to typify this with Conran and Partners new website. If you have any questions about responsive website design, the divine proportion, or even Corbusier himself, please get in touch, we’d love to hear from you!

Conran+PartnersProcess1 Conran+PartnersProcess2

conranandpartners.com

Connect:
VOS_Hanover_Square_Toilets_Small
7–10 Hanover Square
ConranandPartners_Mobile1
Conran and Partners
FirstBase_LetsTalkAboutDesign_PinBadges
Let’s talk about design
StudioMGD_Mobile_Home
Studio MGD
Brand-Identity-South-East-Ary01
South East Ayr
Home page
AMODELS
C+P_QDev_Insides_01
Homes for Londoners
Brand-visual-identity-website-shootcase-cover
Shootcase®
Shoot_Boutique_Cover_Image
Shoot Boutique
Jim_Stephenson_Cover_Image
Jim Stephenson Architectural Photographer
HANCI-Brochure-Front-and-Back
Hunger and Nutrition Commitment Index
Convoys-Wharf-Website-Cover
Convoys Wharf
Alternative_Bike_Co._Cover_Image
Alternative Bike Co.
Connected_Thinking_Cover_Image
Connected Thinking
Vada_Media_Cover_Image
Vada Media
Design_Brighton_Cover_Image
Design Brighton
SCDF_Cover_Image
South Coast Design Forum
Barratt_Homes_Cover_Image
Barratt London
Love_Not_Money_Cover_Image
Love Not Money
Four4_Business_Cards
Four4 Consultants
CastIronStoves_Cover_Image
Cast Iron Stoves
Roy_Ripper_Cover_Image
Roy Ripper
Food_For_Friends_Cover_Image
Food For Friends
Rick_Schofield_Cover_Image
Rick Schofield Photography
Trellis_Cover_Image
Trellis
Club_Gourmet_Cover_Image
Club Gourmet