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

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(15 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]]===
=== Elements of web design===
* See also course syllabus on WorldClassroom
* [[Web design principles]]
 
** principles of good/bad web design presentation
=== [[User-centered design |User-Centered (web) design]] ===
* Assignment 1 - find examples of principles
* Human-computer interaction
** [[User:Kalli | K.Benetos']] [http://pearltree.com pearltree] of sites containing [http://www.pearltrees.com/kalli/web-design-examples/id4161555 examples of good and bad web design]
* Ergonomics
* Assignment 2 - project ideas
* UI vs UX
* [[Web_design_principles#Links_for_further_reading |Readings]]
* Design process
 
=== Elements of web design ===
* Review of examples of good/bad user design
** Criteria discussion
 
 
====Readings====
* See [[Web_design_principles#Links_for_further_reading | Further readings]]


==Part II==
==Part II==
{{Under construction}}


=== 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====
 
====[http://www.iteracy.com/resources/bluffers-guide/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
** '''Main navigation''' - horizontal row of links of important sections (8 max)
** '''Main navigation''' - horizontal row of links of important sections (8 max)
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].


* open, save, save as,
* open, save, save as,
* import images  
* import images  
* resolution sizes
** [http://www.digital-web.com/articles/designing_for_the_web/ Digital Web Magazine - Resolution]
** [http://www.digital-web.com/articles/designing_for_the_web/ Digital Web Magazine - Resolution]
** [http://www.techsoup.org/learningcenter/software/page6045.cfm Understanding Images: A Guide to Resolution and Size]
** [http://www.techsoup.org/learningcenter/software/page6045.cfm Understanding Images: A Guide to Resolution and Size]

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"