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.

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

UX-Beginner-Learn-UI-by-Copying-blank canvas

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.


18 responses to “Learn UI Design by Copying”

  1. This was a great article and very helpful for a beginner like myself, just wondered what you used to make the wireframe you did above?

    1. 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?

  2. Definitely helpful in wire framing. It’ll help me out and pushing over the hump of actually doing it.

  3. HI Oz, Thank you for this article! It was very helpful! I’m loving all of your articles and I’ve read it all. I would like to add you on linkedin if possible.

  4. Hi OZ, thanks for sharing. It is the practice I am doing now to learn UI. Sometimes, I do not know how to critique my design for web and app. Thanks.

  5. carol-anne ryce-paul Avatar
    carol-anne ryce-paul

    This was most helpful in knowing where to start. Thank you

  6. thank you. im a new UX designer and this article so helping me.

  7. Thank You. This a Perfect Step for a beginner like me, I started to read this article with zero knowledge on UX design but I am confident that I atleast know what it is…Thank you once again

  8. Nice article. Thanks for sharing with us.

  9. Melissa Stegner Avatar
    Melissa Stegner

    Thanks for sharing this. The whole site has been very helpful in helping me understand UX concepts. I was wondering how you designed the wireframe. Was it through photoshop or some other platform>

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

  11. I totally loved this article. Thanks for sharing your experience. I am a beginner in UI/UX field. And this article is a great help. Keep writing, keep sharing your knowledge. Thanks again!

  12. Nice naruto reference but in the sharingan part, he is about to use kamui, not regular sharingan, well ux wise he copies by the regular sharingan and sucks the knowledge in by kamui lol. Nice article.

    1. Thank you for schooling me on Naruto :)

  13. Great Article Oz! I can’t wait to start using my sharingan In ui/ux lol?

  14. 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!

  15. My Linh Tran Avatar
    My Linh Tran

    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.

  16. Oscar Saul Cruz Lopez Avatar
    Oscar Saul Cruz Lopez

    Thank you very much for your perspective, I’m currently working as Trainee UX Designer and my formation in visual design is very poor. The way you suggest could be very useful to help me gain the skills and refine them, keep the good content!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.