This weeks Reading / Exercises

Usability Reference:

http://www.usability.gov/methods/design_site/index.html

Card Sorting:

http://www.boxesandarrows.com/view/card_sorting_a_definitive_guide


Paper Prototyping:

http://www.alistapart.com/articles/paperprototyping/

Navigation:

http://www.bestdesigntuts.com/25-unusual-website-designs-with-remarkable-navigation/

Food for Thought:

http://www.alistapart.com/articles/personality-in-design/

How to write an effective design brief

I found this article pretty useful when writing the design brief for the project.


http://justcreativedesign.com/2008/09/26/how-to-write-an-effective-design-brief/

Do websites need to look exactly the same in every browser?

This explains everything.

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

Useful Web Documents Download

http://www.docpool.co/

Includes a website checklist! 

Awesome emerging tech site

guys check this site out. it covers all of the best emerging technology.

click me

Amon Tobin

Great video on the process of designing a stage for Amon Tobin's latest tour.

http://www.youtube.com/watch?v=WLrt7-kIgIM&feature=youtube_gdata_player

Food For Thought

http://www.readwriteweb.com/archives/the_responsive_web_design_revolution_coming_to_a_f.php


"Facebook's mobile moves are part of a larger trend called responsive web design. It won't just be the code bases that change either. We, the users, will notice the differences too. For example, it's likely that Facebook's desktop website will over time utilize more of the design patterns in its mobile apps and site."

Resource 003: Apple Product PSD

Apple PSD's

Design 003: Dow-Smith

www.dow-smith.com

Teenage Mutant Ninja Turtle Noses.

Aside from how hilarious the concept of this website is, and how badly it makes me ask..." Why did i never think of this?" The layout is very clean. The texture in the background and other design elements play up to the real world "print" look that we had talked about previously in class. Unfortumnately... not web responsive.

Find My Friends - I knew it!

http://gma.yahoo.com/cheating-heart-iphone-app-finds-wife-another-man-140300843.html

One of many stories to come  :)

Resource 002: Potential Responsive Web Formula

http://www.webdesignshock.com/responsive-web-design/

UI Kit Tutorial + Free 1 week Lynda

Here is the link to the UI toolkit tutorial from webdesign.tutplus.com

http://webdesign.tutsplus.com/videos/create-a-simple-user-interface-kit-from-scratch-free-psd-included/


Also, came across this 7-day free Lynda.com trial.

http://www.lynda.com/Mordy

Mobile Website Designs

Inspiration:

http://www.mobileawesomeness.com/

http://blog.templatemonster.com/2011/05/05/mobile-web-design-trends-2011/




Food for thought: Mobile Ready

Smartphones, iPads, netbooks, oh my! There’s a dizzying amount of mobile products available to the consumer in 2011. This means your web design must be responsive to multiple viewports.
Creating a mobile ready website is not simply removing the bells and whistles from your design. This can create a vacant and impersonal design. Although not impossible, distilling the magic from your original design into a pure representation of your brand is tough! Fortunately, technology is quickly removing this burden.

With the help of CSS3, primarily media queries, mobile web design has taken a big leap forward (more on this later). One of the most important advances is that you can design a whole site and allow your coding to conform to the user’s viewing medium.
It may be tempting to just create a dedicated mobile site, but that may no longer satisfy your audience. Increasingly, mobile sites include the option to visit the original site. If you do not offer this option or if your original site is not optimized to mobile standards, you are simply not ready for 2011. Forecasters predict that smartphones will outsell personal computers this year. Bulletproof your design to meet this demand.

Taken from:  http://webdesignledger.com/tips/web-design-trends-in-2011

Resource 001: Smashing Article - iPhone Icons

Designing for iPhone 4 Retina Display Techniques and Workflow

This is a great article that explains some of the adversities of designing for the retina display and how to overcome them.

Wareface

Here is an interesting site, representative of a responsive web design. It almost reminds me of the Content Aware feature in Photoshop, where you can edit out part of a image seamlessly.

Some pages work better than others, but overall, it is an effective site representing pages that adapt to any size of the window.

http://www.warface.co.uk

my responsive web example

hey guys check out another cool example of responsive web design....

~Rob

click me!

Responsive Architecture

http://filamentgroup.com/examples/responsive-images/

Nice, smooth re-sizing of image based on browser dimensions.

Responsive Website Design Blog

http://yaronschoen.com/work/

I like how organized and interative the work page is. It is easy to follow both on desktop screen and on a mobile device.

Design 002: Responsive Web

ThinkVitamin

I really enjoy Think Vitamin's layout. The interface itself adapts nicely to changes in size and resolution. In terms of display it looks and works great. I didn't notice anything funny with the navigation, or structure of the actual content postings. However, when resized to the smallest width possible some of the functionality drops. Such as: social media links, post categories, and the search feature. Additionally, there are some issues with images being resized within the posts. Most resize fine, but some end up looking disproportional.

Overall, I found that their layout adapted as it should. It was also very fast. However, there were minor issues with content adaptability. An additional note is that I tested their website on both my desktop and iPad.

Media queries in the wild

These two sites make nice use of media queries.

First, icon designer John Hicks, presents his work available in four different layouts, each optimized for your screen.

http://hicksdesign.co.uk/

Then, a fun example of typography use with a sparkle of the Coen brothers humor.

http://www.strangenative.com/foldup

No Class Tonight, Mon Oct 10

Monday October 10, No class tonight, please check your email.

thanks!

Between Now and Wednesday:

Please start researching Responsive Web // we'll begin this on Wednesday.  

Some Links:

http://www.alistapart.com/articles/responsive-web-design/

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

http://sixrevisions.com/tools/responsive-web-design/

http://webdesignledger.com/inspiration/24-excellent-examples-of-responsive-web-design

Blog Post:

Everyone, pick a responsive web design and do a blog post about what you think works well / what doesn't - we'll begin class with the blog on Wednesday.

Media Militia

Great site for resources, inspiration, and good articles.

http://mediamilitia.com/

Talk to Me: Design and the Communication between People and Objects

Last Sunday I went to this exhibition in New York at the MOMA.
I would highly recommend it. Nice curation of interaction projects based on Processing, R, OpenFrameworks and Arduino.

Dates: July 24–November 7, 2011

Talk to Me >>

Talk to Me explores the communication between people and things. All objects contain information that goes well beyond their immediate use or appearance. In some cases, objects like cell phones and computers exist to provide us with access to complex systems and networks, behaving as gateways and interpreters. Whether openly and actively, or in subtle, subliminal ways, things talk to us, and designers help us develop and improvise the dialogue.

The exhibition focuses on objects that involve a direct interaction, such as interfaces, information systems, visualization design, and communication devices, and on projects that establish an emotional, sensual, or intellectual connection with their users. Examples range from a few iconic products of the late 1960s to several projects currently in development—including computer and machine interfaces, websites, video games, devices and tools, furniture and physical products, and extending to installations and whole environments.

Cool Tutorial for creating a nice grain texture in Adobe Illustrator

http://vectips.com/tutorials/create-grainy-textures/