How to Steal Design The Right Way: On Inspiration + Iteration

 How to be creative on demand. In this post, I’ll walk you through my 5-step system for turning design inspiration fragments into a website design you love.

I have a confession to make – I sometimes steal things. Not whole things, but fragments. Sometimes I'll steal the way one font pairs with another, or the way a headline overlaps an image. This is the nature of design: being open to identifying patterns and noticing connections; to receiving design inspiration and then iterating on a single tiny idea until it forms a cohesive concept.

Steve Jobs explained creativity best when he said:

Creativity is just connecting things. When you ask creative people how they did something, they feel a little guilty because they didn't really do it, they just saw something. It seemed obvious to them after a while. That's because they were able to connect experiences they've had and synthesize new things.”

And that's what I want to try to teach you today. Because for too much of my life I believed that creativity was an innate gift that you had to be born with. I thought I didn't know how to be creative and never imagined I'd become a skilled designer. But we all have the ability to be creative and we all can cultivate an eye for design.

To make it less overwhelming (and to help you when your design inspiration is lacking), I've identified 5 steps that I use in my own design process to go from recognizing the existence of one idea to synthesizing a new one.

Step 1: Observe

Observation is the first step in most of my processes (from branding to user research) and it’s no coincidence. As an introvert, observation is one of my superpowers and it’s one of your greatest allies in the creative quest.

There are 2 types of observation: passive and active.

1. Passive observations happen all the time. Start by noticing small details that delight you. You don’t need to think about why a certain design element or sentence structure works well, you need only to screenshot it. Keep a file on your phone or computer labeled “inspiration” so that you can draw on it when necessary.

I screenshot conversations on Facebook groups, Instagram captions that I find particularly well-constructed, entire sales pages, and smaller design details that I find while wandering the world wide web.

2. Active observations happen when you have a particular project that you want to research for. For example, when I was working with a corporate client in the SaaS (software-as-a-service) space, I used active observation to screenshot a dozen different homepage banners within the SaaS market.

Step 2: Analyze

Once you’ve collected your observations, it’s time to analyze. This really is my favorite part of the process and I use 2 distinct methods for analyzing my research.

1. Isolate the idea.

By analyzing the various homepage banners that I had observed, I could easily isolate the core concepts and use them in my own design. In the screenshot below, you can see that they all follow the same idea: (A) lead with a bold statement, (B) further clarify the product’s usefulness, and (C) display a sign-up form for a free trial.

Even though these examples don’t all have the exact same structure, they’re all basically following the same formula.

2. Steal the structure

The second method of analysis is not about the concept expressed but about the way it is laid out – the structure. What is it about the layout of a page or an advertisement in a magazine that captures you? Is it about the balance between elements? The typography that overlaps the image? The asymmetry?

I’ve often copied the structure of a single row of content and then used that to inform the rest of the design. For example, the screenshot below became the creative spine of a multi-page website (can you guess which one?):

 Example of stealing the structure of a single row of a website design.

Step 3: Apply

Once you’ve either isolated the core idea of your observed inspiration pieces or you’ve mapped out the structure, it’s time to bring that into your own design. To return to the SaaS website example, I used the ABC idea formula to create the copy and design for this website:

 Here is an example of how I used design inspiration to iterate and create a unique homepage hero design for this SaaS company.

Step 4: Reflect

Though our first design attempts may feel really cathartic because we’ve gotten the creative ball moving, our best work will come after we’ve completed steps 4 and 5. In the reflection step, you want to ask yourself a series of questions to determine how well the design works in context (keeping in mind the business objectives, the target audience, and the brand’s tone).

  • Does it work in this context?
  • Have you made it your own?
  • Will it appeal to the target audience?
  • Does it meet the business objectives?
  • Is there something you could add or remove to improve it?

Step 5: Iterate

After asking your reflection questions, you’ll likely have a few design and/or copy tweaks to make. You can iterate quickly on what you’ve already designed or you can go back to the observation step and, perhaps, find another layer that you can bring in. The point is, it’s a cyclical process and you’ll need to test and tweak a few times before it feels right.

The key is to be open to the process. Creativity is just connecting ideas, after all, and so we all have the ability to be creative when it comes to our website design. We don’t have to wait for design inspiration to strike or be driven by a creative muse. We need only be observant and take note of details that we enjoy. By taking and repurposing small bits from other sites, we can create with greater ease.