Be Inspired, but Don’t Copy

There’s a thin line between inspiration and copying. We are surrounded with objects and art in our every day life. Finding inspiration for a design is an easy task these days. In this article, I will guide you through the design process of a website I recently finished. I will provide images of websites that inspired me to create a new and unique web layout.

Finding Inspiration

Finding inspiration for a design is an easy task these days. My favorite website is Designmeltdown, simply because of their well structured and categorized content. Further, there is Vandelaydesign, Faveup, Creative Tempest (not web related), to name just a few. Looking for inspiration is something to get you started!

Use More Than One Design for Inspiration

When you have found a design that you like, don’t stop there. Look further for more similar designs, in color, structure, content etc. Take the best of them all and start thinking about your new layout. When I say “thinking”, I mean try to visualize your new design with these elements that inspired you; don’t just try to recreate the same design. By the time you start drawing some mock-ups, you’ll have new ideas and will design something new and unique.

X-ray the Design

Scan only the elements that are important to you. Look for site structure if it’s similar to one you are currently working on. Watch how others may have executed similar layouts to yours. Let’s assume you found a website that looks very similar to something you’re currently working on, then try to think this way:

• They’ve put a slider in the header
• They have only two colors
• There’s a big tag line
• Search box is huge
• They spiced it up with a great Icon set
• Footer is content rich

This was an observation of an imaginary website and will be different on every other design.

Look for Details

Watch for gradients, light effects, typography, etc. Ask yourself: “What is it that makes this design so great?”

Example

Now I will guide you through the design process of a template I recently designed for Themeforest. I was inspired by several great sites and I’ll tell you which ones. Let’s take a look.

Final image Preview

This is the final image preview of the design. For a full preview, please go to the template page .

When I started to design this template, I thought about how nice it would be to create something modern, well structured, content rich, blog adaptive, and multifunctional. Then I used these sites as inspiration:

• Freelanceswitch
• Aviary
• Psdtuts+

Inspiration #1 – Freelanceswitch

The first thing I noticed about this site is the navigation. It was big, clear, and provided additional information for links. Then I saw multiple backgrounds stretching from top to bottom giving the site a more interesting look.

Inspiration

Design

Inspiration #2 – Aviary

I initially thought that I would use this site as my first reference, but I didn’t. The content slider was looking great so I thought I could try it out in my layout. Since I’ve recently designed a template with a tabbed slider, I simply took the same technique from there and implemented it here.

Inspiration

Design

Inspiration #3 – Psdtuts+

Notice the footer. It’s big and stylish. I’ve also noticed how the logo is repeated in the footer so I tried the same method – just a bit different.

Inspiration

Design

Conclusion

If you look at the overall design, you’ll notice how I implemented the inspiration I received from the sample sites. Be inspired, but don’t copy!

Which methods do you use?

• Subscribe to the ThemeForest RSS Feed for more daily web development screencasts and articles.