COAP:COAP-3150 - week 1

The educational technology and digital learning wiki
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Part I

Course presentation

  • See also course syllabus on WorldClassroom

User-Centered (web) design

  • Human-computer interaction
  • Ergonomics
  • UI vs UX
  • Design process

Elements of web design

  • Review of examples of good/bad user design
    • Criteria discussion


Readings

Part II

Elements of web design

Anatomy of a web page

    • Page header - area at the top of the page usually between 100 - 150 pixels high
    • Main navigation - horizontal row of links of important sections (8 max)
    • Secondary navigation - under main navigation or on side menu
    • Page title - should be within H1 tag, title by which page will be indexed and bookmarked
    • Breadcrumb trails - links to help user locate themselves e.g. Home > Resources > Web design > Images
    • Hero image - attention grabbing focus usually on homepage
    • Content width, columns and grids
      • page width - 960 pixels, 1024 pixels
      • page height or fold - e.g. 600 pixels for 1024 x 768 screens
      • page alignment - alignment on screen
    • Footer - links to terms & conditions, site map, contact page, etc.

Links

Photoshop basics

Graphic and visual design principles Graphic formats for the web (open, save, save as, import images) Photoshop and/or illustrator basics (environment set up, transform, shapes, basic colour tools

NOTE: GIMP, an open source photo editing software may also be used for all exercises and assignments presented. In this course we will be using Photoshop CS3.

Links