A Frame of Reference, Part 1: Finding Ideas

by Matt Ward

on January 16, 2011

in design Resources

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

As designers, I’ve found that we spend a lot of time and energy talking about and discussing something that we commonly refer to as inspiration. We see it all over the design community. There are countless different galleries showcasing some of the best work being produced, and list posts that fulfill a similar function, though usually with some commonality that thematically binds all of the designs together.

In another article, entitled “The Myth of Inspiration,” I have discussed some of the problems that I think arise out of this understanding of inspiration, which tends to commodify the entire concept, turning it into a product that can be acquired (usually for free) from whatever site happens to have accumulated the best collection of representative works.

As you can probably already tell (especially if you’ve read the aforementioned article), I’m not a huge fan of this use of the word inspiration, mostly because I don’t feel that it’s an accurate representation of what should, ideally, be an unplanned, spontaneous occurrence. That being said, however, my issue is fundamentally one of semantics more than anything else. What we are usually really looking for when we talk about inspiration could probably be better termed as “reference material”.

As a prime example, the opening chapter of The Web Designer’s Idea Book, Volume 2 is actually titled “Inspiration”, but as you read through those few short pages, it becomes clear that what author Marko Prljic is really pointing to is finding ideas and concepts by examining how others have solved various design problems. Using the terms inspiration, Prljic writes:

A great way to approach inspiration is not to look at the whole design, but rather to scan for the elements that are relevant to your project. Observe how others have solved problems similar to yours, and run with those aspects of the design.

Practically speaking, this is solid advice. Studying the designs of our peers, mentors and heroes can be a great way to advance your skills, helping you learn to approach problems from different angles and perspectives. Moreover, studying a variety of different solutions to the same basic problem can reveal the pros and cons of each, and ultimately help you determine which solution (or even combination of solutions) may be the most appropriate for your unique circumstance.

Welcome to the Real World

If you’ve seen The Matrix, chances are that you remember that key moment where Neo (Keanu Reeves) wakes up after taking the red pill, and the camera flashes to a brief scene in which Morpheus (Laurence Fishburne) simply says “Welcome to the real world”. Sometimes, I wonder if we’re not somewhat like Neo—so caught up in a world of computers and networks that we fail to see or even take notice of the much larger, and much more real world that exists all around us.

Well, let me play the role of Morpheus for a moment and welcome you back to the real world.

As wonderful as CSS, logo, poster and other galleries are, they really only form a very small fragment of the vast pool of potential sources for ideas and reference material. It’s a big, big world out there beyond the glow of your monitor and the door of your office (or other work area), so don’t just sit yourself in front of your computer all the time.

It’s time to get out into the world, and see all of the ideas, influences and potential solutions it has to offer us!

Colours

Obviously, colour is a huge part of design, and sometimes coming up with a unique and appropriate colour palette can be a bit of a challenge. There are certainly some awesome web tools to help in this area, such as Adobe Kuler, and the popular COLOURlovers website, and those can definitely be a huge help. But we’re talking about getting out into the real world, so we’ll put those kinds of things on the back burner for now.

It’s a colourful, colourful world out there. There are all kinds of beautiful colour in nature, with lush greens of summer, and the fiery rainbow of autumn (assuming you experience autumn like we do here in Canada), and flowers that seem to come in every conceivable shade. Though clearly arranged by human hands, the rows of flowers in the image present an interesting combination of colours, both in terms of hue and brightness:

rows of flowers

But ideas for colour don’t just have to come from nature. Cities—both big and small—are full of life and colour all on their own, often in unique and interesting combinations that are less likely to occur in nature itself. From a vibrant downtown core, to areas full of urban grunge, colour is all around you. For instance, while I certainly don’t endorse vandalism, I do freely admit that a certain portion of the graffiti out there is really quite amazing.

urban graffiti

Often, these remarkable spray-paint works of art can present us with all kinds of colorful goodness, especially when taken in the context of their immediate surroundings. Just keep your eyes open. You never know when an awesome assortment of colours will appear before you!

Typefaces

Typeography has been around far, far longer than the web, and while we can certainly be excited by the recent leaps forward that are being made in terms of the ability to use font replacement in our sites, there is still a huge amount of type to find out there in the real world!

