M I S Dr. Ernst-Gerd vom Kolke 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

M I S Dr. Ernst-Gerd vom Kolke 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)

M I S Dr. Ernst-Gerd vom Kolke 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

M I S Dr. Ernst-Gerd vom Kolke 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

M I S Dr. Ernst-Gerd vom Kolke 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)

M I S Dr. Ernst-Gerd vom Kolke 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

M I S Dr. Ernst-Gerd vom Kolke 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

M I S Dr. Ernst-Gerd vom Kolke 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

M I S Dr. Ernst-Gerd vom Kolke 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)

M I S Dr. Ernst-Gerd vom Kolke 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)

M I S Dr. Ernst-Gerd vom Kolke 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)

M I S Dr. Ernst-Gerd vom Kolke 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

M I S Dr. Ernst-Gerd vom Kolke 13

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

Web Design - Implementation of Graphics

M I S Dr. Ernst-Gerd vom Kolke 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