Control + Shift + Create

This is an extended follow up post-mortem article of a workshop about creativity with the web which occurred on 29. March 2012 at Slovenian Advertising Festival.

Creatives being plain ol’ “creative”…

Practically every meeting I had with traditional designers or copywriters about a web project we were working on, they would provide initial sketches—
a juxtaposed composition of metaphorical imagery representing the navigation or content. In exceptional cases the websites we would create would end up looking something along the lines of Lake Nona, in worst I don’t think you want to know.

Even the all mighty Stefan Sagmeister’s website is notoriously controversial. Not too long ago he redesigned (or better realigned) his old highly unusable flash website. The old and almost iconic navigation was preserved but this time it was placed onto the office floor and projected onto the website with the help of ceiling webcam which recorded all the office action. This is a classic example of what traditional designers consider as creative use of (web) technology.

Btw even this is not directly related with the web, I’ve also noticed a mild form of obsession with QR codes among traditional designers. They just can’t seem to wrap their head around the fact you can actually turn every thing into a hyperlink. Their love combined with an unfortunate sense of contextualisation gradually turned into another web meme blog.

Analogue meets digital

Another classic handicap is seeing the web as a free/cheap broadcasting channel for traditional media which a lot of traditional advertisers seem to be suffering from. Fortunately there are studios and agencies who understand things well enough to combine best of both worlds.

Visit Norway uses an interactive video of a wing-suit jump over Norwegian landscape where users can turn around 360-degrees during the flying and enjoy the spectacular landscape. Not exactly the outburst of creativity, but it does surpass the TV broadcasting mentality and makes the experience interactive (which in this case equals better).

One of the studios with a large and quality portfolio of projects bridging these two fields is probably B-reel. They can take something as boring as the laundry powder advertising and turn it into an exciting cyber carnival prize shootout. You can only imagine what they come up when they decide to create an experimental music video featuring Arcade Fire’s single “We Used To Wait”.

Creativity in form of an innovation

But none are more creative with the web than geeks. Designer/engineer hybrids who practice(d) traditional design but also have a strong affinity for technology. The people who understand what makes it tick and know how to manipulate it, are the ones able to innovate on it (even if just a tiny bit) and not merely recycle or recontextualise the same old concepts.

Best place to start your search of creativity online, in my opinion, is Spacelog. What can be more creative than bunch of utterly cool and smart geeks escaping the daily distractions of internet to a 19th century fortress to digitalise space missions? “Right, geeks enjoying normal geeky stuff, but what’s so creative about that,” I hear you ask. Undusting old transcripts which have been lying around on some government server for god knows how long and turn them into an interactive experience which is nothing less than indexed, searchable and navigatable history frozen in time. It’s a time machine that gets you up close and personal with historic figures in a same way your chat logs do it with your friends. No matter how you structure it, turning this content into any other form would always result in a streamlined and subjective interpretation of real events. There is no other medium or form that can at the same time preserve events in their raw and unprocessed state, enable consumption much faster than their real time and semantically index the content to be referred to in part. The fact it feels perfectly familiar and intuitive the first time you encounter it is exactly what makes it phenomenal. But the fact is nobody before this came up with the idea of doing anything like this. And that makes it utterly creative.

But there is much more to interactivity than hyperlink clicks and their hover, pressed, visited and active states. There are triggers such as voice, video, image, location and what not. But if you are creative you can also employ browser size to tell a story.

When the Brighton based studio Clearleft announced Silverback—their in-house usability testing application, they launched a temporary website describing the product combined by a sign-up form to receive a release announcement. But soon someone discovered the cool 3D effect (called parallax) which the jungle vines hanging from the top edge of browser viewport made when resizing the browser window. And they tweeted about it. And got retweeted. A lot. But most importantly Clearleft got couple of thousand e-mail subscribers and exposure all over the web in their first week of announcing the product. Also worth mentioning in this category is another cute monkey and a technology powered Easter egg, better described in Aarron Walter’s book Designing for Emotion.

Since then the parallax effect has been reinterpreted and recontextualized quite a lot. But before we get to that, let’s observe a connecting evolutionary step of this concept. To celebrate the release of Internet Explorer 9 which supported WOFF (web fonts format) couple of incredibly talented designers and developers designed a typographic web trilogy. One of which leveraged scrolling in order to tell the story. This probably wasn’t the first instance of this concept but I’m comfortable enough claiming it was probably one of the first widely popularised.

Fast forward couple of months forward when the newcomer Berlin based company Nerd Communications announced a micro website for Ben the Bodyguard; their iPhone app for encryption of sensitive data. By scrolling the website you follow Ben on a walk through a dodgy neighbourhood where he pitches you his services. Similar to Silverback’s case, Ben was instantly skyrocketed among web superstars, featured all over the web and received thousands of e-mails from people interested in the app. Even though the method in use was nothing new the creators of Ben the Bodyguard managed to perfect the technique with an exceptional narrative and optimisation of the whole experience for mobile devices. Go ahead, open the same link on your phone or tablet and touch scroll through the story with your finger. Magnificent, no?

