Architectural Styles In Website Design

Great websites are like great buildings, a perfect combination of form and function. Architectural design and styles translate well to a digital format, so it’s surprising how little architectural inspiration there is in web design.

Using Architecture As Inspiration

I created a body section of a website inspired by art deco architecture. The outcome gives a powerful visual effect. The lines are strong but easily incorporate the usual content of a web page. The site itself is in draft format but the architectural styles are a great canvas to work from. Take a look at the draft page.

I developed the body outline using scanned pictures of just three art deco buildings, and Photoshop and Illustrator work. If you’re a Londoner then you might recognise some of the aspects of the page.

The top of the body is a combination of two building outlines.

Victoria Coach Station

Not one of the most obvious pieces of deco architecture in London, the coach station has strong lines and an imposing facade. The tower works well to contain a heading or logo.

Battersea Power Station

This is one of my favourite buildings. The four chimney stacks are a memorable feature of London’s skyline. I added two of the chimney stacks, and moved them close together, for the left side of the top of the body. This could be used for a logo or tagline, visual effect, or menu items.

Grosvenor Cinema, Rayner’s Lane

I loved the curved frontpiece. Adding this shape to the footer section worked really well. The large ‘head’ section of the curve is the perfect size forfooter information. The strong curve avoids the boxy outline that so many websites have.

Methods

Putting these pieces together was pretty simple. I used the pen tool in Photoshop to outline shapes, and smoothed out the corners. I used the Ellipse Tool to get exactly the right dimensions at the top of the chimney stacks. I combined the chimney stacks and Victoria Coach Station silhouette into a single header image. For the lines of the Grosvenor Cinema frontpiece I used the Ellipse Tool and made curves with the pen tool, using the original image as a guideline.

All the images were simple black outlines. I turned them into vectors in Illustrator so I can use them in different ways in future. Then I just made the header and footer pieces 960 pixels wide to match the width of the website body and everything fit into place perfectly.

Wider Thoughts

Deco is just one of a multitude of architectural styles. There are great examples all around, from family homes to medieval cathedrals. Architecture also provides textures and color mixes that work well. You can even use architectural design to give hints about user interfaces and navigation – in a well designed building you can find everything easily even if you’ve never been there before. Take some time to look at architectural inspiration, it translates a lot better to the web than you might think.