K4 Architects – A new site for a new site

Author: James Braithwaite

K4 Architects is a recently established architecture practice newly based just a stones-throw from our Birmingham studio on Fazeley Street. They came to us looking for a new web site to mark the new chapter of their business.

Websites for architects run the gamut from great to poor. They have in the past been dogged with an expectation of hard-to-use form-over-function inaccessible Flash offerings.

The trend for obscure menu systems, dreadful copy and pixel fonts can safely be left behind, but such sites often used beautiful large / full screen background images and custom typefaces – great for showing off the company portfolio. Whilst these only really benefitted the large-screened desktop they often responded to browser sizes (up to a point) better than their HTML-based counterparts. (remember sizeListener.onresize = function() {};Stage.addListener(sizeListener); ?)

We wanted to select the best parts of this status quo and, at the same time, add our own modern take.

Welcome, Responsive Web Design

Image credit: Smashing Magazine

Just over a year ago, Ethan Marcotte published an article on A List Apart on ‘Responsive Web Design’. The article draws similarities from Responsive Architecture, a class of architecture or building that demonstrates an ability to alter its form, to continually reflect the environmental conditions that surround it. He observes –

Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room’s temperature and ambient lighting as it fills with people. Companies have already produced “smart glass technology” that can automatically become opaque when a room’s occupants reach a certain density threshold, giving them an additional layer of privacy.

Since then it has become a hot topic, and has forced web-designers to think differently when designing a site. He continues,

In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. It’s an interesting phrase: At face value, of course, it speaks to mobile WebKit’s quality as a browser, as well as a powerful business case for thinking beyond the desktop….But what’s next? An iPad website? An N90 website? Can we really continue to commit to supporting each new user agent with its own bespoke experience? At some point, this starts to feel like a zero sum game. But how can we—and our designs—adapt?

Media Queries

We used a selection of CSS Media queries to detect different browser sizes and capabilities and morph the pages to best suit the situation. This way we avoid creating separate user-agent specific, and an intelligent system that creates a ‘one size fits all’.

A matter of style

K4 showed us a copy of Process; A Tomato Project. The book details the abstract of Tomato’s concepts, memories and approaches to work in layers of abstract photographs and layered transparency. We used these styles to inform the site’s look and feel, using rgba transparencies (degrading gracefully for non css3 browsers of course) and background overlays to build up layers of depth.

Launch Event Invites

As well as the site we designed some great invites to send to VIPs for their launch event. These minimal invites featured metallic embossed foil in the same accent colour as the site on 540gsm Pristine white Colorplan.

View the site: k4architects.com