Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ALGORITHM-DRIVEN DESIGN
WILL ROBOTS REPLACE DESIGNERS?
YURY VETROV
MAIL.RU GROUP
WILL ROBOTS REPLACE DESIGNERS?
In 2016, the technological foundations of these tools became
easily accessible, and the des...
THE GRID CMS
It chooses templates and retouches and crops photos all by itself.
It runs A/B tests to choose the most suita...
OR IT ISN’T?
The product was in private beta until recently, so we were able to
judge it only by its publications and ads....
FULLY REPLACING A DESIGNER
WITH AN ALGORITHM?
UHM, A-HA, YES…
The idea was praised by The Grid and some technologists –
it...
CREATIVE
COLLABORATION
WITH ALGORITHMS
Designers work “in pair” with algorithms
to solve product tasks
JUGGLERS
Designers have learned to juggle many tools and skills to near
perfection. As a result, a new term emerged, “prod...
HEAVYISH…
However, balancing so many skills is hard – you can’t dedicate
enough time to every aspect of product work. Of c...
CONSTRUCTING A UI
SIMPLE PUBLISHING TOOLS
Publishing tools such as Medium, Readymag and Squarespace
have already simplified the author’s wor...
WIX ADVANCED DESIGN INTELLIGENCE
A semi-automated website constructor that enables
non-professionals to create a website. ...
FIREDROP
The idea is similar to The Grid. You provide the content, then a virtual
assistant helps you to create a layout a...
PAIRED DESIGN WITH A COMPUTER
Surely, as in the case of The Grid, rejecting designers from the
creative process leads to c...
FREEDOM FROM ROUTINE
Of course, we can’t create a revolutionary product in this way, but
we could free some time to create...
INTERPOLATION
Florian Schulz shows how you can use the idea of interpolation
to create many states of components.
MY INTEREST:
AN AUTOMATED
MAGAZINE LAYOUT (2012)
Existing content had a poor semantic structure, and updating it
by hand w...
DUPLO
Flipboard launched a very similar model a few years ago.
VOX MEDIA: CHORUS CMS
The algorithm creates harmonious homepage layouts
using a pattern library, then selects the “best” l...
MORE FLEXIBLE AND PERFORMANT
It’s more efficient than picking the best links by hand,
as proven by recommendation engines ...
PREPARING ASSETS
AND CONTENT
ROUTINE :(
Creating cookie-cutter graphic assets in many variations is one of
the most boring parts of a designer’s work.
...
AUTOMATIC COLOR MATCH
Yandex.Launcher uses an algorithm
to automatically set up colors for app cards, based on app icons.
…ACCORDING TO BACKGROUND
Another example is
changing text color according to the background color.
EMPLASIZING EMOTION
Highlighting eyes in a photo for news articles
in an experiment from Berg studio for The Guardian.
PARAMETRIC TYPOGRAPHY
Interpolation of typefaces from several key points.
YANDEX.MARKET COLLECTIONS (RU)
A marketer picks a title and an image, then the generator proposes an
endless number of var...
РОБО-РЕДАКТОР ENGADGET
They nurtured a robot apprentice
to write simple news articles about new gadgets. Whew!
ENGADGET ROBO EDITOR
They nurtured a robot apprentice
to write simple news articles about new gadgets. Whew!
STYLE TRANSFER: PRISMA
Truly dark magic happens in neural networks.
Prisma app stylizes photos to look like works of famou...
STYLE TRANSFER: ARTISTO
Our product can process video
in a similar way (even streaming video).
WILL NEURAL NETWORKS
MAKE ILLUSTRATORS OBSOLETE?
I doubt it will for those artists with a solid and unique style.
But it w...
WOLFF OLINS: OI
A live identity which reacts to sound. You just can’t create crazy
stuff like this without some creative c...
PERSONALIZING UX
For a narrow audience segment
or even specific users
A FAMILIAR EXAMPLE
We see it every day in Facebook newsfeeds, Google search
results, Netflix and Spotify recommendations, ...
SPOTIFY DISCOVER WEEKLY
Giles Colborne: the only element of classic UX design here is the track
list, whereas the distinct...
DECISION MAKING SUPPORT
Airbnb learned how to answer the question, “What will the booked
price of a listing be on any give...
GOOGLE NOW, SIRI, ETC.
For example, they automatically propose
a way home from work using location history data.
PERSONALIZED TEXT
Persado optimizes ads for a particular user.
They also experiment with UI.
MUTATIVE DESIGN
Liam Spradlin describes a concept of mutative design: adaptive
interfaces that consider many variables to ...
AN EXOSKELETON
FOR DESIGNERS
TOOLS
If we look back to the middle of the last century, computers were
envisioned as a way to extend human capabilities.
...
1.
INCREASE POSSIBILITIES
First-generation systems mimic analogue tools with digital
means.
2.
GET RID OF ROUTINE
The second generation is assisted creation systems, where
humans and machines negotiate the creative...
3.
CO-AUTHORSHIP
The third generation is assisted creation systems 3.0, which
negotiate the creative process in fine-grain...
A PROPER WAY TO COLLABORATE
Algorithm-driven design should be something like an exoskeleton
for product designers – increa...
1
PROBLEM SPACE SOLUTION SPACE
EVALUATION
CROSS-PRODUCT
INTEGRATION
PRODUCTION
2 3
4 5
ANALYSIS TOOLS
RESEARCH
Analysis of implicitly expressed information about users that can
be studied with qualitative research is hard to...
MACHINE LEARNING
Jon Bruner gives a good example: An algorithm starts with a
description of the desired outcome – an airli...
A CURATOR
In this scenario, humans curate an algorithm and can add or
remove limitations and variables.
The results can be...
MACHINE LEARNING FOR DESIGNERS
The complexity of this work suggests that analysts will be doing it, but
designers should b...
SYNTHESIS TOOLS
AUTODESK DREAMCATCHER
It’s based on the idea of generative design, which has been used in
performance, industrial design, ...
PARAMETRIC DESIGN
Many of you know Zaha Hadid Architects;
its office calls this approach “parametric design.”
LOGOJOY
It replaces freelancers for a simple logo design. Logojoy generates
endless ideas and shows an example of a corpor...
A GENERATIVE APPROACH
It’s not yet established in digital product design, because it
doesn’t help to solve utilitarian tas...
The working process of digital product designers could
potentially look like this:
1. An algorithm generates many variatio...
FILTERING CONCEPTS
It’s yet unknown how can we filter a huge number of concepts in
digital product design, in which usage ...
CREATIVE AI
Roelof and Samim launched a website on this topic,
it lists many interesting concepts.
RENE
The experimental tool Rene by Jon Gold, who worked at The Grid, is an
example of this approach in action. Gold taught...
BRUTE-FORCE DESIGN
While Jon jokingly calls this approach “brute-force design” and
“multiplicative design,” he emphasizes ...
DO TOOLS
ALREADY EXIST?
ADOBE PHOTOSHOP
The company constantly adds “smart” features.
Photoshop learned to complete a missing part of a photo.
DESIGNSCAPE
It automatically refines a design layout for you.
It can also propose an entirely new composition.
ADOBE SENSEI
A platform that uses machine learning; it will be the foundation
for future “smart” features in Adobe’s produ...
JOHN MCCARTHY
He coined the term “artificial intelligence”
and famously said,
“As soon as it works,
no one calls it AI any...
Look at experimental ideas and tools –
they could become
a part of the digital product designer’s
day-to-day toolkit.
STYLIT
Creates a 3D model out of sketch.
ANIMATION AUTOCOMPLETE
Microsoft learned to autocomplete
illustrations and animations.
PATCHY GLIMPSES OF THE FUTURE
Right now, it’s more about individual companies building custom
solutions for their own task...
OLIVER ROEDER
The algorithmic software is written by humans, after
all, using theories thought up by humans, using a
compu...
CONCLUSIONS
This is a story of a beautiful future,
but we should remember the limits
of algorithms — they’re built on rules
defined by...
The power of the designer
is that they can make and break rules;
so, in a year from now, we might define
“beautiful” as so...
Remove the routine of preparing assets and content, which is
more or less mechanical work.
Broaden creative exploration, w...
We can only talk about a company’s custom solutions in the
context of the company’s own tasks. The work requires constant
...
LET A COMPUTER
PLAY WITH THE FONTS
Digital products are getting more and more complex: We need to
support more platforms, ...
P.S.The revolution is already happening, so why don’t we lead it?
THANKS!
YURY VETROV
www.jvetrau.com twitter.com/jvetrau
BONUS: A COLLECTION WEBSITE
http://algorithms.design/
Upcoming SlideShare
Loading in …5
×

Yury Vetrov — Algorithm-Driven Design

1,709 views

Published on

Will Robots Replace Designers? No. It's more like an exoskeleton for designers. Algorithm-driven design tools can help us to construct a UI, prepare assets and content, and personalize the user experience. 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.

Published in: Design
  • Be the first to comment

Yury Vetrov — Algorithm-Driven Design

  1. 1. ALGORITHM-DRIVEN DESIGN WILL ROBOTS REPLACE DESIGNERS? YURY VETROV MAIL.RU GROUP
  2. 2. WILL ROBOTS REPLACE DESIGNERS? 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.
  3. 3. THE GRID CMS It chooses templates and retouches and crops photos all by itself. It runs A/B tests to choose the most suitable patterns.
  4. 4. OR IT ISN’T? The product was in private beta until recently, so we were able to 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 reaction – people criticized the design and code quality. Many skeptics opened a champagne bottle on that day.
  5. 5. FULLY REPLACING A DESIGNER WITH AN ALGORITHM? UHM, A-HA, YES… The idea was praised by The Grid and some technologists – it 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 IA and visual style, while helping a company to achieve its business goals and strengthen its brand.
  6. 6. CREATIVE COLLABORATION WITH ALGORITHMS Designers work “in pair” with algorithms to solve product tasks
  7. 7. JUGGLERS Designers have learned to juggle many tools and skills to near perfection. As a result, a new term emerged, “product designer.”
  8. 8. HEAVYISH… 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. * *
  9. 9. CONSTRUCTING A UI
  10. 10. SIMPLE PUBLISHING TOOLS 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.
  11. 11. WIX ADVANCED DESIGN INTELLIGENCE A semi-automated website constructor that enables non-professionals to create a website. Sounds like The Grid?
  12. 12. FIREDROP The idea is similar to The Grid. You provide the content, then a virtual assistant helps you to create a layout and choose a visual style.
  13. 13. PAIRED DESIGN WITH A COMPUTER 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.
  14. 14. FREEDOM FROM ROUTINE 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 system, then algorithms could make it more powerful.
  15. 15. INTERPOLATION Florian Schulz shows how you can use the idea of interpolation to create many states of components.
  16. 16. MY INTEREST: AN AUTOMATED MAGAZINE LAYOUT (2012) Existing content had a poor semantic structure, and updating it by hand was too expensive. A special script would parse an article. Then, depending on its content (the number and size of paragraphs, 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.
  17. 17. DUPLO Flipboard launched a very similar model a few years ago.
  18. 18. VOX MEDIA: CHORUS CMS The algorithm creates harmonious homepage layouts using a pattern library, then selects the “best” layout.
  19. 19. MORE FLEXIBLE AND PERFORMANT It’s more efficient than picking the best links by hand, as proven by recommendation engines such as Relap.io.
  20. 20. PREPARING ASSETS AND CONTENT
  21. 21. ROUTINE :( 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.
  22. 22. AUTOMATIC COLOR MATCH Yandex.Launcher uses an algorithm to automatically set up colors for app cards, based on app icons.
  23. 23. …ACCORDING TO BACKGROUND Another example is changing text color according to the background color.
  24. 24. EMPLASIZING EMOTION Highlighting eyes in a photo for news articles in an experiment from Berg studio for The Guardian.
  25. 25. PARAMETRIC TYPOGRAPHY Interpolation of typefaces from several key points.
  26. 26. YANDEX.MARKET COLLECTIONS (RU) A marketer picks a title and an image, then the generator proposes an endless number of variations (they all conform to design guidelines).
  27. 27. РОБО-РЕДАКТОР ENGADGET They nurtured a robot apprentice to write simple news articles about new gadgets. Whew!
  28. 28. ENGADGET ROBO EDITOR They nurtured a robot apprentice to write simple news articles about new gadgets. Whew!
  29. 29. STYLE TRANSFER: PRISMA Truly dark magic happens in neural networks. Prisma app stylizes photos to look like works of famous artists.
  30. 30. STYLE TRANSFER: ARTISTO Our product can process video in a similar way (even streaming video).
  31. 31. WILL NEURAL NETWORKS 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!
  32. 32. WOLFF OLINS: OI A live identity which reacts to sound. You just can’t create crazy stuff like this without some creative collaboration with algorithms.
  33. 33. PERSONALIZING UX For a narrow audience segment or even specific users
  34. 34. A FAMILIAR EXAMPLE 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.
  35. 35. SPOTIFY DISCOVER WEEKLY Giles Colborne: the only element of classic UX design here is the track list, whereas the distinctive work is done by a recommendation system.
  36. 36. DECISION MAKING SUPPORT 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 prices.
  37. 37. GOOGLE NOW, SIRI, ETC. For example, they automatically propose a way home from work using location history data.
  38. 38. PERSONALIZED TEXT Persado optimizes ads for a particular user. They also experiment with UI.
  39. 39. MUTATIVE DESIGN Liam Spradlin describes a concept of mutative design: adaptive interfaces that consider many variables to fit particular users.
  40. 40. AN EXOSKELETON FOR DESIGNERS
  41. 41. TOOLS 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 ability in detail. They see three levels of maturity for design tools.
  42. 42. 1. INCREASE POSSIBILITIES First-generation systems mimic analogue tools with digital means.
  43. 43. 2. GET RID OF ROUTINE The second generation is assisted creation systems, where humans and machines negotiate the creative process through tight action-feedback loops.
  44. 44. 3. CO-AUTHORSHIP 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.
  45. 45. A PROPER WAY TO COLLABORATE 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?
  46. 46. 1 PROBLEM SPACE SOLUTION SPACE EVALUATION CROSS-PRODUCT INTEGRATION PRODUCTION 2 3 4 5
  47. 47. ANALYSIS TOOLS
  48. 48. RESEARCH 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.
  49. 49. MACHINE LEARNING Jon Bruner gives a good example: An algorithm starts with a description of the desired outcome – 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 details on thousands of flights from an existing timetable; the timetable gradually improves over many iterations.
  50. 50. A CURATOR 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.
  51. 51. MACHINE LEARNING FOR DESIGNERS The complexity of this work suggests that analysts will be doing it, but designers should be aware of the basic principles of machine learning.
  52. 52. SYNTHESIS TOOLS
  53. 53. AUTODESK DREAMCATCHER It’s based on the idea of generative design, which has been used in performance, industrial design, fashion and architecture for many years now. It made a lot of noise and prompted several publications from UX gurus.
  54. 54. PARAMETRIC DESIGN Many of you know Zaha Hadid Architects; its office calls this approach “parametric design.”
  55. 55. LOGOJOY It replaces freelancers for a simple logo design. Logojoy generates endless ideas and shows an example of a corporate style based on it.
  56. 56. A GENERATIVE APPROACH 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.
  57. 57. 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.
  58. 58. FILTERING CONCEPTS 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.
  59. 59. CREATIVE AI Roelof and Samim launched a website on this topic, it lists many interesting concepts.
  60. 60. RENE The experimental tool Rene by Jon Gold, who worked at The Grid, is an example of this approach in action. Gold taught a computer to make meaningful typographic decisions.
  61. 61. BRUTE-FORCE DESIGN 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 last year.
  62. 62. DO TOOLS ALREADY EXIST?
  63. 63. ADOBE PHOTOSHOP The company constantly adds “smart” features. Photoshop learned to complete a missing part of a photo.
  64. 64. DESIGNSCAPE It automatically refines a design layout for you. It can also propose an entirely new composition.
  65. 65. ADOBE SENSEI A platform that uses machine learning; it will be the foundation for future “smart” features in Adobe’s products.
  66. 66. JOHN MCCARTHY He coined the term “artificial intelligence” and famously said, “As soon as it works, no one calls it AI anymore.”
  67. 67. Look at experimental ideas and tools – they could become a part of the digital product designer’s day-to-day toolkit.
  68. 68. STYLIT Creates a 3D model out of sketch.
  69. 69. ANIMATION AUTOCOMPLETE Microsoft learned to autocomplete illustrations and animations.
  70. 70. 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.
  71. 71. OLIVER ROEDER 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.
  72. 72. CONCLUSIONS
  73. 73. 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.
  74. 74. 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.
  75. 75. 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.
  76. 76. 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.
  77. 77. LET A COMPUTER PLAY WITH THE FONTS Digital products are getting more and more complex: We need to support more platforms, tweak usage scenarios for more user segments, and hypothesize more. Rather than hire more and more designers, offload routine tasks to a computer.
  78. 78. P.S.The revolution is already happening, so why don’t we lead it?
  79. 79. THANKS! YURY VETROV www.jvetrau.com twitter.com/jvetrau
  80. 80. BONUS: A COLLECTION WEBSITE http://algorithms.design/

×