Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Copy If You Can: Improving Your UI Design Skills With Copywork

There’s a technique for improving one’s user interface design skills that is the most efficient way I know of expanding one’s visual vocabulary but that I’ve rarely heard mentioned by digital designers.

What’s going on here?

I’m talking about copywork. Copywork is a technique that writers and painters have been using for centuries. It is the process of recreating an existing work as closely as possible in order to improve one’s skill. In our case, this means recreating a user interface (UI) design pixel for pixel.

It’s not as pointless as it sounds, I promise. The trick is to pick a design that is better than what you are currently capable of. By copying something outside of your wheelhouse, you will be expanding your skills.

So, if you want to improve your use of color, copy something with some crazy gradients or a bold palette. If you want to get better at luxury branding, copy a preeminent website with a ritzy look and feel.

Obviously, this technique is not rocket science. Actually, it would be hard to think of a more mundane exercise. But it is the most effective way I know to improve my UI design skills.

1

Which is the original and which is the copy? Original by Sam Thibault2. (View large version3)

But we’re getting ahead of ourselves.

Writers Copying Writers Link

I first heard about copywork on the blog The Art of Manliness4, where Brett McKay gives a long history of those who’ve used copywork to develop their writing skill.

  • Jack London copied swaths of Rudyard Kipling’s writing to adapt his forebear’s world-class cadence and phrasing.
  • Robert Louis Stevenson would meticulously study sections of writing he found particularly beautiful, then reproduce them word for word from memory.
  • Benjamin Franklin followed a variant of copywork, writing notes about each sentence in an essay and then, a few days later, trying to recreate the essay by reading his notes — and comparing the results.

The list goes on. I know that Raymond Chandler, the famous mystery writer, used a technique similar to Benjamin Franklin’s, rewriting a novelette from a detailed description, and then comparing his with the original to study the flow.

He actually wrote to the original author later in life, telling him how instructive the exercise was. Pay attention to his analysis:

I found out that the trickiest part of your technique was the ability to put over situations, which verged on the implausible but which in the reading seemed quite real. I hope you understand I mean this as a compliment. I have never even come near to doing it myself. Dumas had this quality in very strong degree. Also Dickens. It’s probably the fundamental of all rapid work, because naturally rapid work has a large measure of improvisation, and to make an improvised scene seem inevitable is quite a trick.

This is not a rote exercise. Chandler is extremely thoughtful about the differences between his work and the original and is well versed in the subtleties of style of many authors. Can you speak this articulately about UI design? If not, may I recommend copywork?

Just as a writer copying the greats before him unconsciously absorbs the tiniest choices those authors made — the word choice, phrasing, cadence and so on — a designer doing copywork also absorbs the subtlest choices in the designs they study — the spacing, layout, fonts, decorative elements. Therein lies its power.

Let’s take a quick look at copywork in one other art form, though, one with a remarkably long history.

Painting The Old Masters Link

If you’ve wandered through an art museum, you’ve probably seen copywork in action. Apart from my own desk, it’s the only place I’ve seen it.

5

Copywork in an art gallery. (Image: Two’s Company6)

Painters have an even longer history than writers of copying the masters. Leonardo da Vinci developed his art (one of his arts, anyhow) by copying his teacher, Andrea Del Verrocchio — a common practice among Renaissance apprentice artists. Da Vinci actually prescribed copywork as practice numero uno for art students:

The artist ought first to exercise his hand by copying drawings from the hand of a good master.

Why? Because copying directly from a master provides a controlled setting in which to train your eye.

When you’re painting a live scene, on the other hand, there’s a lot to worry about — the model will move, the wind will pick up, the sun will set. Until your brain can think naturally in shape and color, painting in the real world will be tough. But in the studio, you can take all the time you need to absorb the basics.

While UI designers do not model anything after a natural scene in the same way as painters, copywork provides a useful way to eliminate variables and distractions while honing your skill.

But although it was once a foundational exercise of some of the world’s greatest artists, copywork has fallen out of favor. Nowadays, it’s viewed as rote, uncreative and reeking of plagiarism.

So, why should a UI designer copy for practice?

It’s All About (Recreating) The Details Link

