Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Algorithm-Driven Design: How Artificial Intelligence Is Changing Design

I’ve been following the idea of algorithm-driven design for several years now and have collected some practical examples. The tools of the approach can help us to construct a UI, prepare assets and content, and personalize the user experience. The information, though, has always been scarce and hasn’t been systematic.

However, in 2016, the technological foundations of these tools became easily accessible, and the design community got interested in algorithms, neural networks and artificial intelligence (AI). Now is the time to rethink the modern role of the designer.

Further Reading on SmashingMag: Link

4
Album covers processed through Prisma and Glitché (View large version5)

Will Robots Replace Designers? Link

One of the most impressive promises of algorithm-driven design was given by the infamous CMS The Grid6. It chooses templates and content-presentation styles, and it retouches and crops photos — all by itself. Moreover, the system runs A/B tests to choose the most suitable pattern. However, the product is still in private beta, so we can judge it only by its publications and ads.

The Designer News community found real-world examples of websites created with The Grid, and they had a mixed reaction7 — people criticized the design and code quality. Many skeptics opened a champagne bottle on that day.

8
The Grid CMS (View large version9)

The idea to fully replace a designer with an algorithm sounds futuristic, but the whole point is wrong. Product designers help to translate a raw product idea into a well-thought-out user interface, with solid interaction principles and a sound information architecture and visual style, while helping a company to achieve its business goals and strengthen its brand.

Designers make a lot of big and small decisions; many of them are hardly described by clear processes. Moreover, incoming requirements are not 100% clear and consistent, so designers help product managers solve these collisions — making for a better product. It’s much more than about choosing a suitable template and filling it with content.

However, if we talk about creative collaboration, when designers work “in pair” with algorithms to solve product tasks, we see a lot of good examples and clear potential. It’s especially interesting how algorithms can improve our day-to-day work on websites and mobile apps.

Creative Collaboration With Algorithms Link

Designers have learned to juggle many tools and skills to near perfection, and as a result, a new term emerged, “product designer10.” Product designers are proactive members of a product team; they understand how user research works, they can do interaction design and information architecture, they can create a visual style, enliven it with motion design, and make simple changes in the code for it. These people are invaluable to any product team.

However, balancing so many skills is hard — you can’t dedicate enough time to every aspect of product work. Of course, a recent boon of new design tools has shortened the time we need to create deliverables and has expanded our capabilities. However, it’s still not enough. There is still too much routine, and new responsibilities eat up all of the time we’ve saved. We need to automate and simplify our work processes even more. I see three key directions for this:

  • constructing a UI,
  • preparing assets and content,
  • personalizing the UX.

I’ll show you some examples and propose a new approach for this future work process.

Constructing A UI Link

Publishing tools such as Medium, Readymag and Squarespace have already simplified the author’s work — countless high-quality templates will give the author a pretty design without having to pay for a designer. There is an opportunity to make these templates smarter, so that the barrier to entry gets even lower.

For example, while The Grid is still in beta, a hugely successful website constructor, Wix, has started including algorithm-driven features. The company announced Advanced Design Intelligence11, which looks similar to The Grid’s semi-automated way of enabling non-professionals to create a website. Wix teaches the algorithm by feeding it many examples of high-quality modern websites. Moreover, it tries to make style suggestions relevant to the client’s industry. It’s not easy for non-professionals to choose a suitable template, and products like Wix and The Grid could serve as a design expert.

Introducing Wix Artificial Design Intelligence

Surely, as in the case of The Grid, rejecting designers from the creative process leads to clichéd and mediocre results (even if it improves overall quality). However, if we consider this process more like “paired design” with a computer, then we can offload many routine tasks; for example, designers could create a moodboard on Dribbble or Pinterest, then an algorithm could quickly apply these styles to mockups and propose a suitable template. Designers would become art directors to their new apprentices, computers.

Of course, we can’t create a revolutionary product in this way, but we could free some time to create one. Moreover, many everyday tasks are utilitarian and don’t require a revolution. If a company is mature enough and has a design system12, then algorithms could make it more powerful.

