This is an archived website, designed in early 2013. View my current website.

The Architecture of Website Design

Architecture and websites have much in common:

both function to serve the public
both reflect the culture of our time
both require strong technical underpinnings
both rely heavily on semiotics

The web is still in its infancy, while Architecture enjoys a rich heritage drawing from millennia.

Maybe websites (and their designers) could learn a thing or two from big sister…

This page started out as a means to explain layout options for my clients.

While each of my web designs is unique, there are some basic structural patterns that repeat from website to website – I wanted a central repository which I could use to help explain the possibilities and constraints of each pattern when collaborating with my clients in the early stages of a design.

The more I thought about it, the more I saw a need to provide more context:

An informed client is a happy client.

Websites are complex, and involve making numerous successive design decisions, each reliant on the other. Knowing just why an element is treated in a particular way is an important aspect that needs to be communicated back to a client.

Its early days yet. I have a wealth of stuff to write, diagrams to craft – it’ll take time… Follow me on my G+ or Twitter feed to be notified of when they are ready.

A variation of the Van de Graaf canon, for web-pages

Ever since I read The Secret Law of Page Harmony I've been keen to apply these age old layout techniques to my web pages.

This is my first attempt.

Try resizing your browser window, and notice:

The 9x9 grid is proportional to your browser window
I've defined a central zone or landing panel, optimally positioned. It acts as a "poster" for the page.
The margin is generous, with the rule of thirds coming into play: the bottom margin is twice that of the top margin, which provides a lead-in to the remainder of the page below the fold (or, if you're viewing on a touch device, somewhere to place your fingers at the bottom of the viewport without tapping something inadvertently).

Missing is Tschichold’s recommended 2:3 page-size ratio, it being tricky to use when you can not control the size of the viewport. I plan on looking into this in a future article.