COAP:COAP-3150 - week 1

From EduTech Wiki
Jump to: navigation, search


1 Part I

1.1 Course presentation

  • See also course syllabus on WorldClassroom

1.2 User-Centered (web) design

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

1.3 Elements of web design

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


1.3.1 Readings

2 Part II

2.1 Elements of web design

2.1.1 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.

2.1.2 Links

2.2 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.

2.2.1 Links