Steal This Website! How to Create a Website Design Swipe File

“Good artists copy. Great artists steal.” Pablo Picasso

Sam Walton, founder of WAL MART, was famous for spending more time at his competitor’s stores than he did at his own. He would always have his trusty notebook in hand and would be quick to jot down any idea or tactic that could help improve his business.

Steve Jobs did not invent the mouse or the graphical user interface display. He saw it while taking a tour of Xerox PARC and immediately set about duplicating the innovation for Apple.

Many of the best and most successful businesses and products are not original. Rather they are variations and improvements upon an existing idea.

When it comes to designing a website, there is much to be learned from what’s already out there; identifying elements that you like and making them your own. Nothing exists in a vacuum so why reinvent the wheel when you can learn from some of the best design talent out there.

If you’re thinking of putting together a new website and are looking for inspiration for your new design we’re about to share with you the exact method we use to spot the latest trends in design.

Who to look at

The biggest mistake I see people making when searching for web design inspiration is looking too close to home. If you run a meat packing business in Cleveland, then looking at the websites of the five other meat packing businesses in Cleveland is probably not the best place to start.

Just as inbreeding among the royal families caused them to be hemophiliacs, copying your direct competitors will likely bring you the same result. A bloody mess.

Let me put this to you another way.

Imagine if you wanted to learn basketball. Would you rather learn from the local High School basketball coach, or from Michael Jordan?

Probably Michael Jordan right?

Well that’s how it is with web design.

Would you rather get design inspiration by a business with limited web traffic that generates less than a million dollars a year and had a local designer design their site for them.

Or would you rather look at a site with millions of unique visitors a month, generating 10’s of millions of dollars in revenue, designed by the most talented and in-demand designers in the world?

What’s great about web is that any website is available for you to view. You can go to Joe the plumber’s site or Apple.com just as easily.

So if you’re going to take the time to be inspired by other websites, why not go for the best.

Where to look for it

Okay, so not Joe the plumber’s site. Then where?

The first place to look is the best sites in the world. These are often tech sites but not always. Just go for some of the top brands in the world and see what they’re up to. The best sites to look at are the ones who are actually trying to sell you something. Then you know what they are doing has to work because money is on the line. Here is a look at some of my favorite sites:
https://www.apple.com/
https://www.airbnb.com/
https://squareup.com/
http://www.gv.com/
https://www.wework.com/
http://www.elledecor.com/
https://www.invisionapp.com/
http://www.coolsculpting.com/

Next, look at awards sites. Here is a list of some award sites to check out:
https://www.awwwards.com/
http://www.cssdesignawards.com/
http://www.csswinner.com/winners
https://www.thebestdesigns.com/
http://www.webaward.org/

A word of caution about awards sites. Remember that the purpose of your website is not to win an award but to generate more leads and more business. Many of the design on the awards sites are cool or high concept but in my view are probably not the design to convert visitors into leads.

What to look for

So what should you be looking for when visiting another site for inspiration? The trick is break things down into bite-size pieces and looking at the component elements of the site. Here are some things to look at:

Fonts

Fonts are the style of the text used on the page. They can have a big impact on the design of the site. If you see a particular font you like, make a note of it. If you’re a little tech savvy you can identify the font by inspecting the page to view which font it is. Otherwise, just keep a notebook with a link to that particular site and make a note that you like the font. Your web designer will be able to help you identify what it is.

Colors

Note the colors of the site you are inspecting. Do you like them? Does the site have a lot of different colors or just a few. Are the colors bold or subtle? Are the colors completely different from each other or are they all similar hues? Keep note of all of this in your notes. If there is any particular color you love you can identify it using a color picker tool, or make a note of it in your journal.

Imagery and graphics

Look at the images of the site. Are they images of people? Abstract images? Are they using video? Or does the site have few images altogether and rely more on iconography? If there are icons and graphics on the site are they line drawings or full. Is the design flat (2 dimensional) or is there texture and shadow in the design? Make a note of all of these elements and add them to your journal. You will start to see a pattern for the design style you like.

Page and site structure

Forget about design for a second and just think of the site structurally. For the homepage, look at the content how it is structured. What’s the first thing you see? What is it? Is it information about the company or it a specific product or service. What the next thing? Is it an introduction paragraph, customer logos, reviews, a list of their service offerings? Notice how each site structures its content. Are they any patterns emerging? What seems to be the most compelling pieces of content when you look at another site?

Then look at the entire site structure. What are all the pages of the site? How many pages are there? Does the site have dropdown menus? What is the call to action page? Where are visitors being directed? How many layers does the site architecture have? How many clicks away is it to access any portion of content on the site?

Functional elements

Does the site do anything cool? Are there fun animation effects? Subtle button hover effects or transition effects that you would like to emulate? Make a note of it in your journal. You could write something like, ‘I really like the way the buttons move on the services page of this site’ This will help a lot when talking to your web designer.

How to look for it

So now that you know what to look for and where to look for it, how should you gather all of this information?

Here are three great tools I would recommend:

Evernote

Evernote is like having an external hard drive for your brain. It’s totally free to use and there is a desktop, web and mobile version that all sync with each other. You can clip any element of a website you like and add it to Evernote. Just create a separate folder or tag labeled ‘web design’ and add all of your website design inspiration there. Then when you’re ready to talk to a web designer you will have all of your notes neatly organized within Evernote.

Pinterest

Another great site to use is Pinterest. You can create a private board where you collect all of the web design elements you like. Then just pin everything you want to save into your private board.

Browser Bookmark

What I do for the most part is just save the sites I like to my browser bookmark. I have separate bookmark called ‘design’ and when I see a website design I like, I just bookmark that page and save it to my ‘design’ folder. Then I can go back and look through those sites whenever I am in need of inspiration.

Conclusion

There you have. Everything you need to Steal Like an Artist and create your very own swipe file for your next web design project.

Once you have your notes together then be sure and get in contact with us to learn more about our Free Mockup Offer and see if we are the right fit for each other.