If you find any useful resources, please post them here. Be sure to annotate the resource as to why it is useful and possibly highlight which parts/pages are of interest. Try to avoid the the "link dump" syndrome ....

Links Mentioned in Class

Dear Designer, You Aren’t That Special

A Website Named Desire

Grid Based Design


CSS Design Awards


Mobile Patterns



Mood Boards

A website that describes the purposes and how to make different types of Mood Boards. Check it out here.

Processing has a section on their website under the learning section with a number of books that are available to help people with processing.
Check them out here

Video Capture: How to add webcam video to your sketches

Web safe areas

Just incase anyone forgot what the web safe area is I found a website that has the websafe area for many different browers.
Check it out here

Type on Screen
  • Just found this today and it's pretty useful for when you need to see the size and look of a typeface for web design.
  • You can also see how how the type looks when it is underlined, etc. and how it looks with a background colour.
  • Great resources for web fonts: Cufon and Typekit!
  • Shows and explains how this website uses the grid to organize information
  • G Show the grid until you release.
    G + H Show and hold the grid (G will remove it again).
    G + F Toggle the grid to the foreground and back.
    Pressing F while the grid is held also works.

Learning jQuery

    An 18 minute video introducing jQuery and how to use it. Highly recommended.
    Lots of introductions and walk-throughs to help you get started with jQuery.
    The official introduction to jQuery - a good place to start.

Learning CSS

    A great introduction to best practices for writing good, clean CSS.
    Typographic tricks for CSS goodness.
  4. Tips on centering your divs, also gives a nice break down on what each component does that goes into centering i.e padding, margins etc.
  5. - lots of good info on web design, there is a post that shows you how to design for IE


  • A useful that offers free tutorials which help with web design (HTML, CSS, jQuery, Javascript, etc.)
  • Tool which informs you of any standard problems in your code.
  • Fire Bug Nifty little tool for fire fox that allows you to see what's going on under the hood of any website.

Tips and Tricks

  • Some tips on web typography such as kerning, leading, paragraphs, etc
  • Rotating Text code that will help you rotate image/text in html
  • Grid Maker allows you to create grids for web layouts and save them as png files.
  • Onload How to change your browser window and scroll to a specific area of your page upon loading.
  • The Design Cubicle A blog that aims to teach, inspire, and help designers (other sections available).

Other Fun Things

  • a website that allows you to take an image of a font you're not familiar with and it tells you want font it is, and if not, it will tell you a font similar to the one you uploaded. Quite useful, learned about the site in Type 2 class. It may be useful when you need to find a certain font for web designing
  • A quick and easy way to preview words with fonts installed on your computer
  • A cool way to create type online

jQuery UI


jQuery UI is an open source library of interface components — interactions, full-featured widgets, and animation effects — based on the stellar jQuery javascript library . Each component is built according to jQuery's event-driven architecture (find something, manipulate it) and is themeable, making it easy for developers of any skill level to integrate and extend into their own code.


  • Here is a link to my photography classes resource page. there are a few things on there that will be helpful for taking good pictures for our projects