PaganStudio Teaching

Archive
D3A FALL 2012

Here are some links to projects that we reviewed in class. Please pick one and write a short annotation (400 words).

Games:
http://bits.blogs.nytimes.com/2012/10/25/letterpress-a-game-from-the-creator-of-tweetie-lifts-off/
http://www.projectnoah.org

Wearable electronic:
QR code sweater which my grandmother knit. No link this was a sweater.

Visualization:
http://senseable.mit.edu/trashtrack/
Student project
http://www.gokcetaskan.com/colortv

Disaster:
http://www.seismi.org

Communication:
Student project
http://topyekun.tumblr.com/post/11021859500/vcd-422-senior-project-klog-klog-is-my

Art:
http://art.sy

Design
http://www.myfonts.com/WhatTheFont/
wordmark.it
cedvel.net
http://www.thetoolbox.cc

Big guns:
twitter.com
facebook.com
instagram.com
yelp.com

Food:
seamless.com

Urban:
http://sf.urbanprototyping.org

Advertising:
Uniqlo on Pinterest
http://mashable.com/2012/06/26/uniqlo-pinterest/

Entrepreneurial:
http://www.kickstarter.com/discover/categories/graphic%20design/most-funded?ref=more#p6
http://www.kickstarter.com/projects/deffekt/written-images?ref=category
http://www.kickstarter.com/projects/1209578799/projecteo-the-tiny-instagram-projector?ref=category
http://www.kickstarter.com/projects/1628273204/find-my-car-smart?ref=live
http://www.kickstarter.com/projects/sparkdevices/spark-upgrade-your-lights-with-wi-fi-and-apps?ref=live

 

Music:

http://evolver.fm/

Read More

Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. It’s a snap to setup and works on all modern browsers.

http://lokeshdhakar.com/projects/lightbox2/

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

http://jquery.com

A tutorial on dropdown navigation menu using CSS

http://azadcreative.com/2012/01/bulletproof-css3-dropdown-navigation-menu/

Google web fonts

http://www.google.com/webfonts

General HTML/CSS reference

http://www.w3schools.com

The toolbox is a collection of the best time-saving apps, tools, and widgets from around the web.

http://www.thetoolbox.cc

 

Read More

Read More

http://wireframes.tumblr.com
http://www.flickr.com/photos/painz/5014427926/in/photostream
http://www.flickr.com/photos/41787770@N04/3851195597/
http://www.flickr.com/photos/rodi01/4755163335/
http://www.flickr.com/photos/rodi01/4755802990/
http://www.flickr.com/photos/painz/4702327527/in/photostream
http://www.flickr.com/photos/painz/5014427926/in/photostream

Read More

Just to remind what is due tomorrow,
after completing the proposal presentations from last week, we will focus on the structures. We will streamline and try to find and eliminate the loopholes and dead ends. We will select the keyframes looking at the flowchart and decide on the kleyframes together.

So, please come to class with a 11 x 17 in. printed detailed flowchart explaining the structure of the front-end experience of the web site. Very much like a storyboard of a film, explaining what happens when. Here is a guideline and you may follow the links below for some templates and examples:

http://creately.com/diagram-type/site-map
http://webstyleguide.com/wsg3/3-information-architecture/3-site-structure.html

here are some tools if you want to paly around with various software to draw these diagrams, or of crse yo can simply draw with yor own illustrator:
http://www.omnigroup.com/products/omnigraffle/
https://www.lucidchart.com

Also, please bring if you have any qustions regarding yor portfolio website. DNS, hosting, CMS etc. I’ll be glad to help.

Read More

Apart from the book and its structure, you may want present the following components:

- a teaser. around 1-2 min.s

for ex.:

https://vimeo.com/31242923

https://vimeo.com/30786501

https://vimeo.com/47503269

https://vimeo.com/25833596

- a set of icons, for homepage (72 x 72 px.), for store (521 x 512 px.), for toolbar or navigation bar (20 x 20 px.)

please take a look at these guidelines:

http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html

- a launch image or splash page portrait and landscape (768 x 1004 px. and 1024 x 748 px.)

 

Read More

All content including original text of chapter 1 or 10-20 pages from the beginning, UI components with all states in one PSD file and organized with layer folders and appropriately named.

Read More

http://zambetti.com/projects/liveview/

Read More

http://www.teehanlax.com/blog/ipad-gui-psd/
http://informationarchitects.net/blog/ipad-stencil-for-omnigraffle/
http://emilychang.com/2010/03/ipad-templates-and-stencils/
http://speckyboy.com/2010/04/30/iphone-and-ipad-development-gui-kits-stencils-and-icons/

Read More

http://www.lukew.com/ff/entry.asp?1071

Read More