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.

Happy Mac by iSani.1
Photo by Sani2

Enter Susan Kare3. 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 Solitaire4? Or, in more recent times, the Facebook graphics5 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 Dogcow6, which are elegant in their simplicity and eloquent in the reactions they elicit:

Moof! by Seb Payne.7
Photo by Seb Payne8

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:

FloydZilla by FHKE.9
Photo by FHKE10

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

Continuing onwards, Kare’s done work for the Web appliance Chumby12, 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:

1,001 Watches by krazydad / jbum.
Photo by krazydad / jbum13

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 Jobs14. 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 address15, 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?”

Apple Garamond signage closeup. by treviño.16
Photo by treviño17

It seems so natural now. Fonts, including many quality freebies18, flourish. Easier ways of editing them, such as FontStruct19 (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:

Using as many fonts as possible is the Olympia way. by Azure.20
Photo by Azure21

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.

Fringe 3D location title 1 by you.
Fringe 3D location title 222

These effects, and to a much greater extent the opening titles, reflect the influence of Andrew Kramer and his Video Copilot team23. 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 tutorial24 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!”

Adobe Photoshop 1 About dialog box by you.25

In the beginning — of Photoshop, that is — there were the Knoll brothers. There was also Russell Brown26, a wild-eyed maverick whose name you can find alongside the Knolls on the early “About” dialog boxes27. 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 TV28 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 Kawasaki29 popularized it as “evangelism30.” 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.

Russell Brown - Adobe by Art of Wa.
Photo by Art of Wa31

(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:

Kim by yann.mip.32
Photo by yann.mip33

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 Hotei34‘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 335). 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,”36 which has also been used to bombastic effect in Enigma’s “Return to Innocence,”37 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)

Footnotes

  1. 1 http://www.flickr.com/photos/66288899@N00/2604304014/
  2. 2 http://www.flickr.com/photos/isani/
  3. 3 http://kare.com/
  4. 4 http://www.kare.com/portfolio/17_microsoft_solataire.html
  5. 5 http://www.kare.com/portfolio/01_facebook1.html
  6. 6 http://en.wikipedia.org/wiki/Clarus_the_Dogcow
  7. 7 http://www.flickr.com/photos/27069004@N00/1354359521/
  8. 8 http://www.flickr.com/photos/sebpayne/
  9. 9 http://www.flickr.com/photos/fhke/
  10. 10 http://www.flickr.com/photos/fhke/
  11. 11 http://www.folklore.org/ProjectView.py?name=Macintosh&characters=Susan%20Kare
  12. 12 http://www.chumby.com/
  13. 13 http://www.flickr.com/photos/94832693@N00/56241972/
  14. 14 http://en.wikipedia.org/wiki/Steve_jobs
  15. 15 http://news-service.stanford.edu/news/2005/june15/jobs-061505.html
  16. 16 http://www.flickr.com/photos/74085001@N00/465710766/
  17. 17 http://www.flickr.com/photos/trevino/
  18. 18 http://www.dafont.com/
  19. 19 http://fontstruct.fontshop.com/
  20. 20 http://www.flickr.com/photos/41894181136@N01/549299220/
  21. 21 http://www.flickr.com/photos/azzurra/
  22. 22 http://flickr.com/photos/torley/2873381851/
  23. 23 http://videocopilot.net/
  24. 24 http://www.videocopilot.net/tutorial/3d_shadows/
  25. 25 http://www.flickr.com/photos/torley/2873516451/
  26. 26 http://russellbrown.com/
  27. 27 http://creativebits.org/the_first_version_of_photoshop
  28. 28 http://tv.adobe.com/
  29. 29 http://blog.guykawasaki.com/
  30. 30 http://en.wikipedia.org/wiki/Technology_evangelist
  31. 31 http://www.flickr.com/photos/artofwa/
  32. 32 http://www.flickr.com/photos/10142325@N00/
  33. 33 http://www.flickr.com/photos/10142325@N00/
  34. 34 http://en.wikipedia.org/wiki/Tomoyasu_hotei
  35. 35 http://www.youtube.com/watch?v=bltGj-yaeE8
  36. 36 http://www.youtube.com/watch?v=4-AanPHMbC4
  37. 37 http://www.youtube.com/watch?v=-JpJjsHgYHA

↑ Back to topShare on Twitter

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.

Advertising
  1. 1

    Adobe TV rocks ass!

    0
  2. 2

    oops:p

    0
  3. 3

    Friso van Kuilenburg

    October 1, 2008 6:21 am

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

    Thanks for the article.

    Greets,
    Friso

    0
  4. 4

    Nice article. Enjoyable read thanks.

    M.

    0
  5. 5

    Nice post – different than usual and quite interesting.

    0
  6. 6

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

    0
  7. 7

    Nice post guys!!

    Cya
    AndyMontoya.com

    0
  8. 8

    Now that’s a post!

    0
  9. 9

    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.

    0
  10. 10

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

    0
  11. 11

    Thanks! Great article!

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

    0
  12. 12

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

    0
  13. 13

    Escaped tag in Facebook graphics link?

    0
  14. 14

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

    0
  15. 15

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

    0
  16. 16

    i hated the fringe effects.

    0
  17. 17

    Encouraging. Motivating. Cheers, guys.

    0
  18. 18

    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.

    0
  19. 19

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

    0
  20. 20

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

    The Fringe titles are definitely getting annoying.

    0
  21. 21

    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.

    0
  22. 22

    nice you made my day .. love your efforts

    0
  23. 23

    I agree with twenty-third.

    Anyway, great article. As usual ; )

    Peace!

    0
  24. 24

    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 !

    0
  25. 25

    cameronqueen.com

    October 2, 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 :-)

    0
  26. 26

    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.

    0
  27. 27
  28. 28

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

    0
  29. 29

    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!)

    0
  30. 30

    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)

    0
  31. 31

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

    0
  32. 32

    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.

    0
  33. 33

    nice post

    0
  34. 34

    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

    0
  35. 35

    where is the iran

    0
  36. 36

    andrew kramer, all hail! thank you sir…

    0
  37. 37

    Andre L. West, Editor

    October 5, 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

    0
  38. 38

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

    0
  39. 39

    very interesting,I like it.

    0
  40. 40

    thats grate and nice work i have try to do it with my self with your help and i am successful thanks friend . if anyone want to learn free adobe photoshop then click for step by step training

    0
    • 41

      thats grate and nice work i have try to do it with my self with your help and i am successful thanks friend . if anyone want to learn free adobe photoshop then click photoshopcs.byethost.com for step by step training

      -1

↑ Back to top