Resources

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

Awwwards

CSS Design Awards

FWA

Mobile Patterns

Arbor.JS

Isotope



Mood Boards

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


Processing

Processing.org 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

http://www.typetester.org/
  • 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!

http://criticalzero.co.uk/revealing-the-grid
  • 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

  1. http://css-tricks.com/video-screencasts/20-introduction-to-jquery
    An 18 minute video introducing jQuery and how to use it. Highly recommended.
  2. http://net.tutsplus.com/tutorials/javascript-ajax/15-resources-to-get-you-started-with-jquery-from-scratch
    Lots of introductions and walk-throughs to help you get started with jQuery.
  3. http://docs.jquery.com/How_jQuery_Works
    The official introduction to jQuery - a good place to start.
  4. http://www.learningjquery.com/2006/11/how-to-get-anything-you-want-part-1


Learning CSS

  1. http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/
    A great introduction to best practices for writing good, clean CSS.
  2. http://www.betaversion.org/~stefano/linotype/news/169/
    Typographic tricks for CSS goodness.
  3. http://blog.themeforest.net/general/15-css-tricks-that-must-be-learned/
  4. http://www.apaddedcell.com/how-centre-div-and-other-css-tricks 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. http://webdesignerwall.com/ - lots of good info on web design, there is a post that shows you how to design for IE



HTML and CSS

  • http://www.w3schools.com/ A useful that offers free tutorials which help with web design (HTML, CSS, jQuery, Javascript, etc.)
  • http://validator.w3.org/ 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

  • http://www.webtypography.net 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

  • http://new.myfonts.com/WhatTheFont/Is 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
  • http://wordmark.it/ A quick and easy way to preview words with fonts installed on your computer
  • http://scriptographer.org/ A cool way to create type online


jQuery UI

jqueryui_tyung.png

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.





Photography

  • 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