web design introduction l.
Skip this Video
Loading SlideShow in 5 Seconds..
Web Design - Introduction PowerPoint Presentation
Download Presentation
Web Design - Introduction

Loading in 2 Seconds...

play fullscreen
1 / 14

Web Design - Introduction - PowerPoint PPT Presentation

  • Uploaded on

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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Web Design - Introduction' - Gideon

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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
web design user orientation
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)
web design basic layout
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
web design basic layout4
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
web design page layout
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)
web design page layout page header and footer
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
web design page layout header
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
web design page layout footer
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
web design page layout information part
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)
web design page layout information part10
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)
web design implementation of graphics
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)
web design implementation of graphics12
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
web design implementation of graphics13
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
web design final aspects
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