Web design introduction
Download
1 / 14

Download presentation source - PowerPoint PPT Presentation


  • 235 Views
  • Updated 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.

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

PowerPoint Slideshow about 'Download presentation source' - 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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg

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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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


ad