Transcript Webdesign - 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
MIS
Dr. Ernst-Gerd vom Kolke
1
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)
MIS
Dr. Ernst-Gerd vom Kolke
2
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

MIS
Dr. Ernst-Gerd vom Kolke
3
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
MIS
Dr. Ernst-Gerd vom Kolke
4
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)
MIS
Dr. Ernst-Gerd vom Kolke
5
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

MIS
Dr. Ernst-Gerd vom Kolke
6
Web Design - Page Layout - Header

Header elements

banner graphic(s)

your browser)
(are loaded once)

navigation tools
Link to homepage
 Link Next Page
 Link to section Top
 Link Previous Page

caption, subtitles (not
a too big font)


title (just shows up in

difference to Back/
Forward Button
navigation bars can be bypassed by frames
MIS
Dr. Ernst-Gerd vom Kolke
7
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
MIS
Dr. Ernst-Gerd vom Kolke
8
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)
MIS
Dr. Ernst-Gerd vom Kolke
9
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)
MIS
Dr. Ernst-Gerd vom Kolke
10
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)
MIS
Dr. Ernst-Gerd vom Kolke
11
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
MIS
Dr. Ernst-Gerd vom Kolke
12
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
MIS
Dr. Ernst-Gerd vom Kolke
13
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

MIS
Dr. Ernst-Gerd vom Kolke
14