Professional Documents
Culture Documents
How Artificial Intelligence Is Changing Design
How Artificial Intelligence Is Changing Design
JANUARY
Algorithm-Driven Design: How
Artificial Intelligence Is Changing
Design
21 min read
Conversational
Conversational
Conversational
ConversationalInterfaces:
Interfaces:
Interfaces:
Interfaces:Where
Where
Where
WhereAre
Are
Are
AreWe
We
We
WeToday?
Today?
Today?
Today?Where
Where
Where
WhereAre
Are
Are
AreWe
We
We
We
Heading?
Heading?
Heading?
Heading?(↦
(↦
(↦
(↦https://www.smashingmagazine.com/2016/07/conversational-
https://www.smashingmagazine.com/2016/07/conversational-
https://www.smashingmagazine.com/2016/07/conversational-
https://www.smashingmagazine.com/2016/07/conversational-
interfaces-where-are-we-today-where-are-we-heading/)
interfaces-where-are-we-today-where-are-we-heading/)
interfaces-where-are-we-today-where-are-we-heading/)
interfaces-where-are-we-today-where-are-we-heading/)
Is
Is
Is
IsThe
The
The
TheInternet
Internet
Internet
InternetKilling
Killing
Killing
KillingCreativity?
Creativity?
Creativity?
Creativity?(↦
(↦
(↦
(↦
https://www.smashingmagazine.com/2016/01/is-the-internet-killing-creativity/)
https://www.smashingmagazine.com/2016/01/is-the-internet-killing-creativity/)
https://www.smashingmagazine.com/2016/01/is-the-internet-killing-creativity/)
https://www.smashingmagazine.com/2016/01/is-the-internet-killing-creativity/)
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.
Designers have learned to juggle many tools and skills to near perfection,
and as a result, a new term emerged, “product
product
product designer(↦
productdesigner
designer
designer (↦
(↦
(↦
http://www.uxmatters.com/mt/archives/2015/02/applied-ux-strategy-part-2-the-
http://www.uxmatters.com/mt/archives/2015/02/applied-ux-strategy-part-2-the-
http://www.uxmatters.com/mt/archives/2015/02/applied-ux-strategy-part-2-the-
http://www.uxmatters.com/mt/archives/2015/02/applied-ux-strategy-part-2-the-
product-designer.php)
product-designer.php)
product-designer.php)
product-designer.php).” 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.
constructing a UI,
I’ll show you some examples and propose a new approach for this future
work process.
CONSTRUCTING A UI
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
design
design
designsystem
system
system,
system
system 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
idea
idea
ideaof
of
of
ofinterpolation
interpolation
interpolation
interpolation to create many states of components.
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
based
based
basedon
on
on
onapp
app
app
appicons
icons
icons.
icons
icons Other variables could be automatically set, such
as changing text color according
according
according
accordingto
to
to
tothe
the
the
thebackground
background
background
backgroundcolor
color
color,
color
color highlighting eyes
in a photo to emphasize
emphasize
emphasize
emphasizeemotion
emotion
emotion,
emotion
emotion and implementing parametric
parametric
parametric
parametric
typography
typography
typography.
typography
typography
Yandex.Launcher (V
View
View
View
iew large
large
large
largeversion
version
version)
version
version
Truly dark magic happens in neural networks. A fresh example, the Prisma
Prisma
Prisma
Prisma
app
app
app,
app
app stylizes photos to look like works of famous artists. Artisto
Artisto
Artisto
Artisto can process
video in a similar way (even streaming video).
Prisma (V
View
View
View
iew large
large
large
largeversion
version
version)
version
version
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
Brazilian
Brazilian
Braziliantelecom
telecom
telecom
telecomOi
Oi
Oi,
Oi
Oi which reacts
to sound. You just can't create crazy stuff like this without some creative
collaboration with algorithms.
PERSONALIZING UX
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.
Colborne
Colborne
Colborne
Colborneoffers
offers
offers
offersadvice
advice
advice
adviceto
to
to
todesigners
designers
designers
designers 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
hosts
hosts
hostscould
could
could
couldset
set
set
setcompetitive
competitive
competitive
competitiveprices
prices
prices.
prices
prices There are also endless
stories about Netflix’s recommendation engine.
1 f 31
CreativeAI
CreativeAI
CreativeAI
CreativeAI
CreativeAI (LLarge
Large
Large
arge preview
preview
preview)
preview
preview
01 Explore a problem space, and pick the most valuable problem for the
business and users to solve (analysis).
02 Explore a solution space, and pick the best solution to fix the problem
(analysis).
04 Evaluate how the product works for real users, and optimize it (analysis
and synthesis).
05 Connect and unify the solution with other products and solutions of
the company (synthesis).
ANALYSIS
SYNTHESIS
Autodesk Dreamcatcher (V
View
View
View
iew large
large
large
largeversion
version
version)
version
version
Logojoy
Logojoy
Logojoy
Logojoy 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
described
described
describedmachine
machine
machine
machinelearning
learning
learning
learning
principles
principles
principles
principlesbehind
behind
behind
behinditit
it.
itit
Logojoy (LLarge
Large
Large
arge preview
preview
preview)
preview
preview
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:
02 The results are filtered based on design quality and task requirements.
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?
His idea is similar to what Roelof and Samim say: Tools should be creative
partners for designers, not just dumb executants.
Generative design by Jon Gold: Plausible combinations
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
content-aware
content-aware
content-awarefeature
feature
feature
feature 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
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
experimental
experimental
experimentalideas
ideas
ideas
ideas
and
and
and
andtools
tools
tools
tools that could become a part of the digital product designer's day-to-
day toolkit:
StyLit
StyLit
StyLit
StyLit
Creates a 3D model out of sketch.
Autocomplete
Autocomplete
Autocomplete
Autocompletehanddrawn
handdrawn
handdrawn
handdrawnanimations
animations
animations
animations
Microsoft's experimental tool for autocompleting illustrations and
animations.
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.
1 f 168
PROS
If we look in the near term, the value of this approach is more or less clear:
CONS
Conclusion