COAP:COAP-3150 - week 1: Difference between revisions
Jump to navigation
Jump to search
(→Part I) |
(→Links) |
||
(24 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 | ||
* | |||
** | === [[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== | ==Part II== | ||
=== Elements of web design === | === Elements of web design === | ||
* | * [[Web design principles#Graphic_design_principles | Graphic and visual design principles]] | ||
* | ====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 | ||
** '''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=== | |||
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, | |||
* 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 | |||
** palettes | |||
** positioning | |||
** customizing the desktop | |||
* shapes | |||
* basic colour tools | |||
* transform | |||
* layers and transparency | |||
====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] | |||
[[Category:COAP 3150]] | [[Category:COAP 3150]] |
Latest revision as of 22:16, 26 October 2016
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
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
- environment set up
- palettes
- positioning
- customizing the desktop
- shapes
- basic colour tools
- transform
- layers and transparency