Popular Tags

Smashing Magazine - we smash you with the information that will make your life easier. really.

Behind the Design: 5 Stories of Great Inspiration

Advertisement

We grow our creative talents through experience: whether it’s learning from a veteran designer about how things came to be or finding fresh delight in Smashing Magazine posts, no great artist exists without inspiration. Famously declared in reference to scientific progress: “If I have seen further it is by standing on the shoulders of Giants”, said Isaac Newton.

The same is true of aesthetic and philosophical flourishings. By better understanding where we’ve come from and cherishing the brilliant minds who have come before us, we have a greater understanding of creative possibilities. Here are some design tales that have made for a substantially richer, more beautiful world. All are worth knowing — and moving forth from.

Computer icon inventor: Susan Kare

All right, this is a stretch. But not much of one, and here’s why: once upon a time, computers were dreadfully unfriendly compared to today. They were controlled by flipping series of switches and eventually by text-heavy command lines; it was only a matter of time before icons, which were an intriguing repurposing of hieroglyphs, made their debut as visual capabilities evolved.

2604304014 64e5c35ac7 in Behind the Design: 5 Stories of Great Inspiration

Photo by iSani

Enter Susan Kare. Zealously believing that every pixel matters, she was the primary creator of the original icon set for the Mac in 1983, sowing the seeds for a mass icon evolution in the years to come. If you’ve ever used a modern GUI, you’ve seen either Kare’s work or design influenced by it. Not satisfied with that, Kare went on to create many more influential pieces of pixelart: perhaps you’ve seen the cards in Windows Solitaire? Or, in more recent times, the Facebook graphics adorning many Facebook gifts?

Like Vangelis’ “Chariots of Fire,” Kare’s work is known by millions of more people than those who know the artist’s name. Smashing Magazine has featured numerous compilations of great icons that draw on Kare’s style: nowadays, they’re enhanced by a variety of glammy 3D effects and soft shading, but undeniably, their lineage can be traced back to this one designer.

Never one to lack a sense of humor, Susan is also behind such computing in-jokes as Clarus the Dogcow, which are elegant in their simplicity and eloquent in the reactions they elicit:

1354359521 Fb5067fc53 in Behind the Design: 5 Stories of Great Inspiration

Photo by Seb Payne

Kare’s vast yet understated influence extends to typefaces too: ever seen pixelfonts, which have seen increasing waves of popularity over the last stretch of years? In a bitmapped time before PostScript and OpenType, Kare made some of the first computer fonts. And consistent with her propensity to be prolific, she designed such time-tested classics as Chicago, which would see a resurgence in the first iPods:

102477461 4f828da10f in Behind the Design: 5 Stories of Great Inspiration

Photo by FHKE

If you’re going “Wow! I’d better learn more about Susan Kare,” you should, and Folklore.org has a dozen great stories about how other work she contributed to came to be.

Continuing onwards, Kare’s done work for the Web appliance Chumby, and it remains to be seen if this will be looked on as fondly in hindsight as the rest of her canon. In the meantime, you can find impressive tributes to her craft, such as this nod to the original Mac stopwatch/waiting icon:

56241972 264ed036f5 in Behind the Design: 5 Stories of Great Inspiration

Photo by krazydad / jbum

Calligraphic foresight: Steve Jobs

“The whole duty of typography, as of calligraphy, is to communicate to the imagination, without loss by the way, the thought or image intended to be communicated by the author.” – Thomas James Cobden-Sanderson

True to the above statement, the Mac (and Apple) wouldn’t have happened without Steve Jobs. As an exemplar, along with Jonathan Ive, of the marriage of form and function, he’s already synonymous with many other benchmarks in the technology industries, and Macs continue to be popular among creative designers.

It’s surprising now, but back then it wasn’t important that computers have beautiful typography. Strongly regarded as matter-of-fact business machines before being appreciated as extensions of our imagination, computers had limited resolution and other technical constraints that discouraged even slight efforts for more flexible type. It’s even amusing that, having the plethora of choices that we do today, some intentionally want to recreate the rigid, monospaced MS-DOS look.

