web design
DESCRIPTION
Web Design. Keep a Consistent Appearance. Visually show that the site is the same Always use the same background Same graphic style Same type formatting Ransom note effect can confuse the reader Is this the same site? Adjusting to new formatting style. Design for Content. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/1.jpg)
Web Design
![Page 2: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/2.jpg)
Keep a Consistent Appearance
Visually show that the site is the same Always use the same background Same graphic style Same type formatting
Ransom note effect can confuse the reader Is this the same site? Adjusting to new formatting style
![Page 3: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/3.jpg)
Design for Content
Cannot control how the user sees the page Color can change Graphics can be turned off Browser window can vary
Paper can be tweaked, web pages cannot
![Page 4: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/4.jpg)
Browser set wide
![Page 5: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/5.jpg)
Browser set narrow
![Page 6: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/6.jpg)
Wasted top half of screen
![Page 7: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/7.jpg)
Introduction Page
Get reader oriented fast
Provide an overview
Keep all information visible
Has navigation information Allow access to any point Never force linear reading
Minimize scrolling
![Page 8: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/8.jpg)
Title and Nav not visible
![Page 9: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/9.jpg)
Navigation is too far down
![Page 10: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/10.jpg)
Graphics
Adds interest
Helps engage the reader
Can distract
First thing the reader sees
Animation is very distracting
![Page 11: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/11.jpg)
Proper Use of Graphics
Same rules as used for paper documents
Use graphics that support the ideas
Reference figures in the text
Don’t let the reader interpret the graphic
![Page 12: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/12.jpg)
Eye Candy Graphics
![Page 13: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/13.jpg)
Copying Graphics on the Web
To save a graphic image: Put the cursor over the image Right-click with the mouse Select “Save Image As…” Enter the filename (same place as your web
page files)
![Page 14: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/14.jpg)
Tables on Web Pages
Main formatting method Only way to get side by side text Navigation bars, etc all use tables
Not just data lists, like in paper docs
NOTE: tables do not resize
Don’t use tables to reproduce paper
![Page 15: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/15.jpg)
Formatting with tables
![Page 16: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/16.jpg)
Same page with table borders
![Page 17: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/17.jpg)
Table Resize Problem
![Page 18: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/18.jpg)
Developing Links
Links impose “Click Cost” People evaluate cost of following the link Will it produce meaningful information
Link text must let people know why to click
![Page 19: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/19.jpg)
Links Between and Within
Links are links are links Can go between pages in a site Can go within one page Can go to a new site
Use “anchors” to give a place to link within a page
![Page 20: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/20.jpg)
Rules for Making Links
Keep link text length short
Make self-explanatory
Avoid too many in-line links
Don’t change default colors People expect blue/purple combination
![Page 21: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/21.jpg)
Why follow the link
![Page 22: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/22.jpg)
Link references
![Page 23: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/23.jpg)
Use of Color
Color draws the eye
Make sure color fits the context
Never flash colored text
Keep contrast high
Busy background images cause text to come and go in the color changes
![Page 24: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/24.jpg)
Examples of Colored Text
Colors can go away
Colors can go away
Colors can go away
Colors can go away
Colors can go away
Colors can go away
Colors can go away
Colors can go away
Colors can go away
Colors can go away
Colors can go away
Colors can go away
•Colors can go away•Colors can go away•Colors can go away•Colors can go away•Colors can go away•Colors can go away
![Page 25: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/25.jpg)
Text and Contrast
Structuring is the first crucial step in creating a good Online Document. Structuring the document means sitting down and deciding what how you want your document to be created.This also means considering how the will look on the screen once you have decided the final structure.According to Caroline Drakely (Training 68), to effectively structure your document you should create a checklist and use the following Structuring the document means sitting down and deciding what how you want your document to be created.This also means considering how the will look on the screen once you have decided the final structure.According to Caroline Drakely (Training 68), to effectively structure your
![Page 26: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/26.jpg)
Kewl Background
![Page 27: Web Design](https://reader035.vdocuments.us/reader035/viewer/2022070406/56814073550346895dabf2a9/html5/thumbnails/27.jpg)
Design Tip
Keep all text and graphics in same folder Graphics and text are stored as separate files Each page on a site is a separate file
Never drag and drop graphics. This will link to the original page.
Know the design before you start. Making changes is very tedious.