Design Focus

Friday Focus 05/02/08: Experience These

This week’s Friday Focus should be very interesting. But you have to actually visit these websites and experience them instead of just stare at their screenshots below.

Designs of the Week

We Bleed Design by Bryan Katzel

Visit the site first. Okay, are you breathless? Bryan Katzel’s portfolio takes the use of scrolling and background images to a whole new level. Everything is on one long page, but when you click on the navigation tabs to visit each section, you get an animated scrolling effect. The uniting element in the page, the 6 colorful rays, move through different “scenes” before reaching the desired destination. It’s almost like a loading screen in Flash-based websites, but instead Bryan uses layered images, which masks the rays to create different shapes using good old HTML, CSS, and JavaScript. An awesome feat.

Perhaps the only problem I have is that the screenshot is not as compelling to look at compared to the experience you will be rewarded with when you’re on the site itself.

Get Out And Play by Nokia

Another interactive website, this time by Nokia. It’s for their N-Gage platform, and I have to say, they really know what they’re doing. Because the site is Flash-based, it takes a while to load, but in the meantime visitors can play Block Breaker, with the bar shrinking until the loading completes. That’s compelling right there—you have to concentrate harder on the game as it becomes more difficult, so you stay on the site. When you enter, you get to watch a stop motion video of a snake formation. Then you play Block Breaker again, but this time using humans as the pieces. Finally, there’s another video of the longest snake formation slithering around the city. All very big, amazing “installations” put online.

There’s not much to be said about the literal appearance of Get Out And Play as a website, which might have you wondering why it’s here on Friday Focus, but design is not just about looks. It’s about coming up with a concept and conveying it in a certain way. That said, the website went for a realistic feel. It’s all about translating well-loved games like Snake and Block Breaker to the real world, which, with the help of stop motion animation, makes for a very quirky and casual feel.

Social Media Weekly

DesignThe Role of Sketching in the Design Process
Sketching is an almost irreplaceable part of the design process. Or any conceptual process, really. This article explains five important uses for sketching.

Design16 awesome Aviary tutorials
Aviary is a very promising design suite running on Adobe Flash. These tutorials show what you can achieve with it, but you can also apply the same concepts on Adobe’s products like Photoshop.

DesigneXtreme Type Terminology
This is the first part of several in-depth lessons on typography. Do check out the rest of them, linked at the end of each article.

ProgrammingGetting Started with Ruby on Rails
The April 22 edition of A List Apart focuses on development using Ruby on Rails and this is one of those articles. For everyone who is curious just how easy to learn RoR, this article is a must-read.

Programming 51+ Best of jQuery Tutorials and Examples
I fancy jQuery more than any other JavaScript library because it’s built so intuitively. This article should be a good starting point for everyone who wants to learn it.

  1. By Hans Czajkowski Jørgensen posted on May 3, 2008 at 6:09 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Surfing around looking at link collections, more often than not, one or two links in a list of gajillions proves useful or relevant to me. This is the first post I’ve ever read where I bokmarked every one of the links. Thanks man. Keep it up. We’re watching out for you.

  2. Trackback