1 / 27

Web Design

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.

eavan
Download Presentation

Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Design

  2. 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

  3. 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

  4. Browser set wide

  5. Browser set narrow

  6. Wasted top half of screen

  7. 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

  8. Title and Nav not visible

  9. Navigation is too far down

  10. Graphics • Adds interest • Helps engage the reader • Can distract • First thing the reader sees • Animation is very distracting

  11. 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

  12. Eye Candy Graphics

  13. 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)

  14. 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

  15. Formatting with tables

  16. Same page with table borders

  17. Table Resize Problem

  18. 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

  19. 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

  20. 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

  21. Why follow the link

  22. Link references

  23. 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

  24. 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 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

  25. 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

  26. Kewl Background

  27. 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.

More Related