Building Your Web Building Your Web PagePage

Build Your Web PageBuild Your Web Page

Orfordville Public LibraryOrfordville Public Library

held at:held at:Parkview High SchoolParkview High School

Tue. April 8Tue. April 15Tue. April 22

Building Your Web Building Your Web PagePage

•Intro's -- &Your Goals• Your Name• Type of Page you want to make•Web Page experience

•Intro to Page we will work from•www.ticon.net/~cyberian/webauthoring.htm

►URL URL (importance of naming your files)(importance of naming your files) Files and Folders Files and Folders

►Bookmarking Bookmarking (importance of naming page your (importance of naming page your page)page)

►HTMLHTML►WYSIWYG – authoring toolWYSIWYG – authoring tool►LinksLinks

InternalInternal ExternalExternal

►FramesFrames

Web Design Jargon

►FTPFTP►GIF GIF (Graphics Interchange Format)(Graphics Interchange Format) – most used ---clip art– most used ---clip art

► JPEG JPEG (Joint Photographic Experts Group) Allows for more colors --photos(Joint Photographic Experts Group) Allows for more colors --photos

►……More as we go along..........More as we go along..........►Please feel free to stop me!Please feel free to stop me!►Find more jargon here: Find more jargon here:

http://www.grantasticdesigns.com/gloshttp://www.grantasticdesigns.com/glossary.htmlsary.html

Web Design Jargon

Design ContentDesign Content

►Pinpoint needs of people visiting your sitePinpoint needs of people visiting your site►Decide purpose and goals of your siteDecide purpose and goals of your site► Determine audience's age and skill levelDetermine audience's age and skill level►Develop Good content--- keep in mind…Develop Good content--- keep in mind…

►Why do I want viewers to use my Why do I want viewers to use my site?site?

Develop Structure Develop Structure

►Storyboard to organize your siteStoryboard to organize your site►Prioritize and categorize informationPrioritize and categorize information► Define links between categories Define links between categories

Design ContentDesign Content

►Get started with StoryboardingGet started with Storyboarding

Create DesignCreate Design

►Develop look and feel with color and Develop look and feel with color and fontfont

►Is it a part of a larger site???Is it a part of a larger site???

►Design using simplicity, contrast and Design using simplicity, contrast and consistentconsistent alignment alignment

► Be Be consistentconsistent when you position when you position navigation linksnavigation links

Four Design PrinciplesFour Design PrinciplesC. A. R. P.C. A. R. P.

►ContrastContrast►AlignmentAlignment►RepetitionRepetition►ProximityProximity

The Four Design PrinciplesThe Four Design PrinciplesC.A.R.P.C.A.R.P.

► ContrastContrast If not the same, make them If not the same, make them very differentvery different

► AlignmentAlignment All elements should have a visual connectionAll elements should have a visual connection

► RepetitionRepetition Repeat color, shape, texture, spaceRepeat color, shape, texture, space

► ProximityProximity Group related itemsGroup related items

Create Design Create Design C. =ContrastC. =Contrast

►Guides your eyes around the pageGuides your eyes around the page►Creates a hierarchy of informationCreates a hierarchy of information►Allow you to skim information more Allow you to skim information more

easily to pick out needed informationeasily to pick out needed information►Pertains to text type, graphics and Pertains to text type, graphics and

colors usedcolors used

BAD ExampleBAD Example

Welcome to my nasty example of contrast. Do you find this pleasing to read or is it difficult?

Is there a better choice of font color?

Welcome to my nasty example of contrast. Do you find this pleasing to read or is it difficult?

Is there a better choice of font color?

GOOD ExampleGOOD Example

Welcome to my nasty example of contrast. Do you find this pleasing to read or is it difficult?

Is there a better choice of

font color

Welcome to my nasty example of contrast. Do you find this pleasing to read or is it

difficult? Is there a better choice of

font color?

ContrastContrast

► The principle of contrast states that if two The principle of contrast states that if two items are not exactly the same, then items are not exactly the same, then make them really different.make them really different.

► Be Be BOLDBOLD!!

ContrastContrast

►LargeLarge type and type and smalsmalll type (size) type (size)

► Combinations of Combinations of fonts (Italics)fonts (Italics)

Robin Williams book, Robin Williams book, Webpage Design, Webpage Design, is is

excellentexcellent

► ColorColor

Robin Williams book, Robin Williams book, Webpage Design, Webpage Design, isis

excellentexcellent

Examples of ContrastExamples of Contrast

Create Design Create Design A. = AlignmentA. = Alignment

►Nothing should be placed on the page Nothing should be placed on the page arbitrarilyarbitrarily

►Every item should have a visual Every item should have a visual connection with something else on the connection with something else on the pagepage

►Make the site easy to the eyeMake the site easy to the eye

Alignment – What To AvoidAlignment – What To Avoid

► Avoid using more than one text alignment Avoid using more than one text alignment on a page.on a page. Don’t center some text and right align other Don’t center some text and right align other

text.text.

► Break the center alignment habit.Break the center alignment habit. Formal / sedate / dull.Formal / sedate / dull.

► Remember, people are use to reading from Remember, people are use to reading from the left to the rightthe left to the right

Create Design Create Design R. = RepetitionR. = Repetition

►Throughout the project, you repeat Throughout the project, you repeat certain elements consistently. If there certain elements consistently. If there are multiple pages, each page should are multiple pages, each page should have a similar look and feel.have a similar look and feel.

►Allows for consistencyAllows for consistency►Unifies all parts of a design and Unifies all parts of a design and

multiple pagesmultiple pages

Create Design Create Design R. = RepetitionR. = Repetition

►The principle of repetition states that The principle of repetition states that you repeat some aspect of the design you repeat some aspect of the design throughout the entire piece.throughout the entire piece.

►The repeated item could be a font, The repeated item could be a font, line, particular bullet, color, image, or line, particular bullet, color, image, or format.format.

Create Design Create Design P. = ProximityP. = Proximity

►Proximity refers to the relationship Proximity refers to the relationship that items develop when they are that items develop when they are close together. close together.

►Two items that are close together Two items that are close together appear to belong to each other.appear to belong to each other.

► There is a need to group related items There is a need to group related items together.together.

Create Design Create Design P. = ProximityP. = Proximity

►Groups related items togetherGroups related items together►Makes pages look smallerMakes pages look smaller► Increases organizationIncreases organization►Helps viewers skim your page & make Helps viewers skim your page & make

your site easier to readyour site easier to read

►Look at other sites on the Net to get Look at other sites on the Net to get ideasideas

►Break up info if possibleBreak up info if possible►Use “Alt.” tags on graphicsUse “Alt.” tags on graphics►Check accuracy of your info.Check accuracy of your info.►Check spelling and grammarCheck spelling and grammar►Maintain siteMaintain site

CurrencyCurrency LinksLinks

General Web Site

Do’s

►Overuse graphicsOveruse graphics (saves download time)(saves download time)

►Use underline in textUse underline in text►Use too much animation or Use too much animation or

annoying background musicannoying background music►Use copyright material Use copyright material

General Web Site

Don’ts

Web DesignWeb Designin a Nutshellin a Nutshell

Web DesignWeb Designin a Nutshellin a Nutshell

Web DesignWeb Designin a Nutshellin a Nutshell

Building Your Web PageBuilding Your Web Page

Let’s get started!Let’s get started!

•Storyboard

• Practice with Netscape Composer