For example, the designer and developer could define the logic that considers content, context and user data; then, a platform would compile a design using principles and patterns. This would allow us to fine-tune the tiniest details for specific usage scenarios, without drawing and coding dozens of screen states by hand. Florian Schulz shows how you can use the idea of interpolation13 to create many states of components.

14
Florian Schultz Interpolation (Large preview15)

My interest in algorithm-driven design sprung up around 2012, when my design team at Mail.Ru Group required an automated magazine layout. Existing content had a poor semantic structure, and updating it by hand was too expensive. How could we get modern designs, especially when the editors weren’t designers?

Well, a special script would parse an article. Then, depending on the article’s content (the number of paragraphs and words in each, the number of photos and their formats, the presence of inserts with quotes and tables, etc.), the script would choose the most suitable pattern to present this part of the article. The script also tried to mix patterns, so that the final design had variety. It would save the editors time in reworking old content, and the designer would just have to add new presentation modules. Flipboard launched a very similar model16 a few years ago.

Vox Media made a home page generator17 using similar ideas. The algorithm finds every possible layout that is valid, combining different examples from a pattern library. Next, each layout is examined and scored based on certain traits. Finally, the generator selects the “best” layout — basically, the one with the highest score. It’s more efficient than picking the best links by hand, as proven by recommendation engines such as Relap.io18.

19
Vox’s home page generator (View large version20)

Preparing Assets And Content Link

Creating cookie-cutter graphic assets in many variations is one of the most boring parts of a designer’s work. It takes so much time and is demotivating, when designers could be spending this time on more valuable product work.

Algorithms could take on simple tasks such as color matching. For example, Yandex.Launcher uses an algorithm to automatically set up colors for app cards, based on app icons21. Other variables could be automatically set, such as changing text color according to the background color22, highlighting eyes in a photo to emphasize emotion23, and implementing parametric typography24.

25
Yandex.Launcher (View large version26)

Algorithms can create an entire composition. Yandex.Market uses a promotional image generator for e-commerce product lists (in Russian27). A marketer fills a simple form with a title and an image, and then the generator proposes an endless number of variations, all of which conform to design guidelines. Netflix went even further28 — its script crops movie characters for posters, then applies a stylized and localized movie title, then runs automatic experiments on a subset of users. Real magic! Engadget has nurtured a robot apprentice to write simple news articles about new gadgets29. Whew!

30
Netflix movie ads (View large version31)

Truly dark magic happens in neural networks. A fresh example, the Prisma app32, stylizes photos to look like works of famous artists. Artisto33 can process video in a similar way (even streaming video).

34
Prisma (View large version35)
Aristo app: example

However, all of this is still at an early stage. Sure, you could download an app on your phone and get a result in a couple of seconds, rather than struggle with some library on GitHub (as we had to last year); but it’s still impossible to upload your own reference style and get a good result without teaching a neural network. However, when that happens at last, will it make illustrators obsolete? I doubt it will for those artists with a solid and unique style. But it will lower the barrier to entry when you need decent illustrations for an article or website but don’t need a unique approach. No more boring stock photos!

For a really unique style, it might help to have a quick stylized sketch based on a question like, “What if we did an illustration of a building in our unified style?” For example, the Pixar artists of the animated movie Ratatouille tried to apply several different styles to the movie’s scenes and characters; what if a neural network made these sketches? We could also create storyboards and describe scenarios with comics (photos can be easily converted to sketches). The list can get very long.

Finally, there is live identity, too. Animation has become hugely popular in branding recently, but some companies are going even further. For example, Wolff Olins presented a live identity for Brazilian telecom Oi36, which reacts to sound. You just can’t create crazy stuff like this without some creative collaboration with algorithms.

Oi — Logo loop fundo cinza

Personalizing UX Link

One way to get a clear and well-developed strategy is to personalize a product for a narrow audience segment or even specific users. We see it every day in Facebook newsfeeds, Google search results, Netflix and Spotify recommendations, and many other products. Besides the fact that it relieves the burden of filtering information from users, the users’ connection to the brand becomes more emotional when the product seems to care so much about them.