Even though I’m quite certain I’ve seen the next step done before the Wieden+Kennedy (W+K) assembled a team of creatives and coders to create a website for Nike Better World, the latter championed it. While the creators claim the concept came before the technology, the website combines both previously mentioned elements: the parallax effect and scrolling narrative. I’ll skip the success part and provide a couple of examples worth mentioning which put the same technique into use. The rest is history.

Exploiting technology

Back in the day we loved creating websites with Flash, because it allowed richer media experience than native web technologies (video, audio, animation etc.), we were familiar with the workflow from the rest of graphic software, but most importantly because there was no immediate pressure on learning code. We were able to create whole websites with just simple goToAndPlay(); function. Today it’s easier to find albino Scandinavian buddhist monks than web designers who would argue Flash over web standards. Even though the current state of creative affairs on the web is dangerously leaning back towards malicious flashturbation, at least this time it’s not breaking the web. Unfortunately advertisers can’t restrain themselves from taking something good and turn it into download intensive stiff over-planned piece of poo. This is a prime example of the creative mentality working without understanding of technology. It doesn’t matter if it’s made using flash or HTML5. When you need a preloader and 5+ sec of broadband load time to open a URL you’ve failed no matter how spectacular the content on the other side of a hyperlink is.

These newly emerging web experiences are mainly based on the latest generation of browser technologies such as WebGL, HTML5 canvas, native audio & video support, CSS3 animation, perspective transform or epic JavaScript (libraries) which are transforming the web from pages to (collaborative) rich multimedia applications.

Plink and Rumpetroll are spectacular showcases of the power of HTML5 canvas, native audio combined with real-time multi user technologies.

These technologies obviously won’t work on your granny’s old PC running Internet Explorer 6 and as a matter of fact sometimes they won’t even work in your latest version of Firefox. But as long as such limitations are understood, supported with a fallback accessibility systems and the technology is employed where it makes sense, it can be truly powerful. As young and primitive as these technologies are, they have only begun to develop and we’ll be working with it for quite some time. You better recognise, homes.

Acko.net uses CSS 3D transform combined with Three.js JavaScript 3D engine to create a browser native 3D scrolling parallax effect which works only in Webkit browsers. Others will render the website normally and user won’t even notice there’s a small web technological breakthrough missing in what he sees.

But the technology itself isn’t and shouldn’t be replacement of the content. Previous examples are mainly experimental showcases of possibilities new technologies are offering us to empower and unleash our creativity on. Slavery footprint is a simple, but fantastically designed web survey which makes a practical use of more or less sophisticated technologies in order to create memorable experience and a compelling argument about the human exploitation behind every day luxuries western world is accustomed to.

Disclaimer

Despite the sarcasm the point here is not to mock but to inspire graphic designers and other enthusiasts to think in the z-space.

There are many other websites I wanted to include in this list. Many of them which unfortunately suffered the inevitable time transition to search engine obscurity or termination beyond my or Wayback Machine’s cache.

Also the original plan of the workshop was to have a very informal dialogue with attendants—some sort of designer’s version of a youtube party where we would exchange relevant links, deconstruct websites and chat about their origins and results. Since I ended a bit disappointed by not gaining anything in return I decided to turn, what should have been a simple list of links, into a full featured article in hope to reach those who care and continue the discussion.

Let me know about the tons of other great and unique web ideas/projects that I’ve left out or merely your thoughts about things written here.

Comments

  • Great read! Nice work Natan, shame I couldn’t make the conference – I’d have love to have geeked out with you… Speaking of which, you make a good point that some of the best designers are geeks and their geekery can improve the output/solution. Surely to be a (good) designer, you need to love the medium you design for… And a technical undstanding of the medium is surely a prerequisite skill…

    Although, as designers we need to remember who we are designing for… Not to forget we don’t always get to design for ourselves and fellow geeks… But, it’s that passion for what we do and our own individuality which can help us deliver creative and innovate solutions.

    Shame the conference attendees didn’t geek out with you more, like the internet is all about copying data from one place to another, humans learn by passing ideas between one another… I can’t help feel they missed an opportunity by not sharing more…

  • Natan

    Absolutely, mate. Knowing and tailoring your approach to your audience is crucial for successful communication. Geeks or not, we need to be in touch with the world of our audience(s) and speak the same language. Otherwise we are broadcasting our messages into empty space.

    I too wish you were around in the time of making this and/or workshop. Nevertheless there’s always a next time. Thank you for a great comment. Hopefully this reaches out and engages more of us who care.

Leave a Comment