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

The educational technology and digital learning wiki
Jump to navigation Jump to search
(Created page with "==Part I== ===Course presentation=== ===Graphic formats for the web=== *png, gif, jpeg ===Photoshop basics=== '''NOTE:''' ''GIMP, an open source photo editing so...")
 
 
(43 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==
===Course presentation===
===[[COAP-3150 | Course presentation]]===
===Graphic formats for the web===
* See also course syllabus on WorldClassroom
*[[png]], [[gif]], [[jpeg]]
 
=== [[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===
'''NOTE:''' ''[[GIMP]], an open source photo editing software may also be used for all exercises and assignments presented''
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].
 
* 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.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
** positioning
** customizing the desktop
* shapes
* basic colour tools
* transform
* transform
* shapes
* layers and transparency
* basic colour tool
====Links====
* [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]
* [http://livedocs.adobe.com/en_US/Photoshop/10.0/ Photoshop CS3 Livedocs]
* [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]


=== Elements of web design===
[[Category:COAP 3150]]
* anatomy of a web page
** examples of good/bad web design
* Assignment 1 - find examples
* Assignment 2 - project ideas
 
==Part II==

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"