Revised final project

Here are the revised two sample pages for my final project.

I remembered the divide the page in to thirds suggestion and the resulting layout is more appealing and functional.

I’m still not sure about the color palette. I picked up the pink from a sister site but I might change it to a blue also used on that site.

All opinions are welcome.

Thanks for the feed back.

Sleep site home page

Revised interior page

Week 8 Links and info

A Dao of Web Design

http://www.alistapart.com/articles/dao/

Blasting the Myth of Above the Fold – by Milissa Tarquin

http://www.boxesandarrows.com/view/blasting-the-myth-of

Five Principles to Design By

http://bokardo.com/archives/five-principles-to-design-by/

Design is about USE.

It is always contextual

Difference between ID and Class

http://css-tricks.com/the-difference-between-id-and-class/

IDs are unique

Classes are NOT UNIQUE

Principles of Beautiful Web Design

Chapt. 5: Imagery

What to look for in Pictures

Is it relevant?

Is it interesting?

Is it appealing?

Google Ganking BAD

Hot-linking BAD

Good tools

cropping

photoshop adjustments

applying edges

The complete design process

http://tv.adobe.com/watch/fireworks-tips-and-tricks/the-complete-design-process/

Information and Interaction Design

*This is a good video for setting up sites*

http://tv.adobe.com/watch/fireworks-tips-and-tricks/information-and-interaction-design/

FW wireframes, master pages, layers, symbols, grids, guides

Quickly Transform Photoshop Layouts

http://tv.adobe.com/watch/everyday-timesavers-web/quickly-transform-photoshop-layouts/

Dreamweaver Intregration

http://tv.adobe.com/watch/digital-design/getting-started-06-dreamweaver-integration/

A Dao of Web Design

http://www.alistapart.com/articles/dao/

Blasting the Myth of Above the Fold – by Milissa Tarquin

http://www.boxesandarrows.com/view/blasting-the-myth-of

Five Principles to Design By

http://bokardo.com/archives/five-principles-to-design-by/

Design is about USE.

It is always contextual

Difference between ID and Class

http://css-tricks.com/the-difference-between-id-and-class/

IDs are unique

Classes are NOT UNIQUE

Principles of Beautiful Web Design

Chapt. 5: Imagery

What to look for in Pictures

Is it relevant?

Is it interesting?

Is it appealing?

Google Ganking BAD

Hot-linking BAD

Good tools for manipulation images

cropping

photoshop adjustments

applying edges

The complete design process

http://tv.adobe.com/watch/fireworks-tips-and-tricks/the-complete-design-process/

Information and Interaction Design

*This is a good video for setting up sites*

http://tv.adobe.com/watch/fireworks-tips-and-tricks/information-and-interaction-design/

FW wireframes, master pages, layers, symbols, grids, guides

Quickly Transform Photoshop Layouts

http://tv.adobe.com/watch/everyday-timesavers-web/quickly-transform-photoshop-layouts/

Dreamweaver Intregration

http://tv.adobe.com/watch/digital-design/getting-started-06-dreamweaver-integration/

Week 7 links and notes

Week7 Notes/links

Search Engines

Crawlers=page titles, body copy other elements evaluated

Human-Powered Directories=you submit a shot description to the directory for the entire site.

Hybrid search engines=will favor one type of listing over another

Keywords= words that may be searched by a potential user

Keyword Density=% of occurrence of keywords w/ repect to rest of text

Bainstorm=How will potential audience find you?

Keywords-strategic-at least 2 words long

Do they KW appear in Headlin or first paragraphs

higher frequency

KW in brief meta description

Keywords in title inside your head tag

KW in alt tags

META TAGS

placed in HEAD section of html page

description meta tag is summary of content of html doc.

Limit to # of characters displayed

<meta name=”description”content=”brief description”

Build titles around top two or three keyword phrases

building links from high traffic sites improves perfomance

submit key pages to various search engines

Search Engine Links

Search Engine Watch: http://www.searchenginewatch.com

Free SEO Tools: http://www.groovecommerce.com/ecommerce-blog/search-engine-optimization/20-nifty-seo-tools/

Search Engine Optimization: http://www.seomoz.org/

Search Engine Roundtable: http://www.seroundtable.com/archives/014550.html

Search Engine placement tips

http://searchenginewatch.com/2168021

8 web design tactics to help

http://www.seomoz.org/blog/web-design-tactics

Chapter 4, Typography – Principles of Beautiful Web Design

CSS allows you to choose multiple fonts in order of preferance

Nine web safe fonts across platforms

Arial

Arial Black

Comic Sans MS

Courier New

Georgia

Impact

Times New Roman

Trebuchet MS

Verdana

em is a CSS unit that measures the size of a font from the top of a font’s cap ht to the bottom of the descender. Originally it was the width of the capital letter M

Search Engines

Crawlers=page titles, body copy other elements evaluated

Human-Powered Directories=you submit a shot description to the directory for the entire site.

Hybrid search engines=will favor one type of listing over another

Keywords= words that may be searched by a potential user

Keyword Density=% of occurrence of keywords w/ repect to rest of text