Thankfully for us, as he boldly recounts in his Stanford commencement address, Jobs noticed that Reed College, which he attended, had gorgeous penmanship everywhere he looked. Consequently, he took a calligraphy class and learned the language of type. And even years later, when it was an unlikely application of his then-theoretical knowledge, he nevertheless pushed this desire and passion on the Macintosh. The big question he answered: “What if computers could have beautiful typesetting as we do on paper?”

465710766 A813186b65 in Behind the Design: 5 Stories of Great Inspiration

Photo by treviño

It seems so natural now. Fonts, including many quality freebies, flourish. Easier ways of editing them, such as FontStruct (a brilliant “gateway” promotional tool for FontShop), have lowered the barrier to type hobbyists. Today, we find it shocking if a creative application doesn’t allow us to choose from different fonts — unless it’s expressly built not to allow them. With Jobs, as with Kare, hindsight once again comes very much into play.

It’s been worth it, even if some of what’s cropped up has looked awkward:

549299220 8a856d27f3 in Behind the Design: 5 Stories of Great Inspiration

Photo by Azure

Motion graphics maven: Andrew Kramer

There’s a new hit show, Fringe, which has already proven controversial not just because of its gory paranormal parallels to The X-Files, but because of how it sets its scene-location titles in glorious, almost intrusive 3D. While X-Files was content with vintage typewriter lettering appearing as if pounded out on an Underwood, Fringe’s adds complexity by, for instance, floating a title over puddles with a reflection, as if there’s really a big block of letters where the characters are congregating.

2873371715 1b5b795055 in Behind the Design: 5 Stories of Great Inspiration

2873381851 E98c688e22 in Behind the Design: 5 Stories of Great Inspiration

These effects, and to a much greater extent the opening titles, reflect the influence of Andrew Kramer and his Video Copilot team. In fact, Kramer created the motion graphics-heavy opening titles, which depict text flying away as layers of organic debris scroll in sync with the Philip Glass-esque theme music. The choice of Futura- and Helvetica-like fonts harkens back to 1960s academic and science textbooks: they are at once striking, retro yet unabashedly modern and CG-imbued.

What’s so special about Kramer besides this? While there are a number of companies out there that include elementary instructions with their visual effects creation tools, only Kramer and Co. go the extra mile and provide dozens of video tutorials that are of key interest to the website’s core audience: aspiring visual effects artists and those who simply love eye candy. Many common (and hotly requested) motion graphics techniques are available for the benefit of all.

In teaching many others how to do these “tricks of the trade” and receiving thousands of comments in praise in return, Kramer, through his exceptional knowledge-sharing, has propagated his style and encouraged others to adapt and improve on it. And should you want to make your own Fringe-like location titles, Kramer’s got a “3D Shadows” video tutorial for that too.

The Godfather of Photoshop: Russell Brown

Photoshop is inextricably synonymous with image editing. Even if our tools of choice are Paint Shop Pro, Paint.net or even Picnik, should our tweaks be less than flawless, we risk hearing cries of “That’s Photoshopped!”

2873516451 9d265d53ab in Behind the Design: 5 Stories of Great Inspiration

In the beginning — of Photoshop, that is — there were the Knoll brothers. There was also Russell Brown, a wild-eyed maverick whose name you can find alongside the Knolls on the early “About” dialog boxes. Brown would help Adobe acquire Photoshop, then champion it for over 20 years to come. That’s endurance nearly unheard of in the rapidly shifting technology field! You can presently find him hosting wacky, inimitable tutorials on Adobe TV that teach you how to improve your Photoshop Fu.

Insanely great design is one thing. But great marketing is another, and marketing isn’t just about selling ad space: it’s about empowering your users with the skills to use your product or service with confidence, so that they get more value out of it and, in turn, share it with friends. Guy Kawasaki popularized it as “evangelism.” Before Internet viral marketing was all the rage, Brown realized this and went on the road (as he still does) promoting the good of Photoshop as if it were some blessed enabler of creative vision. Which it is.

2861673443 1e9bc3bd97 in Behind the Design: 5 Stories of Great Inspiration

Photo by Art of Wa

(With the wacky hair, you might even mistake Brown for the Don King of Photoshop, although I’ve had the privilege of communicating with Brown and he’s considerably nicer.)

