The Value of Copywork in Learning UI Design

Tadao Ando is a self-taught Japanese architect who designs spaces for heightening and enhancing one's own ability to connect with nature and reflect on life. Unlike the architects of today who persevere through a minimum of five years of college studies, Ando learned to design sensuous spaces outside of the formal education system. He did this by apprenticing carpenters and designers, visiting impressive buildings around the world, and tracing the work of master architects who came before him. 
 
Not dissimilar from the "copywork" students do throughout our newest course, UX Academy Foundations, Ando embraced copying as a learning technique. The story goes that the young Ando was perusing a secondhand bookstore when he came across an unaffordable book of Le Corbusier's sketches. After weeks of saving, he purchased this bound archive of Le Corbusier's sketches and let the drawings flood his thoughts and train his hand by reproducing them. Ando recalls, 

I traced the drawings of his early period so many times, that all pages turned black. In my mind I quite often wonder how Le Corbusier would have thought about this project or that.

Today, Tadao Ando is one of the world's most celebrated and awarded architects whose portfolio spans well over 100 architectural masterpieces worldwide.

How Can Copywork Help Me Learn UI Design?

Reproducing existing designs can help an individual understand why and how those designs work. 
 
The most important thing to note is copywork, as we call it, is very different from plagiarism. We never encourage passing off someone else's work as your own. However, we strongly believe in the practice of copying designs in educational settings because it doesn't just help with learning technical tools, like Figma, Sketch, or Adobe XD—it forces interpretation. 
 
The copywork students pursue in Foundations challenges you to recreate layouts, buttons, grid systems, icons, and many more elements that culminate in landing pages or mobile apps, for example. The interfaces being copied have the highest reputation in the field of UI/UX design. These copywork projects therefore diversify students' technical skillsets and are regularly updated to help students stay attuned to design trends.

Learning UI Design by Copying

It can be an arduous process to rebuild someone else's design from scratch, but this activity is tremendously valuable because it makes one see the great deal of nuance that goes into the interfaces we regularly use. Without these learning opportunities, we may otherwise be blind to the fine details of a user-friendly interface. 
 
We encourage you to give copywork a try for yourself through this exercise. 

1. Navigate to one of your favorite websites or apps.
2. Take a screenshot of the content above the fold,  or the first app screen.
3. Open your prefered design software tool (Figma, Adobe XD, etc.) and start a new project/art board.
4. Paste in the screenshot.
5. Next to the screenshot, create a new frame in the same size.
6. Begin recreating all elements from the screenshot onto the art board (buttons, boxes, text, etc.).
7. Try your best to recreate the screenshot, and observe what you learn along the way.

Copywork Gives You a Deeper Understanding of the User Experience

You might recognize this process as a form of analysis. As you continue to analyze through remaking, you’re likely to develop a deeper understanding of the initial design challenge, as well as the design process—not just the graphic arrangement.
 
By taking the time to copy designs, you might even uncover ways to improve the user experience which were not immediately obvious. This is when students start to see design at another level. This is when reproducing others' design work takes one beyond just learning the tools or visual language. 
 
That being said, students certainly do begin to develop an eye for the visuals that take up a user's digital space early on in our Foundations course. From recreating rounded rectangles, to spacing out bodies of text, to reproducing a color, the tasks students undertake in copywork accelerate their visual and UI design skills (one of the key learning goals for the UX Academy Foundations course).

Copywork Helps You to Uncover Design Patterns

No doubt, reproducing successful designs will also reveal conventions and design patterns. Design patterns are reoccurring solutions that solve commonly seen problems in UI design. While browsing the web may help you generate an exhaustive list of design patterns, copying existing designs will help you get a clear understanding of why those solutions exist and how they're best applied.  
 
 
The well-meaning designs supplied by creative individuals that came before us direct and guide the learning of UI/UX designers today. Just as architects like Tadao Ando traced the work of Le Corbusier, or type designers like Kris Sowersby draw inspiration from Claude Garamond, UI/UX designers can gain insight from mastering the interfaces of earlier software designers through copywork. Copywork is a tool for knowledge production. It can spark an internal dialogue or an actual conversation about why something was designed the way it was. 
 
Want to try your hand at learning the basics of visual and UI design through projects that involve copywork? Explore UX Academy Foundations to learn more.