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

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

M I S Dr. Ernst-Gerd vom Kolke 3 Web Design - Basic Layout n Define the content of your web site n Build the logical information structure analog to the hierarchical disposition of a book n Integrate hyperlinks into the hierarchical (tree) structure

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

M I S Dr. Ernst-Gerd vom Kolke 5 Web Design - Page Layout n Basic: repetitive elements n Repetitive elements provide a continuity and “Corporate Design” n Keep the file size for a web page as small as possible (rule of thumb: max. 140 KB/page)

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

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

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

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

M I S Dr. Ernst-Gerd vom Kolke 10 Web Design - Page Layout - Information Part n Use a two column structure n Define meaningful text for your links n Use “simple” language (no unnecessary words in a sentence, no unnecessary sentences)

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

M I S Dr. Ernst-Gerd vom Kolke 12 Web Design - Implementation of Graphics n Determine the size of your graphics with respect to a standard resolution (e.g. 800x600 pixel) n Transmit graphics interlacedinterlaced n Make your graphics transparenttransparent n Reduce the file size by reducing the numbers of colors of your graphics n visual impression is not affected n file size is reduced

M I S Dr. Ernst-Gerd vom Kolke 13 n Add height/ width tags to your graphics n Define your graphics with low and high resolution n Graphics as clickable links n Graphics as page background n contrast background and text n background graphics can be suppressed n background graphics enlarge the page file size n Add alternate text to your graphics Web Design - Implementation of Graphics

M I S Dr. Ernst-Gerd vom Kolke 14 Web Design - Final Aspects n Test your pages with and without loaded graphics n Test your pages on different browsers n Test your pages on monitors with different resolutions