Tools, especially those with steep learning curves, benefit greatly from practical examples, whether they’re tutorials or easy-start presets. As we’ve already seen with Andrew Kramer, these lessons smooth the way for greater exploration, rewarding you with greater results for more time spent on the tool. User interface design is also part of the whole equation, with terms like “discoverable” and “intuitive” deployed often. As Photoshop and other Adobe applications enter the CS4 era, Brown is mindful of showing off shortcuts in style, helping turn wide-eyed acolytes into power users. He also simply says:

“Learning about Adobe Photoshop should never be boring.”

How right he is, and we can learn a lot about inspirational design at its highest levels from him.

Honor and humanity: Tomoyasu Hotei

More than ever before, multimedia experiences are at the forefront of our senses. Visual style informs sonic riffing: thus, it’s suitable that the last person I’m going to look at is not a visual designer, but an accomplished musician (among other things).

Ever heard of Quentin Tarantino’s Kill Bill? A case has already been made for the striking imagery that was used to promote the film: Uma Thurman in a yellow tracksuit with stark black text, recalling Bruce Lee with a glint of anime. Even Second Life avatars have gotten in on the fun:

523025663 Cf06e4467b in Behind the Design: 5 Stories of Great Inspiration

Photo by yann.mip

The film itself, divided into two volumes, is a buffet of multicultural cinematic samplings and sound design, drawing on a broad range of influences; it draws admiration from those who “get” the references and motivates others to look up what they’re all about.

Suitably, the film’s soundtrack is diverse. Surprisingly yet expectedly, Tomoyasu Hotei’s guitar-blazing “Battle Without Honor or Humanity” scored the trailer, which was parodied many times over (including a sly allusion during the princess fight sequence in Shrek 3). Hotei is one of the world’s best-selling guitarists, and his performances have encouraged many a Japanese youth to pick up an ax to grind.

“Battle” itself has several lesser-known variations, featured on Hotei’s Electric Samurai album, which are full of dynamic changes and slick sound effects alongside the meaty beats. And what of those beats? Well, in the most popular version of “Battle,” the drums are none other than a sampled loop from Led Zeppelin’s “When the Levee Breaks,” which has also been used to bombastic effect in Enigma’s “Return to Innocence,” among many other songs.

By taking the beat of a classic rock song from 1971 (which in turn is based on a song from 1929), Hotei recontextualizes its driving force, shedding its political message in favor of instrumental strength, yet losing none of its power. Not stopping there, Hotei and J-rappers Rip Slyme mashed up their talents in “Battle Funkastic,” leading to a tightly edited, energetic music video. Get a taste of what combining those disparate sources can do:

What have we learned from all this? Not only do sight and sound work together to create a compelling whole — which can aid branding and memorability — as I stated in the beginning, no great artist exists without inspiration. Say it however you like; there are many quotes on the topic, one of the best-known being:

“Good artists copy. Great artists steal.” -Pablo Picasso

I think this was meant somewhat tongue-in-cheek, but ultimately it all comes down to delving into the artistic atmosphere around you, choosing what appeals to you most, and uniquely improvising on it for your oeuvre.

“Absorb what is useful, discard what is useless, and add what is uniquely your own.” -Bruce Lee

I believe the best artists create both what is copied and stolen, traveling ahead without equal, inspiring many in their wake. What will you take away from these stories? I hope they’ll help fuel the next directions you take and make. And if you’ve got a story of great inspiration, share it without hesitation in the comments! (al)

Torley Wong amplifies your awesome with the useful and fun. He also has an irrepressible passion for discovering the connections between seemingly unrelated things, and unfolding how they were invented. Enjoy his personality at Torley Lives.

Post Rating
1 Star2 Stars3 Stars4 Stars5 Stars (No votes yet)
Loading ... Loading ...

Tags:

