M I S Dr. Ernst-Gerd vom Kolke 1 Web Design - Introduction n Design for printed and electronic...
-
Upload
cameron-simon -
Category
Documents
-
view
212 -
download
0
Transcript of M I S Dr. Ernst-Gerd vom Kolke 1 Web Design - Introduction n Design for printed and electronic...
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