👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

Copying an Existing UI to Learn How It Was Designed

5 min. read

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.

Gif showing screens of a fake mobile app that takes inspiration from different existing apps.
Clip of the video presentation Prototyping: Fake it Till You Make It from WWDC ’14

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.

  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.

Screenshot of a Spotify desktop app album page and its wireframed version.
Use this exercise to dig deep into the UI of your favorite app.

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 screenshot of a streaming music app and a wireframe of a fictional food delivery app modeled on it.
You can also use this exercise to jumpstart your design project.

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.


By Billy Carlson
Got questions or feedback? Email support@balsamiq.com.


Related Articles

Accelerate Your B2B Software Spec and Wireframing Process

A software specification answers the what, why, and how. Here are 7 proven tips to create better specs and wireframes before moving to implementation.

By Diarmuid Glynn

5 min. read

Use Wireframes to Develop Your Designer’s Eye

Even if you don’t call yourself a designer, there are some easy tips and techniques to help you see a digital product and its usability like a designer.

By Billy Carlson

5 min. read

Common Website Mistakes and How to Fix Them

Learn how to improve your website’s user experience! For each mistake you’ll learn what usually happens and why, what it looks like, and what to do about it.

By Leon Barnard

Get the Inside Scoop!

Want to get exclusive early updates on our
Products, Wireframing Academy, and our Company?

Subscribe to our monthly newsletter and be part of our Inner Circle!

See what people think of our past issues!

Dazz Knowles
"Of all the e-mail newsletters I get, @balsamiq is the one I always read, they're brilliant!" - Dazz Knowles
M. Pesente
"It's always a big pleasure receiving such an inspiring newsletter. Love the Balsamiq culture!" - M. Pesente
Jérémie André
"Another great newsletter from @balsamiq!! 😁" - Jérémie André
Looking for more ways to get closer to Balsamiq? Join our Research program or Slack community!