However, the key question here is about the role of designer in these solutions. We rarely have the skill to create algorithms like these — engineers and big data analysts are the ones to do it. Giles Colborne of CX Partners sees a great example in Spotify’s Discover Weekly feature: The only element of classic UX design here is the track list, whereas the distinctive work is done by a recommendation system that fills this design template with valuable music.

37
Spotify’s Discover Weekly feature (a slide from Giles Colborne’s presentation)

Colborne offers advice to designers38 about how to continue being useful in this new era and how to use various data sources to build and teach algorithms. It’s important to learn how to work with big data and to cluster it into actionable insights. For example, Airbnb learned how to answer the question, “What will the booked price of a listing be on any given day in the future?” so that its hosts could set competitive prices39. There are also endless stories about Netflix’s recommendation engine.

“Interaction designers vs. algorithms” by Giles Colborne (Source40)

A relatively new term, “anticipatory design41” takes a broader view of UX personalization and anticipation of user wishes. We already have these types of things on our phones: Google Now automatically proposes a way home from work using location history data; Siri proposes similar ideas. However, the key factor here is trust. To execute anticipatory experiences, people have to give large companies permission to gather personal usage data in the background.

I already mentioned some examples of automatic testing of design variations used by Netflix, Vox Media and The Grid. This is one more way to personalize UX that could be put onto the shoulders of algorithms. Liam Spradlin describes the interesting concept of mutative design42; it’s a well-though-out model of adaptive interfaces that considers many variables to fit particular users.

An Exoskeleton For Designers Link

I’ve covered several examples of algorithm-driven design in practice. What tools do modern designers need for this? If we look back to the middle of the last century, computers were envisioned as a way to extend human capabilities. Roelof Pieters and Samim Winiger have analyzed computing history and the idea of augmentation of human ability43 in detail. They see three levels of maturity for design tools:

  1. First-generation systems mimic analogue tools with digital means.
  2. The second generation is assisted creation systems, where humans and machines negotiate the creative process through tight action-feedback loops.
  3. The third generation is assisted creation systems 3.0, which negotiate the creative process in fine-grained conversations, augment creative capabilities and accelerate the acquisition of skills from novice to expert.
CreativeAI44
CreativeAI (Large preview45)

Algorithm-driven design should be something like an exoskeleton for product designers — increasing the number and depth of decisions we can get through. How might designers and computers collaborate?

The working process of digital product designers could potentially look like this:

  1. Explore a problem space, and pick the most valuable problem for the business and users to solve (analysis).
  2. Explore a solution space, and pick the best solution to fix the problem (analysis).
  3. Develop, launch and market a product that solves this problem (synthesis).
  4. Evaluate how the product works for real users, and optimize it (analysis and synthesis).
  5. Connect and unify the solution with other products and solutions of the company (synthesis).

These tasks are of two types: the analysis of implicitly expressed information and already working solutions, and the synthesis of requirements and solutions for them. Which tools and working methods do we need for each of them?

Analysis Link

Analysis of implicitly expressed information about users that can be studied with qualitative research is hard to automate. However, exploring the usage patterns of users of existing products is a suitable task. We could extract behavioral patterns and audience segments, and then optimize the UX for them. It’s already happening in ad targeting, where algorithms can cluster a user using implicit and explicit behavior patterns (within either a particular product or an ad network).

To train algorithms to optimize interfaces and content for these user clusters, designers should look into machine learning46. Jon Bruner gives47 a good example: A genetic algorithm starts with a fundamental description of the desired outcome — say, an airline’s timetable that is optimized for fuel savings and passenger convenience. It adds in the various constraints: the number of planes the airline owns, the airports it operates in, and the number of seats on each plane. It loads what you might think of as independent variables: details on thousands of flights from an existing timetable, or perhaps randomly generated dummy information. Over thousands, millions or billions of iterations, the timetable gradually improves to become more efficient and more convenient. The algorithm also gains an understanding of how each element of the timetable — the take-off time of Flight 37 from O’Hare, for instance — affects the dependent variables of fuel efficiency and passenger convenience.

