IAC logo

The world of non-commercial film and A-V

Events Diary Search
The Film and Video Institute find us on facebook Join us on Facebook

 

Layout Principles

Why is a website like a blind date?

When a new visitor clicks on a website for the first time it is just like meeting someone for the first time. And the research shows most people take only seconds (based on what they see) to decide what they think of that person and this will colour their feelings and decisions about everything else that subsequently happens. And so it is with a website you are seeing for the first time - the visual impression is crucial. You may have compelling content and superb navigation but if the site looks crudely designed with an amateurish layout, garish colours and clashing or unsuitable fonts your new visitor will judge the site badly. At the very least, they will not start with a good impression of your club and at the worst will just click away. I am talking about style and layout and the good news is that you have a blank sheet to start with and almost complete flexibility in your choices.

These are the main layout choices we are covering:

  • - how wide should the page be?
  • - how many columns?
  • - how far down does your page go?
  • - how to use the space?
  • - how to use pictures?
  • - where to put the navigation menu
Sample layout. Sample layout. Sample layout. Sample layout. Sample layout. Sample layout.

How wide?

Websites can be set to have a specific width measured in pixels. Over the years as monitor's displays have expanded from 640 to 800 to 1024 so the width specification for a website has gradually also become greater.

Obviously the wider you set the design the more you can get on each page. However if you specify your site to have a fixed width of 1024 or more all those people with monitors set to 800 will have to scroll sideways to and fro to see the whole page. This is unacceptable so my advice is to set the width to 800.

A more contentious issue is to whether to fix the width absolutely or to let it expand as people make their browser wider - this mean the words reassemble themselves to fit a wider or narrower space. This can lead to a distortion of the layout and, if you as the designer do not want that, I suggest you lock the width preferably at 800 pixels.

How many columns?

This is an area where so many clubs sites often look so amateurish - they have no columns.

The text stretches all the way across the page in a single row and to make it worse it may have been set up so that it expands flexibly and thus fills the page width-ways, however wide the page. This means you could end up with a sentence with 35 words or more in an unbroken row.

Now look at any professionally produced information website. I can almost guarantee that they have two or even three columns plus possibly a separate column for the main menu. It looks just like a newspaper and the reasons are:

  • it is much easier to read - just like a newspaper
  • people don't read a website like a book - so you do not need the width
  • people scan headings on websites and with columns you can offer more headings to scan
  • it offers the opportunity to have a much more interesting layout, you can still run headings or pictures across two columns to give it impact.

How far down the page should your page go?

Compared to paper a website is a wonderful thing. You can make the pages as long as you like just keep adding more material .

I did actually come across a club site designed just like that - everything on one long page - brilliant! No need for navigation it is all there... BUT put yourself in the user's shoes you keep paging down until you are completely lost. You probably can no longer see the main menus (unless you are using frames) and you want to find something. So you have to page up (or down) but can't remember how many pages to go and so you just search and search like you were looking through a supermarket till roll.

Web designers have come up with a simple design rule to avoid this problem - you are allowed just one page down ("above and below the fold "they call it - imagine a newspaper folded in two). If you want to go further either, create a new page to link to or rewrite to make it shorter. The only exception is if you have a newsletter or technical article as a pdf as they have their own search facilities.

Using the logo on your site offers all kinds of opportunities to be creative in the website context - for example, maybe the logo should always be a hyperlink, which takes you back to the home page. The logo should be an integral part of the site design so that it is always in the same place with every page thus acting as a unifying link across all the pages.

So you should not make the page too long and you should have some columns.

The Weebly Way

Tips on: managing pages in Weebly | creating columns in Weebly

Weebly offers a way  for absolute beginners to create good websites
easily and without cost. Our series on how to use it begins here.

Go to Layout Schemes Right arrow.


Website Makeover Guides - Introduction

What Should the Content Be? | Navigation | Planning Navigation | Anchors & Links | Words | Getting Pictures | Getting & Using Pictures
Processing Pictures | Video | Presentation Pictures | Colours | Layout Principles | Layout Schemes | Fonts | What is SEO?
Search Engine Factors | Check Your Search Ranking | Stay Legal | Website Health Check | Website No Goes more to come ...

A Beginner's Guide to Creating a Club Website with Weebly

Don't Panic! | Signing up to Weebly | Making your first (elegant) page | Adding more pages and navigation
Adding pictures and words | Creating a complex Coming Soon Page | Adding Forms, Emails, Maps and Videos.

IAC Competition to find the Best Club Website 2011


Share your passions.

Audience silhouette.

Share your stories.

Page updated on 19 January 2011
Contact Webmaster
find us on facebook Join us on Facebook
Bookmark and Share
UNICA information UNICA member
Company Limited by Guarantee No. 00269085. Registered Charity No. 260467. Authors' views are not necessarily those of the Institute of Amateur Cinematographers. Website hosted by Merula. JavaScripts by JavaScript Source. Menu by Live Web Institute. Art work by Tony Kendle.