- Faruk Ateş
- Creating Inspired Design Part 1: I Am The Walrus
- Creating Inspired Design: Part 2: A Day In The Life
- Creating Inspired Design Part 3: You Never Give Me Your Money
- Creating Inspired Design Part 4: Yellow Submarine
- Creating Inspired Design: Part 5: We Can Work It Out
- Creating Inspired Design: Part 6: Across the Universe
- Microformats: The Fine Art of Markup
- Microformats: The Fine Art of Markup: hCard
- Microformats: The Art of Markup: hCalendar
- Microformats: The Fine Art of Markup: hReview
- Microformats: The Fine Art of Markup: hAtom
- Kris Hadlock
- Robert Hoekman, Jr.
- Molly Holzschlag
- Sarah Horton
- Miraz Jordan
- Jonathan and Lisa Price
- Catherine Seda
- Dave Shea
- Dave Taylor
Table of Contents
- Web Basics
- Publishing on the Web: Putting Files on the Server
- Web Design Process and Workflow
- Project Management
- Mark My WWWord: HTML and XHTML
- Standards Compliance
- Meta Tags and Search
- Enhancing Web Page Interaction
- Web Graphics
- Web Page Optimization
- Overview of Servers
- Server Programming Basics
- Careers in Web Design
- Intellectual Property for Web Designers
Creating Inspired Design Part 1: I Am The Walrus
Last updated Oct 17, 2003.
By Andy Clarke
Part 1: I Am The Walrus
"Yellow matter custard, dripping from a dead dog’s
Crabalocker fishwife, pornographic priestess,
Boy, you been a naughty girl you let your knickers down.
I am the eggman, they are the eggmen, I am the walrus"
— I Am The Walrus, 1967, Lennon-McCartney
I want to design a web site like I Am The Walrus. Yes, please, I do.
I often wonder how a person's brain can come up with ideas like that. After all, a semolina pilchard, climbing up the Eiffel Tower hasn't been a headline in my daily newspaper since, umm. And I can't remember the last time I heard an element’ry penguin singing Hari Krishna. At least not in my native penguin.
"The first line was written on one acid trip one weekend," said Lennon in an interview with Playboy. "The second line was written on the next acid trip the next weekend, and it was filled in after I met Yoko"; which, of course, explains a lot.
As well as combining ideas for three separate songs into one, Lennon then added a verse to deliberately confuse students at his old grammar school who were studying Beatles' lyrics as part of their English class: "Let the fuckers work that one out," he said.
So, what? What? What has my fascination with I Am The Walrus, or Lennon's apparent fascination with kicking Edgar Allan Poe got to do with creating inspired design for the web?
This series of articles is about merging ideas and inspiration in different and unexpected ways. Inspired by the pop artists of the 50’s and 60’s, I will take an inspirational item and transform it for the web, starting with what inspired me, working through the various design stages, and creating the final result.
Last year, I was walking around London's Tate Modern with a friend who is also a budding web designer. During one conversation, he explained to me that he often stores inspiration that he has found for his designs in carefully categorized folders of bookmarks, as well as in sets of screen shots on Flickr. This was surprising to me at first, but then again not surprising at all.
Like most people helping to build the web, my friend also consumes the web on a daily basis; reading, uploading photos, shopping or checking his bank balance, he is exposed to pre-made solutions to many of the design challenges that he faces. When he spots an interesting treatment of, for example, tabbed navigation, he quickly stashes away the URL until such time that he is in need of inspiration to create tabbed navigation. The same is true for other elements of design, from web form detailing to layouts of entire web pages. All of his inspiration sits neatly, digitally scrapbooked, waiting for the day that it will be recycled into his designs.
I'm sure that my friend is far from unique with this approach. I'm sure that boatloads of designers do something similar. I’m also not the only person troubled by the results of this approach. In Analog In, Digital Out, the inspiring Brendan Dawes writes that,
"I get kids in for interview who seem to have had all the life sucked out of them before they have even done anything. Their portfolios are pretty dull, mirroring everything else that's out there because that's safe."
I find that sad, as it seems that all over the world, web designs are feeding off each other as their designers stop looking for new, interesting, and inspired ideas. This design cannibalism can often lead to convention and, if this is not kept in check, convention can so easily lead to boredom.
Web usability evangelist Jakob Nielsen—not a person who is well known for his design sensibilities—once said, "The very concept of design is problem-solving under constraints."
Indeed. Designers know all too well the challenges of continually creating innovative solutions, particularly solutions to problems that have been solved so many times over. Perhaps this is one of the reasons why it’s often easier to play where it’s safe.
Time To Create Something New
The web is a young and dynamic medium, one that has changed much over the 10 short years since it’s gone mainstream. Is it already time to stop innovating with visual design? Has the time already come when we’ve learned all there is to know about designing usable and engaging experiences for visitors to our sites? I hope not. I hope that—inspired by painters and sculptors from throughout the modernist era, inspired by the musicians from rock to punk who have adapted, changed, and built upon what has gone before—web designers will continue to experiment with new ideas, ideas that can, when needed, break away from conventions to create something new, something spectacular.
When designers are challenged to create new solutions for the web, how do we find fresh sources of inspiration? Just as Lennon did with I Am The Walrus, we can combine two or more ideas to spark a new one. When these ideas are tied up together in a sack and shaken, they often collide, sometimes bouncing off each other, sometimes sticking together. These collisions result in the exciting, stimulated, and unexpected. What at first can look like a random clash of eggmen and walruses transforms into something that surpasses anything careful planning or consideration could spawn.
Solve A Different Problem
Whereas it can be tempting to try to solve a web design problem by first looking at how others have already solved the same problem, the next time you’re faced with a design challenge for a web page layout or an interface design, try looking at how others have solved a different problem. Can studying the navigation solution for a DVD menu help you design navigation that’s easily understood and utilized by both mouse and keyboard users on your web sites? Can the heating or air-conditioning controls in your car suggest how simple iconography might help visitors move through the checkout stages of an online store?
In How To Get Ideas (Berrett-Koehler, 1996), Jack Foster points to several examples of how combining can help to solve a design problem.
"Something is going on right now in some other field that could help to solve your problem, that could give you fresh insight, that could turn your thinking in a new direction, that you could combine with something you already know, that you could use to unlock your mystery. Keep your eye and ear out for it."
Look Outside The Web
It’s always helpful to look outside of the web for your inspiration, to places where you might not at first expect to find a solution. The world is a collage of inspiration, from newspapers, magazine publishing, and advertising to product design, architecture and the fine arts.
If you’re faced with the challenge of organizing content on a busy home page, what can you learn from the contents page of a fashion magazine or the TV listings page of your local newspaper? In both of these places, there may be parallels in the type and structure of the information that you need to convey, but both of them have been approached in ways that can be very distinctive when you apply them to the web. You could start by looking for:
- Interesting column widths and proportions
- Different ways to style lists
- Unusual relationships between text and images
What if your next design challenge is to structure the product information on an online store? What lessons can you learn from the small ads in the backs of magazines, from the nutritional information on your box of cereal, or from the sleeve notes on a treasured 12" vinyl album? Sometimes, you’ll come away with nothing. Other times, however, you’ll find that spark of an idea that grows into an amazing and original design.
If you mix up the design of a puzzle from a magazine quiz with the typographical style of a children's comic book, what will happen? Perhaps it will inspire a new web form design that breaks away from convention. If you’re surprised by the results, they’ll be distinctive and memorable for your visitors as well.
It’s these ideas that I’ll be investigating over the next five months as I take you on a journey through my creative design process. Inspired by the pop artists of the 50’s and 60’s, I’ll take an unusual item of "found" inspiration from either my scrapbooks, photo albums, or maybe even my trash can and repurpose it to create something for the web. In each article, I’ll walk you through my design process by starting with what inspired me, working through the various design stages, and creating a final project using meaningful XHTML mark-up and CSS for presentation.
Until then, I hope that you’ll think a little more about the unusual places that you can find your own inspiration. If you’re not already in the habit of keeping a paper scrapbook in which you glue and tape what you find, I hope that you’ll start now.
There is also a Flickr group into which I hope you’ll post the inspirational sources that you find for others around the world to share. You can find the group at http://www.flickr.com/groups/foundinspiration/.