In this scenario, humans curate an algorithm and can add or remove limitations and variables. The results can be tested and refined with experiments on real users. With a constant feedback loop, the algorithm improves the UX, too. Although the complexity of this work suggests that analysts will be doing it, designers should be aware of the basic principles of machine learning. O’Reilly published48 a great mini-book on the topic recently.

Synthesis Link

Two years ago, a tool for industrial designers named Autodesk Dreamcatcher49 made a lot of noise and prompted several publications from UX gurus50. It’s based on the idea of generative design, which has been used in performance, industrial design, fashion and architecture for many years now. Many of you know Zaha Hadid Architects; its office calls this approach “parametric design51.”

52
Autodesk Dreamcatcher (View large version53)

Logojoy54 is a product to replace freelancers for a simple logo design. You choose favorite styles, pick a color and voila, Logojoy generates endless ideas. You can refine a particular logo, see an example of a corporate style based on it, and order a branding package with business cards, envelopes, etc. It’s the perfect example of an algorithm-driven design tool in the real world! Dawson Whitfield, the founder, described machine learning principles behind it55.

56
Logojoy (Large preview57)

However, it’s not yet established in digital product design, because it doesn’t help to solve utilitarian tasks. Of course, the work of architects and industrial designers has enough limitations and specificities of its own, but user interfaces aren’t static — their usage patterns, content and features change over time, often many times. However, if we consider the overall generative process — a designer defines rules, which are used by an algorithm to create the final object — there’s a lot of inspiration. The working process of digital product designers could potentially look like this:

  1. An algorithm generates many variations of a design using predefined rules and patterns.
  2. The results are filtered based on design quality and task requirements.
  3. Designers and managers choose the most interesting and adequate variations, polishing them if needed.
  4. A design system runs A/B tests for one or several variations, and then humans choose the most effective of them.

It’s yet unknown how can we filter a huge number of concepts in digital product design, in which usage scenarios are so varied. If algorithms could also help to filter generated objects, our job would be even more productive and creative. However, as product designers, we use generative design every day in brainstorming sessions where we propose dozens of ideas, or when we iterate on screen mockups and prototypes. Why can’t we offload a part of these activities to algorithms?

Experiment by Jon Gold Link

The experimental tool Rene58 by Jon Gold, who worked at The Grid, is an example of this approach in action. Gold taught a computer to make meaningful typographic decisions59. Gold thinks that it’s not far from how human designers are taught, so he broke this learning process into several steps:

  1. Analyze glyphs to understand similarities in typefaces.
  2. Formulate basic guidelines for combining typefaces.
  3. Identify the best examples of type combinations to understand trends.
  4. Create algorithms to observe how great designers work.

His idea is similar to what Roelof and Samim say: Tools should be creative partners for designers, not just dumb executants.

60
Generative design by Jon Gold: Plausible combinations

Gold’s experimental tool Rene is built on these principles61. He also talks about imperative and declarative approaches to programming and says that modern design tools should choose the latter — focusing on what we want to calculate, not how. Jon uses vivid formulas to show how this applies to design and has already made a couple of low-level demos. You can try out the tool62 for yourself. It’s a very early concept but enough to give you the idea.

Rene — A Product Design Tool

While Jon jokingly calls this approach “brute-force design” and “multiplicative design,” he emphasizes the importance of a professional being in control. Notably, he left The Grid team earlier this year.

Do Tools Already Exist? Link

Unfortunately, there are no tools for product design for web and mobile that could help with analysis and synthesis on the same level as Autodesk Dreamcatcher does. However, The Grid and Wix could be considered more or less mass-level and straightforward solutions. Adobe is constantly adding features that could be considered intelligent: The latest release of Photoshop has a content-aware feature63 that intelligently fills in the gaps when you use the cropping tool to rotate an image or expand the canvas beyond the image’s original size.

Introducing Content-Aware Crop

There is another experiment by Adobe and University of Toronto. DesignScape64 automatically refines a design layout for you. It can also propose an entirely new composition.

