COAP:COAP-3150 - week 1: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 3150</categorytree>
==Part I==
==Part I==
===[[COAP-3150 | Course presentation]]===
===[[COAP-3150 | Course presentation]]===
* See also course syllabus on WorldClassroom
* See also course syllabus on WorldClassroom


=== Elements of web design===
=== [[User-centered design |User-Centered (web) design]] ===
* [[Web design principles]]
* Human-computer interaction
** principles of good/bad web design presentation
* Ergonomics
* UI vs UX
* Design process
 
=== Elements of web design ===
* Review of examples of good/bad user design
** Criteria discussion
 


====Readings====
====Readings====
Line 13: Line 22:


=== Elements of web design ===
=== Elements of web design ===
* Review of examples of good/bad web design
* [[Web design principles#Graphic_design_principles | Graphic and visual design principles]]
** Criteria discussion
 
====Anatomy of a web page====
====Anatomy of a web page====
** '''Page header''' - area at the top of the page usually between 100 - 150 pixels high
** '''Page header''' - area at the top of the page usually between 100 - 150 pixels high
Line 31: Line 38:
====Links====
====Links====
* [http://www.paper-leaf.com/blog/2011/02/elements-of-design-quick-reference-sheet/ Elements of Design Quick Reference Sheet]
* [http://www.paper-leaf.com/blog/2011/02/elements-of-design-quick-reference-sheet/ Elements of Design Quick Reference Sheet]
* [https://www.usability.gov/what-and-why/visual-design.html Visual Design Basics]
* [http://learn.daveharperdesign.com/design/ The Elements and Principles of Design applied to Web Design]
* [http://blog.kissmetrics.com/landing-page-design-infographic/ Anatomy Of A Perfect Landing Page]
* [http://blog.kissmetrics.com/landing-page-design-infographic/ Anatomy Of A Perfect Landing Page]
* [http://www.iteracy.com/resources/bluffers-guide/anatomy-of-a-web-page/ Anatomy of a web page]
* [http://www.iteracy.com/resources/bluffers-guide/anatomy-of-a-web-page/ Anatomy of a web page]


===Photoshop basics===
===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:''' [http://www.gimp.org GIMP], an open source photo editing software may also be used for all exercises and assignments presented. In this course we will be using [http://livedocs.adobe.com/en_US/Photoshop/10.0/index.html Photoshop CS3].
'''NOTE:''' [http://www.gimp.org GIMP], an open source photo editing software may also be used for all exercises and assignments presented. In this course we will be using [http://livedocs.adobe.com/en_US/Photoshop/10.0/index.html Photoshop CS3].


Latest revision as of 22:16, 26 October 2016

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

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

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-3150_-_week_1&oldid=60787"