Bainstorm=How will potential audience find you?

Keywords-strategic-at least 2 words long

Do they KW appear in Headline or first paragraphs

higher frequency

KW in brief meta description

Keywords in title inside your head tag

KW in alt tags

META TAGS

placed in HEAD section of html page

description meta tag is summary of content of html doc

Limit to # of characters displayed

<meta name=”description”content=”brief description”

Build titles around top two or three keyword phrases

building links from high traffic sites improves perfomance

submit key pages to various search engines

Search Engine Links

Search Engine Watch: http://www.searchenginewatch.com

Free SEO Tools: http://www.groovecommerce.com/ecommerce-blog/search-engine-optimization/20-nifty-seo-tools/

Search Engine Optimization: http://www.seomoz.org/

Search Engine Roundtable: http://www.seroundtable.com/archives/014550.html

Search Engine placement tips

http://searchenginewatch.com/2168021

8 web design tactics to help

http://www.seomoz.org/blog/web-design-tactics

Chapter 4, Typography – Principles of Beautiful Web Design

CSS allows you to choose multiple fonts in order of preferance

Nine web safe fonts across platforms

Arial

Arial Black

Comic Sans MS

Courier New

Georgia

Impact

Times New Roman

Trebuchet MS

Verdana

em is a CSS unit that measures the size of a font from the top of a font’s cap ht to the bottom of the descender. Originally it was the width of the capital letter M

Week 6 Links and Info

links Week 6

Key to good website design

http://www.adobe.com/devnet/dreamweaver/articles/dwmx_design_tips.html

Get to know your audience and design for them

Test your site with inexperienced web users

Make the content on your first page rich and explanatory

Archive content after redesigning or changing a site

Include useful search terms in meta tags and titles

Description is a short description of the site. This needs to be explanatory and it is not a marketing message. When this comes up in a search engine, it is your chance to tell the potential visitor what your site has to offer.

Keywords are words that are offered to search engines to help them display your page to people who are searching the web.

Provide contact and copyright information on every page

Set up your navigation system to help users find what they are looking for

Provide search options

Maintain consistency of design

Think about noise, movement, or anything that spins twice

Proofread the text on your sites

Provide printer-friendly pages

Breadcrumb Navigation Useful

http://www.useit.com/alertbox/breadcrumbs.html

Enhance your pages—don’t replace them

Key to good website design

http://www.adobe.com/devnet/dreamweaver/articles/dwmx_design_tips.html

Get to know your audience and design for them

Test your site with inexperienced web users

Make the content on your first page rich and explanatory

Archive content after redesigning or changing a site

Include useful search terms in meta tags and titles

Description is a short description of the site. This needs to be explanatory and it is not a marketing message. When this comes up in a search engine, it is your chance to tell the potential visitor what your site has to offer.

Keywords are words that are offered to search engines to help them display your page to people who are searching the web.

Provide contact and copyright information on every page

Set up your navigation system to help users find what they are looking for

Provide search options

Maintain consistency of design

Think about noise, movement, or anything that spins twice Proofread the text on your sites

Provide printer-friendly pages

Breadcrumb Navigation Useful

http://www.useit.com/alertbox/breadcrumbs.html

Enhance your pages—don’t replace them

Optimizing Animated GIFS

http://www.webreference.com/dev/gifanim/

GIF Animation Shareware Programshttp://www.tips-tricks.com/k_gifanimation.asp

SWF (Flash Animation) is different than GIF animation. GIF animation is a simple, frame by frame animation of RASTER images, layered on one another.

Flash is a rich-media application and animation file format that creates VECTOR images (and has the ability to embed RASTER images).

Week 5

week 5 links

examples of bad webpages

http://www.webpagesthatsuck.com/

CSS Rules

Selector (H1) and declaration (color:blue)

Selector {property : value}

Four ways to apply styles

local

globabl (entire page)

Linked (across multiple pages)

Imported (allows multiple style sheets to influence one page)

week 5 links

examples of bad webpages

http://www.webpagesthatsuck.com/

CSS Rules

Selector (H1) and declaration (color:blue)

Selector {property : value}

Four ways to apply styles

local

global (entire page)

Linked (across multiple pages)

Imported (allows multiple style sheets to influence one page)

CSS

Stylesheets are composed of predefined rules that allow us to control the way the type and design looks and displays in a document

CSS is a collection of formatting rules that control the appearance of content in a web page.

Css gives you flexibility and control over the appearance of your page typographically and in layout.

CSS aids in establishing accessibility, heirarchy and ease-of maintenance.

CSS video

http://tv.adobe.com/watch/learn-dreamweaver-cs4/styling-text-in-the-css-property-inspector

Final Project Ideas

Annapolis Pulmonary Specialists-Sleep Medicine site

My husband is a pulmonary specialist.

I will use the office manager as a contact.

I will take the photos of the staff and anything else required

This will supplement their current site with more information about their sleep services.

Week 4 links

Understanding Fireworks Video

http://tv.adobe.com/watch/learn-fireworks-cs4/getting-started-01-understanding-fireworks/

