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

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.

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

Design – The 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.

Design – 16 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.

Design – eXtreme 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.

Programming – Getting 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.