<commit_before><?php require($_SERVER["DOCUMENT_ROOT"]."/-/_inc/functions.php"); echo "\n"; ?>
<?php require($_SERVER["DOCUMENT_ROOT"]."/-/_inc/doctype.php"); echo "\n"; ?>
<head>    
    <title>&ldquo;Stealing Your Way to Original Designs,&rdquo; an article by <NAME></title>
    <?php require($_SERVER["DOCUMENT_ROOT"]."/-/_inc/meta.php"); echo "\n"; ?> 
    <?php require($_SERVER["DOCUMENT_ROOT"]."/-/_inc/cssReference.php"); echo "\n"; ?>

    <!-- Thanks Jeremy! https://adactio.com/journal/9881  -->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@danmall" />
    <meta name="twitter:url" property="og:url" content="<?php echo 'http://'. $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; ?>" />
    <meta name="twitter:title" property="og:title" content="Stealing Your Way to Original Designs" />
    <meta name="twitter:description" property="og:description" content="There&rsquo;s nothing new under the sun." />
    <meta name="twitter:image" property="og:image" content="<?php echo 'http://'. $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; ?>thumb.png" />

    <style type="text/css">

        .dm-u-background--gray {
            background: #f0f0f0;
        }

    </style>
    
</head>


<body class="dm-page--articleDetail">
    <!--[if lt IE 7]>
        <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
    <![endif]-->

    <script>
        document.write('<div class="dm-js-pageShield"></div>');
    </script>

    <?php require($_SERVER["DOCUMENT_ROOT"]."/-/_inc/header.php"); echo "\n"; ?>

    <header class="dm-c-pageHeader" role="banner">

        <h1 class="dm-c-pageHeader_title">
            Stealing Your Way to Original Designs
        </h1>

        <h2 class="dm-c-pageHeader_date">July 3, 2017 at 6:01 <abbr title="<NAME>">AM</abbr></h2>

    </header><!-- .page-header -->

    <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1696&amp;serve=CVYD42T&amp;placement=danielmallcom" id="_carbonads_js"></script>

    <main role="main">

        <div class="dm-dp-textPassage dm-c-articleWell">

            <p><span class="dm-dp-openingLines">I have a framework</span> that I find very helpful in teaching <a href="http://superfriend.ly/academy/">my apprentices</a> how to design. It&rsquo;s 3 steps:</p>

            <ol>
                <li><a href="#imitate">Imitate</a></li>
                <li><a href="#remix">Remix</a></li>
                <li><a href="#invent">Invent</a></li>
            </ol>

            <p>Here are the details.</p>

            <h2 id="imitate">1. Imitate <a class="dm-dp-anchorLink" href="#imitate">#</a></h2>

            <p>The first step to being just a competent designer—or a competent anything, for that matter—is doing what someone else can do. It&rsquo;s a test: can you follow directions? Except, instead of following directions you read or hear, you follow directions that you see. </p>

            <p>It&rsquo;s no coincidence that junior designers often get trained up by doing production work after an art director has set an art direction. If the art director makes the main headline 48px bold Helvetica with 16px of margin on each side, do you do the same on every screen you design? Sounds simple, but many junior designers struggle to even get this down. Why? Many want to be chefs but aren&rsquo;t willing to be line cooks first. It&rsquo;s not glamorous work, but it builds design muscles, muscles that you&rsquo;ll need in order to get better and advance to the next step. </p>

            <p>Think of it like learning to draw by tracing. In fact, it’s literally the same thing. The first few assignments of my designers&rsquo; apprenticeships are taking screenshots of existing websites, pasting them into Sketch or Photoshop, dropping the opacity and locking the layer, and tracing over it to produce the same layout, colors, illustrations, typography, and everything else needed to reproduce the site pixel for pixel.</p>

            <p>In his article <cite><a href="https://www.smashingmagazine.com/2017/02/improving-ui-design-skills-copywork/">Copy If You Can: Improving Your UI Design Skills With Copywork</a></cite>, <NAME> extols the virtues of copywork as a great way to practice and hone <abbr title="User Interface">UI</abbr> design skills. Even more, it gets you out of going to your usual bag of tricks and instead gives you new ones to add.</p>

            <blockquote>
                <p>Done right, copywork exposes you to design decisions you simply wouldn&rsquo;t have made on your own.</p>
                <address><NAME></address>
            </blockquote> 

            

            <p>Whether new to design or a seasoned creative director, this simple exercise will get you warmed up, like stretching before a long run.</p>

            <h2 id="remix">2. Remix <a class="dm-dp-anchorLink" href="#remix">#</a></h2>

            <p>Once you can confidently imitate any style you come across, you can start to tweak the elements to feel more custom to the way you need to use it. This step has the least parameters and needs the least guidelines, because it&rsquo;s up to your imagination and the amount of changes you&rsquo;re willing to try.</p>

            <p>I&rsquo;m a firm believer in the idea that <a href="https://www.biblegateway.com/passage/?search=Ecclesiastes%201:9">there&rsquo;s nothing new under the sun</a>. Said differently, <a href="http://everythingisaremix.info/watch-the-series/">everything is a remix</a>. Freed from the pressure that all things designers do need to be original works of art, I can instead focus my efforts on what sources to combine in a unique way that my audience is less accustomed to.</p>

            <h2 id="invent">3: Invent <a class="dm-dp-anchorLink" href="#invent">#</a></h2>

            <p><NAME> is well known for his original Cubist work, but most people don&rsquo;t know that he was an excellent classical artist first. He could draw and paint photorealism as well as any of the great masters, but it wasn&rsquo;t until he got that down that he ventured into his own unknown stylistic territory.</p>

            <p>In his Wall Street Journal article, <cite><a href="https://www.wsj.com/articles/SB10001424052748703989304575503730101860838">The Genius of the Tinkerer</a></cite>, author <NAME> describes a concept he calls <em>the adjacent possible</em>. He tells the story of a young orthopedic surgeon who, while diving in the Great Barrier Reef, observes a species of coral that seem to be able to heal itself as it breaks. Years later, while operating on a patient, he recalls this coral and its amazing bonding powers. Several years and patents later, his method is the leading way that orthopedic surgeons around the world help their patients mend their broken bones.</p>

            <p>The adjacent possible is about taking two seemingly unconnected ideas and metaphorically placing them next to each other to see how they might work together. Clients often hire me to invent unique and original art directions for them. I can deliver on this by using the adjacent possible to steal my way to something original.</p>

            <blockquote>
                <p>The strange and beautiful truth about the adjacent possible is that its boundaries grow as you explore them. Each new combination opens up the possibility of other new combinations.</p>
                <address><NAME></address>
            </blockquote>

            <p>Let&rsquo;s look at how this works in practice. </p>

            <section class="dm-dp-asteriskSplit">

                <p>Say SpaceZzzz&trade; hired me to create a site to advertise a new service they&rsquo;re offering: rental properties on different planets. They&rsquo;d get you there, you stay as long as you&rsquo;d like, and they&rsquo;ll get you back. Think <a href="https://www.uber.com/">Uber</a> meets <a href="https://www.airbnb.com/">Airbnb</a> meets <a href="http://www.imdb.com/title/tt0816692/">Interstellar</a>. </p>

                <p>The first thing I&rsquo;ll do is make a list of all of the types of content I&rsquo;ll need on the homepage. After talking to stakeholders and potential users in the target market, perhaps I&rsquo;d arrive at 5 different sections:</p>

                <ol>
                    <li>An elevator pitch about the new service </li>
                    <li>A featured destination (or a few features)</li>
                    <li>Some details about what people may be anxious about, like long travel or planetary accommodations </li>
                    <li>Price </li>
                    <li>Contact details </li>
                </ol>

                <p>To start, I&rsquo;ll block out these main sections with a few <a href="http://v3.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php">gray boxes</a>.</p>

            </section>

        </div>


        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <a href="gray-boxes.png"><img src="gray-boxes.png" alt="Gray boxes for page sections" /></a>
           
        </div><!-- .dm-c-articleImage -->


        <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

                <p>Next, I&rsquo;ll start to choose a few reference sources to imitate. This is key:  be sure to choose sources far away from what you&rsquo;re designing. If you&rsquo;re designing a bank site, don&rsquo;t choose another bank site as reference, especially within the same competitive set. Since we may be modeling this after Airbnb, using Airbnb as a reference is probably too close to feel original. One trick I often use is to start smaller. Rather than try to use a whole page as a reference, I&rsquo;ll pick a few different designs to source different elements from.</p>

        </div>

        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <div class="dm-l-col--50 dm-u-paddingRight--l">

                <figure class="dm-u-marginBottom--l">
                    <a href="https://dribbble.com/shots/3537649-Singular-Redesign-Saas-Analytics"><img src="01.png" alt="" /></a>
                    <figcaption class="dm-u-text--s dm-u-fontStyle--italic">Singular Redesign, by <NAME></figcaption>
                </figure>

                <figure class="dm-u-marginBottom--l">
                    <a href="https://dribbble.com/shots/3537649-Singular-Redesign-Saas-Analytics"><img src="03.png" alt="" /></a>
                    <figcaption class="dm-u-text--s dm-u-fontStyle--italic">50/50 Climate Project</figcaption>
                </figure>

            </div>

            <div class="dm-l-col--50 dm-u-paddingRight--l">

                <figure class="dm-u-marginBottom--l">
                    <a href="https://dribbble.com/shots/3574750-Wallpapers-Full-Preview"><img src="02b.jpeg" alt="" /></a>
                    <figcaption class="dm-u-text--s dm-u-fontStyle--italic">Wallpapers Full Preview, by <NAME></figcaption>
                </figure>

                <figure class="dm-u-marginBottom--l">
                    <a href="https://www.safaribooksonline.com/pricing/"><img src="04.jpeg" alt="" /></a>
                    <figcaption class="dm-u-text--s dm-u-fontStyle--italic">Safari Books Online Pricing Page</figcaption>
                </figure>

                <figure class="dm-u-marginBottom--l">
                    <a href="https://themeforest.net/item/agora-ecommerce-psd-template/16064646"><img src="05.jpeg" alt="" /></a>
                    <figcaption class="dm-u-text--s dm-u-fontStyle--italic">Agora eCommerce PSD Template on themeforest</figcaption>
                </figure>                

            </div>
           
        </div><!-- .dm-c-articleImage -->


        <div class="dm-dp-textPassage dm-c-articleWell">

            <p>I&rsquo;ll stub out each section by simply copying and pasting from my source material into my gray box document. (I&rsquo;m using Photoshop for this example because it&rsquo;s where I&rsquo;m fastest, but you can use any design app you prefer.) This sets me up with something to imitate and remix.</p>

        </div>


        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <a href="stub.png"><img src="stub.png" alt="Stubbing out sections using sample" /></a>
           
        </div><!-- .dm-c-articleImage -->


        <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

            <img src="witness.jpg" style="margin-left: auto; margin-right: auto;" alt="" />

            <p>Next, I&rsquo;ll trace over my stubbed-out version with simple shapes to get a feel for how it could work together. I&rsquo;ll also start to remix a bit by choosing some new colors. I own this Nike Witness shirt and thought these colors would work well for this subject matter.</p>

        </div>


        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <a href="blocked-out.png"><img src="blocked-out.png" alt="Tracing over stubbed-out version" /></a>
           
        </div><!-- .dm-c-articleImage -->



        <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

            <p>Now I&rsquo;ll fill in some text content by tracing over the text of the original stubs, but trying to unify them by remixing them with the same typeface. I decide on <a href="https://fonts.google.com/specimen/PT+Sans">PT Sans</a> and <a href="https://fonts.google.com/specimen/PT+Mono">PT Mono</a> and use this stage to start working out some sizing of headlines and body copy to rough out my typographic hierarchy.</p>

        </div>


        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <a href="filled-in.png"><img src="filled-in.png" alt="Filling in text content" /></a>
           
        </div><!-- .dm-c-articleImage -->


        <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

            <p>Now that I have a good approximation of all my content, I&rsquo;ll start to draw a grid so I can organize that content appropriately. My approach to grids has always been to <a href="http://www.markboulton.co.uk/journal/a-richer-canvas">start with content</a> and use the least amount of columns possible. Looking at the Locations section, that&rsquo;s a pretty good candidate for 4 equal-width columns, so I&rsquo;ll start there.</p>

            <p>However, as I look at the top hero and <abbr title="Frequently Asked Questions">FAQ</abbr> areas, I realize that some of those headings need to start in the middle of a column, so I&rsquo;ll split the 4-column grid into 8 columns instead.</p>

            <p>I&rsquo;ve written about using an <a href="https://spec.fm/specifics/8-pt-grid">8-point grid</a> <a href="/articles/cooking-with-design-systems/">before</a>&mdash;which I&rsquo;m using increasingly more in my own work&mdash;so all my spacings and type sizes here are a multiple of 8.</p>

        </div>


        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <div class="dm-l-col--50 dm-u-paddingRight--l">

                <figure class="dm-u-marginBottom--l">
                    <a href="grid4.png"><img src="grid4.png" alt="" /></a>
                    <figcaption class="dm-u-text--s dm-u-fontStyle--italic">A 4-column grid</figcaption>
                </figure>

            </div>

            <div class="dm-l-col--50 dm-u-paddingRight--l">

                <figure class="dm-u-marginBottom--l">
                    <a href="grid8.png"><img src="grid8.png" alt="" /></a>
                    <figcaption class="dm-u-text--s dm-u-fontStyle--italic">An 8-column grid</figcaption>
                </figure>        

            </div>
           
        </div><!-- .dm-c-articleImage -->

        <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

            <p>That 8-column grid is looking pretty good everywhere except for the Pricing table. That section contains 5 specific areas:</p>

            <ol>
                <li>Features</li>
                <li>Basic</li>
                <li>Pro</li>
                <li>Teams</li>
                <li>Corporate</li>
            </ol>

            <p>5 sections over 8 columns doesn&rsquo;t divide evenly, so I&rsquo;ll need another split. By subdividing into 16 columns, that&rsquo;ll let me do a 4-column feature listing and 3 columns for each of the plans. 16 columns it is.</p>

        </div>


        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <div class="dm-l-col--50 dm-u-paddingRight--l">

                <figure class="dm-u-marginBottom--l">
                    <a href="grid16.png"><img src="grid16.png" alt="" /></a>
                    <figcaption class="dm-u-text--s dm-u-fontStyle--italic">A 16-column grid</figcaption>
                </figure>

            </div>

            <div class="dm-l-col--50 dm-u-paddingRight--l">

                <figure class="dm-u-marginBottom--l">
                    <a href="grid16-realigned.png"><img src="grid16-realigned.png" alt="" /></a>
                    <figcaption class="dm-u-text--s dm-u-fontStyle--italic">All content realigned to the new 16-column grid</figcaption>
                </figure>        

            </div>
           
        </div><!-- .dm-c-articleImage -->


        <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

            <p id="fn1-source">I&rsquo;m ready to start inserting more of my content into this shell, specifically my own copy and artwork <sup><a href="#fn1">1</a></sup> . The key to stealing in a way that leads to something original is that your result needs to be unrecognizable from the source material as much as possible. Take the hero unit for example.</p>

        </div>


        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <a href="hero1.png"><img src="hero1.png" alt="Hero unit" /></a>
           
        </div><!-- .dm-c-articleImage -->


        <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

            <p>It&rsquo;s easy to compare this to the original source and tell where it came from. Flipping the orientation of elements is a really useful way to to get around that. Let&rsquo;s move the main headline and the call to action to the opposite side of the screen.</p>

        </div>

        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <a href="hero2-flip.png"><img src="hero2-flip.png" alt="Hero unit flipped" /></a>
           
        </div><!-- .dm-c-articleImage -->


        <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

            <p>Let&rsquo;s add our own artwork.</p>

        </div>

        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <a href="hero3-artwork.png"><img src="hero3-artwork.png" alt="Hero unit with artwork" /></a>
           
        </div><!-- .dm-c-articleImage -->


         <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

            <p>The artwork goes a long way into making this feel original, but there&rsquo;s still one more thing we need to do. That notched-out call to action is such a unique piece that it&rsquo;s become signature to the original source. It still feels like someone could identify the source from that element.</p>

            <p>Instead of notching it out, let&rsquo;s do a colorblocked overlap call-to-action. Once I do that, I realize the opportunity to mirror that visual language on the top left with the logo. Given that the original source is so flat, I&rsquo;ll add a subtle drop shadow to give those elements some depth.</p>

            <p>You can see that, with just a few moves, I&rsquo;ve moved this away from an interface I&rsquo;ve stolen to something that feels way more original.</p>

        </div>

        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <a href="hero4-overlap.png"><img src="hero4-overlap.png" alt="Hero unit with overlapped button and logo" /></a>
           
        </div><!-- .dm-c-articleImage -->


        <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

            <p>If I take that approach to each element of this page&mdash;just a few moves each to distinguish it from its original source&mdash;I can easily go from a design I&rsquo;ve stolen to an original version I&rsquo;ve invented on my own.</p>

        </div>

        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <a href="invent.png"><img src="invent.png" alt="Invented comp" /></a>
           
        </div><!-- .dm-c-articleImage -->


        <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

            <p>And lastly, a side-by-side comparison for effect.</p>

        </div>

        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <div class="dm-l-col--50 dm-u-paddingRight--l">

                <figure class="dm-u-marginBottom--l">
                    <a href="stub.png"><img src="stub.png" alt="" /></a>
                    <figcaption class="dm-u-text--s dm-u-fontStyle--italic">The original stubbed out sources</figcaption>
                </figure>        

            </div>

            <div class="dm-l-col--50 dm-u-paddingRight--l">

                <figure class="dm-u-marginBottom--l">
                    <a href="invent.png"><img src="invent.png" alt="" /></a>
                    <figcaption class="dm-u-text--s dm-u-fontStyle--italic">The final invention</figcaption>
                </figure>

            </div>
           
        </div><!-- .dm-c-articleImage -->


        <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

            <p>I hope this was a useful primer in showing you how to steal you way to an original design. In the words of English philosopher <abbr>C.E.M.</abbr> Joad, &ldquo;Creativity is knowing how to hide your sources.&rdquo; The more obscure your references, the more more sources you combine, the more moves away from the original you can take, the more original your design will become.</p>

            <p>For those that want to dissect the final source file in more detail, you can <a href="spaceZzzz.psd.zip">download the <abbr title="Photoshop Document">PSD</abbr> (51.2MB) here</a>.</p>

            <p>Good luck with your stealing!</p>

            <footer class="dm-c-articleWell_footer dm-dp-sepChunk">
                <ol class="dm-c-footnotes">
                    <li id="fn1">The wonderful artwork in this comp was graciously borrowed from artists publishing their work on the web. Credits: <a href="https://www.nasa.gov/mission_pages/shuttle/shuttlemissions/sts122/multimedia/rollout/index.html">NASA STS-122 Rollout</a>, <a href="https://www.pinterest.com/pin/AaxAk5hKXolZVKy7QqcpUNMlh6Unnst_gQdWUSyXLZDgog2BGskQ5OE/">Space/The Beast Below</a>, <a href="http://josephbiwald.deviantart.com/art/Kasai-500924393">Kasai</a> by JosephBiwald, <a href="http://conceptships.blogspot.ca/2015/07/boxxx-3w-by-beeple.html">BOXXX-3W</a> by beeple, <a href="http://retro-futurism.livejournal.com/729408.html">Pioneers Again</a> by <NAME>, and <a href="http://pixelschumi.cgsociety.org/art/waterfall-cinema-station-4d-matte-photoshop-painting-vue-stations-1119577">Waterfall Stations</a> by Christian Schumann.</li>
                </ol>                
            </footer>

        </div>


        <div class="dm-c-articleWell">

            <section id="up-next" class="dm-c-upNext">

                <h1 class="dm-c-upNext_kicker">Up Next</h1>

                <h2 class="dm-c-upNext_title">
                    <a href="/articles/design-systems-pilots-scorecards/">
                        Design Systems: Pilots &amp; <span class="dm-c-upNext_title_lastWord">Scorecards</span>
                    </a>
                </h2>

            </section><!-- .dm-c-upNext --><commit_msg>Double more typo in Stealing article<commit_after><?php require($_SERVER["DOCUMENT_ROOT"]."/-/_inc/functions.php"); echo "\n"; ?>
