About this design guide

This design guide is to help those wishing to design a website based on the framework you can see in use on this page. A framework is simply a skeleton grid which forms the basis for a website design.

We have built this framework to allow a great deal of flexibility. For the sake of simplicity, we've stuck to the conventional header / content / footer order of things, but within that there's a very wide range of options. Heights of headers and footers are up to you, and the widths of columns, sidebars and content areas are easily changed.

As well as this, the site adapts to any size display, from large desktop displays down to smart phone displays. On smaller screens, elements on the page adapt to fit the display. Columns will narrow and then at a cretain point switch to being sequential, and the menu collapses into an easily accessible concertina list which toggles up and down at the touch of a button. The site remains easily navigable and readable without having to zoom.

You can see this working by visiting this page on your tablet or smart phone, but if you are viewing this on a desktop browser, you can simply drag to make the browser window narrower.

The advantages for users are obvious, but the advantage for designers is that they don't have to create a different set of designs for smart phone or tablet screens because the look and feel of the site is automatically (and gracefully) retained across different devices.

When designing, you'll be laying out items on the desktop layout, and these are the designs your clients sign off. You won't necessarily be able to see exactly how this translates to smaller devices until development has begun, but you are welcome to direct your clients to these sample pages to help them get some idea. You may also want to allow time for design and development tweaks at this stage of the process.

How to use this framework to design a website

A web page will generally need a main content area for the actual information or article contained in the page, plus other areas that you can use for what we call modules. These might be menus, advertising space or latest news links - whatever is relevant to your client's needs. Where these go is up to you. You might want them in columns left and/or right, you might want them under the main content, or you might want a combination of both, especially on home pages where you might want to display a snapshot of what the site has to offer.

We've used the framework to show some common column layouts below with widths. We've also created this Adobe Illustrator and Photoshop file to give you a start. The main thing is to think of this grid as a skeleton. Don't want your header and footer to go all the way across the screen? They don't have to. Don't want those drop shadows on the left and right hand edges? You don't need them. Want to introduce some actual white space? Go ahead.

Some points to note:

• The overall width of the content (not including the edge margins) on a desktop display is 1170 pixels.
• The page edge shadow we've used here makes the page 1230 pixels wide, but it's not a necessary part of the framework. You can change it if you like, or simply not use it at all.
• Your colour pallette is completely up to you. Just remember it's all RGB on the web!
• Font sizes are also your choice entirely, as are line spacing and paragraph spacing etc.
• If you wish to use web fonts (other than the standard set), we'd recommend using Google Web Fonts because they're free. If you use other fonts, make sure that there are web versions of those fonts commercially available and that you have budgeted for their purchase.
• If you're unsure about whether something you want in your design can be achieved using this frameowrk, run it by us.

That's about it. If you have any questions, just email This email address is being protected from spambots. You need JavaScript enabled to view it. .