Good Web Design Showcase

coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/

tedxportland.com/ <-menu

WEBSITE APPROACH EXAMPLES

Here is a list of different website styles/approaches- on a scale of purely informational to purely experiential. It’s crucial to recognize the web’s place as more than a digital version of what you see on paper. Ideas that are hard to describe on paper, might flourish on the web- because you’re not limited to only writing.

Responsive Web design: http://designmodo.com/responsive-design-examples/

THE LIST

• Informational: www.ifccenter.com/
• Experiential: www.ro.me
• Visual/Architectural Designy-Intellectual: a24-landschaft.de
• Informational with an animated header image: spritely.net/gallery/
• www.estrellaharbor.com/
• Visual Conceptual scrolling– looking through night sky until you hit the ground and see the film festival happening video on screen example that we talked about:
• manufacturedessai.it/it/
• nikebetterworld.com
• Illustrated fairytale feel: hobolobo.net/
• Austere photo grid feel: photoboard.tumblr.com/
• Another more dynamic Grid example: thinquetanque.com/
• HTML5 Video: syncing content to video.. websites, images, google maps etc all can be synced: coding.smashingmagazine.com/2011/03/11/syncing-content-with-html5-video/
• Demo: isithackday.com/syncing-video/
• Travel ITINERARY JOURNEY website we talked about:
  Google Maps + Travel Blogging in One Interactive Interface
• travelogic.intios.com/trips/chile-argentina/#/valle-duco-wineries
• Minimal informational but highly specific aestheticized site: www.apple.com/iphone/
• Modern user interaction examples – ie Do the core step of the website first, then see the whole site:
• bitly.com/
• livingsocial.com/
• catfan.me/
• The dated approach- not committing to full visual experience, and not committing to a full textual experience (which can be beautiful too)- leaves you in the middle with mediocrity:
• www.nationalbreastcancer.org/
• TIMELINE Navigation Demo: www.csslab.cl/ejemplos/timelinr/latest/horizontal.html
• Day to Night Animation which could be done with photo realistic objects and not just illustrated cartoons: tympanus.net/Tutorials/jQuerySceneryAnimation/
• Special sized images like widescreen etc   look better than unstylized random boxy images on sites. galleria.aino.se/

RESOURCES

• Colour Palette Suggestor: www.colourlovers.com/palettes/search/new
• Site of the Day: www.thefwa.com/