Every thing you need to know about designing your website from start to finish… - Stage 2 (Part 2)
by Jill McMahon / Pretty Pollution
Now that we have our initial concept designs worked out we can start planning how our content is going to fit into to our site. The first thing we need to sort out before we go any further is our grid and template structure. I will continue to use the website www.froufroudesigns.com.au as an example throughout part two.
Grids
Grids help layout information in the site and templates keep the branding and graphic consistent. I usually design my websites around a 3, 4, ,5, 6 or 7 column grid. The amount of columns I use depends on type of content that is to be put in the site. I find that sites which have shopping carts and products require more columns than sites which are mainly information based.
Frou Frou Designs was designed with an underlying 6 column grid. An example of the grid is shown below.
Fig. 1 – Frou Frou Designs is using an underlying 6 column grid
If you are using a 6 column grid you don’t always have to layout your content in 6 columns – you can combine columns together to make more dynamic layouts. (This goes for all number of column grids.) Fig. 2 shown below shows how the home page of Frou Frou Designs fits into the underlying 6 column grid.
Fig. 2 - As you can see, the top two paragraphs fit nicely in column 2, 3, 4,& 5 and the Latest Addition, Wholesale Log In and Join our Newsletter sections each take up two columns making 6 all together. Using a grid keeps your content consistent and neat throughout your site.
If you want to learn more on grids, click here to read an excellent tutorial/blog.
Templates
A template is a file with a predesigned format and structure which is used to keep website content pages consistent and clear. A template should include anything that needs to stay the same on all pages of the website. This includes logos, branding, colours, patterns, navigation menus, background styles and areas for content. The area for content is the area that is designated for content and will change from page to page. When using Business Catalyst it is very easy to define your content area. All you need to do is put {tag_pagecontent} into the area you want to hold your page content and viola! Figures 3 and 4 demonstrate the template concept below.
Fig. 3 – Shown here is a template labeled with different sections.
Fig. 4 – This diagram shows how a template and page content work together.
Why use a template?? Imagine if you had a website with a 100 pages. If you weren’t using a template and you had to make a change to your menu, graphics or layout you would have to make that change a hundred times. When you are using templates, each page would be linked to your template and if you needed to make a change, you would only need to do it once. That change would then be applied to all the pages using that template.
Templates help you build your sites easy and efficiently and will also save you heaps of time in the long run. If you would like to learn more about templates, watch Business Catalyst’s overview training video here.
That’s it for this month, next month we will finish off our Concept Stage by covering Flash Animations, efficiency vs bells and whistles and preparing your designs for Photoshop.
Til next month,
Jill McMahon
Read more articles >
