Algorithmic design
I have long been interested in the topic of algorithmic design and collect materials and examples on the topic, but the topic has surfaced from time to time. For 4 years, a couple of dozens of examples have accumulated and half a dozen articles in relation to product design, but until this spring, all of these were rather separate bursts without any system.
Interest in the topic arose in 2012, when for one of our products we described the automated work of a magazine layout. The existing content had a poor semantic structure, so it would be costly to overwrite the archive of publications in a modern form. And in general, not every editor has good design skills. For this, a special script did the parsing of the article and based on its content (the number of paragraphs and words in each of them, the number of photos and their formats, frames with quotes and tables, etc.) chose a typical pattern for presenting a piece of article in a spectacular journal form . The script also ensured that the patterns alternated and the material looked quite diverse. Thus, the editors save power on reworking old content into a new look, and the designer simply regularly adds new presentation modules. A similar model recently implemented Flipboard .
A more vivid and noticeable example was the acclaimed CMS The Grid , which independently selects templates, content design, processes photos. Moreover, he also conducts A / B tests of various approaches for choosing the best solution. True, the product has been closed in beta for a couple of years and it was only possible to judge about it by advertising materials and articles. And recently, Designer News dug up examples of websites created using The Grid and the reaction of the community is ambiguous - criticize the weak results from the design point and the garbage code. In general, skeptics opened the champagne.
')
The idea of ​​a complete replacement of the designer with the algorithm sounds nice and modern, but it is wrong and not very promising. The product designer helps the team transform a raw idea into a holistic interface with good work logic, information architecture and visual style that solve business problems and strengthen the brand. In the course of his work, he makes a huge number of decisions, and many of them are impossible to describe with clear procedures; In addition, incoming requirements are erroneous and contradictory in some details, so the designer helps the manager to solve these collisions - this makes the product better. All this is much more than choosing the right template and coloring it with modern styling.
But if we talk about creative partnership, when a designer together with algorithms solves product problems - there are plenty of perspectives and good examples. Two years ago, a tool for industrial designers Autodesk Dreamcatcher made a noise , which spawned several publications on the topic. And this spring, two epic defining articles appeared almost simultaneously, deeply analyzing the trend, its prerequisites and the future role of the designer and tools. This is a large amount of text, but it is worth overpowering to remain relevant in the coming years.
The first publication from Roelof Pieters and Samim Winiger explores the history of computers in great detail as design assistants. They distinguish three levels of development tools:
The authors draw a good analogy with generative art - the designer determines the algorithms by which the work is formed, and then manually selects the most successful derivatives. If the search will not be entirely manual, and the computer will also help in filtering the resulting stream - the work will become even more productive and creative. They launched the Artificial Experience website, for sure there will be a lot of interesting things there.
In another series of articles, Jon Gold, who worked on the very CMS The Grid, talks about how he taught a computer to make intelligent font decisions . He considered that this was not much different from the training of designers, and broke up the process into several stages: first, analyzing the characters in the fonts to understand compatibility, then the basic rules for combining fonts, then “fed” fashionable examples of combinations to understand trends, and at the end put follow in detail the work of experienced designers. His general message is similar to that of Roelof and Samim - the instruments should become creative partners of the designer, and not stupid performers.
In the second part, Jon announces his experimental instrument Rene , which is built on these principles. He cites as an example the imperative and declarative approaches to programming and says that the modern tool should move in the second direction - not a step-by-step description of the algorithm, but a set of input information and an image of the result. Using examples of formulas, he shows how this works in design and has already prepared a couple of low-level demonstrations to show an idea. You can already try the tool yourself . This is a very early show of the idea, but the train of thought conveys well.
Although Jon calls jokingly this approach as “design brutforce” or “multiplicative design”, he emphasizes the importance of the professional “behind the wheel”. By the way, at the beginning of the year, he left the team of The Grid, which just called for a fully automated approach.
The first of the cited articles begins with a history of using a computer as a way of expanding human capabilities. Algorithmic design should become a kind of “exo-skeleton” for a product designer, significantly increasing the number and depth of decision making. How can the product designer and the computer interact in such a bundle? You can look at the overall process of grocery work:
At the same time, there are so many markets, segments of the target audience, business models, types of products, internal organizational structures, that universal solutions for all are utopia. So we should rather talk about the company's own decisions, tailored for specific tasks. Descending to the level of specific design solutions, this is building the interface, preparing graphics and content.
Simple publishing tools like Medium, Readymag and Tilda have already reduced the amount of manual work - they have a lot of good templates with which you can collect a good result without a designer. Improved templates will make the entry threshold even lower. For example, while The Grid was harnessed, Wix, the mastodon among site designers, became interested in the topic of algorithmic design. They announced Advanced Design Intelligence , similar in meaning to The Grid, a semi-automated way to create websites for non-professionals. They teach the algorithm, feeding him many examples of good modern sites. In addition, he tries to take into account the theme of the created site in order to better get into the style. After all, it is difficult for a non-professional to choose a suitable template from the whole variety and products like Wix and The Grid act as an expert designer here.
Of course, as in the case of The Grid, a complete rejection of the designer will lead to stamped and not always good results (although in any case it will raise the overall level of quality). But if you consider this work as a kind of “pair design” with a computer, you can download some of the routine. For example, the designer collects a dribbble or a Pinterest board, and the algorithm quickly tries these styles on to the layout, and then selects the closest available template. In fact - the designer becomes the art director of his apprentice, a computer.
Yes, in this way, do not create a revolutionary product. But you can free yourself time for this. Yes, and I must admit that a huge part of everyday tasks is more than utilitarian and does not require revolutions. And if the company is mature and has a design system , then the connection to it of algorithms will allow you to do more with less. For example, the designer and developer describe the logic for processing incoming signals — content, context, information about the user and his actions, and then the algorithm itself generates screens based on ready-made patterns and principles. This allows for fine-tuning for a specific narrow situation or scenario without the need to manually draw and design dozens of screen states.
Vox Media made in its CMS Chorus a homepage assembly mechanism using a similar model. From a large collection of patterns of presentation of articles, videos, stories and other materials, the algorithm first collects in principle harmonious variants, and then evaluates their potential effectiveness and selects the optimal one. This turns out to be more flexible and efficient than the manual work of the editor, which is proved by the experience of recommender systems like Relap.io (https://relap.io/). I described the example of automatic assembly of the article page at the beginning.
A separate topic is getting data on how to build an interface. Beautiful things are told by those who work with big data and are able to cluster them into insights. For example, Airbnb learned to predict the price in a particular city in a certain season , so that it is easier for users to set a competitive tariff. And about the recommender mechanisms Netflix legends.
A couple more examples:
Creating the same type of graphics in different variations is one of the most dull parts of the designer’s work. This takes a lot of time and demotivates, despite the fact that these forces could be spent on more meaningful grocery work.
The algorithm can take on simple things like color matching. For example, Yandex.Launcher uses an automatic color matching mechanism for application cards , which itself sets a juicy and harmonious background based on the icon. Here we can also include the automatic change of font color depending on the background color , highlighting the eyes on the photo for the emotional enhancement of articles, parametric fonts and other selectors of the basic parameters. But all this control is one variable.
Another thing, when the algorithm prepares the entire composition. Yandex uses an image generator for collections on the Market . The marketer fills a simple form with the name and illustration, and then the generator offers an infinite number of variations that correspond to the guidelines. We went even further into Netflix - their script cuts characters for posters, overlays texts and makes automatic experiments with all of this. Real magic!
And absolutely black magic happens in the direction of neural networks. One of the most recent examples, the Prisma app, styles photos for works by famous artists. Will it take away the work of illustrators? For those who have a good style is unlikely. But this, again, will lower the entry threshold for obtaining good-quality illustrations for an article or site where a completely unique approach is not required. Goodbye, dull stock photos! And for complex stylistics, this will help to get a quick sketch in the spirit of “what if we try to draw a building or a cat in our style”. You can make storyboards and describe scenarios in the form of comics (the photo easily turns into a sketch). I think that soon this list of applications will greatly expand.
And finally - a lively identity. Animation in the past few years has become popular in branding, but some go even further. For example, Wolff Olins presented a fully- alive identity of the Brazilian mobile operator Oi , which responds to sound. Such a thing cannot be done without creative partnership with algorithms.
The programs for designers themselves also continue to grow rapidly and automate an increasing part of the work. This is a topic for a separate article, but here are some fresh examples:
It seems to me that the best way would be to integrate such algorithms into the overall design system of the company. In its main message, it removes the main burden on the product line support from the designer, ensuring and ensuring a unified interface, as well as simplifying the launch of new products and support for existing ones. Modern design systems began with live guidelines, but all this is the first step - the introduction of design rules for typical components into the code, from which the developers will still collect the pages by hand. The second should be a semi-automatic assembly and testing of pages according to certain rules.
Generative design has long been used in performances, industrial design, clothing, architecture. But in the product design, this approach is not particularly noticeable, because it does not help to solve utilitarian tasks. But if you look at the general mechanism of the generative approach - the designer determines the rules by which the algorithm builds the final object - there is something to look at. The process of the product designer may be as follows:
Autodesk Dreamcatcher for industrial designers works on this model, but web and applications are more dynamic than static objects. How exactly we can filter the flow of concepts in product design, where usage scenarios are so diverse - the question is open. But we are already doing generative design on the brainstorming, when dozens of ideas are drawn; or in the course of solving the problem, when the layout is refined many times. So why not give away some of this work to the algorithms? Jon Gold's Rene tool provides an example of how to implement this approach.
The story is beautiful, but you need to understand that the algorithms are built according to clearly described rules, even if they are great pumped through machine learning. The designer’s strength lies precisely in the fact that he can break these rules and set new ones, so that after a year something completely different will be considered beautiful. Of course, not everyone in our profession is strong and it is easy for the algorithms to replace the lazy ones. But for those who can both abide and violate the rules, a completely new toolkit and possibilities will open up.
Moreover, the products themselves are becoming increasingly difficult - we need to support multiple platforms, adjust the interfaces to an increasing number of user segments, test more and more hypotheses. And instead of throwing the problem with more and more designers, it is better to ship part of the routine to the computer. Let him better play with fonts.
Will robots replace designers?
Interest in the topic arose in 2012, when for one of our products we described the automated work of a magazine layout. The existing content had a poor semantic structure, so it would be costly to overwrite the archive of publications in a modern form. And in general, not every editor has good design skills. For this, a special script did the parsing of the article and based on its content (the number of paragraphs and words in each of them, the number of photos and their formats, frames with quotes and tables, etc.) chose a typical pattern for presenting a piece of article in a spectacular journal form . The script also ensured that the patterns alternated and the material looked quite diverse. Thus, the editors save power on reworking old content into a new look, and the designer simply regularly adds new presentation modules. A similar model recently implemented Flipboard .
A more vivid and noticeable example was the acclaimed CMS The Grid , which independently selects templates, content design, processes photos. Moreover, he also conducts A / B tests of various approaches for choosing the best solution. True, the product has been closed in beta for a couple of years and it was only possible to judge about it by advertising materials and articles. And recently, Designer News dug up examples of websites created using The Grid and the reaction of the community is ambiguous - criticize the weak results from the design point and the garbage code. In general, skeptics opened the champagne.
')
The idea of ​​a complete replacement of the designer with the algorithm sounds nice and modern, but it is wrong and not very promising. The product designer helps the team transform a raw idea into a holistic interface with good work logic, information architecture and visual style that solve business problems and strengthen the brand. In the course of his work, he makes a huge number of decisions, and many of them are impossible to describe with clear procedures; In addition, incoming requirements are erroneous and contradictory in some details, so the designer helps the manager to solve these collisions - this makes the product better. All this is much more than choosing the right template and coloring it with modern styling.
Creative partnership
But if we talk about creative partnership, when a designer together with algorithms solves product problems - there are plenty of perspectives and good examples. Two years ago, a tool for industrial designers Autodesk Dreamcatcher made a noise , which spawned several publications on the topic. And this spring, two epic defining articles appeared almost simultaneously, deeply analyzing the trend, its prerequisites and the future role of the designer and tools. This is a large amount of text, but it is worth overpowering to remain relevant in the coming years.
The first publication from Roelof Pieters and Samim Winiger explores the history of computers in great detail as design assistants. They distinguish three levels of development tools:
- The first generation has translated analog tools into programs and is developing along the path of increasing capabilities.
- The second has learned to take on part of the routine operations that previously required professional expertise.
- The third should be a co-author of solutions, helping to find new interesting directions.
The authors draw a good analogy with generative art - the designer determines the algorithms by which the work is formed, and then manually selects the most successful derivatives. If the search will not be entirely manual, and the computer will also help in filtering the resulting stream - the work will become even more productive and creative. They launched the Artificial Experience website, for sure there will be a lot of interesting things there.
In another series of articles, Jon Gold, who worked on the very CMS The Grid, talks about how he taught a computer to make intelligent font decisions . He considered that this was not much different from the training of designers, and broke up the process into several stages: first, analyzing the characters in the fonts to understand compatibility, then the basic rules for combining fonts, then “fed” fashionable examples of combinations to understand trends, and at the end put follow in detail the work of experienced designers. His general message is similar to that of Roelof and Samim - the instruments should become creative partners of the designer, and not stupid performers.
In the second part, Jon announces his experimental instrument Rene , which is built on these principles. He cites as an example the imperative and declarative approaches to programming and says that the modern tool should move in the second direction - not a step-by-step description of the algorithm, but a set of input information and an image of the result. Using examples of formulas, he shows how this works in design and has already prepared a couple of low-level demonstrations to show an idea. You can already try the tool yourself . This is a very early show of the idea, but the train of thought conveys well.
Although Jon calls jokingly this approach as “design brutforce” or “multiplicative design”, he emphasizes the importance of the professional “behind the wheel”. By the way, at the beginning of the year, he left the team of The Grid, which just called for a fully automated approach.
Exo-skeleton for designer
The first of the cited articles begins with a history of using a computer as a way of expanding human capabilities. Algorithmic design should become a kind of “exo-skeleton” for a product designer, significantly increasing the number and depth of decision making. How can the product designer and the computer interact in such a bundle? You can look at the overall process of grocery work:
- Examine the problem space and take to solve the ones that will give the maximum value to the business and users.
- Explore the solution space and select the ones that best cover the problem.
- Produce, launch and distribute a product that solves the selected problem.
- Evaluate the effectiveness of the chosen solution in practice and optimize it.
At the same time, there are so many markets, segments of the target audience, business models, types of products, internal organizational structures, that universal solutions for all are utopia. So we should rather talk about the company's own decisions, tailored for specific tasks. Descending to the level of specific design solutions, this is building the interface, preparing graphics and content.
Interface building
Simple publishing tools like Medium, Readymag and Tilda have already reduced the amount of manual work - they have a lot of good templates with which you can collect a good result without a designer. Improved templates will make the entry threshold even lower. For example, while The Grid was harnessed, Wix, the mastodon among site designers, became interested in the topic of algorithmic design. They announced Advanced Design Intelligence , similar in meaning to The Grid, a semi-automated way to create websites for non-professionals. They teach the algorithm, feeding him many examples of good modern sites. In addition, he tries to take into account the theme of the created site in order to better get into the style. After all, it is difficult for a non-professional to choose a suitable template from the whole variety and products like Wix and The Grid act as an expert designer here.
Of course, as in the case of The Grid, a complete rejection of the designer will lead to stamped and not always good results (although in any case it will raise the overall level of quality). But if you consider this work as a kind of “pair design” with a computer, you can download some of the routine. For example, the designer collects a dribbble or a Pinterest board, and the algorithm quickly tries these styles on to the layout, and then selects the closest available template. In fact - the designer becomes the art director of his apprentice, a computer.
Yes, in this way, do not create a revolutionary product. But you can free yourself time for this. Yes, and I must admit that a huge part of everyday tasks is more than utilitarian and does not require revolutions. And if the company is mature and has a design system , then the connection to it of algorithms will allow you to do more with less. For example, the designer and developer describe the logic for processing incoming signals — content, context, information about the user and his actions, and then the algorithm itself generates screens based on ready-made patterns and principles. This allows for fine-tuning for a specific narrow situation or scenario without the need to manually draw and design dozens of screen states.
Vox Media made in its CMS Chorus a homepage assembly mechanism using a similar model. From a large collection of patterns of presentation of articles, videos, stories and other materials, the algorithm first collects in principle harmonious variants, and then evaluates their potential effectiveness and selects the optimal one. This turns out to be more flexible and efficient than the manual work of the editor, which is proved by the experience of recommender systems like Relap.io (https://relap.io/). I described the example of automatic assembly of the article page at the beginning.
A separate topic is getting data on how to build an interface. Beautiful things are told by those who work with big data and are able to cluster them into insights. For example, Airbnb learned to predict the price in a particular city in a certain season , so that it is easier for users to set a competitive tariff. And about the recommender mechanisms Netflix legends.
A couple more examples:
- Small Victories collects a site from pieces of content and graphics in Dropbox.
- The Ridero automatic book layout system simplifies the process of creating a book as much as possible.
Preparation of graphics and content
Creating the same type of graphics in different variations is one of the most dull parts of the designer’s work. This takes a lot of time and demotivates, despite the fact that these forces could be spent on more meaningful grocery work.
The algorithm can take on simple things like color matching. For example, Yandex.Launcher uses an automatic color matching mechanism for application cards , which itself sets a juicy and harmonious background based on the icon. Here we can also include the automatic change of font color depending on the background color , highlighting the eyes on the photo for the emotional enhancement of articles, parametric fonts and other selectors of the basic parameters. But all this control is one variable.
Another thing, when the algorithm prepares the entire composition. Yandex uses an image generator for collections on the Market . The marketer fills a simple form with the name and illustration, and then the generator offers an infinite number of variations that correspond to the guidelines. We went even further into Netflix - their script cuts characters for posters, overlays texts and makes automatic experiments with all of this. Real magic!
And absolutely black magic happens in the direction of neural networks. One of the most recent examples, the Prisma app, styles photos for works by famous artists. Will it take away the work of illustrators? For those who have a good style is unlikely. But this, again, will lower the entry threshold for obtaining good-quality illustrations for an article or site where a completely unique approach is not required. Goodbye, dull stock photos! And for complex stylistics, this will help to get a quick sketch in the spirit of “what if we try to draw a building or a cat in our style”. You can make storyboards and describe scenarios in the form of comics (the photo easily turns into a sketch). I think that soon this list of applications will greatly expand.
And finally - a lively identity. Animation in the past few years has become popular in branding, but some go even further. For example, Wolff Olins presented a fully- alive identity of the Brazilian mobile operator Oi , which responds to sound. Such a thing cannot be done without creative partnership with algorithms.
New tools
The programs for designers themselves also continue to grow rapidly and automate an increasing part of the work. This is a topic for a separate article, but here are some fresh examples:
- StyLit creates a 3D image from a paper sketch.
- Microsoft has learned to draw some of the illustrations and their animations .
- Photoshop has learned to draw the missing part of the photo .
Part of the design system
It seems to me that the best way would be to integrate such algorithms into the overall design system of the company. In its main message, it removes the main burden on the product line support from the designer, ensuring and ensuring a unified interface, as well as simplifying the launch of new products and support for existing ones. Modern design systems began with live guidelines, but all this is the first step - the introduction of design rules for typical components into the code, from which the developers will still collect the pages by hand. The second should be a semi-automatic assembly and testing of pages according to certain rules.
Generative design has long been used in performances, industrial design, clothing, architecture. But in the product design, this approach is not particularly noticeable, because it does not help to solve utilitarian tasks. But if you look at the general mechanism of the generative approach - the designer determines the rules by which the algorithm builds the final object - there is something to look at. The process of the product designer may be as follows:
- With the help of predefined rules and patterns, many design options are generated.
- Results are filtered by the quality of visual solutions and proximity to the solution of the problem.
- The designer and product manager select the most interesting and adequate from them, and then modify them if necessary.
- One or more options are launched in split testing, the results remain the most effective.
Autodesk Dreamcatcher for industrial designers works on this model, but web and applications are more dynamic than static objects. How exactly we can filter the flow of concepts in product design, where usage scenarios are so diverse - the question is open. But we are already doing generative design on the brainstorming, when dozens of ideas are drawn; or in the course of solving the problem, when the layout is refined many times. So why not give away some of this work to the algorithms? Jon Gold's Rene tool provides an example of how to implement this approach.
findings
The story is beautiful, but you need to understand that the algorithms are built according to clearly described rules, even if they are great pumped through machine learning. The designer’s strength lies precisely in the fact that he can break these rules and set new ones, so that after a year something completely different will be considered beautiful. Of course, not everyone in our profession is strong and it is easy for the algorithms to replace the lazy ones. But for those who can both abide and violate the rules, a completely new toolkit and possibilities will open up.
Moreover, the products themselves are becoming increasingly difficult - we need to support multiple platforms, adjust the interfaces to an increasing number of user segments, test more and more hypotheses. And instead of throwing the problem with more and more designers, it is better to ship part of the routine to the computer. Let him better play with fonts.
Source: https://habr.com/ru/post/304154/
All Articles