Advertising
  1. 1
    Shuuun
    October 1st, 2008 5:53 am

    Adobe TV rocks ass!

  2. 2
    Jasper Kennis
    October 1st, 2008 6:11 am

    oops:p

  3. 3
    Friso van Kuilenburg
    October 1st, 2008 6:21 am

    Excellent article! Very informative and fun to read. Andrew Kramer ROCKS!

    Thanks for the article.

    Greets,
    Friso

  4. 4
    makemassair
    October 1st, 2008 6:21 am

    Nice article. Enjoyable read thanks.

    M.

  5. 5
    Mike
    October 1st, 2008 6:39 am

    Nice post – different than usual and quite interesting.

  6. 6
    Merzmensch
    October 1st, 2008 7:00 am

    Very interesting! I like that Fringe effects, and now after this article I’m fan of Videocopilot :-)

  7. 7
    Andy
    October 1st, 2008 7:11 am

    Nice post guys!!

    Cya
    AndyMontoya.com

  8. 8
    h-a-r-v
    October 1st, 2008 7:33 am

    Now that’s a post!

  9. 9
    OneMonkeysUncle
    October 1st, 2008 8:25 am

    It might have been worth mentioning in the section on Andrew Kramer that while the “Fringe” scene cards are very cool, they’re also a little… dated. They are a direct rip-off of the titles developed by The Picture Mill and special effects company ComputerCafe for David Fincher’s 2002 thriller “Panic Room.” I like them, I really do, and I think they work in the context of the show. But in an artice about “great inspiration” you might have at least acknowledged that Kramer’s work is more imitation than inspiration.

  10. 10
    Gerd Wippich
    October 1st, 2008 8:42 am

    Nice to have Monday Inspirations on a Wednesday evening… Russell Brown drives me nuts.

  11. 11
    Blake J. Nolan
    October 1st, 2008 8:58 am

    Thanks! Great article!

    - Blake J. Nolan
    http://wwwBJNArt.com
    http://www.StormBrainDesigns.com

  12. 12
    Rudolf Lai
    October 1st, 2008 9:14 am

    I might have to say that this is the best post yet.

  13. 13
    Brian
    October 1st, 2008 10:01 am

    Escaped tag in Facebook graphics link?

  14. 14
    heather
    October 1st, 2008 10:09 am

    this is the sort of post SM should be all about. thanks guys. really great.

  15. 15
    adam d
    October 1st, 2008 10:17 am

    good article – really interesting to find out more about the fathers (and mothers) of our age.

  16. 16
    Stephanie
    October 1st, 2008 10:21 am

    i hated the fringe effects.

  17. 17
    Johnny Nothing
    October 1st, 2008 12:35 pm

    Encouraging. Motivating. Cheers, guys.

  18. 18
    SchmackLab
    October 1st, 2008 3:39 pm

    Fringe titles… blech. While they certainly look very cool, they break the narrative and immediately take me out of the world this show creates. When the main story is as x-filey as this you need to suspend as much disbelief as possible. They are just too cool for their own good.

  19. 19
    Okibi
    October 1st, 2008 4:13 pm

    Nice article. Thought Kyle Cooper might have bumped Kramer off that list.

  20. 20
    Adam
    October 1st, 2008 4:27 pm

    Meanwhile, “infinite” should contain a ligature. (I’m half-joking.)

    The Fringe titles are definitely getting annoying.

  21. 21
    Eli
    October 1st, 2008 8:22 pm

    Twenty-third. that is a good comment number, right? I think it’s stupid so many idiots have to say first in their comments, and often their comment turns out to be second or third. Just say something useful, and if you get first comment you get first comment, you don’t have to look like a douche.

  22. 22
    gaurav_m
    October 1st, 2008 8:50 pm

    nice you made my day .. love your efforts

  23. 23
    keepitmassive
    October 1st, 2008 9:46 pm

    I agree with twenty-third.

    Anyway, great article. As usual ; )

    Peace!

  24. 24
    Ash
    October 1st, 2008 11:14 pm

    Great article ! Thanks a lot.

    Oh, and I love to visit the links of your portfolios (or else), so keep on posting them in the replies !

  25. 25
    cameronqueen.com
    October 2nd, 2008 1:08 am

    Very nice! I like this because it is different from the usual Smashing stuff and thought provoking..

    As an aside: Sven, Vitaly, is there no way you can install a filter to automatically delete any of the first 10 comments that contain the words “first”, “second”, “third”, etc..? I think this would save us all some annoyance :-)

  26. 26
    a0
    October 2nd, 2008 3:30 am

    speaking of Anime & Tarantino -> http://paperomake.com/omake_01_tt_aya.php :D

    and indeed they are all who influenced design like no other… nice article.

  27. 27
    JR
    October 2nd, 2008 5:32 am

    Thanks SM!

  28. 28
    design
    October 2nd, 2008 6:00 am

    McCain ads seem to be using the same text effect as Fringe.
    Coincidence?

  29. 29
    Torley
    October 2nd, 2008 6:46 am

    Thanx for all the lovely comments so far! While I neglected to put a “By” in italics at the top, I’m thrilled to be contributing to Smashing Magazine after being a reader for so long. A few months ago, I wrote to Vitaly & Sven that I hoped to contribute someday. I thought about what I could add to Smashing Mag’s strengths, and thought of origin stories. Now is the time (and that’s my story of inspiration).

    One can NEVER stop learning, and to that end,

    @OneMonkeysUncle: I never watched Panic Room, interestingly enough because a friend talked me out of it — so I had no idea about that inspiration. THANKS for teaching me. Also, I should note I had some friends who did very similar effects for demoscenes (that never made it public) in the late 90s. Goes to show, it isn’t just about doing it first… gotta get the word out, and Kramer & Co. are AWESOME marketers.

    I watched the 4th ep of Fringe last night, and it *feels* to me that the titles are getting more in-my-face, e.g., using them more frequently and putting them up closer to the screen. That may psychologically be in part of the initial HUGE “BROOKLYN, NEW YORK” which set my expectations, tho. We’ll see — whatever the case, they DO generate reactions (as great art is said to — not saying this is great art by itself).

    BTW, if you need decent fair-use screencaps of shows and don’t have an ep otherwise handy, http://hulu.com is a great resource.

    @design: Or conspiracy.

    (And it’s kind of funny to see “First!” on here; some things are true about Internet comments no matter where you go, ha!)

  30. 30
    Tammy Hart
    October 2nd, 2008 7:48 am

    I agree with the number 11 comment. I knew I had seen them somewhere, and you’re right. I remember being excited to see that movie, and seeing those intriguing text effects took me completely away from the film to ponder the creativity used and just how far we’ve come from the sound of a typewriter and ugly green type splashed on the screen one letter at a time. I am constaly distracted by things like that, and gain inspiritation from them easily.

    Also, 23′rd comment was right. It’s stupid and annoying.

    http://www.tammyhartdesigns.com (My Portfolio)

  31. 31
    MiaSnow
    October 2nd, 2008 8:54 am

    wow my first visit to Smashing Magazine and i find a Torley article!

  32. 32
    DRM
    October 2nd, 2008 10:43 am

    The type treatments for Fringe are terrible. Works great for a show that is already terrible on its own. First TV ever I’ve fallen asleep watching for the first time.

    Also, LOL @ Eli, #23. Love the comment, man.

  33. 33
    infowave
    October 3rd, 2008 4:32 am

    nice post

  34. 34
    Roshan
    October 3rd, 2008 12:38 pm

    Nice resource links as usual. SmashingMag is one of the best resource out there.
    I am addicted to it.

    Roshan
    Freelance Developer
    http://www.instantshift.com

  35. 35
    ali
    October 4th, 2008 10:37 pm

    where is the iran

  36. 36
    shadoobie
    October 5th, 2008 3:20 am

    andrew kramer, all hail! thank you sir…

  37. 37
    Andre L. West, Editor
    October 5th, 2008 1:04 pm

    I am truly inspired by smashmagazine. This article is very interesting and information.

    Andre L. West, Editor
    http://www.dreamquestone.com

  38. 38
    Vishal Goyal
    October 6th, 2008 11:25 pm

    Very nice article
    some of more this kind of article on http://www.vishalgoyal.co.in/blog

  39. 39
    Adams
    March 3rd, 2009 7:49 pm

    very interesting,I like it.

  1. 00

    There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.

Leave a Comment

Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!



Advertisement Advertise with us!
Join in Smashing Forum
  • No items transmitted. Please check back later.
Post your job
Advertisement