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

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(34 intermediate revisions by 2 users 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
=== [[User-centered design |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 [[Web_design_principles#Links_for_further_reading | Further readings]]
==Part II==
=== Elements of web design ===
* [[Web design principles#Graphic_design_principles | 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====
* [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://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]
** images to work with [http://tecfa.unige.ch/~benetos/COAP-3150/image1.jpg image1], [http://tecfa.unige.ch/~benetos/COAP-3150/image2.jpg image2]
* environment set up
* environment set up
** palettes
** palettes
Line 16: Line 63:
* basic colour tools
* basic colour tools
* transform
* transform
 
* layers and transparency
=== Elements of web design===
* Design principles
====Links====
** principles of good/bad web design
* [http://om4.com.au/client/preparing-images-for-the-web-file-formats-jpg-jpeg-vs-gif-vs-png/ Preparing Images for the Web: File Formats: JPG/JPEG vs GIF vs PNG]
* Assignment 1 - find examples of principles
* [http://livedocs.adobe.com/en_US/Photoshop/10.0/ Photoshop CS3 Livedocs]
* Assignment 2 - project ideas
* [http://webdesignerwall.com/tutorials/photoshop-secret-shortcuts Photoshop Secret Shortcuts]
 
* [http://blog.spoongraphics.co.uk/articles/a-handy-guide-to-image-resolutions-in-print-design A Handy Guide to Image Resolutions in Print Design]
==Part II==
{{Under construction}}
 
=== Design processes and models===
* [[ADDIE]]
* ...
** Needs analysis
=== Elements of web design ===
* Review of examples of good/bad web design
* Criteria,
* Anatomy of a web page
** headers, fonts, breadcrumbs, links, columns, grids
 


[[Category:COAP 3150]]
[[Category:COAP 3150]]

Latest revision as of 21: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"