?? Learn UI Design by Copying – The Right Way! ???

We’ve been taught that copying is bad—whether in school, exams, or work. ? Plagiarism? Not cool. Getting caught copying? Even worse. But what if I told you that copying can actually be one of the best ways to learn UI design? ??

Let’s take a fun detour into anime land ?? and talk about one of my all-time favorites—Naruto! ???? It features a legendary character, Kakashi Hatake, aka The Copycat Ninja ????. His superpower? Copying techniques from others and mastering them even better! ??

Now, what if we applied this to UI design? ??

? Study & Copy Great Designs – Analyze top-tier UI work, break it down, and recreate it from scratch.

? Understand the “Why” – Don’t just copy visuals—learn why certain design choices work.

? Make It Your Own – Once you get the hang of it, add your own unique style & improvements.

Top designers don’t just create from thin air—they observe, adapt, and refine. ??? So, instead of fearing imitation, embrace it as a tool for mastery!

This ability makes Kakashi one of the most formidable opponents in the Naruto universe. ??? But beyond his ninja skills, there’s a powerful lesson for UX designers:

?? Copying is a valuable skill and learning tool. ??? In UX design, your ability to observe, mimic, and deconstruct great designs can be a game-changer. Instead of starting from scratch, analyze what works, recreate it, and then make it even better! ????

Just like Kakashi perfects the techniques he copies, you can refine your skills by studying the best UI/UX work out there. ??

Reasons for Copying Existing Designs

?? Reason 1: Understand Through Deconstruction

When you copy a design, you’re not just replicating—it forces you to break it down and analyze every single element ????.

This process is called deconstruction ???. By copying, you start to see how all the components come together to create a seamless experience. It’s like reverse-engineering a masterpiece! ????

Suddenly, copying becomes more than just copying. You’re absorbing, understanding, and leveling up your design intuition ????.

?? Reason 2: Train Your Eye (and Muscles!) ????

When you copy enough designs, you start noticing patterns—tabs, signup forms, headers, footers, carousels… oh my! ???

?? Recognizing design patterns gives you an edge—you can name them, use them, and communicate them like a pro. The more you train your eye, the easier it becomes to create intuitive, well-structured designs. ??

?? Hands-on learning = better memory retention! Research shows that involving your hands while learning (like handwriting notes) strengthens recall. Copying designs isn’t mindless work—it’s a way to actively absorb knowledge. ??

?? Why is this so powerful? Copying is a low-investment, high-reward learning method. It’s a faster way to master design than starting from scratch every time.

I get it—you have big, bold startup ideas you’re eager to design. ?? But for beginners, a blank canvas can feel overwhelming. Copying removes that friction, letting you build confidence and skill at the same time.

So, how do you actually practice through copying? Glad you asked… ????

?? Strategies for Copying Like a Pro

1?? Copy What You Love ??

Let’s make this fun! ?? Think about the apps and websites you use every day—those that feel effortless, beautiful, and just work. Now, copy them!

?? Why? You’ll be surprised by how much detail goes into great design once you try to recreate it.

?? Need inspiration? Here’s where to look:

? Check your browser history (CMD+Y on Chrome) to see which sites you frequent.

? Explore award-winning designs on sites like Awwwards. ??

? Google “best UI/UX apps” to find curated lists of top-tier designs.

When you copy what you love, you naturally absorb great design principles—and soon, you’ll be creating your own. ????

?? 2?? Sketch It Out by Hand

Don’t let sketching intimidate you! You don’t need to be an artist ??—just a few lines and simple shapes will do.

?? The goal? Recreate the skeleton of the design quickly, without worrying about perfection. Keep it loose, rough, and exploratory.

?? Focus on the essentials—you don’t need to copy every single page! Start with the top 1-3 screens where most interactions happen.

?? Take mental notes on key elements that stand out. Later, if you don’t know what something is called, you can ask a fellow designer! (“Oh, that’s a sticky header!”)

Sketching helps you truly see the structure behind great design—giving you a deeper understanding than just looking at it. ????

5 Shades of Gray ??

When wireframing an existing website, ditch the colors and go grayscale instead. Here’s why:

??? Less Intimidation – Removing colors helps you focus on the structure rather than getting overwhelmed by the visual design.

? Faster Execution – Without colors to worry about, you can copy designs more quickly and effectively.

?? Better Layout Focus – Grayscale forces you to analyze functionality, spacing, and hierarchy instead of getting distracted by aesthetics.

So, Oz… can you show an example of a design you practiced copying?

Heck yeah! ??

Wireframing a Homepage ?? ??

Here’s an example of how I wireframed a startup homepage to better understand its design structure.

It’s quick, rough, and not polished—and that’s totally fine! The goal isn’t to create a perfect replica but to break down the design into its core components. By doing this, I noticed small details I would’ve otherwise overlooked.

This process has been a game-changer for improving my design intuition!

My Wireframe:

Want to Learn UX Faster? Start Copying! ??

If I could go back in time and re-learn UX/UI design from scratch, I’d start by copying all my favorite websites and apps. It would have been a way more engaging introduction to the UI side of UX design!

What do you think of this approach? Have you tried learning by deconstructing real-world designs? Let’s discuss in the comments! ??

If you're interested, I’ll keep sharing more wireframe examples, templates, and practical design tips to help you level up.

?? Subscribe to "Crafting UI/UX Excellence" to get weekly bite-sized UX insights, career advice, and hands-on resources! ??

Upgrade your UX knowledge every week! ??