{"id":15625,"date":"2017-05-25T09:38:26","date_gmt":"2017-05-25T16:38:26","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=15625"},"modified":"2024-05-20T00:33:39","modified_gmt":"2024-05-20T07:33:39","slug":"great-artists-reuse-reusable-patterns-product-design","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/great-artists-reuse-reusable-patterns-product-design\/","title":{"rendered":"Great Artists Reuse: Reusable Design Patterns in Product Design"},"content":{"rendered":"

You\u2019ve probably heard this before: \u201cGood artists copy, great artists steal\u201d.<\/p>\n

The quote is usually attributed to Picasso, but there\u2019s no proof \u00a0that Picasso ever said that, apart from Steve Jobs quoting him in one of the interviews. No matter who authored these words, they still describe an important cultural concept of remixing<\/i> as part of the creative process.<\/p>\n

Remixing is constantly pushing art towards the future, without breaking the connection with the past.<\/span><\/i><\/p>\n

The functional nature of product design and the nuances of the Internet put a unique spin on the whole idea. You see, the Internet is a densely inhabited world in which user experience is a huge differentiator for businesses. Straight out copying others is not only embarrassing, but might negatively affect the user experience. You can\u2019t just copy without context.<\/p>\n

Blindly copying work of others will not make you a great designer. Working with users will.<\/span><\/i><\/p>\n

So how do we remix what exists to build great user experiences? To start with, we have to understand the key differences between the two kinds of copying in design.<\/p>\n

The Two Kinds of Copying in Design<\/h2>\n

In product design, copying others typically takes two forms:<\/p>\n

    \n
  1. Mindless copying. Mindless copying (e.g. plagiarism) happens when a designer heavily borrows from a work of another designer without thinking about adaptation for users. Mindless copying is usually skin deep, lifting just the visual aspects of the design.<\/b><\/li>\n
  2. Thoughtful reuse. Thoughtful reuse requires analyzing patterns used by other designers to adapt them or new user contexts. Thoughtful reuse doesn\u2019t focus on copying, but rather of remixing<\/i> patterns and adding them to the planned user experience.<\/b><\/li>\n<\/ol>\n

    \"Two<\/p>\n

    Thoughtful reuse is like standing on the shoulders of giants. Our new creations take what\u2019s best in the past and take it to the next level. That leads to fast progress.<\/p>\n

    Some could argue that basing our design on what exists only kills innovation. But hardly anything in our collective culture comes to life from thin air. \u00a0Analyzing and improving what exists lies at the heart of creative nature. It roots innovation in reality.<\/p>\n

    Reusability in product design is not like running in circles. It\u2019s more like running a spiral in which every lap elevates you to the next level.<\/span><\/i><\/p>\n

    On the other hand, mindless copying is like building on a shallow foundation – the whole experience will eventually collapse.<\/p>\n

    So thoughtful reuse and remixing is the way to go. But here\u2019s the surprising truth: \u00a0reaching higher efficiency and improving \u00a0your craft should not start with reusing the work of others. It should start with reusing your own work.<\/p>\n

    The first person you should copy is…you. By reusing your own work you can reach new highs of efficiency and UX quality.<\/span><\/i><\/p>\n

    Copy Yourself and Share It With Others<\/h2>\n

    Designers are creators. We love to come up with new ideas and bring them to life. Yet, constantly coming up with new ideas isn\u2019t a feasible business strategy.<\/p>\n

    Whenever we try to create something completely new, when an already tested solution exists, \u00a0we incur a triple cost<\/b>:<\/p>\n

      \n
    1. Production Cost <\/b>– We ask our engineers to craft a completely new code.<\/li>\n
    2. Maintenance Cost<\/b> – By building a completely new solution we double the maintenance cost. Now both old and new needs to be supported. Customer service teams need new training. Bugs will come up and require resolving.<\/li>\n
    3. Experience Cost \u00a0– If you\u2019ve ever redesigned a big digital product, you know that users hate changes. The reason is very simple: by changing what they know and feel comfortable with, you\u2019re attacking their feeling of security. Building multiple distinctive solutions (or visual representations of the solution) for the same problem will just confuse users and make them uncomfortable. <\/b><\/li>\n<\/ol>\n

      Sometimes we have to accept this triple cost. Sometimes drastic changes are needed. Sometimes coherence needs to be compromised.<\/p>\n

      Sometimes\u2026 but not usually.<\/p>\n

      Usually, \u00a0a smart designer starts by analyzing what she already created (or what other designers on the team has already created) to jumpstart the creative process, avoid an unnecessary cost, and create coherent experience for users.<\/p>\n

      Rule of thumb: analyze existing patterns before jumping into a new solution.<\/span><\/i><\/p>\n

      Enter the Design System<\/h2>\n

      Whenever consistency and efficiency are discussed, \u00a0one solution immediately comes to mind – the design system. If you\u2019re lucky, you\u2019re already working with one. If that\u2019s not the case, you\u2019re probably going to work with one soon. Our survey<\/a> done with over 3,100 enterprise designers, showed that nearly 70% of companies either has some form of a design system or is currently working on one.<\/p>\n

      Design systems are a process of building and maintaining single source of truth for all things interface. It\u2019s a living language of creation for digital products<\/a>.<\/p>\n

      But what if you don\u2019t have a design system, or don\u2019t need one yet? Well you can still standardize the your existing styles and patterns.<\/p>\n

      In design, habits trump rules. It\u2019s never too early to reuse assets in your design workflow.<\/span><\/i><\/p>\n

      Standardize Building Blocks<\/h2>\n

      The first step that can immediately improve your design process is \u00a0saving and sharing the most fundamental design building blocks – colors, text styles, icons, image assets.<\/p>\n

      Saving color palettes and text styles is typically the last thing we\u2019re thinking about when designing, but just think about all this time wasted on the constant \u00a0search for the color or style of the text used in some old project. Or worse, think about all these times when you eyeballed things and got \u2018almost\u2019 the right color, or font size and you added to the overall lack of coherency of user experience.<\/p>\n

      And yes, in the past saving and sharing colors and text styles was difficult, so nobody really wanted to do it. These days though it became so easy, that you can easily apply it to your usual design workflow.<\/p>\n

      This is how saving colors and text styles looks like in UXPin:<\/p>\n

      \"\"<\/p>\n

      Everything saved in the library is immediately available to your team. Instead of checking styles in the old projects or guessing you can simply apply all the shared styles while working on your projects.<\/p>\n

      Whenever I have a unique style and color that I think we\u2019ll use in more than one place, I save it in the library.<\/p>\n

      Saving your standard building blocks takes a second, but ends up saving hours.<\/span><\/i><\/p>\n

      But that\u2019s not all.<\/p>\n

      Another major waste of time is sharing all the graphic assets – logos, brand images, approved product shots, \u00a0headshots, icons. Back in the days, my teams used to maintain FTP servers with shared assets. Then we switched to Dropbox, only to start using Google Drive. Every single time though the problem was that these assets were not easily accessible from within our design tools.<\/p>\n

      Now, at UXPin, we just store all the assets in a shared library. All the logos, screenshots, icons and other images are immediately available to the entire team. Huge time saver.<\/p>\n

      \"\"<\/p>\n

      Standardize Patterns<\/h2>\n

      Standardizing, sharing, and reusing build blocks is a great start to copying<\/i> design in a way that increases efficiency and quality. But to really master reusability, you have to move to adapting and reusing entire interface patterns. Only then will you design even faster and more consistently.<\/p>\n

      The golden rule of design efficiency is:<\/p>\n

      When you use it more than once, turn it into a symbol.<\/span><\/i><\/p>\n

      Back in the day, design tools offered only masters<\/i> limited in functionality that were lacking ability to override particular properties of elements, save states of elements and, often, save interactions and animations. It was very difficult, if at all possible, to create masters that were flexible enough to serve the entire team. These days are officially gone.<\/p>\n

      Forget about your old design tools with masters limited in functionality and painful to use. Those days are gone.<\/span><\/i><\/p>\n

      When we started to work on shared symbols, we had to make significant changes to what was a standard in competitive tools in the past. To fit the needs of our customers and, frankly, our needs, we had to change the status quo.<\/p>\n

      Here are our the internal requirements our product team described for UXPin symbols:<\/p>\n