Site Brainstorm
Brainstorm all content possibilities for your website. What information will
your users need? What information are you required to put on your site?
Site Organization
List all pages, images, and media you will be using in your site. Indicate the
page layout type the page will follow (main, content, etc. according to your
page layout document).
*Remember to use correct file names and extensions. Next to each page name list
the pictures (with their correct file names) you will be using on that page.
Layout type
Site pages (8:3)
Page Images
Other Media
Arrange your pages, graphics, and media into folders.
Folder Name
Contents
Content
Site Organization
Linear
Hierarchical
Web
Hierarchical - Linear
Linear Alternative
Site Organization
Sketch out your site navigation. Indicate correct page names and how each
page connects to the other.
Page Layout Designs
Need Ideas? Search the web. . .
*Remember . . . when working in Dreamweaver. . . Think Tables.
Good Website Layouts:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
i.e. http://www.johnnyink.com/
Sketch it out . . .
Page Layout Designs
Main Page:
•
Top
navigation
•
3 pics
•
Banner
•
Text Area
Content Page:
•
Top navigation
•
1 Pic
•
Banner
•
Text Area
Page Layout Designs
Main Page:
•
Left
Navigation
•
Banner
•
3 pics
•
Text Area
Content Page:
•
Left
Navigation
•
Banner
•
1 Pic
•
Text Area
Page Layout Designs
Main Page:
•
Right
Navigation
•
Banner
•
1 wide pic
•
3 Text areas
Content Page:
•
Right
Navigation
•
Banner
•
1 pic
•
3 text
columns
Page Layout
Each square is 10 pixels x 10 pixels (800 x 600)
Page Colors
Need Ideas? Search the web. . .
Good Website Colors:
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
i.e. http://www.eye4u.com/home/
Write in the # hexadecimal number for each of the following web page elements.
background
links
text
rollover links
headings
other
Color Samples
THIS IS A HEADING
#422920
#F6EAD3
#EFA650
#D4EFEE
#73BFC0
#BEA88C
background
text
headings
links
rollover links
other
this is a link this is a rollover
this is text
THIS IS A HEADING
#F5F8C3
#2A2505
#878837
#FF7F00
#C84E0E
#CCCD5F
background
text
headings
links
rollover links
other
this is a link this is a rollover
this is text
THIS IS A HEADING
#727779
#13110D
#890C08
#C3C6C6
#99D8D8
#F2D560
background
text
headings
links
rollover links
other
this is a link this is a rollover
this is text
THIS IS A HEADING
#7F8497
#100F0F
#8BD3E5
#FFFFFF
#4EB8CC
#E8F066
background
text
headings
links
rollover links
other
this is a link this is a rollover
this is text
THIS IS A HEADING
#EED5D4
#300000
#9E2D2D
#890C08
#BA202E
#EFA7A8
background
text
headings
links
rollover links
other
this is a link this is a rollover
this is text
THIS IS A HEADING
#FFFFFF
#009193
#6FC8CC
#6C8C37
#A3C159
#AEB2B3
background
text
headings
links
rollover links
other
this is a link this is a rollover
this is text
THIS IS A HEADING
#E1DAC7
#332C0D
#4B5933
#707C59
#501605
#721617
background
text
headings
links
rollover links
other
this is a link this is a rollover
this is text
THIS IS A HEADING
#DCEDEF
#592F1C
#422920
#151435
#334B0F
#E1DAC7
background
text
headings
links
rollover links
other
this is a link this is a rollover
this is text