Resources

Include any resources that you think might be beneficial of enjoyable for the class. Be sure to annotate as to why and specify which part you think is most worthwhile. Let 's avoid a "link dump" where we just have a bunch of faceless links. Instead, take some time and describe the resource to make it more helpful for others. You can see their process on computer program on their website.



Site Inspire =D
This website is GREAT. It showcases lots of very nicely designed websites and it is updated regularly. It is a great inspiration site and has many web styles you can adapt.

Pattern Pulp!
This website is pretty fun to browse through. AND, the background changes to a new pattern whenever you click the refresh button on the top right! i tho.ught that is really smart and a great way to add interest to the website.

Wordmark.it
Wordmark goes through the fonts on your computer and allows you to preview them. All you do is type in the word you want to preview and scroll!
Screen_shot_2011-03-29_at_10.43.22_AM.png



Screen_shot_2011-03-27_at_7.55.08_PM.png
A couple of examples of horrible web design. The second one is the worst website I have ever seen.
http://share.flowtown.com/b31e4482d249f163/?web=1eba49&dst=http%3A//www.arngren.net/
http://www.dokimos.org/ajff/




Here's a great website for codes. It shows you how to do a scroll bar, comment boxes, pop-up windows, and other cool stuff!
http://quackit.com/html/codes/



Great tips on html and css:
http://www.w3schools.com/html/


Great tips on Typography & Web design using the grid system! Check it out!
http://www.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/





if you wanna add flash to your final website here's some cool stuff:
**http://flashsourcecode.com/**




For those who wants to learn jQuery, you will find this site useful :)

http://visualjquery.com/

There are some interesting jQuerry effects here: http://vandelaydesign.com/blog/web-development/jquery-image-galleries/


one of the good firefox add-ons is firebug. Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. Allows inspect, edit and monitor CSS, HTML, JavaScript and Net requests in any web page.

you can add interesting effects to your tiles using jQuerry: http://jquery.com/



2Advanced Studio
This website lead you to the future. Brilliant sound, graphics, and interactivity, make you feel like you're hacking into a system in a sci-fi movie.
They also have nice wallpaper to download and a pretty nice portfolio to get inspirations from! =D
external image 2advanced.jpg

Red Interactive Agency
This website is FUN and very interactive! You can play an online fight-the-ghost game on their website, WHILE seeing their work. How smart is that?
external image redinteractiveagency.jpg

Designers.MX

This is a great website where designers compiles their music and create playlists that help them get through their projects. This helped me a lot and I am sure it will inspire you for some great designs! Good luck!

alokepillai_r2.png





53 CSS techniques
Good 53 CSS techniques, for more advanced but you could always look at these links! Great website with bunch of tutorials!


Convert Px to Em
A tool to help you do the calculation between Em size and Px size

Placekitten

Imagine lorem ipsum for pictures to place in your code. Simply plug in the dimensions of the image you need, and it provides the image for you.

kittens.jpg



Markup Validation


HTML: http://validator.w3.org/
CSS: http://jigsaw.w3.org/css-validator/

You can post the URL, upload a file from your computer, or copy the code, and the site will check all markup & suggest what you're missing in the code.
These sites are supported by W3C


Nervous System Jewleries
This is really amazing stuff people can do with computers and digital medias! Nervous System works at the intersection of science, art, and technology. They combine generative computer simulations with digital fabrication to create jewelry, art and housewares inspired by natural forms and processes.You can see their process of working on 3D programs on their website. And their work is just absolutely stunning!

cellcycle-600x450.jpg
cellcycle-600x450.jpg
product.php.jpg
product.php.jpg



Color Index By: Jim Krause


Here's a great colour-combination book that's worth investing in! It shows the suggested colour combinations in both RGB and CMYK. Although the other websites here like Kuler, COLOURlovers and ColorCop are great for representing colours on your monitor, the book gives accurate representations of what the colour will look like printed out. Therefore instead of just "hoping" that the colour will print out that way, you can be sure it will, because you have the RGB/CMYK value! Here's the link to the snippet of the book (posted on Amazon).
http://www.amazon.co.uk/Colour-Index-2-Jim-Krause/dp/0715328484

ColourIndex2.jpg






Awesome website to look at for simple ideas and stuff. There's examples, tutorials on how to do stuff! It helps especially if you're stuck, gives you ideas
http://www.learningprocessing.com/





