Be Inspired, But Don't Copy

Whichever way you look at it, your design has had some influence from the taste or style of another designer. You might not notice it, but you've picked up on things either by direct instruction, or just browsing the web, that you've got on to include in your designs. Today Connor is going to revisit an old topic from the old ThemeForest blog on the topic of copying and web design.

This topic can be tricky to nail down because understanding what you are "inspired by" versus what you are copying outright can be a vague notion. For instance, a product page might have the generous white space that you subconsciously drew from Apple... or your typography might stick to a lighter scheme thanks to your love of some other site. Of course, it doesn't have to be major technology corporation that you draw inspiration from. In fact, it doesn't even have to be a website. So how do you decide what's a valid form of inspiration and what's copying?

We'll start with a definition (hey, this is all about the meaning of the two words, right?). Inspiration is defined as the process of being mentally stimulated to do or feel something, especially creative. On the other hand, copying is defined as an imitation or reproduction of an original. You can hopefully, instantly, recognize the differences between the two purely from their definitions. One is all about gaining motivation whereas the other is mindlessly duplicating.

What's The Difference?

We've established the dictionary definitions, but what are some practical differences? Let's take an example.

Many web designers admire Apple's design, whether it be it's navigation menu, it's spacious grid or something completely different. For the purpose of this explanation, say you loved Apple's navigation menu and wanted something like it in your own design. Lifting their images is, of course, legally prohibited but there's nothing physically stopping you from creating a similar grey-ish bar with hover-over inverted colors and subtle depth shadows. But that isn't taking inspiration, that's copying.

Now, imagine I admired the same navigation menu and used it as a jumping off point. Inspiration would be to be stimulated by Apple's success in this respect, and creating something that has few visual ties, but adheres to similar principles and aims. Perhaps I would take the idea of inverting color on mouse-hover and apply that to a completely different idea that is similar, but not a doppelganger of the original.

How to Get Inspired

There's a number of ways in which you can achieve that mental stimulation to be inspired. We're going to take this as a step-by-step process, so skip this first one if you already have a specific design (or designs) in mind.

You can draw inspiration from a number of places. You can peruse your history and take a look back at some of the websites you visit, a lot of them probably have some favorable design techniques utilized. Alternatively, why not browse a marketplace like ThemeForest, or a showcase like Creattica. These can be great resources to browse what other designers have been coming up with and generally represent the trends of the current time meaning any inspiration you draw is relevant. If you are designing a specialist site, be sure to check up roundup lists like our own ones here at Tuts+ (and, coincidentally, Travis King recently wrote a roundup of inspiring Creattica designs for you to check out!)

Of course, the web isn't the only place you can look for inspiration for your web designs. Ultimately, the web design industry stemmed from the print industry and several principles were carried over (for example, prior to the last few years, putting things above "the fold" was popular. In print design, being above "the fold" was to put as much stuff on the upper half of a page, where the reader would see it prior to unfolding his copy). Take a look at a magazine and you might just find a great example of good typography. Hey, even my chewing gum box could be described as an example of a well tailored color scheme!

Once you've found one design that you truly admire, don't stop there. Keep looking for similar designs that each have their own original elements, even if they vary in other areas like color, layout or typography. Gain some inspiration from the areas you particularly like in a design, and leave out the areas that you don't. You favorite design might, in actual fact, have a hideous navigation bar, presenting an opportunity to go find a similar design that you can extract navigation inspiration from.

Of course, getting inspired from overall web designs is not the only way. One can take a website like Adobe's Kuler and gain inspiration or motivation purely on the color side of things rather than necessarily looking at whole web designs and their use of it.

Analyze the Design

Sure, you can go to a design and just lift the images off the page. But that's legally prohibited and goes against the copyright restrictions of your country most likely. What you want to go is go ahead and analyse the design to identify the inspiring areas and work out a way to utilize them in your design.

It's time to x-ray the design. Ultimately, you need to look at all the specific elements and take note of the points that stand out to you. Step back and if anything sticks out as a great example - like, for example, the specific use of typography in the header or something similar. You can target specific areas and recognize what makes it good, or alternatively just take initial impressions of what sticks out the most.

For example, we can take a look at one of the AppStorm sites and notice immediately two things about them. Firstly, we can recognize the textured background that AppStorm use, something I'm particularly fond of. We've not necessarily saying that you should use a black, noisy background with light at the top; instead, we're looking at the concept of using a textured, dark background and hopefully applying a similar style to our designs. Similarly, we can appreciate the fairly generous use of padding in this design and attempt to design around a similar principle.

Basically, you need to look at what makes that design work, from both a user and client perspective. It might be the juxtaposition of a promotion on a corporate website that is particularly influential to a specific outcome, or it might just because you think "wow, that text looks nice!".

Be inspired. Take a look at what works in a web design, and make notes of what principles and techniques are being used in order to achieve a specific purpose. However, just never, under any circ*mstance, ever actually lift elements from a page and use them in your design. There's moral and legal reasons why you should never do this: it reflects badly on your design skills and could get you (and potentially your client) into serious trouble.

However, even if you do create the elements yourself, creating something that's identical to an object that's been popularized on another site can reflect badly on your design skills and acumen. Spending time and then presenting to your client a design that's identical in almost every way to Amazon's design will just make you look unoriginal and potentially inexperienced.

Conclusion

You need to be influenced, but not influenced to copy. Sure, that kick-ass slider might be kick-ass, but it's not yours to take. And it would just be unprofessional and morally wrong to directly copy it. The key to successful inspiration is to look at what makes the design succeed and fulfill it's purpose and why it does such a think. Once you understand how it works, you can apply similar principles to your own elements.

Inspiration: the process of being mentally stimulated to do or feel something.

The line between being inspired and blatant copying can be fairly fine. For example, a color scheme applied to a generic element might work on a site, but is using the same scheme on the same element on your design copying? I hope you get what I mean.

Where do you draw inspiration from? Share your thoughts in the comments!