Session :
The KISS Rule -- "Keep
it simple, Stupid!"
Layout and design is a very subjective topic, but the important thing
to remember is to HAVE a layout...as opposed to just putting information on the
page.
|
Some Main
Points to Consider
-
Split your information into logical sections.
-
Make sure your starting page is attractive and well laid out.
-
Have a consistent theme throughout the entire site.
This helps to create and maintain a visual unity. Business do this
with logos, letterheads, business cards, etc.
-
Use colors, styles and fonts that complement each other.
-
Symmetry help create a conservative feel,
but too much can also be boring! Asymmetric
elements can generate a feeling of energy and excitement, but also a
sense of disorganization and confusion. Strive for a good balance!
-
Contrast of colors and sizes helps
establish a focus point and draws attention to your important points.

|
YIKES!! I hope you will
have more style than
this page!

|
|
Heard
a good joke lately?
Go
here and have a good laugh!
 |
|
|
| Elements of Web
Design
Text
- Break
long segments of text into shorter sections.
Typically, visitors do not like to read long passages of
text on the screen.
- Use
hyperlinks when appropriate.
- Some
ideas to include in your page:
- biographies
- hobbies
- resumes
- links
to other web sites
- calendar
of events
- samples
of student work (poems, essays, reports)
- survey
results
- Keep it
relevant and updated!
Photographs
and Graphics
- Photographs
may not include names of students.
- Students
may not be identified.
- Please do
not use copyrighted material!
- Make sure you have permission from the
parents to put their child's picture on the web.
- Photographs
will be optimized for smaller file sizes.
|
This is an example of a
very overloaded web page with a very mixed
"style." Nothing matches, not the colors, not
the fonts, not the graphics. It also takes 50 seconds to
load (at 28.8)
|
|
|
Let’s Get Started!
I. Make a new Folder: “My Web Page”
A. Choose a Color
Scheme
B. Choose a Background
C. Experiment with Link Colors
1. Link Color
2. Hover Color
3. Active Color
4. Visited Link Color
II. Visit websites for ideas
A. “Save Picture As”
B. Copy and Paste
1. URL’s
2. Text
|
|
|
|

|
|
|
|