Introducing The Cutting Edge award

Rob Ford

Are you searching for examples of cutting-edge experiences built with HTML5, CSS3, WebGL, and other modern technologies? Good news — you're in the right place. Welcome to my new column for Adobe Inspire Magazine: The Cutting Edge award.

Since 2012, the FWA has been working with Adobe to highlight experiences that push the web forward. Every week, we gather and identify submissions that we feel set new standards and expectations for what is possible on the web. From that selection, our judges choose one winner.

Future columns will feature one or two award-winning projects and describe the nitty-gritty details behind them. I'll solicit and share input from the project creators, and share judges' perspectives on why they think that particular project is cutting-edge.

In this issue, I introduce you to The Cutting Edge award while highlighting recent winners.

Form Follows Function

The Cutting Edge award has a great appetite for experimental work. Experimental work has the ability to change the way people think and do things. I often advise students to take something, rip it apart, and put it back together, whether it's lines of code or a physical product. Quite often, you'll find the end result is the same, but sometimes you'll discover something unique with potential new uses or new ways of doing things.

Form Follows Function is a collection of interactive experiences, all of which work across desktop and mobile. This is one of those projects that swept across social networks soon after it went live. When you see your social timelines flood with a particular project, you know something good is ahead.

This ongoing and evolving showcase of experiments, created by a very talented individual, is definitely one to bookmark. It's a great place to get inspiration. Form Follows Function demonstrates the power of the browser and current technology, while also pushing the boundaries of what is possible. In 10 years, I am sure I'll still remember this site as one of the shining examples of next-generation thinking.

Form Follows Function

REI 1440 Project

Responsive design is the talk of the town, and some are hailing it the future of digital. That's not a view I completely share, but I do agree that it is a great way to deploy across all devices. This site is a perfect example of responsive design at its best. View it across any of your devices and you'll find the experience is flawless. The project itself is exceptional. As I always say, it's the simple ideas that have the biggest impact.

This site features a photograph for every minute of the day, showcasing REI's love of the outdoors. This virtual day idea is displayed via a slick timeline interface, which loads a photograph to match the exact time of day you are viewing the site. Each minute of the day actually has multiple photographs, so it gives you a reason to return because you likely won't see the same photo twice. This polished creation is a pleasure to explore.

REI 1440 Project

Maki-San

If you like quirky animations and sounds, you'll love this site. Maki-San is Singapore's first fully customizable sushi store. Its website enables you to design your own animated video and then share it with friends. I have seen video creation sites in the past, but this is the first one I have seen that works within the browser without the need for a plug-in.

What I like about the video creation tool is that you click to roll a die to start creating your video, thus making the process easy. In other sections, you chose from pre-populated sequences or groovy patterns, and then you create your music sequence at the end. The whole process is simple, and the end result is bound to put a smile on your face. As I write this article, this project is only available on the desktop, but I understand a mobile version is in the works, which I hope is live by the time you read this.

Maki-San

Digital Creativity Guidebook

Pop-up books are not new to the digital world, but have you ever seen one that works without a plug-in? I certainly haven't, and this fine example has been built using a custom 3D engine that uses only JavaScript, HTML5, and CSS3, which is really quite amazing. The potential of plug-in-free 3D is exciting.

This project showcases the advertising opportunities with Google products. You may immediately start thinking of how potentially boring a corporate showcase of products for any big brand could be. But rest assured that Google never fails to deliver great creative ideas, and this 3D guidebook is oozing with fun and personality. As anyone who played with pop-up books as a kid knows, your excitement level peaks when you pull on a tab and something appears or moves. That is exactly what happens on this site, so be sure to grab and pull on anything you see. This site is great fun, not to mention very impressive technologically.

Digital Creativity Guidebook

100,000 Stars

This incredible demonstration of modern web browsers delivers an interactive visualization of the stellar neighborhood by showing you the location of well over 100,000 nearby stars. Data has been pulled from multiple sources, and zooming reveals 87 individually identified stars. You can zoom in to select a star and learn more about it. Something that particularly impressed me about this project is how the team behind it took so much data and presented it so simply. It's quite staggering to imagine how a project like this came together.

When judging this for The Cutting Edge award, one of the judges at FWA, Tobias Van Schneider, said "Simply beautiful. And it's not just beautiful, it's also the future of learning. I wish I had this when I learned this topic in school." I think Tobias's comment speaks volumes.

100,000 Stars

Snowbird Ski Resort

Another beautiful experience across all devices, this site for a Utah resort that was voted number one by Outside magazine is exceptional on many levels. The subtle yet creative menu animations and the slick transitions give us a glimpse of the next generation of polished and professional web design. The combination of real-time data and mountain cams makes this a crucial and useful site for visitors to the resort.

While this site does not have heavy-hitting graphics, effects, or sound, it is just as impressive as big-budget motion and 3D sites because of the logical way the site was put together as well as the many small details the creators included. Overall, this site demonstrates the direction more brands should embrace. This experience certainly towers over the hundreds of parallax scrolling sites that have become common on the web these days.

Snowbird Ski Resort

Epilogue

I hope you have enjoyed these winners of the Cutting Edge award. In future columns, I will provide an in-depth look at one or two projects and include insights from the creators as well as input from the judges about why each one received the award.

Rob Ford founded The FWA Network in May 2000. Since then, the network has received more than 170 million visits. The FWA Network showcases projects that use cutting-edge technology for desktop, mobile, and offline experiences, together with showcases for photography as well as video. Rob is also the author of three best-selling books on web and mobile. Check out The FWA Network.