The gist is this: When you recreate a design, pixel for pixel, you’re forced to remake every decision the original designer made. Which font? How big? How are things laid out? Which images and background and decorations? You immerse yourself in the small design decisions made by awesome designers.

You might argue that you’d be missing out on all of the choices the designer considered, and the rationale for why they picked what they did. Fair enough — but that’s missing the point. Done right, copywork exposes you to design decisions you simply wouldn’t have made on your own.

7

Copying the Epicurrence Oahu8 website was a major learning experience for me. (View large version9)

Let’s take an example. One of the most vocabulary-expanding pieces I’ve copied is Dann Petty’s wonderful Epicurrence10 website. I internalized three things from the header alone:

  • Insanely large font size
    My copy of the original included the Hawaii initials “HI” in size 365 font. Never in my years of professional work had I even considered making text that big. Yet he uses it as a visual element, aligning it with the other header elements, even putting an image between the letters. Very cool.
  • Paint stroke as “shadow”
    A watercolor smudge runs across the bottom of the seal, the header and the pineapple. It’s in the spot where a shadow might be, as if the shadow were painted on the page. Whoa — that’s not the usual way of doing it!
  • Uppercase type with generous letter-spacing
    No doubt, that uppercase text adds a strong element of alignment, and pumping up the letter-spacing is a textbook way to add some classiness to type, but I find myself getting self-conscious about doing it much. It was cool to see that all of the text here is capitalized, and basically all of it has modified letter-spacing, too.

Now, I’d seen Dann Petty’s design before deciding to copy it. I thought, “Wow, this looks great.” And even as my eyes glossed over the design, it’s not like I immediately internalized every technique he used. Only when I copied it did I start to consciously adopt those things in my UI toolkit.

11

Vic Bell’s Skedio icon set12 (my copy in red) pushed my skills in a new direction. (View large version13)

Here’s another example, the Skedio icon set14 by master icon designer Vic Bell. (Her originals are in blue, my copywork in red.)

This was a fascinating exercise for me, particularly because Vic’s icons are a step or two more detailed than most of what I make for the apps I work on. She added this complexity in two subtle ways:

  • A second, lighter shade of blue
    Compare the fill color of the “Settings” icon (row 2, icon 1) to the outline color. Most icons I’ve designed are one color only.
  • A second, lighter line width
    You can see it in the “text” of the “Tags” icon (row 1, icon 2) and in the arrow on the “Upgrades” icon (row 1, icon 3). I’ve lived by the rule that consistency is paramount in icon design, so seeing Vic’s use of 3-pixel accent lines in a primarily 4-pixel line set was fascinating.

But the strength of copywork is not just in seeing these details at a superficial level, but also in becoming intimately familiar with how they are used across the design.

Let’s take the idea of the second, lighter shade. It’s one thing to decide to use a second shade as an accent color. Here are four ways Vic has used the lighter shade in this icon set:

  • As a shadow
    The trash can lid of the “Delete” icon (row 2, icon 3) has this secondary blue in its shadow. You can see a similar but even subtler shadow beneath the medallion in the “Upgrades” icon (row 1, icon 3).
  • As a gleam of light
    The lighter shade is used as a reflection of light in the magnifying glass of the “Search” icon (row 3, icon 5).
  • For color contrast
    Vic uses white and light blue as two contrasting colors in the life-preserver ring of the “Help and feedback” icon (row 1, icon 4). Same story with the pencil in the “Rename” icon below it (row 2, icon 4).
  • For visual weight contrast
    This one was the subtlest for me. Notice how the background cards — but not the foreground card — of the “All sketches” icon (row 1, icon 1) and the “Layers” icon (row 3, icon 5) are light blue. The foreground card in both is white, giving it more contrast with the rest of the icon. If the background cards had white fills, then the sharp contrast between their borders and fills would have distracted the eye — as it is, the eye is directed straight to the front card.

These strategies are more detailed than any class on icons would get into. They’re one-off tips and techniques that go straight from the mind of a master to yours, if you’re willing to put the effort into doing copywork.

All right, let’s cover one more example here.

15

Taylor Perrin’s Día de los Muertos design16 on the left, my copy on the right. (View large version17)

