1 / 14

Web Design - Introduction

Web Design - Introduction. Design for printed and electronic information isn’t very different Special aspects for web design hypertext technique integration of hypermedia presentation on a monitor, not in a book (“scrolling”, visual contrast) context: file size - transmission speed.

Gideon
Télécharger la présentation

Web Design - Introduction

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 - Introduction • Design for printed and electronic information isn’t very different • Special aspects for web design • hypertext technique • integration of hypermedia • presentation on a monitor, not in a book (“scrolling”, visual contrast) • context: file size - transmission speed

  2. Web Design - User Orientation • Starting point: define your target audience • Design every web page with respect to your potential users • Emphasis on factual information: careful use of visual elements • Emphasis on generating attention: visual stimuli to attract attention(e.g. online marketing)

  3. Web Design - Basic Layout • Define the content of your web site • Build the logical information structure analog to the hierarchical disposition of a book • Integrate hyperlinks into the hierarchical (tree) structure

  4. Web Design - Basic Layout • Tree structure of information(parts, chapters, sections etc.)facilitates to organize the (file) directory structure • Define file and folder names in lower case letters • Limit the number of hierarchy levels • the more levels the more you have to “click through” • too few levels overload every level

  5. Web Design - Page Layout • Basic: repetitive elements • Repetitive elements provide a continuity and “Corporate Design” • Keep the file size for a web page as small as possible (rule of thumb: max. 140 KB/page)

  6. Web Design - Page Layout: Page Header and Footer • Tripartite the structure of a web page • header • footer • information part • Limit the page length to about 4 -5 screens at 800 x 600 pixel • Split longer pages into shorter ones

  7. Header elements banner graphic(s) (are loaded once) navigation tools Link to homepage Link Next Page Link to section Top Link Previous Page title (just shows up in your browser) caption, subtitles (not a too big font) difference to Back/ Forward Button Web Design - Page Layout - Header • navigation bars can be bypassed by frames

  8. Web Design - Page Layout - Footer • Information to classify the page as part of a larger (web) entity • Who has written the page(e.g. author, email, ©) • Where does this page come from(e.g. name/ logo of the institution) • When has the page been generated/ updated(e.g. date) • Where is the page located(e.g. URL) • Add street and tel./ fax-information to your homepage footer

  9. Web Design - Page Layout - Information Part • Special aspects about information on a monitor • use visual contrasts (users recognize the document structure first) • separate paragraphs with empty lines • define keywords as caption for every paragraph (it becomes the annotation of the keywords)

  10. Web Design - Page Layout - Information Part • Use a two column structure • Define meaningful text for your links • Use “simple” language (no unnecessary words in a sentence, no unnecessary sentences)

  11. Web Design - Implementation of Graphics • Make a considerate choice in terms of graphics • don’t overload your page with graphics • graphics “blow up” your file size • Use graphics particularly to support the information on your page • Two graphic formats on the internet (GIF,JPG)

  12. Web Design - Implementation of Graphics • Determine the size of your graphics with respect to a standard resolution(e.g. 800x600 pixel) • Transmit graphics interlaced • Make your graphics transparent • Reduce the file size by reducing the numbers of colors of your graphics • visual impression is not affected • file size is reduced

  13. Web Design - Implementation of Graphics • Add height/ width tags to your graphics • Define your graphics with low and high resolution • Graphics as clickable links • Graphics as page background • contrast background and text • background graphics can be suppressed • background graphics enlarge the page file size • Add alternate text to your graphics

  14. Web Design - Final Aspects • Test your pages with and without loaded graphics • Test your pages on different browsers • Test your pages on monitors with different resolutions

More Related