COAP:COAP-3150 - week 1: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
|||
| Line 3: | Line 3: | ||
* See also course syllabus on WorldClassroom | * See also course syllabus on WorldClassroom | ||
=== Elements of web design=== | === [[User-Centered web design]] === | ||
=== Elements of web design === | |||
* [[Web design principles]] | * [[Web design principles]] | ||
* | * Review of examples of good/bad web design | ||
** Criteria discussion | |||
====Readings==== | ====Readings==== | ||
| Line 13: | Line 17: | ||
=== Elements of web design === | === Elements of web design === | ||
* | * 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 | ** '''Page header''' - area at the top of the page usually between 100 - 150 pixels high | ||
| Line 35: | Line 37: | ||
===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]. | ||
Revision as of 15:00, 21 October 2016
Part I
Course presentation
- See also course syllabus on WorldClassroom
User-Centered web design
Elements of web design
- Web design principles
- Review of examples of good/bad web design
- Criteria discussion
Readings
- See Further readings
Part II
Elements of web design
- 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
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