I saw Taylor Perrin’s Día de los Muertos design not long ago, and it blew me away. He does a fantastic job of using elements that I struggle with, such as beautiful photography, rich textures and panoramic layouts.

A lot of this is due to what I spend my time designing — mostly information apps for businesses. The look is clean and simple, the branding staid.

Copying Taylor’s Día de los Muertos mockup18 expanded my design thinking in a number of ways:

  • A new workflow
    I’ve been a huge proponent of Sketch since day one, and I even teach a UI course based on Sketch19, but there are downsides to its simplicity. Namely, since switching from Photoshop to Sketch, my design reflexes have tended way towards everything being flat rectangles. In this exercise, I textured almost every background on the whole page, and it was a great reminder that a pass in Photoshop during the design process allows me much more versatility in style than simple colored rectangles.
  • Making decent assets shine
    One of the first assets I had to track down and restyle was the illustration of the skeleton playing the horn. When I found it online20, I was underwhelmed. In fact, if I had been designing the original mockup and found that illustration, I probably would have passed it up. Yet it looked great in Perrin’s mockup. Comparing the original image to his mockup was a lesson in all of the cleanup work you can do with mediocre assets, and in envisioning their use beyond their immediate appearance.
  • Full-width layouts
    Although it’s become popular to have panoramic layouts span the page’s width no matter how wide the screen gets, I’ve done very little of this myself. This exercise was a great confidence-booster for this type of layout. As I copied, I would try to guess certain details (such as the font size of a particular piece of copy) and see what felt right; then, I checked and adjusted. The next time I make a layout 1400 pixels wide, I won’t feel odd about headings being 60 pixels.

So, am I as good as Dann Petty or Vic Bell or Taylor Perrin now? I’m afraid that will take some time — they’re among the best UI designers in the game. But you better believe that every day I am pushing my set of skills and techniques to incorporate their know-how.

Common Questions Link

When Do You Do Copywork? Link

I start off many mornings with 30 minutes of copywork. This has two benefits:

  • It energizes me for the day because I’m learning new stuff right when I wake up.
  • It’s a way more productive low-energy wake-up activity than checking email or social media. Something needs to get done as the coffee brews.

Only 30 Minutes? What If You Don’t Finish a Piece? Link

Then I keep going the next day. And so on.

What Should I Copy? Link

Copy something that pushes one of your skills beyond its current level. Copy something that exhibits a technique you’ve not honed.

21

I use a Dribbble bucket to capture designs I’d like to copy.

For ideas, I love to browse Dribbble. I keep a Dribbble bucket of copywork images22 — things I’ve found from other designers that I want to copy (or already have).

I can also recommend a few designers who have carved out their own style and offer a lot to those who are still learning the basics:

  • Jonathan Quentin23 uses color and gradients really well. Check out his work to up your color chops.
  • Brijan Powell24 is the boss at making designs that are classy and upscale yet thoroughly masculine.
  • Tubik Studio25 is fantastic at everything bright, colorful and cheery.

Though I use Dribbble for copywork (it’s a great way to quickly browse and save high-quality images), live websites work great, too. For instance, Blu Homes26 is next on my list!

If you’re a professional designer, here are a few more ideas:

  • I sometimes copy my clients’ websites and apps if they want more UI work done in that style.
  • I sometimes copy my potential clients’ websites and apps, so that from the very first conversation, I have a deeper knowledge of their visual design language.

For instance, I did some design work for Soylent27, the meal-replacement company. As soon as they reached out to me, I put it on my to-do list to reproduce their home page. I wanted to be able to talk fluently about how they used color, typography and imagery.

28

I copied Soylent’s home page in preparation for some work I did with them. This gave me a feel for how they used visuals, typography, etc. (View large version29)

Must I Copy the Original Perfectly? Link

I think copywork is subject to diminishing returns — so, no, you don’t have to copy perfectly. But (and this is important) you can’t copy it worse than the original. You have to achieve something that you view as equal or better, even if the details don’t totally line up.

You won’t always have access to the same fonts and resources, so slight differences are par for the course. I’ve found Identifont30 and WhatTheFont31 to be great resources for finding which fonts are used in images.

Do You Copy Multiple Images in Series to Improve a Certain Skill? Link