FW interface

http://tv.adobe.com/watch/learn-fireworks-cs4/getting-started-02-the-fireworks-interface/

Importing and Exporting images

https://angel.aacc.edu/section/default.asp?id=CAT2748402009FA

Smart Guides and Tool Tips

http://tv.adobe.com/watch/learn-fireworks-cs4/getting-started-04-smart-guides-and-tooltip/

Using Kuler Color themes

http://tv.adobe.com/watch/learn-fireworks-cs4/using-kuler-color-themes/

understanding Styles and Symbols

http://tv.adobe.com/watch/learn-fireworks-cs4/understanding-styles-and-symbols/

Great color websites

http://www.colorstrology.com/

http://www.mariaclaudiacortes.com/

http://kuler.adobe.com/

Top Ten Mistakes in Web Design

http://www.useit.com/alertbox/9605.html

Guidleines for visualizing Links

http://www.useit.com/alertbox/20040510.html

Stock photography sites

http://www.gettyimages.com

http://www.comstock.com

http://www.fotosearch.com

http://pro.corbis.com

Stock images come in two primary flavors:

Rights managed = an individual licensing agreement negotiated for each use, with an option for exclusivity in an industry or for a period of time; price dependent on use and is often a more expensive option.

Royalty free = offers the ability to use an image in an unlimited number of ways for a single license fee, with no exclusivity; much cheaper option. This does not mean the image is FREE – it simply means there are no royalties attached. The user pays once to use the image in many ways.

Getty images

user name: terrycpeterson@gmail.com

Pass word: drefxamhttps://angel.aacc.edu/section/default.asp?id=CAT2748402009FA

Understanding Fireworks Video

http://tv.adobe.com/watch/learn-fireworks-cs4/getting-started-01-understanding-fireworks/

FW interface

http://tv.adobe.com/watch/learn-fireworks-cs4/getting-started-02-the-fireworks-interface/

Importing and Exporting images

https://angel.aacc.edu/section/default.asp?id=CAT2748402009FA

Smart Guides and Tool Tips

http://tv.adobe.com/watch/learn-fireworks-cs4/getting-started-04-smart-guides-and-tooltip/

Using Kuler Color themes

http://tv.adobe.com/watch/learn-fireworks-cs4/using-kuler-color-themes/

understanding Styles and Symbols

http://tv.adobe.com/watch/learn-fireworks-cs4/understanding-styles-and-symbols/

Great color websites

http://www.colorstrology.com/

http://www.mariaclaudiacortes.com/

http://kuler.adobe.com/

Principles of Beau. Web design

online color picker:

www.wellstyled.com/tools/colorscheme2/intex-en.html

Jon. Snook’s Colour Contrast checker

www. snook.ca/techinical_colour_contrast/colour.htm.

Top Ten Mistakes in Web Design

http://www.useit.com/alertbox/9605.html

Guidleines for visualizing Links

http://www.useit.com/alertbox/20040510.html

Stock photography sites

http://www.gettyimages.com

http://www.comstock.com

http://www.fotosearch.com

http://pro.corbis.com

Stock images come in two primary flavors:

Rights managed = an individual licensing agreement negotiated for each use, with an option for exclusivity in an industry or for a period of time; price dependent on use and is often a more expensive option.

Royalty free = offers the ability to use an image in an unlimited number of ways for a single license fee, with no exclusivity; much cheaper option. This does not mean the image is FREE – it simply means there are no royalties attached. The user pays once to use the image in many ways.

Getty images

user name: terrycpeterson@gmail.com

Pass word: drefxam

Woods, Water and Whatever-An Art Show

Oil Paintings – Terry Coker Peterson

Watercolors – Margery Silverton

October 7 – October 18, 2009

Hope to see you at the Opening Reception

Friday, October 9, 6-8 pm

West Annapolis Art Works & Fine Framing

4 Annapolis Street, Annapolis, MD 21401

410-295-7045

Week 3 links

Managing Design Suite Workspaces–http://tv.adobe.com/watch/learn-fireworks-cs4/managing-design-suite-workspaces/

Styling text in DW–http://tv.adobe.com/watch/learn-dreamweaver-cs4/getting-started-05-styling-text/

Adding Text and Images–http://tv.adobe.com/watch/learn-dreamweaver-cs4/getting-started-04-adding-text-and-images/

Understanding the Fireworks Interface–http://tv.adobe.com/watch/learn-fireworks-cs4/getting-started-02-the-fireworks-interface/

Importing files to Fireworks–http://tv.adobe.com/watch/learn-fireworks-cs4/importing-files-into-fireworks/

Website for inspiration

csszengarden.com

designinteract.com/sow

cssbeauty.com

Week 2 links

Getting started in DW

http://tv.adobe.com/?promoid=DRHWV#vi+f1592v1759

Using views and work spaces

http://tv.adobe.com/?promoid=DRHWV#vi+f1592v1768

Defining sites

http://tv.adobe.com/?promoid=DRHWV#vi+f1592v1758

Using css

http://tv.adobe.com/?promoid=DRHWV#vi+f1592v1770