Okay this is turning into Animated Movie Week at the blog, but since I just watched Wall-E , I can still remember where some of the best interface design elements were. And lets hope Pixar doesn’t mind some fellow artists gawking at (and reposting) pics of their work. Click the images for embiggened versions….
For a few weeks now I’ve been screen-grabbing little snippets of interface design elements that caught my eye. Some from websites, electronics, car dashboards, whatever. Today was the first day I actually sat down and started sifting through everything to prep for a Flash lesson on all this. Usually I’ll try to work out an overall theme for a lesson, and then decide what to teach first. I thought I had a good theme in my head, until I began playing around in Flash, and then the first thing that came out was great, but not at all what I intended. It got me thinking a series of different video player shells could be useful. So many sites use video now, and usually there’s no outer decoration. Anyway, just thought I’d share the pic below. You can embiggen it by clicking it.
I was doing some research into a future interface design course for CartoonSmart and stumbled upon Coleran.com. Mark Coleran is a visual designer for films and a lot of his portfolio features imaginary high-tech interfaces. Some of these are absurdly confusing by today’s standards for GUI, but the context for many of these pieces are the “not-so-distant future”, so as you watch actors interact at lightning speed with his designs, its believable that people have evolved with the complexity of these interfaces. For a comparison today, go sit for a few minutes at the foodcourt of any mall with an Apple store and you’ll see someone playing with their iPhone for the first time. It takes a few minutes from them to gel with sliding and two-fingering the touchscreen.
Mark’s got an awesome showreel with his work in TONS of movies you’ve probably seen, but I’m going to steal a few of my favorite images from the reel to post up here.
The image above is a screencap from a Flash ad that popped itself overtop the page I was browsing. Unlike most ads, this one was worth playing around with. The dashboard-style interface design was excellent and the animation great too ( a little pseudo-3D was in there) . You can visit MiniUSA.com for the full site (styled much the same as the ad) but in case that changes drastically in the future, I took a quick movie of the ad. Check it out here… MiniUSA Flash Ad Movie (10MB Quicktime)