Copying five designs that demonstrate excellence in, say, typography is a great way to get better at that one skill. However, I much prefer to bounce around to whatever catches my eye. It’s a good counterbalance to what I’m working on at the time, and it keeps things interesting.

Do You Copy in Sketch or in HTML and CSS? Link

I copy in Sketch. I find that CSS is a poor medium for visual thinking, and copywork is a visual exercise. Writing CSS, I get bogged down thinking about the proper way to position each little element — which is exactly the kind of thing to worry about if you want to be a good CSS coder, but a terrible distraction if you’re trying to improve your visual design skill.

Can I Put It in My Portfolio? Link

Don’t do that. Portfolios are for showing off your own work. Copywork is just an exercise to improve your design skills.

Won’t This Cause Me to Plagiarize? Link

No, but here’s some great advice from designer Sean McCabe about avoiding plagiarism:

  1. Soak up all the inspiration you want.
  2. Sleep on it.
  3. Produce your new work from memory.

Incidentally, copying from memory, rather than from the original right in front of you, is a variant of copywork that makes you far less prone to exact reproduction. However, I’d recommend this exercise for more advanced copiers. Working blind, you’ll be making both the low-level and high-level decisions without guidance. If you’re trying to reproduce something above your level, there’s plenty to be learned from direct copying.

There is remarkable consensus among artists and creative folk that creativity is fundamentally about mixing together what already exists. Nothing is entirely original.

Immature poets imitate; mature poets steal; bad poets deface what they take, and good poets make it into something better, or at least something different. The good poet welds his theft into a whole of feeling which is unique, utterly different from that from which it was torn; the bad poet throws it into something which has no cohesion.

– T.S. Eliot

I wanted to hear music that had not yet happened, by putting together things that suggested a new thing which did not yet exist.

– Brian Eno

All writing is in fact cut-ups. A collage of words read heard overheard. What else?

– William S. Burroughs

Copywork enables you to pick up inspiration and remix it into your own style. A casual glance at a great new design would only reveal the surface level of technique and style, but with copywork, you can go deep and really expand your skills.

Is Copywork Really for Me? Link

Unless you’re known the world over for your inimitable style, then yes, you would probably benefit from it.

That covers the most frequent questions I get about copywork. It’s a simple practice but one that pays dividends. If you consistently copy pieces that impress you or are above your level, then you’ll pick up a handful — if not dozens — of techniques and tactics that you can apply to whatever you are working on. The rest of the art world has been doing this for centuries; it’s time for designers to catch up.

So, the next time you want to expand your visual vocabulary, open up a great design (for starters, you can browse my Dribbble copywork bucket32 for inspiration), put on some good music, and start cranking out the pixels.

