Love @ First Site: article for Dynamic Graphics / Create Magazine reviewing best websites of the year.
Feature article in Dynamic Love @ First Site
What’s new, cool (& also bad) in web design
by Aliyah Marr
If you look over the internet today, you might think it’s a wasteland of shopping carts and corporate catalogs—but there is hope. You may not yet have the plum client who has money to spend on unusual navigation, a robotic system or killer 3D animation. However, you can always point to great examples of fun, engaging sites like these as selling tools to encourage your clients to buy your best ideas. Featured here are a wide variety of interactive and 3D experiences to inspire your design and intrigue your creative muse.
Navigate the site by drawing on Toshiba’s beautiful creatures.
Toshiba’s experimental website allows the user to interact with cartoon characters by drawing symbols on top of them. This is a case of a quasi-interesting interface idea that is lacking the glue of a real metaphor or concept. Yes, the interactivity of the site is experimental, and they want the consumer to understand Toshiba’s products are innovative. However, there is no correlation between any of the elements on the site and the reason for the site (information leading to sales).
How do the cartoon characters relate to the products? How does drawing a zigzag or spiral over the character convey the concept of creative innovation? I think this site might appeal to a child, but to an adult who wants information about Toshiba’s products it’s a waste of time. It’s not appropriate to put a children’s game interface on top of a technology site, unless it is fun, engaging, clever and, most of all, related through concept or metaphor to the purpose of the site.
At Fontpark, you can make a picture with a thousand words.
In delightful contrast, please find time to play awhile on Fontpark’s typographical site. Japan’s Morisawa created a website that provides an engaging interactive and video experience. The idea is to take the standard Japanese characters and form new pictures from the elements. When you are done you can submit your design to the gallery. Or you can simply sit back and watch the animated creations of other users as their pieces are turned into animals and faces. After watching so many 3D masterpieces, the elegance and simplicity of black on white is soothing to this designer’s eyes and sensibilities.
American Airlines takes visitors on fantastic fantasy flight of the imagination.
And for those couch potatoes, the ultimate fantasy: a flying La-Z-Boy. You can do everything (well, almost) you need to do from the uber-lounge chair of an American Airlines flagship flight. A floating carousel menu at the top rotates to show you how you never need to leave your assigned seating in order to watch a movie, sleep, work or eat. You won’t want to ever get up again. You probably won’t even care where the plane is going, as long as you can stay seated in your comfortable chair.
This site is a fantastic fantasy flight of the imagination that does what all good design and branding do: engage the imaginations and wallets of consumers. The download times are a bit long, but the 3D and motion graphics of the seat folding and pieces of furniture flying around the interior are quite entertaining. I don’t think the corner office with the wall of windows comes with the seat purchase, though. They should include a disclaimer to that effect.
Take a walk in ECCO’s footwear wonderland.
Flashforward Film Festival website finalist ECCO is an entertaining combination of live-action, photographs, computer-rendered 3D landscapes and animated 2D cartoons. ECCO is a shoe company, so what would be a better metaphor than a character strolling on top of the world? The ECCO World site is based on the idea of an endless walk through different environments. The character is a live-action loop of a walking figure; it starts out as a female character in casual dress, walking in a field. If you choose a male character from the menu at the bottom, the site loads not only a walking male character but also the shoes from the men’s collection. If you click on the business menu at the top, the character switches clothes, the landscape changes to a business environment, and so on.
A good design like this enables the user to imagine owning and using the product himself. Based on one simple concept—the viewer will want to buy the shoes once he has “walked” in them—the results are convincing and eye-catching. An exceptional example of the power of interactivity, the website focuses on the places and ways the product is actually used, making a joy out of the shopping experience. Now, where did they put the shopping cart?
30 Days of Night
Sony’s 30 Days of Night site tells the movie’s story with a game, trailer, and downloads.
Sony Pictures’ 30 Days of Night is a movie made from a graphic novel. This site advertises the movie with graphics, trailers, downloads and a basic shoot-’em-up game. The site shows the mood of the movie by preserving the style of the original graphic novel, but the scenes load so slowly you wonder if you clicked on the button at all.
The designers have attempted to put in more interactivity by making the foreground follow mouse movements, but the graphics are too big to move quickly. This is a case where no matter how much money you have to throw at a project, you still have to consider the limitations of the medium.
A Flash movie is fast when it involves mostly vector-based graphics. But when it has heavy, large bitmaps, the interactivity and motion slow down considerably. I would recommend selling the client a more complex game with different characters and interiors than on a slow-moving, scrolling landscape, as is the case here. There is no complex programming on this site, so it should be relatively easy for a beginning Flash master to design and develop.
Nokia’s Unloader gets rid of your most irritating documents for you. Shredding hits a whole new level.
Finally, an online aspirin for those boring documents that excessively left-brain clients send us: www.the-unloader.com. Nokia’s Unloader is a Rube Goldberg virtual machine that takes any document off your computer and sends it on “an exciting journey.” It took quite a bit of time to upload my Excel spreadsheet to the Unloader—in fact, I was ready to quit—but it was worth the wait.
First I saw the document in the queue on the monitor in the Unloader Studio. The document printed on a tray. I started to wonder what was exciting about that. Then a robot arm took the print and dipped it in a vat, making it black, took it over to a box that blew feathers on it and laid it in on a conveyer belt, there to be destroyed. They tarred and feathered my boring document—what a wonderful gesture on their part! I felt immediate gratification and satisfaction.
I am taken to a new screen. There you have several choices: “Share the film with other intelligent coworkers,” “Bring home your own hard copy,” “Post to blog,” “Direct link,” or my favorite, “Delete the film—The Unloader will pretend this never happened.”
A site like this takes enormous planning, cooperation and the support of a great sponsor. It’s a site that involves a fair amount of technical savvy, so if you want to make a piece like this, you better make friends with a good developer—and possibly some robotic technicians, or even the geek squad from the AI department of the local university. From a design standpoint, it’s minimalist; its value is in the concept and execution. Selling this concept to a sponsor could be an uphill battle, so choose your candidates carefully—only the biggest corporations with a history of innovative advertising and branding should be on your list.
Red Interactive’s strange landscape and odd characters interact with you in real time.
Red Interactive is a site you should see, although neither the site nor the idea is strictly new. The agency has overlaid a gaming interface on top of the site. You can choose an avatar, name it and make it run, fight, talk and interact with other avatars on the site. Play the game. It’s a great way to get inspired or kill a few hours at the office. Even if a project like this is beyond your personal skills, you may consider creating something similar for a high-end client that can afford to hire some programmers and back-end people.
Karaoke, dance in your skivvies and shop IKEA at the same time.
What do music and dancing have to do with buying from IKEA? And why are these guys dancing in their underwear? More questions to add to the many other unanswered mysteries from the king of inexpensive furniture and housewares.
At IKEA’s site—“Come in the closet. Let’s Dance.”—you can change songs, upload your own music, karaoke into the microphone or play on your keyboard. The movement on the site is controlled by the sounds you choose. The dancing figures respond to the music, I assume in time to the beat; however, some computers and internet connections such as mine may not be able to keep the motion keyed to the music without some kinks.
Alpha Omega’s role-playing game site hits the high-ranking of cool with eye-catching graphics and entertaining interactivity.
Enter the immersive 3D world of Alpha Omega, an adaptable role-playing game that provides players with a unique and innovative rule set with optional layers of complexity. The website mimics the realistic quality of the game itself and is a great selling tool that shows an array of creatures, environments, and characters.
The company is clever to use the natural social network of gamers to help promote the game. Use the “Find Players” tool to find other Alpha Omega members in your area. The site invites exploration through its 3D graphics and engaging interactivity. This is the kind of site where the designer can pull out all the stops for a client—an example of “if you build it (a cool site), they will come.” One of the “stickiest” sites I have seen in a long time. I almost don’t need to buy the game.
Guidelines for Online Success, by Julius Wiedemann and Rob Ford, $39.99, Taschen Publishers, www.taschen.com. Focused on the principles of good design and marketing, this book is a clear guide that will last beyond the tastes and technologies of the day.
The Art of Game Design: A book of lenses, by Jesse Schell, $59.95, Morgan Kaufman Publishers, www.mkp.com. More than just a book about designing games, it is a book about how to think creatively and logically about the user experience.
Don’t Make Me Think: A Common Sense Approach to Web Usability, by Steve Krug, $40, New Riders, www.peachpit.com. This book states the obvious that we so often ignore: Many of the principles I have discovered in my interactive design career are addressed in this book.
For inspiration, visit http://thefwa.com, a portal to new and innovative websites.
Aliyah Marr is the author of Parallel Mind, The Art of Creativity and other books on creativity. She teaches graphic design, art, programming and new media at design schools in New York City, and she is a creative marketing consultant and business mentor for Fortune 100 companies and entrepreneurs.
I love to write, especially when I use it to teach. If I can throw a little humor into the mix, all the better.
Graphic Design: 5 Simple Principles of Perception (Using Gestalt Psychology in Graphic Design) (I created over 100 e-learning movies for MediaBistro / Graphics.com over a two year period from 2008-1010. Following is the script for the six movies for one project. I have included some graphics that were in the […]
Introduction 189 words / 1:10 min Hi, this is Aliyah Marr. Welcome to my tutorial entitled “What Drives Interactive Design” I’ll never forget my first manual car. It took me a while to get the shifting down, but once I understood the principle, it opened up a whole new world […]
As a designer, marketer and all-around cultural observer, I must say that I love Seth Godin. But it is not his trim physique that attracts my attention, it is his head. Particularly the top of his head. There it is in every photograph, in every video, like a shining beacon […]
Like a lot of designers, I own a MacBook. Every single time I take my computer out of its case, I have to remember to place the laptop with its logo upside-down, so the computer will open facing me. Of course, as a graphic designer and marketer, I like to […]