Closing the creative gap

Kathleen Warner

Kathleen Warner

@kathleen_warner

If you find yourself looking at products and thinking “how the hell do I design something as good as that”, then this is for you. You can take comfort in knowing that the designers who made whatever it is you’re drooling over also had to figure out how to close this gap of recognizing good design and producing good design. I’m going to walk you through a creative model that you can use to improve your design eye and level up your skills. You can apply these steps to any discipline, but for this lesson, we’re focusing on user interface design. The four steps to closing the creative gap are: 1. Active observation — study the design within the apps you use. 2. Deconstruction — isolate layers to understand the detail of each component. 3. Imitation — recreate designs to internalize design decisions. 4. Creation — produce new original work that is informed and influenced by the previous steps. Each step takes you deeper into your craft. No matter what type of creator you are, following these four steps will help you pull back the curtain on design choices.

  1. Step 1: Active Observation - Read How to Develop an Eye for Design

    You develop your design eye by thinking as if you were the designer of a product. Don’t just use apps passively; study them. For further study, check out designs on pttrns.com or open one of your favorite apps and put yourself in the designer’s shoes. Be curious about everything you see and think through the choices that had to be made for this product. What information is highlighted? What is the hierarchy of this information? What content isn’t visible? What language did they choose for this experience?

  2. Step 2: Deconstruction - Analyze the iOS interface components

    Download the Sketch file of the latest iPhone interface components. Analyze the layers that comprise each view. For example, when you’re looking at the App Store view. You could specifically analyze the text treatment. What is the text size, weight, character spacing, color? When is all caps used versus camelcase? Are there cases where the text has reduced opacity? You’ll start to notice patterns and see how these components fit into a scaleable system.

  3. Step 3: Imitation - Watch “Steal This Talk”

    In this video, Wilson Miner talks about the ways creators have copied from each other and the sometimes blurred line between appropriation and influence. He gives the example of Bob Dylan copying everything from Woody Guthrie — his style, his sound, the way he talked. Critics called him a thief, but he kept going and brought in other influences along the way. Bob Dylan wasn’t alone in imitating others, though not all imitations are as obvious in influence. Hunter Thompson, author of *Fear and Loathing in Las Vegas*, would transcribe entire Hemingway books because he said he wanted to feel what it would be like to write something that great. Similarly, Judd Apatow would write down the scripts of SNL sketches to improve his script writing. If you see things you love, imitate it and figure out why you love it. Let yourself learn from the masters of your craft.

  4. Step 4: Creation - Watch “The Gap”

    Ira Glass talks about how he closed the creative gap by generating large volumes of work until the work he produced matched the ambition he chased. The previous steps should help accelerate the work you’re producing. Stephen King has said that “imitation precedes creation”, so imitate and create as much as you possibly can. Focus on quantity over quality, and know that you won’t love everything you make…and that’s okay! All of the masters had to iterate their way to greatness. Hemingway wrote 47 different versions of the ending to *A Farewell of Arms*. Michael Jackson wrote 100 songs per album. Picasso created an estimated 50,000 works of art. Embrace the creative gap. We all go through it, so enjoy the journey 🙂