(ah, yk, il, al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/wp-content/uploads/2016/12/vain-sound-model-one-large-opt.png
  2. 2 https://dribbble.com/shots/1626731-Vain-Sound-Model-One-Product-Page
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2016/12/vain-sound-model-one-large-opt.png
  4. 4 http://artofmanliness.com
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/12/painting-copywork-preview-opt.jpg
  6. 6 http://channeltwo.twoscompany.com/twos-around-the-world/18-hours-in-madrid-january-2013/
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/12/epicurrence-oahu-large-opt.png
  8. 8 https://dribbble.com/shots/2222838-Epicurrence-No-2-Official-Roster
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/12/epicurrence-oahu-large-opt.png
  10. 10 http://epicurrence.com
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/12/skedio-large-opt.png
  12. 12 https://dribbble.com/shots/2582693-Skedio-Icons
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/12/skedio-large-opt.png
  14. 14 https://dribbble.com/shots/2582693-Skedio-Icons
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/12/dia-large-opt.png
  16. 16 https://dribbble.com/shots/3048466-D-a-de-los-Muertos
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/12/dia-large-opt.png
  18. 18 https://dribbble.com/shots/3048466-D-a-de-los-Muertos
  19. 19 http://learnui.design
  20. 20 https://www.fotolia.com/id/113790444
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/12/copywork-bucket-preview-opt.png
  22. 22 https://dribbble.com/erikdkennedy/buckets/310034-Copywork
  23. 23 https://dribbble.com/STUDIOJQ
  24. 24 https://www.behance.net/brijan
  25. 25 https://dribbble.com/Tubik
  26. 26 http://bluhomes.com
  27. 27 http://soylent.com
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/12/soylent-large-opt.png
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/12/soylent-large-opt.png
  30. 30 http://www.identifont.com/
  31. 31 https://www.myfonts.com/WhatTheFont/
  32. 32 https://dribbble.com/erikdkennedy/buckets/310034-Copywork

↑ Back to top Tweet itShare on Facebook

Erik Kennedy is an independent UX/UI designer and the creator of Learn UI Design, an in-depth video course for learning visual interface design. His past clients include Amazon, Soylent, Pro.com, and others in social media, education, finance, marketing, healthcare, entertainment, and more. He's spoken here and abroad at conferences, businesses, and universities, and his design writing online has been read by over a million people.

  1. 1

    Finally! I searched for an article like this so long time! :) Thanks a lot! It’s really cool.

    9
  2. 3

    Thank you for this, really helpful

    3
  3. 4

    Khoi Vinh wrote about copying work here:

    https://www.subtraction.com/2016/08/11/the-underestimated-merits-of-copying-someone-elses-work/

    In that article, he links to an article Jose Bento wrote about copying Invision’s interface. There’s a timelapse video of it in action which is very interesting to watch:

    https://uxdesign.cc/reverse-engineering-the-invision-interface-50a8e81b9e9b#.5stzsnnkf

    4
  4. 5

    Aha, so Copywork’s the term.

    Aside from adopting the designer’s design sense, this is also how I learnt using the Adobe Suite. Instead of going through the tools one by one, I just did a tonne of flashy pretty tutorials. And I’ve used this same approach with everything else since – which is how I learnt coding as well.

    4
  5. 6

    Great article. Just reinforces what I’ve already been doing. Thanks!

    2
  6. 7

    This was a fantastic article. It reminds me of the ideas in the book “Steal Like an Artist.” Thank you!!!!!

    2
  7. 8

    Excellent! I’ve been trying to figure out how to improve my visual design skills. Thanks a lot!

    2
  8. 9

    Good article. I believe it’s much better than learning from a book. More practical

    2
  9. 10

    Thank you for the article. I have been doing same for long but haven’t mastered the art of coping until I read this article. The future of my inspiration work is going to be skillful.

    I learned this technique from a musician friend who as a kid sings and practise guitar on popular songs by other artists and later developed himself as a popular singer in the country with his own creation. I think same goes in design industry. Thus…copy ..copy.. copy, until you are perfect.

    Thanks again for inspiring article.

    0
  10. 11

    I know this technique from my musician’s life – when I get bored with my progress I tend to hear more music until I find something that I don’t understand and make a songcover of it. Sometimes only parts of it like bass, guitar or singing. Sometimes I suggest a complete song to my band. The benefits are huge: You stretch your instrumental skills by getting out of your comfort zone, but also learn how other musicians compose, write lyrics and arrange parts. It’s a big difference only hearing a song or trying to play it. We then put the cover away and after three months or so realize that the learned skills influence our songwriting and let it progress in a very good way.

    0
  11. 12

    Very interesting and open minding reading. Thank you.

    0
  12. 13

    Just wanted to point out, that Taylor Perrin’s original https://dribbble.com/shots/3048466-D-a-de-los-Muertos design is on the right, not the left.

    1
  13. 14

    Brian Haferkamp

    February 19, 2017 1:48 am

    Thanks for bringing this to everyone’s attention. I find a lot of design inspiration on Dribbble and by looking at old magazine articles. When I find a graphic design I like I’ll try to build it with HTML and CSS. Its been a good exercise for me over the past year. It not only stretches you, it builds patterns into your design knowledge making you a better designer.

    1
  14. 15

    Thanks a lot for sharing! I will definitely save 30 minutes a day to do copywork from now on. Practice, practice, practice!

    1
  15. 16

    I am Very Happy to learn many things about copywork. Thank you so much for sharing transparency of experience.

    0
  16. 17

    I know I’ve copywork a few times and found it useful. You’ve outlined the whys so well, haven’t really thought deeply about the benefits of doing copywork until reading this article. Now I know should definitely do it more.

    0

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top