Copying an Existing UI to Learn How It Was Designed | Wireframing Academy | Balsamiq (2024)

Through the exercise of copying an existing app or website using wireframes you’ll get to know how it was designed and why some UI choices were made.

Nowadays, designers don’t feel permitted to copy someone else’s work, ever. It feels like you need to innately be able to design things from your own imagination, or you’re not a real designer. But copying is not all bad. It’s not bad at all, actually. Forgery is bad. Passing others' work off as your own, terrible. But copying is a great way to become truly intimate with a piece of art, or an app, or software application, and learn how it was designed.

Imagine if every young athlete in the world felt like they had to reinvent the shot, swing, pitch, stroke, kick, etc. If you want to be the best, you start to learn by copying the best.

One of the first times I heard of this concept was from a short interview with Jim Coudal.

“What you’re really doing in this situation is you are working on your craft…You are trying to get into the seat of the person who built this thing to begin with. To get into their head and see why they made the practical decisions they made…”

When I heard this advice it really resonated with me. A few years later I attended WWDC (Apple's Developer Conference) and they had a session that took this concept one step further. The presenter took screenshots of the Apple Photos app, among others, and turned it into Toast Modern. They used the underlying structure of one app, to create a whole new one. See below.

I’ve incorporated this into my own work. Anytime someone asks me to design something I’ve never done before, I look for examples I like, analyze it in detail, and recreate it as wireframes. I always come away with a better understanding of how it works and am ready to improve upon what already exists.

When I became a leader of a design team I found copying to be a great way to onboard entry-level designers onto our team. I’d ask them to recreate two or three pages of our site or one of our applications and we’d take time to review them. From this exercise they would become far more intimate with our product and I would get a chance to critically review the current state of the product. It was a win-win.

Why is copying effective?

1. You have to really study what you are copying in detail in order to reproduce it. From this deep inspection you will learn how interfaces are constructed. It gives you a chance to get into the head of the designer who created it and better understand what decisions they made.

2. All the design decisions have been made for you. Starting with a blank canvas can be daunting, so much so that you may never get started. This will allow you to not think of the million different decisions that could be made, and instead enjoy the craft of it.

3. Copying allows you to learn your tools better. Being a master of Balsamiq or Sketch won’t make you a great designer, but it will make you more efficient at creating designs and allow you to execute the vision you have for your product.

4. It’s a great way to jumpstart a design project. If you are new to design, copying the interface of existing apps can help propel your designs into a place where you can put your idea in front of users.

5. It allows you to have a better understanding of the user’s journey through an experience. From this exercise you will have a far better understanding of the flow of the experience. You will likely notice that there could be ways to improve it, too. Critically analyzing not only the interface, but the user experience will help you be a better all-around designer.

Recreating an app in wireframes

Here are the basic steps to copy an existing UI using wireframes.

1. Select which pages or screens you would like to copy. Have an end goal in mind and use that to help you select which screens would be most beneficial to learn from. Start with a piece of software you use often and recreate it.

2. Set up your file in Balsamiq. Create one wireframe page for each page or screen.

   See Also

   How can you avoid plagiarism in design competitions?

3. Overlay placeholder text, images and icons over the existing interface. Take notice of areas in the interface that are used more than once.

4. Delete the original screenshots. Review all of the wireframes you have just made and make adjustments.

Example: Copying Spotify

I use Spotify every day and it was very interesting for me to see how much color is used to improve the user experience. While copying the interface I noticed that the supporting text is a darker shade of gray than the titles they are under. The designers used this to make sure the interface did not look as text-heavy as it is.

Highlighting titles and the more important information with a brighter white allows us to quickly scan the content and choose where we want to focus. This technique reduces the users' cognitive load. Also there are subtle color changes between sections of the app. It adds depth to the main content area and draws the user's eye toward what's most important. Bravo Spotify UI designers.

Copying to create something new

To go one step further, start adding in your own content. Find your own images, write your own copy. Get creative and make it yours and you will see it come alive!

You will have to make adjustments to the layout to fit your content into the copied wireframes. Make sure that your changes are consistent throughout the experience.

You can use this technique to produce a nearly complete set of wireframes to take to potential users to get their feedback on. This is a great conversation starter when talking about your design idea. You'll be surprised how quickly your designs will evolve once you have something to start from.

A side-effect of this exercise is that you will have gained a far better understanding of the complexities of the application or site you want to create. You’ll know what may be needed from external groups to complete your project. You'll be able to talk with developers and walkthrough your idea and give them an understanding of how to make it real.

Conclusion

By going through the exercise of copying an existing UI, you’ll have gained a better understanding of how much thought and care is put into designing an interface. How elements are reused as much as possible. How pages or screens are structured, and how a lot of interface design is keeping the experience consistent and simple throughout. Overall, it will help you become a better designer.

To end this, I want to challenge anyone reading this who is new to UI design to copy something and share it with our community. Take a screenshot of something digital you use every day, recreate it in Balsamiq as a wireframe, and post it in our Slack channel. Tell us what new insights you gained from this exercise. Myself and the rest of our community will review it with you and learn from it. Good luck and happy designing.

Webinar: Copying to Learn with Wireframes

Watch the recording of our webinar to learn more techniques for using copying to learn UI design.