Building Your Web Page

Build Your Web Page Orfordville Public Library held at: Parkview High School Tue. April 8 Tue. April 15 Tue. April 22

Building Your Web Page Intro's -- &Your Goals Your Name Type of Page you want to make Web Page experience Intro to Page we will work from

► URL (importance of naming your files)  Files and Folders ► Bookmarking (importance of naming page your page) ► HTML ► WYSIWYG – authoring tool ► Links  Internal  External ► Frames Web Design Jargon

► FTP ► GIF (Graphics Interchange Format) – most used ---clip art ► JPEG (Joint Photographic Experts Group) Allows for more colors --photos ► …More as we go along ► Please feel free to stop me! ► Find more jargon here: html html html Web Design Jargon a

Design Content ► Pinpoint needs of people visiting your site ► Decide purpose and goals of your site ► Determine audience's age and skill level ► Develop Good content--- keep in mind… ► Why do I want viewers to use my site?

Develop Structure ► Storyboard to organize your site ► Prioritize and categorize information ► Define links between categories

Design Content ► Get started with Storyboarding

Create Design ► Develop look and feel with color and font ► Is it a part of a larger site??? ► Design using simplicity, contrast and consistent alignment ► Be consistent when you position navigation links

Four Design Principles C. A. R. P. ► Contrast ► Alignment ► Repetition ► Proximity

The Four Design Principles C.A.R.P. ► Contrast  If not the same, make them very different ► Alignment  All elements should have a visual connection ► Repetition  Repeat color, shape, texture, space ► Proximity  Group related items

Create Design C. =Contrast ► Guides your eyes around the page ► Creates a hierarchy of information ► Allow you to skim information more easily to pick out needed information ► Pertains to text type, graphics and colors used

BAD 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?

GOOD 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?

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

Contrast ► Large type and small type (size) ► Combinations of fonts (Italics)  Robin Williams book, Webpage Design, is excellent ► Color  Robin Williams book, Webpage Design, is excellent

Examples of Contrast

Create Design A. = Alignment ► Nothing should be placed on the page arbitrarily ► Every item should have a visual connection with something else on the page ► Make the site easy to the eye

Alignment – What To Avoid ► Avoid using more than one text alignment on a page.  Don’t center some text and right align other text. ► Break the center alignment habit.  Formal / sedate / dull. ► Remember, people are use to reading from the left to the right

Create Design R. = Repetition ► Throughout the project, you repeat certain elements consistently. If there are multiple pages, each page should have a similar look and feel. ► Allows for consistency ► Unifies all parts of a design and multiple pages

Create Design R. = Repetition ► The principle of repetition states that you repeat some aspect of the design throughout the entire piece. ► The repeated item could be a font, line, particular bullet, color, image, or format.

Create Design P. = Proximity ► Proximity refers to the relationship that items develop when they are close together. ► Two items that are close together appear to belong to each other. ► There is a need to group related items together.

Create Design P. = Proximity ► Groups related items together ► Makes pages look smaller ► Increases organization ► Helps viewers skim your page & make your site easier to read

► Look at other sites on the Net to get ideas ► Break up info if possible ► Use “Alt.” tags on graphics ► Check accuracy of your info. ► Check spelling and grammar ► Maintain site  Currency  Links General Web Site Do’s

► Overuse graphics (saves download time) ► Use underline in text ► Use too much animation or annoying background music ► Use copyright material General Web Site Don’ts

Web Design in a Nutshell

Building Your Web Page

Let’s get started! Storyboard Practice with Netscape Composer