From Architecture to Web Design

Web Design December 15, 2007

Your step-by-step guide to creating the foundation and all the little details.

An Architecture Analogy Again?

Yeah well, architecture is very similar to interface design. Let's think about some of the steps to building a house. You've got the floorplans, then you actually build the frame. Then you fill the frame with all the wiring and heating, etc. Then you cover up all the walls and start painting, adding trim, etc. And once you buy the house, you bring in your own furniture.

So what does this have to do with web design? Well, you need a floorplan for your site, a mapping of the user flow from how they start engaging in your site to how they move around.

You can think of all the piping/wiring as the functionality associated with a website. You build the HTML frame and you embed PHP or another scripting langauge to make everything work together.

Let's add the CSS, or interior design. Pick your colors, fonts and other styling elements to make things pretty.

Finally, if you're building a dynamic site, let the users "move in" and add their own content. You've provided them with a free, empty house with all the functionality they need. Now it's time they made it theirs.

So, here are your steps:

Step 1: Design your floorplan; your ergonomic flow,

        how you want the users to move around your site

Step 2: Build the framework to allow this flow

Step 3: Fill out your functionality to make everything work together

Step 4: Add your interior design; do some CSS work to define 

        colors, fonts, borders, etc.

Step 5: Let the users "move in"

Think of your site at each stage like a new house at each stage of development. Just be sure to actually deliver a final product to the customer. Just like the architectural process, you can't focus on the details until you get the foundation down. So don't get your priorities out of order and go designing the trim before you've even thought of how you're going to make the room!

---

Other Web Design Posts