DesignScape: Design with Interactive Layout Suggestions

You should definitely follow Adobe in its developments, because the company announced a smart platform named Sensei65 at the MAX 2016 conference. Sensei uses Adobe’s deep expertise in AI and machine learning, and it will be the foundation for future algorithm-driven design features in Adobe’s consumer and enterprise products. In its announcement66, the company refers to things such as semantic image segmentation (showing each region in an image, labeled by type — for example, building or sky), font recognition (i.e. recognizing a font from a creative asset and recommending similar fonts, even from handwriting), and intelligent audience segmentation.

However, as John McCarthy, the late computer scientist who coined the term “artificial intelligence,” famously said, “As soon as it works, no one calls it AI anymore.” What was once cutting-edge AI is now considered standard behavior for computers. Here are a couple of experimental ideas and tools67 that could become a part of the digital product designer’s day-to-day toolkit:

But these are rare and patchy glimpses of the future. Right now, it’s more about individual companies building custom solutions for their own tasks. One of the best approaches is to integrate these algorithms into a company’s design system. The goals are similar: to automate a significant number of tasks in support of the product line; to achieve and sustain a unified design; to simplify launches; and to support current products more easily.

Modern design systems started as front-end style guidelines, but that’s just a first step (integrating design into code used by developers). The developers are still creating pages by hand. The next step is half-automatic page creation and testing using predefined rules.


“Platform Thinking” by Yury Vetrov (Source70)

Pros And Cons Link

Should your company follow this approach?

Pros Link

If we look in the near term, the value of this approach is more or less clear:

  • Remove the routine of preparing assets and content, which is more or less mechanical work.
  • Broaden creative exploration, where a computer makes combinations of variables, while the designer filters results to find the best variations.
  • Optimize a user interface for narrow audience segments or even specific users.
  • Quickly adapt a design to various platforms and devices, though in a primitive way.
  • Experiment with different parts of a user interface or particular patterns — ideally, automatically.

Altogether, this frees the designer from the routines of both development support and the creative process, but core decisions are still made by them. A neat side effect is that we will better understand our work, because we will be analyzing it in an attempt to automate parts of it. It will make us more productive and will enable us to better explain the essence of our work to non-designers. As a result, the overall design culture within a company will grow.

Cons Link

However, all of these benefits are not so easy to implement or have limitations:

  • We can only talk about a company’s custom solutions in the context of the company’s own tasks. The work requires constant investment into development, support and enhancement.
  • As The Grid’s CMS shows, a tool alone can’t do miracles. Without a designer at the helm, its results will usually be mediocre. On the other hand, that’s true of most professional tools.
  • Breaking past existing styles and solutions becomes harder. Algorithm-driven design is based on existing patterns and rules.
  • Copying another designer’s work becomes easier if a generative design tool can dig through Dribbble.

There are also ethical questions: Is design produced by an algorithm valuable and distinct? Who is the author of the design? Wouldn’t generative results be limited by a local maximum? Oliver Roeder says71 that “computer art” isn’t any more provocative than “paint art” or “piano art.” The algorithmic software is written by humans, after all, using theories thought up by humans, using a computer built by humans, using specifications written by humans, using materials gathered by humans, in a company staffed by humans, using tools built by humans, and so on. Computer art is human art — a subset, rather than a distinction. The revolution is already happening, so why don’t we lead it?

Conclusion Link

This is a story of a beautiful future, but we should remember the limits of algorithms — they’re built on rules defined by humans, even if the rules are being supercharged now with machine learning. The power of the designer is that they can make and break rules; so, in a year from now, we might define “beautiful” as something totally different. Our industry has both high- and low-skilled designers, and it will be easy for algorithms to replace the latter. However, those who can follow and break rules when necessary will find magical new tools and possibilities.

