Learn UI Design by Copying

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).

Kakashi using his eyes to copy your skillz

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.

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.

[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.)

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

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.

17 Comments on “Learn UI Design by Copying”

Hey Mark, I used Axure to make the wireframes, though you can use any graphics software (Photoshop, Sketch, etc). But I do find Axure to be the fastest and easiest for me. Would you be interested in learning more on how to us Axure for wireframing?

I think it’s perfectly fine to copy as long as you’re asking questions along the way to understand why you like that page/app in the first place, what’s working and what isn’t… don’t just copy it but try to learn in the process.

Hi Oz,
This article is super helpful (as is the rest of your site to be honest.. it’s been consistently the most useful resource I have found on my journey to changing to UX).
Quick question on wire framing…I read somewhere that content is really important, and that putting the latin text placeholders sometimes frowned upon. What do you think on that topic?
I could see how it would be useful in this exercise to train ourselves on learning what type of content is chosen to go where and to think about why. Thanks again for all you do!

Thank you OZ. I have just started with UI/UX design and was overwhelmed by the amount of information and knowledge available online to the point that I don’t know where to start, especially to develop my UI skills. Your article helps to open my mind a lot and I really appreciate this.