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

74 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. […]

  47. m88明升 says:

    This is the right site for anybody who wishes
    to find out about this topic. You know so much its almost hard to argue with you (not that I actually will need to…HaHa).
    You definitely put a new spin on a subject that
    has been written about for ages. Excellent stuff, just wonderful!

  48. Excellent posts. today i’m able to make smarter wire frame. Thank you for giving this excellent posting.

  49. スイス梅表(Titoni)跨界とドイツ出身の中国芸術家张奇開協力発行アーティスト腕時計。今回のテーマは「アーティスト腕時計が大気圏に再突入するNo . 1」は、1、超現実し単身空間の中の可愛いパンダは、未来を地球へ伝達式、気候変化による生態の危機。梅表を表現する特別テーマ、環境及び地球の関心。ジェイコブ時計スーパーコピー梅表表示につき1本の腕時計は、透過時報文教基金会の植樹を育てる計画は、お客様の名の愛を育てる株苗にこたえて、緑生き、地球を愛する善尽企業の社会的責任。 http://www.gowatchs.com/brand-234.html

  50. 同様にこれらの魅力的な機微のすべての商標、クラブでより明らかにしようと、ダイヤルブローバ時計マンチェスターユナイテッド・クラブの冠の上で見られることができます。 ブランド時計コピー激安通販 有名な頂上、1971年以降は、シャツの上の中心部分を飾る時のサブダイヤル、と悪魔(愛情”として知られるフレッド・ファンによって赤」)、竜頭の上で見られることができます。 http://www.bestevance.com/chanel/38/

  51. 「スター』この映画を、マシュー・アカデミー影帝麦康纳(Matthew McConaughey)とアニー・海瑟薇(アンHathaway)などに主演、クリストファー・ノーラン(Christopher Nolan)監督。この映画は探検家たちの一番新しい発見、ワーム・ホールを利用して、人類の宇宙旅行の限界を超え、広大な宇宙に冒険する物語を航行する。舞台は近未来、男性の主役のクーパーは元NASA宇宙飛行士が、地球の気候の変化のため、作物栽培による食糧にくい人間の深刻な不足のときは、クーパーと女性科学者艾米莉亜(アンHathaway飾)らを担うた人類を救うの重要な計画が、太陽係外へ、人類の新しい生命力を探して。映画のシーンを撮影アイスランド中外星は、火山の爆発後黒砂に覆われた氷山人に一種ではおなじみのなじみのない感じ、醸し出す雰囲気完璧外星。主人公库パーキンは映画の最後に入った五维空間利用時間は線形」をコンセプトに、片侧を建てた90x60x45フィートの部屋で、映画の中で見たどうせ交差の線で、実際には3 Dプリントテクスチャ、これが現れる謎の五维空間。11月10日、「スター」を監督クリストファー・ノーラン连携主演マシュー・麦康纳、アン・海瑟薇などを含めた「スターを越えて》なく現れ上海新天地に参加し、映画の中国での初日舞台あいさつに出席しじゅうたんを見て http://www.ooobrand.com/distribution/index.html

  52. 人気の春夏シャネルベルトコピー流行ファッションや定番アイテムなどファッションアイテムが勢揃いシャネル CHANEL レディースファッション ファッション雑貨・小物 ベルト を海外通販!美しいシャネルのサングラス、格安のシャネルのサングラスコピーこれらの魅力的な割引シャネルのサングラスだけでなく、暑い夏に目を保護することも するのに十分な美しさと優雅さを追加します。シャネル サングラス カメリア・最安価格をぶった斬り! http://www.okakaku.com/Super-Copy-9577.html

  53. 種々の技術が存在するこの効果は累積的にスマートなガラスということを達成するために、ウィキペディアによると、私は確信はないがttlingö1 dを用いた。 モンクレールスーパーコピー 私は言わなければ、産卵中のリモートコントロールの数を減らすことのこの時代に、これはあなたがあなたの電話にアプリから制御できるようにしなければならない何かのようです。しかし、私は確かにちょっと遠いと、前後のスイッチングがそこに立っているのを想像することができます。 http://www.ooowatch.com/tokei/chopard/index.html

  54. 私にとっては、2015年年間カレンダーiwcの腕時計の最も印象的な要素の運動である。オメガスーパーコピー後に大44.2mmワイドケースと、広大なサファイアクリスタル窓を通して、あなたは近代的な機械の腕時計運動の自社製キャリバー52850 iwcの素晴らしい例であることを見ます。iwcの米国の運動のアーキテクチャの範囲内で種々の谷と山の深い見方を与えることは素晴らしい仕事をしました。と運動を取り上げた事例の多くは、大きなプラスである。 http://www.gowatchs.com/brand-167.html

  55. 超人気旺店全新登場人気ブランド品★2016年全新登場★揃っている。ロレックス腕時計、オメガ、ブルガリ、カルティエIWC腕時計、シャネルコピーバッグ、財布腕時計、バネライ、ベル&ロス、ゴルム腕時計チュードル腕時計、ルイヴィトン、グッチバッグ財布、コピーミュウミュウバッグ財布、エルメス、ブラダバッグ、財布等弊社は「信用第一」をモットーにお客様にご満足頂けるよう、送料は無料です(日本全国)! ご注文を期待しています!下記の連絡先までお問い合わせください。是非ご覧ください http://www.wtobrand.com/sbro1.html

Leave a Reply