Mar 13 2013

Don’t Copy, Steal

There is a common technique in fine art: painters and sculptors would take a real life model and use that as a reference to create something entirely new. While that approach is not foreign in the digital world, far too often designers would use references that have already been created and well polished. That becomes a problem when the difference between the reference and the finished product is too little, thus we get thoughtless copies.

I firmly believe that if you don’t have a solid understanding of the original reference (the one that was copied by the copier), you are bound to create an uninspired result. After all, if you copy a button from here, a header from there, how do you know that all those design elements will be cohesive? Will you be able to live up to that standard moving forward? Can you make sure that your final design won’t look like a Frankenstein of many designers put together? The only way is to stop copying and become the original designer.

DieterRams-UI

Download the Sketch files: UI Kit and iPhone Design

Steal And Make It Better

“Good artists copy, great artists steal,” Picasso once said. He’s right. By going back to where the original idea stemmed from, you get a much better understanding of what made it work. On the design of the iPod, Apple didn’t copy the music players that were in the market, they looked at a true original for inspiration: Dieter Rams. They not only took some design cues from him, but also shared his obsession for perfection and simplicity. They embraced his 10 design principles of good design and they worked tirelessly on the details. The essence was stolen, but it was translated for the 21st century. And because Apple did such a good job at stealing, it’s hard to think of the portable music player without thinking of the iPod.

steal-ipod

The Telephone Game

This is a game in which a player tells a message to another, which is passed through a line of people. The message that comes out at the end typically becomes erroneous. Too many designers play that game too. They copy popular designers, not knowing that that designer may have copied other designers. If you have a large line of designers copying one another, the result is mediocre at best. Do you want to be the 200th to copy a trend?

What we should do instead is to take influence from the very original designer and dig deep into his/her motivations. We should study his/her design process and apply that to ours – the attention to detail, the techniques and the tools rather than just the pixels. We should transform old ideas into new ideas and solve our very own problems. Only with that method can we completely own the idea and proudly put our name on top of it. Only with that design thinking can we consistently design successful products one after another. Only with true creativity and hard work can we put a dent in the universe.

The Dieter Rams Book

As I mentioned in my previous blog, I am currently reading his fascinating book: As Little Design As Possible. It has an inspiring story about how Jonathan Ive, as a child, was captivated by the level of detail and precision on one of Dieter Rams’s work. He then proceeded to study his work and marveled at the products he built, even 40 years after it was conceived.

dieter-rams-grid

Half of the book shows photos of Dieter Rams’ minimalist work. When I looked at his designs, I thought to myself, if any of those products were to be released today, they would still look beautiful and perfectly usable. That’s because simplicity transcends technology and fashion. “Good design is long lasting”, Dieter Rams said. It’s true, the best designs still stand the test of time.

The Dieter Rams UI Experiment

DieterRams-iPhone

This is an experiment to translate Dieter Rams’s work into a digital user interface. Although I’m sure it could be just as fitting to borrow a different style, I used realism to convey the minimal colors and clear buttons. Just like how artists emulate reality, designers can imitate real shapes while keeping designs minimal. “Simplicity is not the absence of complexity. Just removing clutter would result in uncomplicated but meaningless products.”, Jonathan Ive wrote.

dieter-rams-braun-sk-61 Original reference by Dieter Rams.

Making design intuitive requires that you care about the reality in which people live in. That means bringing clarity to the shapes and colors based on life experience. That’s why I chose only 2 colors (too many colors can distract), designed realistic shapes (well-proportioned buttons and layout) and created a comfortable lighting (gradients and shadows). I was hoping that nothing in this design is unnecessary.

0 tweets