<?php require($_SERVER["DOCUMENT_ROOT"]."/-/_inc/doctype.php"); echo "\n"; ?>
<head>    
    <title>&ldquo;Stealing Your Way to Original Designs,&rdquo; an article by <NAME></title>
    <?php require($_SERVER["DOCUMENT_ROOT"]."/-/_inc/meta.php"); echo "\n"; ?> 
    <?php require($_SERVER["DOCUMENT_ROOT"]."/-/_inc/cssReference.php"); echo "\n"; ?>

    <!-- Thanks Jeremy! https://adactio.com/journal/9881  -->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@danmall" />
    <meta name="twitter:url" property="og:url" content="<?php echo 'http://'. $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; ?>" />
    <meta name="twitter:title" property="og:title" content="Stealing Your Way to Original Designs" />
    <meta name="twitter:description" property="og:description" content="There&rsquo;s nothing new under the sun." />
    <meta name="twitter:image" property="og:image" content="<?php echo 'http://'. $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; ?>thumb.png" />

    <style type="text/css">

        .dm-u-background--gray {
            background: #f0f0f0;
        }

    </style>
    
</head>


<body class="dm-page--articleDetail">
    <!--[if lt IE 7]>
        <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
    <![endif]-->

    <script>
        document.write('<div class="dm-js-pageShield"></div>');
    </script>

    <?php require($_SERVER["DOCUMENT_ROOT"]."/-/_inc/header.php"); echo "\n"; ?>

    <header class="dm-c-pageHeader" role="banner">

        <h1 class="dm-c-pageHeader_title">
            Stealing Your Way to Original Designs
        </h1>

        <h2 class="dm-c-pageHeader_date">July 3, 2017 at 6:01 <abbr title="<NAME>">AM</abbr></h2>

    </header><!-- .page-header -->

    <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1696&amp;serve=CVYD42T&amp;placement=danielmallcom" id="_carbonads_js"></script>

    <main role="main">

        <div class="dm-dp-textPassage dm-c-articleWell">

            <p><span class="dm-dp-openingLines">I have a framework</span> that I find very helpful in teaching <a href="http://superfriend.ly/academy/">my apprentices</a> how to design. It&rsquo;s 3 steps:</p>

            <ol>
                <li><a href="#imitate">Imitate</a></li>
                <li><a href="#remix">Remix</a></li>
                <li><a href="#invent">Invent</a></li>
            </ol>

            <p>Here are the details.</p>

            <h2 id="imitate">1. Imitate <a class="dm-dp-anchorLink" href="#imitate">#</a></h2>

            <p>The first step to being just a competent designer—or a competent anything, for that matter—is doing what someone else can do. It&rsquo;s a test: can you follow directions? Except, instead of following directions you read or hear, you follow directions that you see. </p>

            <p>It&rsquo;s no coincidence that junior designers often get trained up by doing production work after an art director has set an art direction. If the art director makes the main headline 48px bold Helvetica with 16px of margin on each side, do you do the same on every screen you design? Sounds simple, but many junior designers struggle to even get this down. Why? Many want to be chefs but aren&rsquo;t willing to be line cooks first. It&rsquo;s not glamorous work, but it builds design muscles, muscles that you&rsquo;ll need in order to get better and advance to the next step. </p>

            <p>Think of it like learning to draw by tracing. In fact, it’s literally the same thing. The first few assignments of my designers&rsquo; apprenticeships are taking screenshots of existing websites, pasting them into Sketch or Photoshop, dropping the opacity and locking the layer, and tracing over it to produce the same layout, colors, illustrations, typography, and everything else needed to reproduce the site pixel for pixel.</p>

            <p>In his article <cite><a href="https://www.smashingmagazine.com/2017/02/improving-ui-design-skills-copywork/">Copy If You Can: Improving Your UI Design Skills With Copywork</a></cite>, <NAME> extols the virtues of copywork as a great way to practice and hone <abbr title="User Interface">UI</abbr> design skills. Even more, it gets you out of going to your usual bag of tricks and instead gives you new ones to add.</p>

            <blockquote>
                <p>Done right, copywork exposes you to design decisions you simply wouldn&rsquo;t have made on your own.</p>
                <address><NAME></address>
            </blockquote> 

            

            <p>Whether new to design or a seasoned creative director, this simple exercise will get you warmed up, like stretching before a long run.</p>

            <h2 id="remix">2. Remix <a class="dm-dp-anchorLink" href="#remix">#</a></h2>

            <p>Once you can confidently imitate any style you come across, you can start to tweak the elements to feel more custom to the way you need to use it. This step has the least parameters and needs the least guidelines, because it&rsquo;s up to your imagination and the amount of changes you&rsquo;re willing to try.</p>

            <p>I&rsquo;m a firm believer in the idea that <a href="https://www.biblegateway.com/passage/?search=Ecclesiastes%201:9">there&rsquo;s nothing new under the sun</a>. Said differently, <a href="http://everythingisaremix.info/watch-the-series/">everything is a remix</a>. Freed from the pressure that all things designers do need to be original works of art, I can instead focus my efforts on what sources to combine in a unique way that my audience is less accustomed to.</p>

            <h2 id="invent">3: Invent <a class="dm-dp-anchorLink" href="#invent">#</a></h2>

            <p><NAME> is well known for his original Cubist work, but most people don&rsquo;t know that he was an excellent classical artist first. He could draw and paint photorealism as well as any of the great masters, but it wasn&rsquo;t until he got that down that he ventured into his own unknown stylistic territory.</p>

            <p>In his Wall Street Journal article, <cite><a href="https://www.wsj.com/articles/SB10001424052748703989304575503730101860838">The Genius of the Tinkerer</a></cite>, author <NAME> describes a concept he calls <em>the adjacent possible</em>. He tells the story of a young orthopedic surgeon who, while diving in the Great Barrier Reef, observes a species of coral that seem to be able to heal itself as it breaks. Years later, while operating on a patient, he recalls this coral and its amazing bonding powers. Several years and patents later, his method is the leading way that orthopedic surgeons around the world help their patients mend their broken bones.</p>

            <p>The adjacent possible is about taking two seemingly unconnected ideas and metaphorically placing them next to each other to see how they might work together. Clients often hire me to invent unique and original art directions for them. I can deliver on this by using the adjacent possible to steal my way to something original.</p>

            <blockquote>
                <p>The strange and beautiful truth about the adjacent possible is that its boundaries grow as you explore them. Each new combination opens up the possibility of other new combinations.</p>
                <address><NAME></address>
            </blockquote>

            <p>Let&rsquo;s look at how this works in practice. </p>

            <section class="dm-dp-asteriskSplit">

                <p>Say SpaceZzzz&trade; hired me to create a site to advertise a new service they&rsquo;re offering: rental properties on different planets. They&rsquo;d get you there, you stay as long as you&rsquo;d like, and they&rsquo;ll get you back. Think <a href="https://www.uber.com/">Uber</a> meets <a href="https://www.airbnb.com/">Airbnb</a> meets <a href="http://www.imdb.com/title/tt0816692/">Interstellar</a>. </p>

                <p>The first thing I&rsquo;ll do is make a list of all of the types of content I&rsquo;ll need on the homepage. After talking to stakeholders and potential users in the target market, perhaps I&rsquo;d arrive at 5 different sections:</p>

                <ol>
                    <li>An elevator pitch about the new service </li>
                    <li>A featured destination (or a few features)</li>
                    <li>Some details about what people may be anxious about, like long travel or planetary accommodations </li>
                    <li>Price </li>
                    <li>Contact details </li>
                </ol>

                <p>To start, I&rsquo;ll block out these main sections with a few <a href="http://v3.jasonsantamaria.com/archive/2004/05/24/grey_box_method.php">gray boxes</a>.</p>

            </section>

        </div>


        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <a href="gray-boxes.png"><img src="gray-boxes.png" alt="Gray boxes for page sections" /></a>
           
        </div><!-- .dm-c-articleImage -->


        <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

                <p>Next, I&rsquo;ll start to choose a few reference sources to imitate. This is key:  be sure to choose sources far away from what you&rsquo;re designing. If you&rsquo;re designing a bank site, don&rsquo;t choose another bank site as reference, especially within the same competitive set. Since we may be modeling this after Airbnb, using Airbnb as a reference is probably too close to feel original. One trick I often use is to start smaller. Rather than try to use a whole page as a reference, I&rsquo;ll pick a few different designs to source different elements from.</p>

        </div>

        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <div class="dm-l-col--50 dm-u-paddingRight--l">

                <figure class="dm-u-marginBottom--l">
                    <a href="https://dribbble.com/shots/3537649-Singular-Redesign-Saas-Analytics"><img src="01.png" alt="" /></a>
                    <figcaption class="dm-u-text--s dm-u-fontStyle--italic">Singular Redesign, by <NAME></figcaption>
                </figure>

                <figure class="dm-u-marginBottom--l">
                    <a href="https://dribbble.com/shots/3537649-Singular-Redesign-Saas-Analytics"><img src="03.png" alt="" /></a>
                    <figcaption class="dm-u-text--s dm-u-fontStyle--italic">50/50 Climate Project</figcaption>
                </figure>

            </div>

            <div class="dm-l-col--50 dm-u-paddingRight--l">

                <figure class="dm-u-marginBottom--l">
                    <a href="https://dribbble.com/shots/3574750-Wallpapers-Full-Preview"><img src="02b.jpeg" alt="" /></a>
                    <figcaption class="dm-u-text--s dm-u-fontStyle--italic">Wallpapers Full Preview, by <NAME></figcaption>
                </figure>

                <figure class="dm-u-marginBottom--l">
                    <a href="https://www.safaribooksonline.com/pricing/"><img src="04.jpeg" alt="" /></a>
                    <figcaption class="dm-u-text--s dm-u-fontStyle--italic">Safari Books Online Pricing Page</figcaption>
                </figure>

                <figure class="dm-u-marginBottom--l">
                    <a href="https://themeforest.net/item/agora-ecommerce-psd-template/16064646"><img src="05.jpeg" alt="" /></a>
                    <figcaption class="dm-u-text--s dm-u-fontStyle--italic">Agora eCommerce PSD Template on themeforest</figcaption>
                </figure>                

            </div>
           
        </div><!-- .dm-c-articleImage -->


        <div class="dm-dp-textPassage dm-c-articleWell">

            <p>I&rsquo;ll stub out each section by simply copying and pasting from my source material into my gray box document. (I&rsquo;m using Photoshop for this example because it&rsquo;s where I&rsquo;m fastest, but you can use any design app you prefer.) This sets me up with something to imitate and remix.</p>

        </div>


        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <a href="stub.png"><img src="stub.png" alt="Stubbing out sections using sample" /></a>
           
        </div><!-- .dm-c-articleImage -->


        <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

            <img src="witness.jpg" style="margin-left: auto; margin-right: auto;" alt="" />

            <p>Next, I&rsquo;ll trace over my stubbed-out version with simple shapes to get a feel for how it could work together. I&rsquo;ll also start to remix a bit by choosing some new colors. I own this Nike Witness shirt and thought these colors would work well for this subject matter.</p>

        </div>


        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <a href="blocked-out.png"><img src="blocked-out.png" alt="Tracing over stubbed-out version" /></a>
           
        </div><!-- .dm-c-articleImage -->



        <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

            <p>Now I&rsquo;ll fill in some text content by tracing over the text of the original stubs, but trying to unify them by remixing them with the same typeface. I decide on <a href="https://fonts.google.com/specimen/PT+Sans">PT Sans</a> and <a href="https://fonts.google.com/specimen/PT+Mono">PT Mono</a> and use this stage to start working out some sizing of headlines and body copy to rough out my typographic hierarchy.</p>

        </div>


        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <a href="filled-in.png"><img src="filled-in.png" alt="Filling in text content" /></a>
           
        </div><!-- .dm-c-articleImage -->


        <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

            <p>Now that I have a good approximation of all my content, I&rsquo;ll start to draw a grid so I can organize that content appropriately. My approach to grids has always been to <a href="http://www.markboulton.co.uk/journal/a-richer-canvas">start with content</a> and use the least amount of columns possible. Looking at the Locations section, that&rsquo;s a pretty good candidate for 4 equal-width columns, so I&rsquo;ll start there.</p>

            <p>However, as I look at the top hero and <abbr title="Frequently Asked Questions">FAQ</abbr> areas, I realize that some of those headings need to start in the middle of a column, so I&rsquo;ll split the 4-column grid into 8 columns instead.</p>

            <p>I&rsquo;ve written about using an <a href="https://spec.fm/specifics/8-pt-grid">8-point grid</a> <a href="/articles/cooking-with-design-systems/">before</a>&mdash;which I&rsquo;m using increasingly more in my own work&mdash;so all my spacings and type sizes here are a multiple of 8.</p>

        </div>


        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <div class="dm-l-col--50 dm-u-paddingRight--l">

                <figure class="dm-u-marginBottom--l">
                    <a href="grid4.png"><img src="grid4.png" alt="" /></a>
                    <figcaption class="dm-u-text--s dm-u-fontStyle--italic">A 4-column grid</figcaption>
                </figure>

            </div>

            <div class="dm-l-col--50 dm-u-paddingRight--l">

                <figure class="dm-u-marginBottom--l">
                    <a href="grid8.png"><img src="grid8.png" alt="" /></a>
                    <figcaption class="dm-u-text--s dm-u-fontStyle--italic">An 8-column grid</figcaption>
                </figure>        

            </div>
           
        </div><!-- .dm-c-articleImage -->

        <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

            <p>That 8-column grid is looking pretty good everywhere except for the Pricing table. That section contains 5 specific areas:</p>

            <ol>
                <li>Features</li>
                <li>Basic</li>
                <li>Pro</li>
                <li>Teams</li>
                <li>Corporate</li>
            </ol>

            <p>5 sections over 8 columns doesn&rsquo;t divide evenly, so I&rsquo;ll need another split. By subdividing into 16 columns, that&rsquo;ll let me do a 4-column feature listing and 3 columns for each of the plans. 16 columns it is.</p>

        </div>


        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <div class="dm-l-col--50 dm-u-paddingRight--l">

                <figure class="dm-u-marginBottom--l">
                    <a href="grid16.png"><img src="grid16.png" alt="" /></a>
                    <figcaption class="dm-u-text--s dm-u-fontStyle--italic">A 16-column grid</figcaption>
                </figure>

            </div>

            <div class="dm-l-col--50 dm-u-paddingRight--l">

                <figure class="dm-u-marginBottom--l">
                    <a href="grid16-realigned.png"><img src="grid16-realigned.png" alt="" /></a>
                    <figcaption class="dm-u-text--s dm-u-fontStyle--italic">All content realigned to the new 16-column grid</figcaption>
                </figure>        

            </div>
           
        </div><!-- .dm-c-articleImage -->


        <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

            <p id="fn1-source">I&rsquo;m ready to start inserting more of my content into this shell, specifically my own copy and artwork <sup><a href="#fn1">1</a></sup> . The key to stealing in a way that leads to something original is that your result needs to be unrecognizable from the source material as much as possible. Take the hero unit for example.</p>

        </div>


        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <a href="hero1.png"><img src="hero1.png" alt="Hero unit" /></a>
           
        </div><!-- .dm-c-articleImage -->


        <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

            <p>It&rsquo;s easy to compare this to the original source and tell where it came from. Flipping the orientation of elements is a really useful way to to get around that. Let&rsquo;s move the main headline and the call to action to the opposite side of the screen.</p>

        </div>

        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <a href="hero2-flip.png"><img src="hero2-flip.png" alt="Hero unit flipped" /></a>
           
        </div><!-- .dm-c-articleImage -->


        <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

            <p>Let&rsquo;s add our own artwork.</p>

        </div>

        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <a href="hero3-artwork.png"><img src="hero3-artwork.png" alt="Hero unit with artwork" /></a>
           
        </div><!-- .dm-c-articleImage -->


         <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

            <p>The artwork goes a long way into making this feel original, but there&rsquo;s still one more thing we need to do. That notched-out call to action is such a unique piece that it&rsquo;s become signature to the original source. It still feels like someone could identify the source from that element.</p>

            <p>Instead of notching it out, let&rsquo;s do a colorblocked overlap call-to-action. Once I do that, I realize the opportunity to mirror that visual language on the top left with the logo. Given that the original source is so flat, I&rsquo;ll add a subtle drop shadow to give those elements some depth.</p>

            <p>You can see that, with just a few moves, I&rsquo;ve moved this away from an interface I&rsquo;ve stolen to something that feels way more original.</p>

        </div>

        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <a href="hero4-overlap.png"><img src="hero4-overlap.png" alt="Hero unit with overlapped button and logo" /></a>
           
        </div><!-- .dm-c-articleImage -->


        <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

            <p>If I take that approach to each element of this page&mdash;just a few moves each to distinguish it from its original source&mdash;I can easily go from a design I&rsquo;ve stolen to an original version I&rsquo;ve invented on my own.</p>

        </div>

        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <a href="invent.png"><img src="invent.png" alt="Invented comp" /></a>
           
        </div><!-- .dm-c-articleImage -->


        <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

            <p>And lastly, a side-by-side comparison for effect.</p>

        </div>

        <div class="dm-c-articleImage dm-u-clearfix dm-u-background--gray">

            <div class="dm-l-col--50 dm-u-paddingRight--l">

                <figure class="dm-u-marginBottom--l">
                    <a href="stub.png"><img src="stub.png" alt="" /></a>
                    <figcaption class="dm-u-text--s dm-u-fontStyle--italic">The original stubbed out sources</figcaption>
                </figure>        

            </div>

            <div class="dm-l-col--50 dm-u-paddingRight--l">

                <figure class="dm-u-marginBottom--l">
                    <a href="invent.png"><img src="invent.png" alt="" /></a>
                    <figcaption class="dm-u-text--s dm-u-fontStyle--italic">The final invention</figcaption>
                </figure>

            </div>
           
        </div><!-- .dm-c-articleImage -->


        <div class="dm-dp-textPassage dm-u-clearfix dm-c-articleWell">

            <p>I hope this was a useful primer in showing you how to steal you way to an original design. In the words of English philosopher <abbr>C.E.M.</abbr> Joad, &ldquo;Creativity is knowing how to hide your sources.&rdquo; The more obscure your references, the more sources you combine, the more moves away from the original you can take, the more original your design will become.</p>

            <p>For those that want to dissect the final source file in more detail, you can <a href="spaceZzzz.psd.zip">download the <abbr title="Photoshop Document">PSD</abbr> (51.2MB) here</a>.</p>

            <p>Good luck with your stealing!</p>

            <footer class="dm-c-articleWell_footer dm-dp-sepChunk">
                <ol class="dm-c-footnotes">
                    <li id="fn1">The wonderful artwork in this comp was graciously borrowed from artists publishing their work on the web. Credits: <a href="https://www.nasa.gov/mission_pages/shuttle/shuttlemissions/sts122/multimedia/rollout/index.html">NASA STS-122 Rollout</a>, <a href="https://www.pinterest.com/pin/AaxAk5hKXolZVKy7QqcpUNMlh6Unnst_gQdWUSyXLZDgog2BGskQ5OE/">Space/The Beast Below</a>, <a href="http://josephbiwald.deviantart.com/art/Kasai-500924393">Kasai</a> by JosephBiwald, <a href="http://conceptships.blogspot.ca/2015/07/boxxx-3w-by-beeple.html">BOXXX-3W</a> by beeple, <a href="http://retro-futurism.livejournal.com/729408.html">Pioneers Again</a> by <NAME>, and <a href="http://pixelschumi.cgsociety.org/art/waterfall-cinema-station-4d-matte-photoshop-painting-vue-stations-1119577">Waterfall Stations</a> by <NAME>umann.</li>
                </ol>                
            </footer>

        </div>


        <div class="dm-c-articleWell">

            <section id="up-next" class="dm-c-upNext">

                <h1 class="dm-c-upNext_kicker">Up Next</h1>

                <h2 class="dm-c-upNext_title">
                    <a href="/articles/design-systems-pilots-scorecards/">
                        Design Systems: Pilots &amp; <span class="dm-c-upNext_title_lastWord">Scorecards</span>
                    </a>
                </h2>

            </section><!-- .dm-c-upNext -->
{'fraction_non_alphanumeric': 0.13104717781133013, 'fraction_numerical': 0.010837866346770357, 'mean_word_length': 2.5551470588235294, 'pattern_counts': {'":': 0, '<': 926, '<?xml version=': 0, '>': 926, 'https://': 32, 'lorem ipsum': 0, 'www.': 22, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3311535', 'n_tokens_mistral': 15364, 'n_tokens_neox': 13885, 'n_words': 4631}