How To Design With Inspiration

A while back, Cameron got me thinking about this whole “visual inspiration” topic and where to draw the line between inspiration and ripping off a design. We all know there’s a line, so I thought I’d share some basics to help keep us from crossing it in cases where we see some excellent visual designs from other people, and want to incorporate their techniques and methods in our own work.

As a tag-along to this post, I’ve taken the design that Cameron did, and worked with the content seen from the inspired work in question, to hopefully re-create something that fit’s into the “inspired” category we want achieve. Please know that the purpose of this exercise was not to push the limits and come of with a polished final design, but to show how you can take inspiration from a piece of work and wind up with something you can call your own. I spent a total of just over an hour in Photoshop, and certainly could have played and experimented with different aspects of the design, but needed to go to sleep :-). (I also worked at 72dpi and the tiny pixel size you see to speed things up.)

Before I begin, there are a few basic building blocks to any 2-dimensional design system. When you see something you like, it’s a good idea to classify the following attributes it has and decide which ones are inspiring you.

1. Genre (or style)
2. Layout (This includes things like grid, alignment, etc)
3. Typography
4. Color
5. Content

The Golden Rule
Based on these 5 aspects, I would recommend keeping 1-2 of them (3 in rare cases) somewhat consistent to your own work. So, you may decide you like the particular style or genre of a design you saw. Great, go with that, but be sure to make as many changes as you can in the remaining areas of your work. The biggest mistake I think we see is keeping too many of them the same.

Now that we have that out of the way, I’ll give a layman’s explanation of each, and offer some advice for your would-be inspired design :-) I’ve taken Cameron’s graphic as my starting point, and I’ll make side by side comparison’s as I walk through them. Hopefully, what I have at the end is a good example of what I am talking about. Obviously if you are reading this it means I thought so, cause if I published an inspired design that did exactly the opposite of what I am trying to communicate, it means I am psychotic…and off we go.

Genre
Another word could be style. It’s a general description of the aesthetic you are seeing. Examples would be “Grunge” or “Web 2.0″. You can see a sample list of them from this Vitamin article. As time passes, you will see them fade in and out and combine into weird hybrids of each other. The words change from one designer to another, but we keep seeing them crop up in one form or another. In my experience, this tends to be the most popular reason for “choosing” a design to be inspired from. If you see a design you like and would like to keep a similar style, you’ll need to be sure and change some of the other aspects. Since this is the most common aspect, I’ll stick with this genre as my source of inspiration from Cameron’s design. And, based on the initial inspired work, it looks like that is what was so engaging to the designer to begin with. The word I have come up with to classify this style is “Spacey Lighty Futuristic Style”…quick, someone go add it to Wikipedia.

Layout
The prioritization and organization of visual elements on the screen/page/postcard/whatever. Not so much something that inspires you (although for me a really nice grid does get me going), but a key area that you can change to make your design unique and stand alone. To some level, the content will dictate the flow, but there’s always options. My first book on grids was from Josef Muller-Brockmann, but there are many more you can get as well. The visual elements are pretty limited in this design (just 3 words & some graphic love), so a simple adjustment of where the type is positioned helps create a different layout from Cameron’s original.

Typography
Let’s be clear…I don’t just mean what font you choose. If you ever think of opening anything by Adobe on your computer in order to make anything that visually communicates an event/idea/message/… then you should understand the basics of Typography as they exist in the design sense. SO, change the font…change the distance between the letters, change the height between the lines of text…and if you don’t know the words used for each of the previous suggestions, then take some time to learn them and the other aspects of typography. If you’re into print, check out “The Elements of Typographic Style” or “Stop Stealing Sheep“. For those more web inclined, there is an application of the principles from The Elements of Typographic Style from Richard Rutter online. I’ve used a different font, and added some subtle light effects (part of the genre we talked about before) to start.

Color
At a basic level, changing the color is one of  the easiest ways you can differentiate your design. Your choices should reflect an overall mood and support any theme or style you have decided to go with. Knowing the basics of color theory for any designer is an absolute must. And with tools like Adobe’s Kuler it’s really easy to build your palette. One of the best introductory online resources I have found on this is the Color Theory articles from worqx.com. A deeper understanding of color will not only help you distinguish your inspired work, but also help increase clarity of your content (or decrease it, if that’s how you roll ;-). For the new design changing the color to something warmer helped differentiate things a lot. I’ve also adjusted the gradient shape, size & position from the original.

Content
Well, honestly this is something that you actually can’t change sometimes. And, that means it is dangerous. Dangerous because you may be inspired by a movie poster for Friday the 13th, and want to apply some of the techniques to your newspaper ad to raise funds for the local orphanage. Don’t try to force a style, genre, etc into your project just because you like a technique. But then again, don’t fail to consider one either. The real point here is that you are going to make a judgment call on whether or not the content in your project will work with the design you are creating. This is usually done by listening to your client, understanding the message that needs to be communicated, and applying the techniques we’ve talked about so far. For this illustration, I have overlayed  an entirely new image of a film projector from istockphoto (as seen by the watermark). I also used lighting effects that break from the original shape & flow of Cameron’s piece.

End Result
Now, from the applied side of things, unless you are designing for the exact same message you are being inspired from, you will have different content/words/images to use. If you don’t, then chances are your design is going to look like a rip of your inspiration. Always try to find alternate images or new content that supports your message.

All in all not a bad start to a new design inspired from a previous one. You can always find ways of modifying (Changing the aspect ratio of the stage, or laying out the type vertically are 2 more I can see right away). Hopefully this is a helpful post, and if anyone has thoughts on other ways to improve on an inspirational design process, that’s what the comments are for.