65 Responses to “Don’t Copy, Steal”

  1. Lovely read. Can’t agree more. “Don’t Copy, Steal” by @MengTo: http://t.co/JHnm6GhBon

  2. Shaimoom Newaz says:

    Thanks for this article. Always nice to a turntable in a design post! In any case, whenever I struggle to create, I find it most helpful not only to explore and study other designers’ creations and processes, but also to revisit some of my own successful projects from the past. This accomplishes two things: (1) It builds confidence in my ability to create again and (2) it allows me build upon my process whether it is to refine it or divert from it. After all, I have learned that the only person against I can truly compare is myself.

  3. Don’t Copy, Steal by @MengTo: http://t.co/2kJShb9kHz

  4. Another great article on an idea that’s all too forgotten these days. I’m currently reading ‘The Shape of Design’ by Frank Chimero where he goes into great detail about the difference between ‘How’ and ‘Why’ and the importance of asking ‘Why’ during the creative process. He mentions that “If we stay on the surface and do not dig deep by asking Why, we’re not truly designing.” When we ask these questions as designers, we are more apt to creating thoughtful design. I’d like to think Dieter Rams asked Why quite a bit.

    Again, great article! Always a pleasure reading your posts. Cheers.

  5. @i_limitless says:

    Don’t Copy, Steal by @MengTo: http://t.co/lSBAHtYDES

  6. @matzipan says:

    Don’t Copy, Steal by @MengTo: http://t.co/8DTFD8jRED

  7. Cat Smith says:

    I love that you wrote an article about this. I’m a big advocate on discussing “controversial” topics that are circling the industry and do so on my own blog – just to see what people out there think and have them get their opinion out as well. Often times, others are somewhat shy in voicing their thoughts, so posts like these give them an even playing field and open platform to do so.

    I really like your points and I think more often than not, artists are angry with those who “copy” their work instead of realizing it for what it actually is. I feel like part of our job as designers is to analyze the work of others, find the flaws and improve on it in any way possible. There’s always something “more” that can be done or used.

    I think when we cap ourselves by saying “this is finished” versus “this is finished for now. we can iterate later.” – it prevents us from always having a beginner’s mind – in turn, hindering our ability to achieve more.

    Great article.

  8. @itsCatSmith says:

    Don’t Copy, Steal by @MengTo: http://t.co/qIHn4oCUo6

  9. Don’t Copy, Steal by @MengTo: http://t.co/14idzFpRSY

  10. @jonseg says:

    Don’t Copy, Steal http://t.co/zFVYlXNyuC #design

  11. کپی نکنید. بدزدید. (و بهترش کنید). http://t.co/ZEw14y2svb

  12. @iTibz says:

    Don’t Copy, Steal (and make it better) [via @etienneservant] | http://t.co/JG3LaLWRZS

  13. @JRodl3r says:

    Don’t Copy, Steal by @MengTo » http://t.co/mQCePoksMu

  14. @lizhunt says:

    Don’t Copy, Steal by @MengTo: http://t.co/iONu99VyEE

  15. @MrSlash says:

    Don’t Copy, Steal. The only way is to stop copying and become the original designer. http://t.co/FOS6NK13fz

  16. Hamish M says:

    Thanks Meng, I really appreciate your articles. I’ve been reading and hearing a lot about Dieter Rams lately, and his work has become a real inspiration to me. Best of luck with your UI work in that respect.

    On that note, do you have any recommendations on books about or featuring Mr. Rams? I’d love to learn more.

  17. Don’t Copy, Steal by @MengTo: http://t.co/NnfVp17i6d

  18. Don’t Copy, Steal by Meng To: http://t.co/IXdHQASKSI #design #sketchapp

  19. @_EricPires says:

    Don’t Copy, Steal by @MengTo: http://t.co/Yul1i3KGaL | Nice take @Meng

  20. @ivanfzy says:

    Don’t Copy, Steal | Meng To – UI/UX Designer http://t.co/pGrPO1rVzu

  21. @beebig says:

    Don’t Copy, Steal by @MengTo: http://t.co/is5Wn02E03

  22. @cschwan says:

    Don’t Copy, Steal | Meng To|UI/UX Designer http://t.co/bfzkeNLWdT

  23. Don’t Copy, Steal by @MengTo: http://t.co/qwHUb1omaO

  24. Jakub Foglar says:

    Great article, thanks Meng.

    I’m sure you must have been thinking a lot about which approach to take to a Rams-inspired UI – realistic? Flat? Subtle hints of realism?

    That’s where I would disagree with you. I don’t think Rams would go for physical representations of real products. In fact I think he would be against skeuomorphism overall in UI design.

    I’m guessing this from the true minimalism of his work. I’m not saying yours is the wrong approach, I guess my point is that it would have been incredibly interesting what he would do were he to design an iOS app.

    Keep up the great writing!

  25. Don’t Copy, Steal | Meng To|UI/UX Designer http://t.co/rMiUCY6Zi2

  26. @atican says:

    Don’t Copy, Steal | Meng To|UI/UX Designer http://t.co/eEWU8gbuEJ

  27. Don’t Copy, Steal by @MengTo: http://t.co/6CruEHAnnC

  28. @mymalox says:

    Don’t Copy, Steal by @MengTo: http://t.co/j9DqAymvG6

  29. cahilbey says:

    Your experiment, that’s ironic.

    “As little design as possible”

  30. cahilbey says:

    Actually I was not mentioning that trendy flat – skeuomorphic design discussion. It’s crazy to introduce ‘flat design’ as a new thing. I’d prefer ‘natural design’ though :)

    Because the digital world has its own lighting, texture and shape. For an instance, may be we can consider a default hyperlink as a ‘text with shadow’. Because of its nature and context, that underlined text says ‘hi, you can click me’ and that’s it, that’s enough.

    That was my point. Since we can tap a 12px link on an iPhone screen, we can consider your effects –in our case pseudo forms– as over-desings, can’t we?

    Is there anybody who can say a default hyperlink is ugly or non-functional, or not straightforward? And 60 year old can understand what it is and how it works, now and may be 10 years later. It’s timeless.

    Briefly, I don’t think translating a (product) designer’s 3d forms into a 2d image by only using visual tricks does not tell that designer’s philosophy. Can we feel that texture? Can we smell that material? Is it honest?

    Let’s imagine Dieter Rams designing an app. How would he start the project?

  31. @dimsario says:

    “Don’t Copy, Steal” : http://t.co/XcwKmCTlKg

  32. @byunlisa says:

    Don’t Copy, Steal by @MengTo: http://t.co/o3eaFdO2En

    카피하지 말고 훔치세요! ^^ 해적이 됩시다.

  33. Don’t Copy, Steal by @MengTo: http://t.co/TMsdiM0AqW — “Good artists copy, great artists steal,” ~ Picasso

  34. @zairabbas says:

    Don’t Copy, Steal by @MengTo: http://t.co/1Xc96UE2Kq

  35. Oliver Yang says:

    Hi, I like your design very much! I’m a student in university. Nice job! Can you tell me which type font was used in your example, Dieter Rams page. Coz I just love it! Thank you very much!

    Best

  36. Don’t Copy, Steal. #DieterRams http://t.co/yaphgBubXG

  37. @dsgndiver says:

    Don’t Copy, Steal | Meng To – UI/UX Designer http://t.co/VIJ2iJKcyE via @feedly

  38. [...] the hardest part is how you interpret that inspiration. In my previous article, I discussed how you should not copy, but steal. The more distance you have between the source and the finished product, the more room you have to [...]

  39. @ToolStudios says:

    Don’t Copy, Steal by @MengTo: http://t.co/rIv1i0SkGn

  40. @zametniy says:

    Article to read: “Don’t copy – steal” http://t.co/xvuKmnF01t

  41. Don’t Copy, Steal by @MengTo: http://t.co/cdhnrZZy28

  42. Marty says:

    Nice article – the only thing that bothers me about your UI experiment is the different perspective on the rounded rectangle buttons and the circle buttons :P

  43. @choann04 says:

    insightful article :) read the comments too. you’ll get few great tricks | RT @hackdesign: Don’t Copy, Steal http://t.co/586fpgpfr8

  44. @hyubs says:

    Don’t Copy, Steal by @MengTo: http://t.co/GNEqnQan3Y

  45. We’re also a gaggle of volunteers as well as beginning the latest structure in your group. Your web site offered all of us having valuable information to be effective on. You have done some sort of powerful practice and also your whole online community may be thankful back.

  46. [...] For design inspiration, check out niice.co and littlebigdetails.com. Also keep your toolbox sharp by buying a book or reading up on what some of your  favorite pros are doing. [...]

Leave a Reply