COAP:COAP-3150 - week 1: Difference between revisions
Jump to navigation
Jump to search
| Line 15: | Line 15: | ||
* Review of examples of good/bad web design | * Review of examples of good/bad web design | ||
** Criteria | ** Criteria | ||
* Anatomy of a web page | * [http://www.iteracy.com/resources/bluffers-guide/anatomy-of-a-web-page/ Anatomy of a web page] | ||
** headers, fonts, breadcrumbs, links, columns, grids | ** headers, fonts, breadcrumbs, links, columns, grids | ||
** 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) | ||
** Secondary navigation - under main navigation or on side menu | ** '''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 | ** '''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 | ** '''Breadcrumb trails''' - links to help user locate themselves e.g. Home > Resources > Web design > Images | ||
** Hero image - attention grabbing focus usually on homepage | ** '''Hero image''' - attention grabbing focus usually on homepage | ||
** Content width, columns and grids | ** '''Content width, columns and grids''' | ||
*** page width - 960 pixels, 1024 pixels | *** '''page width''' - 960 pixels, 1024 pixels | ||
*** page height or '''fold''' - e.g. 600 pixels for 1024 x 768 screens | *** '''page height''' or '''fold''' - e.g. 600 pixels for 1024 x 768 screens | ||
*** page alignment - alignment on screen | *** '''page alignment''' - alignment on screen | ||
** Footer - links to terms & conditions, site map, contact page, etc. | ** '''Footer''' - links to terms & conditions, site map, contact page, etc. | ||
===Photoshop basics=== | ===Photoshop basics=== | ||
Revision as of 23:32, 19 January 2012
Part I
Course presentation
Elements of web design
- Web design principles
- principles of good/bad web design presentation
- Assignment 1 - find examples of principles
- K.Benetos' pearltree of sites containing examples of good and bad web design
- Assignment 2 - project ideas
- Readings
Part II
This article or section is currently under construction
In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")
Elements of web design
- Review of examples of good/bad web design
- Criteria
- Anatomy of a web page
- headers, fonts, breadcrumbs, links, columns, grids
- 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.
Photoshop basics
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
- environment set up
- palettes
- positioning
- customizing the desktop
- shapes
- basic colour tools
- transform
- layers and transparency