Just walk down a city street for a few blocks (probably not so much in the suburbs though). Take a look around you. There will type everywhere, from store signs to posters to billboards, if you take the time to really see, you’ll probably find yourself surrounded by type. For instance, here’s a simple sign showing the hours of operation of some location:

store hours

The combination of the old-west style lettering with the cursive (complete with a nice, retro shadow), creates a really interesting pairing that could not only give you ideas for how to pair typefaces, but which might also provide the initial idea for establishing and/or running with a vintage concept for a particular design. Similarly, we could see something like this directional sign:

sign to London

Seemingly pointing the way to London, notice the way that this serif typeface is incorporated into the context of the signage. Perhaps this kind of blackened iron effect might work perfectly for a design you’re working on or maybe it’s even something you just want to store away in memory for later. Either way, notice the how the use of the serif typeface works here, and the interesting spheres that “glue” the letters into the sign. These are all interesting details that can help with both selecting a typeface and with developing interesting treatments and effects to apply to that typeface once it’s been selected.

Textures & Patterns

Textures are a hugely popular design element on the web, especially with so many awesome resources available, many without any cost at all. Of course, this kind of texture is only ever an illusion. If you reach out and feel the screen you won’t feel the rough grain of textured wood, the cold smoothness of brushed aluminum or dirty grit of grunge.

Texture is a natural phenomenon of the real world, so it only makes sense that we turn to the real world to find it.

Recently, I crafted a tutorial where I walked readers through a number of steps for creating their own, vivid grunge texture in Photoshop. It used a combination of different photographic resources and some Photoshop techniques to create something that looks like this:

grunge texture

To create this, I didn’t even have to leave my house! In the tutorial, I explain how I photographed different surfaces from around my own home and combined them to create this, and an entire grunge texture pack. It may not involve going out, but your own home is still part of the real world!

Another area that I’ve learned to pay close attention to is patterns. I love patterns, and like colour, type and texture, they are all around us. One of my favourite places for finding patterns is on wallpaper. I remember being in a hotel a few months ago, which had all kinds of interesting wallpapers. Not only did they contain subtle, tastefully designed patterns, they also combined different papers on different walls, creating a really interesting overall unity.

If it wasn’t for that fact that I would have looked ridiculous, and maybe even a bit suspicious, I probably would have spent quite a while examining the intricacies of those patterns!

Random Thoughts, Ideas

While the world is full of interesting sources to find ideas for specific design elements, sometimes it can also provide ideas and concepts on a much broader basis. You could be just walking down the street and see something that sparks an idea in your mind. Maybe it’s an interesting juxtaposition of styles or shapes between buildings, or the pairing of two different images. Maybe it’s seeing something familiar from a different angle or in a different light, allowing you to see it a whole new way. It could even just be overhearing someone talking or reading something on a poster as you pass by.

It could literally be anything at all.

Of course, that makes it somewhat difficult to pin down anything specific that you could or should be looking for, or any technique for finding it. Ultimately, though, the best thing is just to approach the world with an open mind. You just never known when an interesting (or even brilliant) idea might pop into your head, or even what might cause it to make its startling appearance!

Closer to Inspiration

In many ways, I think that getting out into the real world and just allowing yourself to soak in all the beauty (and ugliness) that it has to offer is an important exercise for designers – on the web, in print and even for product design. Moreover, depending on how you approach, I would suggest that the thoughts and ideas that come out these kinds of moments may actually be closer to genuine inspiration than pouring over online galleries.

If you are specifically looking for a colour scheme or a texture, it’s probably still closer to resource collection, but every once in a while, you may have that remarkable experience where something you come across triggers a new thought, idea or solution, even though you weren’t looking for it!

For the creative mind, these are can often me some of the most fulfilling (and rarest) moments of all! So be sure to enjoy them.

Now, in this article, we’ve looked at how we can find ideas and references by venturing out into the real world. But you should not go unprepared. In a follow up to this post, we’ll be discussing some tools and techniques that you can use to help record what you find in your real world adventures!

Powered by Shutterstock

About Matt Ward