Lo-Fi: So Am I

Web design education, gathering web video, css and xhtml

A guide to modular interface design on the Web


This is quite a specific topic but hopefully it can apply to all your web design endeavours. The topic of interface design is often overlooked and it really shouldn’t be. Creating a user interface is not an easy task and it’s something that should be created with care because all said and done, the layout of information on your website will ultimately decide whether your users stay or go.

Take the modular approach

When planning your website layout, use boxes (or modules) to house each page element. For example, you may have a search box in the top right. Illustrate this as a box and write inside it “search function”. Do this with all your page elements and it will help you separate out each part accordingly. You may decide at a later date to shift things around, so planning it so freely will aid you in this.

If you really want to get creative, you can colour-code your modules. For example, if you have a button below a block of text that says “sign up”, you can name this a call to action and colour it red. Colour-code other elements like links, menus and images also, and you start to build up a map of your site than can be referenced when it comes to actually building it.

Building your site

Now you have a modular site plan in place, you can start to build your pages. If you’re doing things properly and using CSS/XHTML, you will probably be building in a modular fashion anyway. Correctly building your pages with CSS will separate out sections into containing DIV’s and, before you style them, it might be worth putting a background colour that corresponds to your plan. This isn’t necessary but if you’re showing it to somebody else, it might be worth doing to give them a feel of your design.

Finally, we add styling

Styling these elements will then be a piece of cake, because you’ve got your plan, you’ve built it accordingly and now you just need to sprinkle on the creativity. For me, this is absolutely the single best way of executing a successful website design; by planning it on a modular level and then referencing these plans when building. If plans change along the way, don’t be afraid to shift your design to meet them, it’s all about achieving a dynamic work flow that gives the best end result.

So, what do you think ?