www.1stwebdesigner.com/design/9-inspirational-website-effects-deconstructed/
Minimal white sites: http://www.1stwebdesigner.com/inspiration/white-web-design-tips-inspiration/
Rafael de Cardenas architectureatlarge.com/#
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.
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/
- 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:
- 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/
- Travel ITINERARY JOURNEY website we talked about:
Google Maps + Travel Blogging in One Interactive Interface - 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:
- 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:
- 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