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.
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!