This document provides guidance on designing effective websites, noting that websites should have easy navigation, appealing aesthetics through elements like color schemes and images, clean layouts, and logical information organization; it also discusses differences between static and Flash websites and provides examples of both good and bad design features.

1. Websites!!
Introduction to Websites
ITGS Internal Assessment Project

2. What Makes a Good Website?
 Easy to Navigate
 Aesthetically Pleasing
 Color Scheme
 Images
 Background
 Buttons
 Rollovers
 Obvious and Concise Navigation Bar
 Clean Layout of Pages
 Information is easy to find (logical order to
things)
 Consistent Theme/Style

3. www.mms.com
• Graphically
Appealing
•Clear, concise,
obvious horizontal
Navigation Bar
•Simple and clean
yet interesting
•Background
enhances page vs.
detracting from it

4. www.celhs.osceola.k12.fl.us
 Clean Layout
 Appealing to the
eye
 Easy to Navigate
 Obvious vertical
Navigation Bar
 Visual elements
add to design

5. Color Scheme:
 Color Scheme: Be aware
 Colors should enhance, not take
over
 Text color vs. background color

6. What NOT to do . . .

7. Static Website Vs. Flash Website:
Static (standard html)
 Static Websites (standard html):
 May contain Flash elements
 No animation
 Rollovers
 Rollover = One image switches to a different image
 Load faster
 Easier to create
 More Common

8. Static Website Vs. Flash Website:
Adobe Flash Website
 Flash is:
 an animation program
 Popular with Website designers.
 Can include animated rollovers, repetitive
animation in background, and musical options.
 Can be included as a small insert in a static
site.

9. Flash Website:
http://okaydave.com/okaydave2006.html
• Really Interesting
FLASH site.
• Great Layout and
Organization.
•Great Navigation-Bar
Style.
•Fully Flash Animated
Great Resource for Amazing Flash Websites:
http://www.commarts.com/

10. Now that we can recognize a great
website . . .
 You will create your own!
 Remember:
 Your Audience
 Your Color Scheme
 SCREEN SHOTS- DO CONSTANTLY!!
 Every single day you should have at least
12 Screen shots (even if you don’t use
them!)

11. Photoshop Layout
 Your Website will be created using
PHOTOSHOP (No, this is not negotiable.)
 Your entire page layout, for both pages
must be sketched out and APPROVED
before beginning on computer.
 Size:
 800px X 700px (or more)
 Resolution: 72 ppi
 Navigation should be consistent, you will
create 1 Photoshop file with different
Folders (within Photoshop) for the pages.

12. Example of a Sketchbook Layout
for a Website:
 www.unframedjourney.com
(Mrs.
Model’s
Website)

13. Sketch!
Created Site!

14. Content Sketches!

15. Website Layout Sketches-
your sketches should answer these questions!
 How will your site be layed out?
 Where is the Navigation Bar? Is it vertical
or horizontal?
 What is your color scheme?
 Where will your pictures be placed?
 Where will the text go?
 What will the background look like (you
don’t have to sketch this- you can make a
small note to yourself for this)
 What will your top banner look like?

16. You can add things in Photoshop
to make your website “Pop”
Images &
Design Element
Ideas:
•“Post-It” Notes
• Polaroid's
• Thumbtacks
• Cork Board.

17. Your Websites
 Draw a FULL PAGE sketch of your Home Page
(This one should be the most detailed)
 Put the navigation bar
 The banner
 What content?
 Other Pages
 “See Home page” for banner and nav bar
 Content