Moreover, digital products are getting more and more complex: We need to support more platforms, tweak usage scenarios for more user segments, and hypothesize more. As Frog’s Harry West says, human-centered design has expanded from the design of objects (industrial design) to the design of experiences (encompassing interaction design, visual design and the design of spaces). The next step will be the design of system behavior: the design of the algorithms that determine the behavior of automated or intelligent systems. Rather than hire more and more designers, offload routine tasks to a computer. Let it play with the fonts.

(vf, il, al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2016/12/conversational-design-essentials-tips-for-building-a-chatbot/
  2. 2 https://www.smashingmagazine.com/2016/07/conversational-interfaces-where-are-we-today-where-are-we-heading/
  3. 3 https://www.smashingmagazine.com/2016/01/is-the-internet-killing-creativity/
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Cover-large-opt.jpg
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Cover-large-opt.jpg
  6. 6 https://thegrid.io/
  7. 7 https://www.designernews.co/stories/65265-the-first-gridio-sites-have-surfaced-and-theyre-kinda-terrible
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/11/TheGrid-large-opt.png
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/11/TheGrid-large-opt.png
  10. 10 http://www.uxmatters.com/mt/archives/2015/02/applied-ux-strategy-part-2-the-product-designer.php
  11. 11 http://www.fastcodesign.com/3060934/can-you-teach-ai-to-design-wix-is-trying
  12. 12 http://www.uxmatters.com/mt/archives/2015/08/applied-ux-strategy-part-3-platform-thinking.php
  13. 13 https://medium.com/@getflourish/designing-with-intent-be6664b10ac
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/11/FlorianSchultzInterpolation.gif
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/11/FlorianSchultzInterpolation.gif
  16. 16 http://techcrunch.com/2014/03/23/layout-in-flipboard-for-web-and-windows/
  17. 17 http://product.voxmedia.com/2014/12/17/7405131/algorithmic-design-how-vox-picks-a-winning-layout-out-of-thousands
  18. 18 https://relap.io/en
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/11/VoxChorus-large-opt.png
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/11/VoxChorus-large-opt.png
  21. 21 https://translate.google.com/translate?hl=en&sl=ru&tl=en&u=https%3A%2F%2Fmedium.com%2F%40mishanikin%2F%25D0%25BE%25D1%2587%25D0%25B5%25D0%25BD%25D1%258C-%25D0%25BF%25D1%2580%25D0%25BE%25D1%2581%25D1%2582%25D0%25BE%25D0%25B9-%25D0%25B0%25D0%25BB%25D0%25B3%25D0%25BE%25D1%2580%25D0%25B8%25D1%2582%25D0%25BC-%25D0%25BF%25D0%25BE%25D0%25B4%25D0%25B1%25D0%25BE%25D1%2580%25D0%25B0-%25D1%2586%25D0%25B2%25D0%25B5%25D1%2582%25D0%25B0-%25D0%25BA%25D0%25BE%25D1%2582%25D0%25BE%25D1%2580%25D1%258B%25D0%25B9-%25D1%2580%25D0%25B0%25D0%25B1%25D0%25BE%25D1%2582%25D0%25B0%25D0%25B5%25D1%2582-98b8f0dcfdc5
  22. 22 http://thesassway.com/intermediate/dynamically-change-text-color-based-on-its-background-with-sass
  23. 23 http://berglondon.com/blog/2012/08/01/headliner/
  24. 24 http://alistapart.com/blog/post/variable-fonts-for-responsive-design
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/11/YandexLauncherColor-large-opt.png
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/11/YandexLauncherColor-large-opt.png
  27. 27 https://translate.google.com/translate?hl=en&sl=ru&tl=en&u=https%3A%2F%2Fevents.yandex.ru%2Flib%2Ftalks%2F3532%2F&sandbox=1
  28. 28 http://techblog.netflix.com/2016/03/extracting-image-metadata-at-scale.html
  29. 29 https://www.engadget.com/2016/08/15/robot-journalism-wordsmith-writer/
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Netflix-large-opt.png
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/11/Netflix-large-opt.png
  32. 32 http://prisma-ai.com/
  33. 33 http://artisto.my.com/
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/11/PrismaAI-large-opt.png
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2016/11/PrismaAI-large-opt.png
  36. 36 http://www.fastcodesign.com/3059059/the-ultimate-responsive-logo-reacts-to-the-sound-of-your-voice
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/11/SpotifyDiscoverWeekly-opt.png
  38. 38 https://www.cxpartners.co.uk/our-thinking/interaction-design-in-the-age-of-algorithms/
  39. 39 http://airbnb.design/invisible-design/
  40. 40 http://www.slideshare.net/cxpartners/algorithms-slideshare
  41. 41 https://www.smashingmagazine.com/2015/09/anticipatory-design/
  42. 42 https://medium.com/project-phoebe
  43. 43 https://medium.com/@ArtificialExperience/creativeai-9d4b2346faf3
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2016/11/CreativeAI.gif
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2016/11/CreativeAI.gif
  46. 46 http://www.r2d3.us/visual-intro-to-machine-learning-part-1/
  47. 47 https://www.oreilly.com/ideas/artificial-intelligence-and-the-future-of-design
  48. 48 http://www.oreilly.com/design/free/machine-learning-for-designers.csp
  49. 49 https://autodeskresearch.com/projects/dreamcatcher
  50. 50 http://radar.oreilly.com/2014/05/the-automation-of-design.html
  51. 51 http://www.patrikschumacher.com/Texts/Parametricism%20-%20A%20New%20Global%20Style%20for%20Architecture%20and%20Urban%20Design.html
  52. 52 https://www.smashingmagazine.com/wp-content/uploads/2016/11/AutodeskDreamcatcher-large-opt.png
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2016/11/AutodeskDreamcatcher-large-opt.png
  54. 54 http://logojoy.com/
  55. 55 https://www.indiehackers.com/businesses/logojoy
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2016/12/logojoy-large-opt.png
  57. 57 https://www.smashingmagazine.com/wp-content/uploads/2016/12/logojoy-large-opt.png
  58. 58 http://rene.jon.gold/
  59. 59 http://www.jon.gold/2016/05/robot-design-school/
  60. 60 https://www.smashingmagazine.com/wp-content/uploads/2016/11/robot-design-school-selection-opt.png
  61. 61 http://www.jon.gold/2016/06/declarative-design-tools/
  62. 62 http://rene.jon.gold/
  63. 63 https://www.youtube.com/watch?v=1DoCQMelAMM
  64. 64 http://www.dgp.toronto.edu/~donovan/design/index.html
  65. 65 http://www.adobe.com/ru/sensei.html
  66. 66 https://blogs.adobe.com/conversations/2016/11/adobe-sensei.html
  67. 67 http://www.creativeai.net/
  68. 68 https://www.subtraction.com/2016/06/17/hand-drawn-rendering-of-3d-objects-and-animation/
  69. 69 http://www.fastcodesign.com/3052463/microsoft-research-debuts-autocomplete-for-animation-and-its-incredible
  70. 70 http://www.slideshare.net/jvetrau/amuse-ux-2015-yvetrov-platform-thinking
  71. 71 https://aeon.co/ideas/there-is-no-such-thing-as-computer-art-it-s-all-just-art

↑ Back to top Tweet itShare on Facebook

Yury leads a team comprising UX and visual designers at one of the largest Russian Internet companies, Mail.Ru Group. His team works on communications, content-centric, and mobile products, as well as cross-portal user experiences. Both Yury and his team are doing a lot to grow their professional community in Russia.

  1. 1

    Scott Showalter

    January 3, 2017 2:32 pm

    If teams can’t even design well, how will machines? Just a thought. :)

    Of course, I agree that personalized UX needs to happen. It’s the right way forward, but I don’t want that personalization to be highly limited from a boxed-in range of AI-driven capabilities, which is the way I think we’re headed, sadly. Machines that can truly learn and create adaptive experiences must have the ability to seek out information and inspiration on their own and absorb from sources other than what they’re being fed. That could also be dangerous though. It’s a Catch 22.

    1
    • 2

      Your irony is absolutely spot on, we’re far from being replaced by robots — if people can’t communicate with people efficiently, how could we do it with machines? :) This is quite a distant future, but I wanted to highlight small bits of it already happening. I hope they’ll inspire other designers and engineers to try to solve these catches :)

      5
  2. 3

    Thank you for this article. I’ve been thinking about these topics for years. Having all these projects rounded up in one place really helped me see what is happening in the design space.

    2
    • 4

      Thanks, Joe! Last year my list of examples quadrupled, so it was the right time to write this article :)

      0
  3. 5

    Scott, one way to think about this is like word processors. Its not that they made the task of writing go faster its that they improved writing workflows which allowed us to focus on the quality of the content, not how long it would take to re-type pages.

    There are already scaffolding systems for getting web projects set up and every designer I know has there own set of project templates and base styles to work from.

    What will we be able to accomplish if AI can get our projects started and get us to the refinements stage. Design is an experience and the more time I get to spend refining the experience instead of charging my client for setting up content and getting to the 85% done stage (the point at which client really engage) the better.

    6
    • 6

      Your last phrase “the more time I get to spend refining the experience instead of charging my client for setting up content and getting to the 85% done stage (the point at which client really engage) the better” is spot on — it could get us to a “Lean UX 2.0” era :)

      2
  4. 7

    “Handmade” was, is and will continue to be a word that inspires quality.

    “Template”, or whatever interesting term you want to use to describe it, was, is and will continue to be a word that inspires cheapness, no matter if its put together by a machine or human.

    4
    • 8

      We shouldn’t be scared, Mihnea! Yeah, some jobs will be replaced, but others will be empowered with these new tools.

      1
      • 9

        Having the right tools to design faster is one thing, and I very much agree that they’re needed.

        What I don’t see happening is AI getting creative in my lifetime.

        3
  5. 10

    Very interesting stuff. I like the idea of tools that could add automation and flexibility to our designs.

    Perhas another use I’d like to see is making the process more streamlined. Our flows are getting bloated with new tools and features, it’d be nice to have a system that could assist us with this forest if knobs.

    0
    • 11

      You’re right, I like to see these new tools as exoskeletons to empower us, not avatars to replace us. I hope this article will inspire some people to find new applications of algorithms to design processes and tools.

      3
  6. 12

    Joerg Hoewner

    January 5, 2017 9:13 am

    Great overview. Thx!

    In your opinion: What will change for designers in terms of required skills & job descriptions.

    0
    • 13

      I think that the best case is when design tools will be more powerful — it’ll benefit all of us, even non-designers.

      But as soon as for now a lot of examples here are still custom solutions made by specific companies, designers should take the lead. I believe that more and more designers will study the basics of machine learning — the same as they did with coding in the past years.

      0
  7. 14

    Nicolas Rigaudière

    January 5, 2017 4:42 pm

    Hey guys, you should check Heek.com, it is the company I’m working for, we created a AI to create your own website but bespoke for SMB’s !

    -1
  8. 16

    Omg, I think it’s time to create Red List for endangered jobs like we already have Red List for animals/plants/whatever. Maybe even more, we need to create a reservation/conservation for that jobs or something like that.

    1
  9. 17

    Lassi A Liikkanen

    January 17, 2017 9:45 am

    Excellent article! I think you should add Google Slides’ Exploration function to the list of examples. It is an illustration of production scale implementation of layout optimization akin to DesignScape. Of academic works, you might mention SketchPlore (http://www.kashyaptodi.com/sketchplore/) that calls itself UI optimizer of both usability and aesthetics.

    1
  10. 18

    Sonia Rogers

    April 18, 2017 2:28 pm

    “Rather than hire more and more designers, offload routine tasks to a computer. Let it play with the fonts.”
    Amen!
    I conmpletely agree with the last statement since AI should make humans’ lives easier but not to oust people from their working places. We don’t want to contribute to unemployment, do we?
    Here is an example who a team of developers where put on AI control: https://qubit-labs.com/how-put-team-under-artificial-intelligence-control/. As we can see, AI is a good assistant but it is not able to take into account a human factor.

    1

↑ Back to top