There's this tutorial on youtube called processing101, the guy explains the basics of processing which i found really helpful for beginners. I put the link here so u could take a look at.
http://www.youtube.com/watch?v=LsA2O4HUuxA&feature=channel
P.S. this is tutorial number 0 and he has about 20 of them.





Color Cop is a multi-purpose color picker for web designers and programmers. It identifies and represents colors in various hex color code formats. Simply drag the eyedropper control to any location on the screen and release. The hex color code for the selected color will be automatically copied to the clipboard.


external image ColorCop5.3.png?1293929844

http://colorcop.net/








The Scribbler is a generative illustration program by Ze Frank. By providing a simple drawing using your mouse, the program collaborates with you and generates an image with your drawing using random numbers that determine the sorts of lines it uses. It's really cool. User-created "scribbles" can be found on Flickr. The creator, Ze Frank, also did an interesting TED Talk in which he talks about "online comedy, web toys, and massively shared experiences."

Screen_shot_2011-01-24_at_12.23.47_AM.png







COLOURlovers is a similar website to Kuler that provides a community to develop and share colour palettes, patterns, and colours. There are over a million colour palettes made by other users, and there are tools for you to create your own palettes. Also: they spelled colour// the correct way.

Screen_shot_2011-01-17_at_2.58.02_AM.png


Kuler

Kuler is a great application created by Adobe for developing, sharing and creating colour schemes that could give your visuals that extra kick. The practice that I usually use is start with black and white, and then proceed to play around with colour schemes. Schemes can be created by you and stored for future purposes as well, using visual tools like colour wheels for colour tweaking. All in all, it is a must use toy when making your fantastical designs.

alokepillai_r1.png



CODEORGAN is a website that allows users to make music out of websites. It reads the content of a webpage and uses complex algorithms to create synthesizer notes and drum loops. A very interesting and fun site to play around with.

external image embeddablecodeorgan.jpg



REAS.com
This is C.E.B. Reas' site. He's a designer who invented Processing and specializes in software, prints, and installations. It's a very inspiring website to browse through.
reas_imagephase_a_0.jpg

Two installations by Antenna Design that use public space for people to interact with the designs. What are the potential applications for designers ?Is this art or design?






Daniel Shiffman from Mark Webster on Vimeo.


Interview with Professor Daniel Shiffman (ITP, Tisch School of the Arts, NYC) and author of Learning Processing about why designers (and everyone) needs to learn about coding. Because it is everywhere and it adds to the creative process ... Do you think he's right?




Here are links to some interactive sites.

http://www.colorflip.com/
http://vimba.ru/lj/star.swf

The first site is done by Rafael Rozendaal in 2008, he also made some colour flip paintings to go with the concept of the site. Both sites are fairly abstract and just fun to play around with.

http://www.newrafael.com/websites/
Here's a link to Rafael Rozendaal's website, which has other things that you can take a look at.


Really good site for codes for colours. It's a little easier then opening Photoshop every single time. It lists multiple shades of colours.

http://www.computerhope.com/htmcolor.htm


Good website if you need help with HTML and CSS. Levels range from beginner to advanced and the tutorials/exercises are pretty easy to follow.

http://htmldog.com/




NET TUTS+


Here's a helpful website that has countless links to interesting tricks and tips for HTML and CSS.
You can learn how to insert sounds to your HTML work, shadowing or even gradients to your typography or backgrounds.
Not only do they have helpful advice on these two programs, but there's Wordpress, Javascript, etc.
Hope this interests and helps you guys!

NETS TUT+

Screen_shot_2011-02-21_at_12.05.09_AM.png Screen_shot_2011-02-21_at_12.05.14_AM.png



Grid Layout Generator
http://www.pagecolumn.com/grid_layout_generator.htm
This resource is extremely useful, if you want to create a complex grid with many columns; it will automatically do the calculation for you.
There are many similar online generators.

Screen_shot_2011-02-24_at_9.00.43_PM.png



http://websitetips.com/

Useful website that has links to other website for HTML and CSS Edit



Just another site containing tips about good web design. It also has many charts and graphs explaining to change in web use and computers like how people most people no longer use 800x600 screens.

http://www.webdevelopersnotes.com/
http://www.webdesign.org/