Websites!!

Introduction to WebsitesITGS Internal Assessment Project

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

www.mms.com

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

Clean Layout Appealing to the

eye Easy to Navigate Obvious vertical

Navigation Bar Visual elements

add to design

www.celhs.osceola.k12.fl.us

Color Scheme:

Color Scheme: Be aware Colors should enhance, not take

over Text color vs. background color

What NOT to do . . .

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

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.

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/

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!)

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.

Example of a Sketchbook Layout for a Website:

www.unframedjourney.com

(Mrs. Model’s Website)

Sketch!

Created Site!

Content Sketches!

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?

Images &Design ElementIdeas:•“Post-It” Notes• Polaroid's• Thumbtacks• Cork Board.

You can add things in Photoshop to make your website “Pop”

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