WebsitesByronBay.com.au
My Website:
Design Template 4p
Brendan Lloyd PhD, January 2016
Creative Commons (CC) B. Lloyd 2016, no rights reserved.
WebsitesByronBay.com.au My Website: Design Template
Contents
Introduction ............................................................................................................................................ 3
1.
The reason................................................................................................................................... 3
2.
Search Term ................................................................................................................................ 3
3.
Domain Name ............................................................................................................................. 3
4.
Pages Overview ........................................................................................................................... 4
5.
Page Breakdowns ........................................................................................................................ 4
6.
Page Content: Text ...................................................................................................................... 6
Page One: ........................................................................................................................................ 6
Page Two ......................................................................................................................................... 7
Page Three ...................................................................................................................................... 8
Page Four ........................................................................................................................................ 9
7.
Page Content: Pictures .............................................................................................................. 10
Home Page Slideshow (optional): ................................................................................................. 10
Home Page Background (optional): .............................................................................................. 10
Home Page Pictures for Content: ................................................................................................. 10
Page Two Pictures ......................................................................................................................... 11
Page Three Pictures ...................................................................................................................... 11
Page Four Pictures ........................................................................................................................ 14
8.
Page Layouts ............................................................................................................................. 14
Home Page Screenshot ................................................................................................................. 14
Page Two Screenshot .................................................................................................................... 14
Page Three Screenshot ................................................................................................................. 14
Page Four Screenshot ................................................................................................................... 14
9.
Links .......................................................................................................................................... 15
Internal Links ................................................................................................................................. 15
External Links ................................................................................................................................ 15
10.
Design Features..................................................................................................................... 16
Animation...................................................................................................................................... 16
Font ............................................................................................................................................... 16
Icons .............................................................................................................................................. 17
Colours .......................................................................................................................................... 17
9 March 2016
Page 2 of 17
WebsitesByronBay.com.au My Website: Design Template
Introduction
This template contains all the design considerations for your 4-page website. In general terms we’re
talking about a website with pages or segments such as – Home/Intro, About/Info,
Portfolio/Gallery/Products, and Contact. If you need to go beyond the 4-page design, then feel free
to expand the template to your needs.
Please feel free to add to or delete formatting from the template to suite your needs. If you need
more room, just insert pages as required. The template here shows the bare essential information
required to complete a website for your satisfaction. Feel free to supplement the template with
additional information where you see it is needed.
1. The reason
What is the website for? (Ten words or less)
2. Search Term
What is the main search-term that people will use to find your website using a search engine?
For e.g.: “psychologist byron bay” or “websites byron bay” or “plumbers byron bay”.
3. Domain Name
Given the availability what are your preferences for a domain name?
Go for a specific domain name that relates to the search-term that will find your website.
Good example: plumbingbyronbay.com.au, psychologistbyronbay.com.au,
websitesbyronbay.com.au
Bad examples: brendanlloyd.com.au, johnsmithplumber.com.au, worldwidewebsites.com.au
9 March 2016
Page 3 of 17
WebsitesByronBay.com.au My Website: Design Template
4. Pages Overview
What is the intended function or purpose for each of the four pages? This information will be used
mainly to construct the navigation (menu) system. Use the examples only as a guide. You are not
required to follow the example. The Home page could be labelled Introduction for example.
Page Number
Example Function
Actual Function
One
Home/Introduction
Home
Two
About/Information
Three
Gallery/Products
Four
Contact/Order
5. Page Breakdowns
For each page, what are the headings and subheadings or different categories that will apply?
At the very least a page will have a heaging1 title. A page could have up to six heading2 subtitles. For
page four, perhaps all that you need is the contact form and address details.
If more room is needed please insert pages to give yourself the room to show all your details.
Page Number
Page Title (heading1)
Subtitles (heading2)
1.
2.
One
1.
3.
4.
5.
6.
1.
2.
Two
1.
3.
4.
5.
6.
9 March 2016
Page 4 of 17
WebsitesByronBay.com.au My Website: Design Template
Page Breakdowns (Cont…)
Page Number
Page Title (heading1)
Subtitles (heading2)
1.
2.
Three
1.
3.
4.
5.
6.
1.
2.
Four
1.
3.
4.
5.
6.
9 March 2016
Page 5 of 17
WebsitesByronBay.com.au My Website: Design Template
6. Page Content: Text
We are not concerned with the layout here, just the content.
Each heading and subheading will have a paragraph or a number of paragraphs of text.
If the template here is not adequate, please insert pages as required.
300-400 words total for Home Page (page one).
Page One:
Page Title:
Byron Bay Plumbing & Gas
Text to address the page title:
We provide all your plumbing and gas needs. Great service, up-front
pricing and rapid response. Servicing Byron Bay and surrounds.
Subtitle 1:
Text to address the subtitle:
Subtitle 2:
Text to address the subtitle:
Subtitle 3:
Text to address the subtitle:
Subtitle 4:
Text to address the subtitle:
Subtitle 5:
Text to address the subtitle:
Subtitle 6:
Text to address the subtitle:
9 March 2016
Page 6 of 17
WebsitesByronBay.com.au My Website: Design Template
Page Two
If page two is an About or Information page, then the following format should suite your analysis. If
there is not enough room here then please insert pages as you require.
Limit page two to 500 words or less.
Page Title:
Text to address the page title:
Subtitle 1:
Text to address the subtitle:
Subtitle 2:
Text to address the subtitle:
Subtitle 3:
Text to address the subtitle:
Subtitle 4:
Text to address the subtitle:
Subtitle 5:
Text to address the subtitle:
Subtitle 6:
Text to address the subtitle:
9 March 2016
Page 7 of 17
WebsitesByronBay.com.au My Website: Design Template
Page Three
Because page-three is likely to be a picture-gallery or products-display page, then CATEGORIES are
more appropriate to talk about than SUBHEADINGS. Otherwise we can revert back to the page-two
template for page-three. (If the page-two template applies then delete the page-three template
here. Then copy and paste the page-two template in its place. Then tailor the template for your
page-three requirements.)
To fit within the scope of a 4-page design there is the potential to display 36 items on this page.
Aside from the page-title and its text there is the potential to display 36 pictures with captions; there
is the potential to have six categories of say products with six items in each category; or there is the
scope for say two categories with 18 items each; and all the combinations in between.
Here we are concerned about defining the page-three text (paragraphs) for the page-title and the
categories.
Page Title:
Text to address the page title:
Category/Subtitle 1:
Text to address the category/subtitle:
Category/Subtitle 2:
Text to address the category/subtitle
Category/Subtitle 3:
Text to address the category/subtitle:
Category/Subtitle 4:
Text to address the category/subtitle:
Category/Subtitle 5:
Text to address the category/subtitle:
Category/Subtitle 6:
Text to address the category/subtitle:
9 March 2016
Page 8 of 17
WebsitesByronBay.com.au My Website: Design Template
Where categories apply, how do you want them ordered down the page?
Please state the order for the category display.
Category Display Order:
Please state the order of items within each category.
Item Display Order:
Page Four
This page might be a special case in point because you might not require paragraphs of text at all.
Your subheadings might be email form, address, phone, fax, afterhours, etc. In other words if it’s as
simple as that then no text is required to explain these subheadings because they are selfexplanatory.
Page Title:
Contact Us
Text to address page title:
We are happy to help in any way we can.
Please contact us either through the email form here, or phone or fax with the numbers provided.
Subtitle:
Email form
Details required:
Name, subject, return email address, message.
Subtitle 2:
Postal Address
Details required:
Company Name, PO Box, Suburb, Postcode
Subtitle 3:
Details required:
Subtitle 4:
Details required:
Subtitle 5:
Details required:
Subtitle 6:
Details required:
9 March 2016
Page 9 of 17
WebsitesByronBay.com.au My Website: Design Template
7. Page Content: Pictures
List your pictures, graphics, images, illustrations, etc.
Home Page Slideshow (optional):
The Home page slideshow needs no more than five pictures that present your enterprise, or your
product(s), or promotions, etc. This feature is more about the feel of the website rather than
substantial content.
Slide
1
Filename*
Caption (optional)**
2
3
4
5
*jpg, png, gif.
**No more than 100 characters.
Home Page Background (optional):
This option only applies if there is no slideshow for the Home Page.
Please provide the filename for the background image/picture. No caption is required.
*jpg, png, gif.
Home Page Pictures for Content:
You could in addition to the slideshow or the background picture require pictures for content. These
pictures will be associated with subheadings.
Subheading
Filename*
Caption (optional)**
*jpg, png, gif.
**No more than 100 characters.
9 March 2016
Page 10 of 17
WebsitesByronBay.com.au My Website: Design Template
Page Two Pictures
An About page could have pictures of yourself, staff members and/or associates. An Information
page might have pictures of objects such as products, equipment or places. These pictures/images
should match up with the headings and subheadings.
Heading
Title
Filename*
Caption (optional)**
subheading
etc
etc
*jpg, png, gif.
**No more than 100 characters.
Page Three Pictures
(If the page-two template is used to define the text for page three, then use the page-two template
for the pictures as well.)
If page-three is mainly for product-display then the minimum requirement for each picture is to have
a description and a caption. Limit the description to 50 words (Max 300 characters). There is a
potential to display 36 pictures on page-three.
Category
Filename*
Caption**
Description
*jpg, png, gif.
**No more than 100 characters.
9 March 2016
Page 11 of 17
WebsitesByronBay.com.au My Website: Design Template
Page Three Pictures (Cont..)
Category
Filename*
Caption**
Description
*jpg, png, gif.
**No more than 100 characters.
9 March 2016
Page 12 of 17
WebsitesByronBay.com.au My Website: Design Template
Page Three Pictures (Cont…)
Subheading
9 March 2016
Filename*
Caption**
Description
Page 13 of 17
WebsitesByronBay.com.au My Website: Design Template
Page Four Pictures
In the event that you do require pictures or images for page-four then please list them here.
Subheading
Filename*
Caption (optional)**
8. Page Layouts
The simplest, and probably the best, way to do this is to find a website that has the layout that you
want. Go to the website and press the Print Screen button on each page, one at a time, and paste
the result here. Label each screenshot as per the example below.
Home Page Screenshot
(Insert a page-break before each screenshot)
Page Two Screenshot
Page Three Screenshot
Page Four Screenshot
9 March 2016
Page 14 of 17
WebsitesByronBay.com.au My Website: Design Template
9. Links
Links apply to the website either internally or externally. Internal links are in addition to the websites
navigation to make it easier for the users to get around your website. External links will take the user
to an external website that has some relevance to your website. Search engines like websites with
external links.
Internal Links
You might have links on a page to subheadings on other pages. For example, the home page is all
about the summary whereas the information page is all about the details. Therefore you could have
links from a subheading on the home page to a subheading on some other page where the details
can be found.
Please list the required internal links here.
From Page
From Subheading
To Page
To Subheading
External Links
For example, if you’re a plumber you might want to link to a plumbing supplier’s website to show
certain products. Or if you’re a psychologist you might want to link to the local bus company’s
timetable.
List your required external links here.
Page
External Web-Address
http://
http://
http://
http://
http://
Go to the external website in your browser. Place your mouse in the address bar. Highlight the web
address (Ctl a). Then copy it (Clt c). Then come back to his page. Then paste the address in the righthand row-cell as required (Ctl v).
9 March 2016
Subheading
Page 15 of 17
WebsitesByronBay.com.au My Website: Design Template
10. Design Features
Here we can specify features such as animation, font, icons and the colour scheme.
Animation
This feature is all about how elements of a page behave when the page is opened or when a user
scrolls down to the element. For example…
Fade-in or fade-out.
Slide-in from top.
Slide-in from bottom.
Slide-in from left.
Slide-in from right.
Shake, bounce or rubberband.
An element of a page that will fade or slide could be a picture, or a heading, or a section with a
subheading and paragraphs. Check out other websites to see how animation is used.
Please describe the animation effects that you require here.
Page
Element
Effect
Font
You may not be too concerned about the font that is used on your website, but if you are please
specify it.
Go to Google Fonts to check out the options.
https://www.google.com/fonts
Specify your preference. For example, Open Sans, or Roboto, or Slabo, etc.
Place state your choice here.
9 March 2016
Page 16 of 17
WebsitesByronBay.com.au My Website: Design Template
Icons
Icons are a great way to enhance a subheading, or a list of points, or use with a link. Icons are
supposed to symbolically mean something in relation to the subheading or point, or link.
For example…
Visit the Fontawsome website to see what suites your purpose and list your preference here. Follow
this link to the page that displays the icons and their names http://fontawesome.io/icons/.
Page
Page Element
Icon Name
Colours
Last but not least please specify your preferences for the colour scheme. For example…
Element
Background
Navigation
Horizontal Rule
Page Titles (h1)
Subheadings (h2)
Subheadings (h3)
Paragraphs (text)
Links
Colour RGB
White RGB (255, 255, 255)
Off Black RGB (55, 55, 55)
Grey RGB (128, 128, 128)
Blue RGB (25, 25, 112)
Please delete the examples that don’t suite you and inset the RGBs for the colours that you want to
see.
9 March 2016
Page 17 of 17
