Week 11

1. Understanding CSS:
    Read Understanding CSS >>
2. CSS Layouts: 
   Read “CSS Page Layout Basics” >>
3. CSS Zen Garden website:
   CSS Zen Garden
4. Estimating Your Time
   Read it here >>

VIDEOS

Templates:

http://www.adobe.com/designcenter/video_workshop/index.html?id=vid0157

http://www.adobe.com/designcenter/video_workshop/index.html?id=vid0158

 

 

//

Final Design Comps

I am not convinced that I like the final results. I really liked some elements of  the orginal designs and tried to keep the overall theme and layout the same but I attempted to incorporate everyone’s feedback into the revised comps. I think that it will improve in time.

Week 10

From table-based to tableless web design with CSS

Exporting CSS and HTML directly out of Fireworks CS4

 http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design.html

http://www.adobe.com/devnet/fireworks/articles/export_css_images.html

 

Week 9

Designing with Grids:
http://www.webdesignerwall.com/trends/grid-and-column-designs/

CSS Typography:
http://www.digital-web.com/articles/css_typography/

Prototyping
http://www.adobe.com/devnet/fireworks/articles/cooper_prototyping.html

Greeking Generator – use this website to create “dummy” placeholder text, or “greeked” text to use in your designs or storyboards
http://www.lipsum.com/

VIDEOS

Rapid Prototyping >>

Exporting CSS and Images >>

Creating HTML Click-Throughs >>

Creating CSS / XHTML Layouts >>

Introduction to CSS (Part 1) >>

Week 8

Articles

• Dao of Web Design – a timeless article from A List Apart
  
• Blasting the Myth of Above the Fold – by Milissa Tarquini – a veteran of AOL, Milissa talks about her research in usability based on designs that extend beyond the fold of the traditional page.
  
• Five Principles to Design By… – Good design is much more than making something look pretty, it’s all about problem solving … tried and true key principles.
• Difference between ID and Class – A description of “hooks” – or IDs and Classes – used in CSS to build customization into markup.

 Type for the web

www.ilovetypography.com

Anatomy of a Web Font >>

Code Style’s Combined Font Survey Results >>

CSS Typography >>
Glossary of Font Terms

 Photography Sources:

• http://www.sxc.hu/
• http://morguefile.com/
• http://dreamstime.com/

Week 7

Typography References

• www.typophile.com
• sIFR – http://www.mikeindustries.com/blog/sifr/
• http://www.typetester.org/

Font Websites

Free Fonts

• http://www.1001fonts.com
• http://www.dafont.com
• http://www.wantedfonts.com/

Fonts for sale

• http://www.fontshop.com
• http://www.fonts.com
• http://www.veer.com/products/type
• http://www.myfonts.com

Recommended by Jason Beaird

• http://www.itcfonts.com
• http://www.aenigmafonts.com
• http://www.astigmatic.com
• http://www.bvfonts.com
• http://www.fountain.nu
• http://www.larabiefonts.com
• http://www.misprintedtype.com
• http://www.pizzadude.dk

Designing for Search Engine’s – RESOURCES

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

http://searchenginewatch.com/2168021

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

Domain Name Advice

• http://www.seomoz.org/blog/how-to-choose-the-right-domain-name

Web Design Advice

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

Week 6

Good Web Design by Matt Brown

Bread Crumb Navigation by Jakob Nielson

Adobe Labs – Spry Resources

Navigation Examples

Examples of Traditional Navigation Styles

News / Column based navigation :

• http://www.cnn.com/
• http://www.baltimoresun.com/

Dynamic Drop Down menu navigation:

• http://www.monster.com/
• http://www.vdsys.com/

Basic Graphic Navigation:

• http://www.macys.com/
• http://www.baltimore.org/

CSS-driven text navigation:

• http://www.peta.com/

Breadcrumb:

• http://www.peachpit.com/articles/article.aspx?p=664662

Annimation Techniques:

• http://www.webreference.com/dev/gifanim/
• http://www.tips-tricks.com/k_gifanimation.asp

Final Project Proposals

Concept 1: Redesigned Chesapeake Bay Roasting Company Website

The Chesapeake Bay Roasting Company brand was developed and launched in February 2002 by myself along with 2 other primary business partners. The sole focus for many years has been food service sales but there has been a recent shift to bolster our retail image through marketing and packaging efforts. I would like to develop a pilot retail site that would introduce an entirely new look and updated content.

I have access to a tremendous amount of images both custom and stock as well industry publications, brochures, etc.

Concept 2: Hair Stylist Professional Website (for a friend)

A close friend of mine has recently expressed interest in possibly putting together a website for her hair styling business that she manages from home. The main focus would be to outline the products and services she specializes in and communicate booking times with existing and new clients.

I would be limited primarily to stock images and having to publish content provided to me by my friend.

Note:

I have to be honest. Concept 1 is the one that I am really shooting for. I can provide further details after drafting up an outline.

Week 5

CSS

Styling Text in the CSS Property Inspector >>

Webpagesthatsuck.com – by Vincent Flanders

http://www.webpagesthatsuck.com/videos.html

Bad Navigation:

http://www.vincentflanders.com/videos/gnn.html

http://www.webpagesthatsuck.com/mysterymeatnavigation.html

Annual Suckers:

Review the 10 Worst Web Site Uses of Navigaiton for 2008.

Review some of the nominations for 2009.

 

Beatiful Web Design, Chapter 3: Texture (by Jason Beaird)

Rounded Corner Techniques

• “Creating Custom Corners” by Soren Madsen
• “Thrashbox” by Ryan Thrash
• “Nifty Corners” by Alessandro Fulciniti
• “Spiffy Corners” by Greg Johnson

Cool Textures and layouts

• http://www.fishmarketing.net/
• http://nubyonrails.com

Week 4

Videos: An Overview of Fireworks

• Understanding Fireworks: View the video >>
• Fireworks Interface: View the video >>
• Importing and Exporting Images: View the video >>
• Smart Guides and Tool Tips: View the video >>
• Using Kuler Color Themes: View the video >>
• Understanding Styles and Symbols: View the video >>

Interactive Advertising Bureau

Color Matters

• Website dedicated to color theory, with a great page on Color Symbolism, and some of the cultural and psychological aspects of color
• http://www.colormatters.com/symbolism.html

Colorstrology

• Pantone’s great website about the astrology of color
• http://www.colorstrology.com/

Color In Motion

• A beautiful website that describes the psychological aspects of color through motion.
• http://www.mariaclaudiacortes.com/

Kuler Color

• Review the video on using Kuler with Adobe products – View the video >>
• Visit the Kuler website – http://kuler.adobe.com/
  • Click the Register button (top right of the screen)
  • Register for an account OR sign in with your existing Adobe ID
  • Experiment with creating color palettes and combinations

Jakob Nielsen

Jakob Nielsen is a serious writer, and speaker, who has been researching Usability issues since the web went public way back when.

• Top 10 Web Mistakes of All Time – Nielsen is famous for his Top Ten Mistakes in Web Design – this list is from 2007, but is still accurate and true to form.
• Text Links – Nielsen talks about the research that’s been done with regards to the color and underline state of text links.