COAP:COAP-3150 - week 1

COAP 3150

COAP:COAP-3150

COAP:COAP-3150 - week 1

COAP:COAP-3150 - week 2

COAP:COAP-3150 - week 3

COAP:COAP-3150 - week 4

COAP:COAP-3150 - week 5

COAP:COAP-3150 - week 6

Design processes and models

Typography

Web design principles

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

• See Further readings

Part II

Elements of web design

• Graphic and visual design principles

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

• Elements of Design Quick Reference Sheet
• Visual Design Basics
• The Elements and Principles of Design applied to Web Design
• Anatomy Of A Perfect Landing Page
• Anatomy of a web page

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.

• open, save, save as,
• import images
• resolution sizes
  • Digital Web Magazine - Resolution
  • Understanding Images: A Guide to Resolution and Size
  • images to work with image1, image2
• environment set up
  • palettes
  • positioning
  • customizing the desktop
• shapes
• basic colour tools
• transform
• layers and transparency

Links

• Preparing Images for the Web: File Formats: JPG/JPEG vs GIF vs PNG
• Photoshop CS3 Livedocs
• Photoshop Secret Shortcuts
• A Handy Guide to Image Resolutions in Print Design