Getting better at design is easy…just copy people!
There’s this ongoing trend in the design community of redesigning popular apps, and I don’t quite understand it. It’s so popular, there are sites dedicated to it. On the surface, it’s a neat exercise to see what Facebook might look like in another style, or what an airplane boarding pass would look like if it was designed by Dieter Rams.
However, I tend to bristle at these redesigns because they presume a lot about the product priorities and/or business decisions behind what we see in these successful products. A truly successful redesign would have to consider far more factors than just visual design and UX:
- Who is the target audience?
- What are the the business goals?
- Where does this fit in the product roadmap?
- What are the technical constraints?
- Will the existing architecture support this new design?
- If not, how much will it cost to get us there?
- How does this affect ancillary products in the ecosystem?
- And on and on and on…
Ultimately, I think designers are undergoing these unsolicited redesigns to get better. But I think you can actually get better simply by recreating rather than redesigning.
Recreate the work of masters to become a master yourself.
There’s probably a fancier term for this process but the general premise is that there is a lot you can learn about your own craft by re-creating someone else’s masterpiece.
Carrying forth my fondness for cooking metaphors, let’s try this one: The best chefs in the world — Grant Aschatz, David Chang, René Redzepii, Jiro Ono, Gordon Ramsay—learned by copying. Under the wings of their mentors, they worked tirelessly to perfectly replicate the recipes of their teachers before going on their own to create, recreate, and innovate.
In chess, playing out famous matches like Kasparov’s Immortal can help you see the board the way a grandmaster does. By playing a champion game, experiencing every move in real-time, you’ll start to understand the choreography of the pieces. The same is true for design.
Develop your UI instincts by copying successful products
I have a sneaking suspicion that a lot of UX designers have very fundamental questions about how to take their research and wireframes and put them to pixel; e̶m̶b̶a̶r̶r̶a̶s̶s̶i̶n̶g̶ s̶i̶l̶l̶y̶ totally normal questions like:
- “What is a good UI font?”
- “How big are headings vs. button labels?”
- “How do I use whitespace correctly?”
- “Should I just give it all up and get a real job like my parents wanted in the first place?”
I have a sneaking suspicion that a lot of UX designers have very fundamental questions about how to take their research and wireframes and put them to pixel.
I’m sure you’ve had questions like this yourself, and that’s okay! If you haven’t, please just nod and smile so I can feel better about myself. Out of school, I’d gotten pretty good at identifying problems and coming up with solutions. But I was pretty lost when it came to putting these solutions to pixel. Even as I’ve become more experienced, I’ll come across a fresh UI approach that I’ve never seen and wonder how they’re pulling it off.
Before I had Dribbble or a WhatTheFont extension for Chrome, I would screenshot apps I used and “trace” over them in Fireworks until what I was mocking up looked indiscernible from the screenshot. Now I do the same thing in Sketch.
So here’s a small design challenge for you. If you’re trying to polish your design chops, skip that reimagining of [very popular social networking app] you were planning on doing for fun and just try copying something pixel-for-pixel. Literally screenshot your browser, hop into your design program of choice (I like Sketch), and just start copying.
You’ll start to see how some of the most popular apps are so simply designed. You might even find some inconsistencies here and there (but hey, these are screenshots so we’ll blame that on dev 😉). And if you’re feeling really adventurous, you can try utilizing layer and text styles to get a feel for how these designs can scale. I know this isn’t as sexy as making a flat Pinterest, or Twitter in Material Design, but I think you’ll find it’s a great way to hone your skills.
To get you started, you’re welcome to download some of the ones we’ve done recently. We mocked up (as closely as we could) some of our favorite tools we use in design (except Sketch, that’s way too meta)…(but honestly, we might do this one soon just for giggles):
Each file has 1–3 screens and we were careful to use proper grouping, styles and symbols (an effort that made this quite a bit more challenging). We’re happy to make more if people enjoy them, and would love to hear your ideas for what we should do next!
Also, we’ve built an Infinite UI Kit to help UX designers speed up their design process in Sketch. Check us out at https://www.uxpower.tools/, and follow us on Twitter @uxpowertools. Follow me too, if you were entertained: @thejmoore.
