A step by step guide to website layout and content.
- Page orientation
- Building a header
- Building the footer
- Homepage content
- Contact page content
- Other page content
- Legal stuff
- The clever bits
- What next?
1. Page Orientation
Grab a blank A4 page. Initially you need to decide your website orientation, will the layout be "portrait" or "landscape"?
Portrait orientation will place the page in the centre of the users screen. There will be unused borders down the left and right margins of the screen. Portrait orientation offers some relief to viewers when text is intended to be the main source of information. The narrower layout is less tiring on the eyes and more natural to readers.
Landscape naturally fills most modern screens. The width is larger than the height - like a widescreen TV. Text extending across the entire width is to be avoided, especially with small fonts. Landscape is the preferred layout if you're using large graphics combined with a left navigation pane.
2. Building a Header
Each of your webpages needs a header. This is the top part of the page and it should hold critical information about your website. Like a newspaper, the top section of your page should contain:
- Website name.
- Organization logo.
- Page name (if not indicated by the navigation menu).
- Organization colours.
- Byline, taglines, catchphrase or motto.
Using a marker pen and in large letters, write your website name across the top of the A4 page.
Sketch your logo in one of the top corners of the page.
Under the website name, write your byline in slightly smaller letters.
If you want to use a background image/photo behind the header, sketch this immediately below the text in pencil.
3. Building the Footer
On the same A4 page, using a biro, draw a line across the bottom 20% of the page. Under this line, write your individual page names across the page from right to left in brackets. If you don't know what pages you're likely to have, start with "Homepage" and leave several blanks before you finish with "Contacts". In your finished website, these names will become text links to the pages.
[Home] [Join] [Buy] [Sell] [About] [Contact]
Immediately below the text links, write:
© (your name or organization)+(year)
This is the bit that says this is yours. If we design your website for you, we put our name (and a link to us) to the right of your name.
4. Homepage content
In the blank space on this first page, write "HOMEPAGE" using a marker pen.
HOMEPAGE
List your favoured colours for the site. Use descriptive terms or hexadecimal colour codes and give us some idea of where you would like the colours applied (green border, dark blue background, font colour #ffff44, etc...,).
Write down the conversational perspective and tone you would like to project. For more information on these terms, go here
Now write in biro 50 to 60 words explaining the purpose of the website or giving a brief introduction to it.
"Official website for members and supporters of the Antarctic Scout Group (ASG). The ASG was originally founded 1809 by Edwin Monk (1767-1844), and survives today thanks to the support of the Scott Base Research Team." (all fictitious)
Next write your organizational "mission statement" or "objective", or WHY you chose to have a website.
"The mission of the ASG is to prepare young people to make ethical and moral choices over their lifetimes by instilling in them the values of the Scout Oath and Law." (all fictitious)
Now list the services you offer, or list what can be found on the website.
- History of the Antarctic Scout Group
- ASG today
- The future of ASG
- Joining information
- Photo gallery
- Event calendar
Finally write a sentence explaining how the reader/viewer can contact you.
"To find out more about this website or the ASG, contact ASG secretary Jonathan Monk using the links on the Contacts page." (all fictitious)
5. Contact page content
Contacts is the second most important page on your site. It is absolutely critical that viewers are presented with a reliable method of contacting you.
On a second A4 page write out your contact details. Beware not to include too much personal information (like your home address or private phone number). Make the text at least twice your normal writing height and use plenty of space to separate the sections. Experiment with the layout; left or right align the text but avoid too much centered text.
Your contact page should at least two of the following:
- Postal address
- Business physical address or location
- Business phone numbers (beware private numbers!)
- Fax number
- E-mail address(es)
- Feedback form
A feedback form should be designed using your organization colours for borders and cell shading. It should have a SEND button, optionally a RESET or CLEAR button, and at least three fields that users need to fill out:
- User name
- E-mail address
- Inquiry or Comment
6. Other page content
On a third A4 page (and subsequent A4 pages), begin listing all your other webpage titles. Two titles or names per A4 page, write them out in large text with a marker pen. Use as many A4 pages as you need to cover all the pages you want in your website. Treat this exercise as a wish list and include any pages you feel you would like, even if you can't afford them!
Go back through your list of page names and prioritize them in some way so we know what pages are most important to you, and what are least important.
Beginning with your most important pages, summarize the information you want to include on each page by listing subheadings under each page title. For each subheading include one sentence to explain the subheading, sketch any images you would like to use:
Products Page:
(priority: essential)Plastic products
- Pictures and descriptions of the plastic product range and colour options.
Steel products
- Pictures and descriptions of the steel product range.
Out of stock products
- Descriptions of out of stock products and ordering information + possible delivery delays.
7. Legal stuff
A legal page is essential for businesses and highly recommended for groups and organizations. You already have a copyright statement on each page binding the authorship of the page to you or your group. The legal page is where you spell out all the other details and fine print concerning your website.
Some ideas of what to include:
- Copyright statement
- Privacy and security statement
- Disclaimer
- Hyperlink policy
- Accessibility features (optional)
For more clues and ideas, go to your banks website and have a look at their policies, chances are they will be exhaustive and legally binding. You don't need to go to these extremes, but you'll get some idea of how you should protect yourself and your organization.
8. The clever bits
Review your whole brief page by page. Cross out any woolly thinking or uncertain statements and rewrite them more clearly. Constantly strive to convey the maximum information with the minimum number of words.
Anywhere you wish for a feature or special effect, write it on the appropriate page and draw a circle around it. Want the current date to be on the top of your homepage? Write it in there and circle it. How about an animated image? Sketch it and circle it.
Underline all text that should link to another area, like email addresses. Write the destination next to the link and circle it.
Spellcheck everything!
