Throughout most of our academic careers, we’ve been taught that copying is a bad thing. Getting caught copying an author’s work is considered plagiarism. Copying someone else during an exam can lead to expulsion. So it’s not a surprise that we have negative associations with copying, even to this day.

But what about copying as a way to learn? 

I’m going to nerd out for a moment and talk about my favorite manga+anime, Naruto. It features a character named Kakashi.

They call Kakashi the Copycat Ninja because of his ability to copy the skills of others (and often does it better himself).

This makes Kakashi one of the most formidable opponents in the Naruto universe. Here’s what we can learn from this legendary anime character:

Copying is a valuable skill and learning tool. Especially in UX, your ability to mimic and deconstruct designs will come very handy.  

Reasons for Copying Existing Designs

Reason 1: Understand through deconstruction

When you copy a design, you’re forced to identify and recognize every single element in that design. Doing so brings a level of awareness about how that design was brought to life.

This is a process of deconstruction. Copying a design will allow you to see the components that, in sum, make up the entire design.

Suddenly, copying becomes more than copying. You’re deconstructing and understanding.

Reason 2: Training your eye (and muscles)

After you learn by copying enough designs, you’ll undoubtedly start to notice patterns and conventions. Tabs. Sign up forms. Headers. Footers, carousels, oh my!

Being able to recognize patterns and call their name gives you power over those design patterns. Training your eye in such a way allows you to use and communicate such design patterns in other designs you create.

It’s also long been studied that involving your hands while learning – such as handwriting notes – can improve memory retention.

[su_quote url=”http://www.wsj.com/articles/SB10001424052748704631504575531932754922518″]People who take class notes on laptops when they expect to be tested on the material later tend to transcribe what they’re hearing without thinking about it much.[/su_quote]

This supports the advice that so many UX experts give, that sketching is an essential skill.

My hypothesis in this case is that if you’re copying using wireframing apps (Omnigraffle, Axure) you’ll still getting the benefit of actively using your hands. To me this is different from typing everything down that a professor is saying without thinking about it.

Reason 3: A Faster Way to Learn

Simply put, copying designs is a learning method that has smaller upfront investment in time and effort. It’s a faster way to learn design skills compared to creating something new on your own.

I know, I know, you probably have a dozen startup ideas you want to try your design skills on. That’s totally fine. But for those new to design, starting with a blank canvas can be exceedingly intimidating. It requires lots of willpower to push through that initial resistance of designing. 

So if your priority is to learn UX and UI design, and get a job [also link], then copying designs is one of highest ROI activities you can do.

So Oz…can you tell me how do I go about practicing-through-copying? Why, I never thought you’d ask:

Strategies for Copying

1. Copy what you love

Let’s make this fun. Think of the sites and apps you love or use often, then copy those. You’d be surprise how much detail goes into them.

Need some inspiration?

• Look in your browser history (CMD+Y on Chrome). (Some of my most visited sites today are Facebook, Google Keep, WordPress and Grooveshark.)
• Visit Awwwards, a great site that collects award-winning sites
• Search Google for key terms like “best apps” to find articles like Best iOS Apps Honored in 2014 (Cnet) or Best Mobile App Awards

2. Sketch it out by hand

Don’t be intimidated by sketching. When it comes to sketching basic interfaces, you don’t really need more than a couple lines and geometric shapes. You don’t have to be an artist; revel in sketches that look a bit rough or ugly.

The main idea is to not to create perfect drawings, but rather to reproduce the skeleton of the design quickly. Also, no need to overwhelm yourself with copying the design of every single page. Focus on the top 1 – 3 main screens where all the action happens.

As you sketch, make a mental note of certain elements that stick out to you. This is especially useful for later referencing; if you don’t know what a certain web element is, you can ask a fellow designer (“that’s called a sticky header”).

3. 50 5 Shades of Gray

When you decide to wireframe an existing website, don’t worry about color. Use a simple “shades of gray” palette instead. Doing so brings you two benefits:

• You’re less intimidated by the visual design of the design you’re copying. Hence, speed.
• Using colors sparingly helps you focus on functionality and layout

So Oz…can you show me an example of a designed you practiced copying on? Heck yeah!

Wireframing the Homepage of Lyft

Lyft is one of my favorite startups. Their design feels warm and friendly, and in my opinion it has a lot more personality than Uber (which seems rather cold to me). So here’s an example of how I wireframed Lyft to learn more about startup homepage design.

It’s quick, not polished and ugly. But little details I would’ve glazed

What we’re copying: (Lyft Homepage)

My wireframe: (click for larger image)

Is there more?

If I could go back in time and re-learn UX and UI design from the ground up, I would’ve started by copying all my favorite sites & apps. It would’ve been a much more engaging introduction to the UI side of UX design.

What do you think of this approach?

I’ll continue to make more resources and posts on this topic if enough people are interested in this approach to learning. Please subscribe below for future goodies like wireframe examples, templates, and more.