Нейросети и UX/UI‑дизайн

Сегодня нейронные сети на пике популярности и почти всегда на повестке дня: искусственный интеллект создает картины, иллюстрации, пишет тексты и придумывает рекламные слоганы без помощи человека. Многие дизайнеры всерьез обеспокоены своим будущим — есть ли оно в сфере дизайна или людей заменят нейросети?

Дизайнеры достаточно давно используют функционал нейросетей, но по-настоящему громко это направление прогремело в 2021-2022 гг., и с тех пор только набирает обороты. Например, в штате Колорадо в художественном конкурсе впервые выиграла картина, созданная искусственным интеллектом и обошла всех художников.

Однако не спешите переживать — у всего есть свои нюансы и тонкости.

В этой статье разберемся, что такое нейросети, как с ними работать, представляют ли они угрозу дизайнерам и каким образом к ним приспособиться.

Нейронная сеть (сокращенно «нейросеть») — программный код для создания искусственного интеллекта, благодаря которому происходит имитация работы головного мозга человека.

Иначе говоря, нейросеть копирует нервную систему живого организма. Она также приспособлена к самообучению, и это один из длительных и трудоемких процессов всей разработки.

Основная задача нейросети — осуществлять поиск закономерностей в большом объеме данных, анализировать их и делать выводы. Чем больше данных поступает в нейросеть для изучения, тем быстрее и качественнее она выполнит задачу.

Существует несколько видов нейронных сетей под определенные цели. Разберем самые популярные:

1. Многослойные нейросети

Они состоят из нескольких слоев, проще говоря — из отдельных групп, на которые разбиты нейроны. Когда в нейросеть поступает информация, она сначала обрабатывается первой группой нейронов (входным слоем), затем второй группой и т. д., пока не пройдет через все слои (группы), только потом нейросеть выдает финальный результат.

На примере это выглядит таким образом:

2. Однослойные сети

Этот вид отличается от многослойных нейросетей тем, что после загрузки данных сразу выдает результат.

3. Свёрточные нейронные сети

Также популярный вид нейросетей, он работает с обработкой изображений. Такие нейронные сети быстро распознают простые элементы: глаз, нос, губы, уши и т. д.

4. Рекуррентные нейронные сети

Они хранят всю информацию о прежних данных и обрабатывают сведения, которые с течением времени меняются. Эти нейросети хорошо использовать при работе с текстами, аудио и видео-материалами и всеми данными, которые зависят от времени.

Суть работы нейросетей — найти способ решения поставленной задачи, свойственный людям.

Например, чтобы определить какое животное изображено на картинке, нейросеть будет использовать принципы, похожие на работу человеческого зрения. Нейронные сети опираются на накопленный опыт — на данные, которые в них загружены.

В основном все задачи для нейросетей связаны с такими областями, как распознавание образов, анализ информации, принятие решений и подбор разных вариантов. Дополнительные «бонусы» нейросетей, которые пригодятся UX/UI-дизайнерам:

Мы описали лишь часть возможных задач, но если углубиться, можно заметить, что нейросети окружают нас. Голосовой помощник «Алиса», который при помощи нейросети распознает голосовые команды; в iOS есть возможность найти в галерее все фотографии кошек, если в поиске написать «кошка» и т. д.

Нейросеть можно использовать для работы с любыми отраслями, но справиться с поставленными задачами она сможет только в том случае, если данная задача уже была решена каким-либо образом и есть накопленный опыт, на который можно опереться. В ином случае нейросеть не сможет добиться нужного результата.

Недостатки нейросетей

Стоит отметить, что не всегда нейросети качественно справляются с работой. Разберем основные недостатки.

Выдача некорректных результатов

Даже если запрос сформулирован четко, нейросеть может выдать не те материалы, которые запрашивались. Один из факторов, способных повлиять на это, — изначальное обучение нейросети на основе ошибочных данных. Например: если лодка была подписана как «машина» или кошка как «кшка», это введет нейросеть в заблуждение.

Примеры некорректных изображений, созданных нейросетью:

Перегруз сервера

Чем выше сложность задачи, которая поставлена перед нейросетью, тем больше ее объем. Это может вызывать технические проблемы и неудобства. Как правило, такое встречается все реже, нейросети с каждым годом совершенствуются, но все же лучше об этом помнить.

Отсутствие оригинального контента

Нейросеть выдает результат на основе данных от прежнего опыта, то есть контент может быть креативным, интересным, но оригинальным и новым — увы, нет.

Отсутствие морали и эмпатии

Нейросеть не может фильтровать данные по принципам этики или опираясь на нормы морали. Она выдает все, что каким-то образом подходит под запрос, даже если это может задеть чувства людей.

Например, создатели сериала “Nothing, Forever” дали задачу нейросети отрисовать персонажей и написать диалоги между ними, показав легкую и веселую комедию из 90-х «Сайнфелд». На основе этой комедии нейросеть сгенерировала не самые удачные шутки, которые звучали оскорбительно и неуместно, в связи с чем сериал не увенчался успехом.

Преимущества нейросетей

Высокая скорость обработки информации

Нейросеть быстро анализирует большие объемы данных и предлагает несколько вариантов решения задачи.

Работа нон-стоп

Нейросеть не нуждается в перерывах между работой, поэтому дизайнеру не нужно постоянно самостоятельно разбираться в программах, чтобы создать какой-то элемент, это можно перепоручить нейросети в любое время и не беспокоиться.

Улучшение пользовательского опыта

Нейросеть способна повышать вовлеченность посетителей, за счет чего увеличивать конверсию и создавать более эффективный пользовательский опыт.

Нейросеть обучают специально подготовленные люди. Рассмотрим основные этапы, первые 3 из которых может самостоятельно выполнить дизайнер, но 4-й этап и 5-й выполняют обученные эксперты:

1. Постановка задачи

С это начинается вся работа с нейросетью. Важно четко и подробно прописать все, что вы хотите получить в результате. Например, мало написать «Красная машина», получится слишком примитивная картинка, ничем не отличающаяся от других. Гораздо лучше описать детали: «Красная машина на склоне горы в закатных лучах солнца, рядом гоночная трасса», тогда нейросеть выдаст более уникальный вариант.

2. Сбор данных

Для того, чтобы нейросеть выдавала креативные результаты, в нее нужно загрузить качественные данные, на основе которых она будет учиться создавать идеи.

3. Анализ исходных данных

Это нужно для того, чтобы устранить всю некорректную информацию, потому что нейросеть берет за пример все, что в нее загружено. Поэтому специалист, который взаимодействует с нейросетью, должен уметь находить в данных нужные взаимосвязи, на которые можно будет опираться нейросети.

4. Обучение нейронной сети

Как правило, изначально специалисты обучают несколько нейронных сетей, чтобы потом выбрать самую качественную. Нейросети демонстрируют часть данных, чтобы она постепенно улавливала взаимосвязь между ними, и проверяют насколько эффективно выполняются поставленные задачи.

Если нейросеть плохо справляется и не выдает нужный результат, ее обучают дальше. Один из методов — показывать примеры новых данных, пока она не уловит взаимосвязь.

5. Дообучение нейронной сети

Также один из важнейших этапов. Для того, чтобы нейросеть работала корректно и реально помогала в работе, ее необходимо беспрерывно обучать. Например, обученная нейросеть способна определить по фотографии есть ли на ней животное (и какое именно). Следующий этап — определить породу этого животного.

Обложка крупного журнала

В июне 2022 года на обложке журнала Cosmopolitan появилась женщина-астронавт, созданная нейросетью DALL·E 2. Запрос был следующий: «Сильная женщина-президент-космонавт-воин, идущая по планете Марс, цифровое искусство, синтвейв».

Первые варианты, которые выдала нейросеть:

Финальный вариант, который появился на обложке:

Комиксы

В августе 2022 года был выпущен комикс «Summer Island», художником которого стала нейросеть Midjourney.

Нейросеть полностью создала персонажей и локации, в которых происходят эпизоды.

Видеоарты

На основе новой нейросети Stable Diffusion был создан видеоредактор, где можно править готовое видео или создавать свой видеоарт:

Также нейросеть Stable Diffusion считается одной из лучших и креативных программ. К примеру, так она сгенерировала офисные будни:

Любая нейросеть отлично помогает в поисках новых идей и решений, благодаря неисчерпаемой фантазии. Но важно все проверять и вносить необходимые правки, потому что иногда это может выглядеть нелепо и вызывать недоумение у пользователей.

Рассмотрим конкретные примеры, в чем нейросети могут быть полезными:

1. Создание слогана

Текстовые нейросети способны описать товар и сгенерировать слоган для компании или заголовок для статьи — в английском языке это работает безупречно. Но с русским не каждая нейросеть справится из-за сложного языка, поэтому в помощь нужен редактор.

Пример от нейросети Anyword:

2. Создание иллюстрации под запрос

Графические нейросети способны сделать иллюстрацию для фона или нужную картинку под определенный запрос. Иногда это получается не с первого раза, поэтому нужен человек, чтобы доработать все недочеты, но зато нейросети подают отличные идеи, от которых можно отталкиваться.

3. Помощь в коммерческих целях

Нейросеть способна предугадывать поведение пользователей в магазинах, высчитывать риски при кредитах, планировать более быстрые маршруты, создавать простой дизайн упаковок для продуктов. Например, в Италии компания Nutella при помощи нейросети создала дизайн для банок с шоколадной пастой:

4. Выполнение редизайна сайтов

Популярная программа uKit AI сочетает в себе машинное обучение и конструктор сайтов. Программа считывает прежнюю структуру и всё содержание, после чего делает новое оформление контента, а нейросеть проверяет результат и выдает новую версию сайта.

Но вы должны понимать, что это будет максимально простой дизайн, похожий на сайты конкурентов, а возможно, и копирующий их.

‍

5. Создание логотипа

Например, один из популярных сайтов logojoy.com — он создает логотипы на основе ваших предпочтений. Сначала нужно ввести название компании, указать сферу, а потом выбрать из предложенных вариантов подходящие вам стиль, цветовые решения и иконки.

Логотипы чаще всего получаются однотипные, не слишком оригинальные или запоминающиеся. Поэтому, если вам понравилась идея от нейросети, рекомендуем дорабатывать ее самим или с помощью профессионала.

6. Подбор шрифтов

Популярная программа по подбору шрифтов — FONTJOY. Это инструмент для создания новых комбинаций шрифтов. Одна из основных проблем дизайнера — выбрать шрифты, которые будут гармонично сочетаться между собой. Эту задачу облегчает программа Fontjoy при помощи одного щелчка мыши.

Умение работать с нейросетью — один из важных навыков дизайнера, потому что это в разы экономит время и помогает не выгорать на работе. Нейросеть способна развить креативность дизайнера, увеличить насмотренность и показывать новый взгляд на старые вещи. Обогнать нейросеть непросто — за пару минут она создает нечто уникальное и предлагает несколько вариантов, в то время как человек тратит на одну объемную задачу от пары часов до целого рабочего дня.

Однако соревнования ни к чему, здесь нужно партнерство.

Расскажем, каким образом дизайнеру адаптироваться к таким существенным изменениям в работе:

1. Принять факт внедрения новых технологий и разобраться в них

В нашем случае — изучить возможности нейросети и понять, каким образом можно использовать ее в работе. Для этого можно изучить API-интерфейсы: Google Cloud AI, Amazon Intelligence API, сервисы Microsoft Cognitive. Они помогут понять логику обучения моделей нейросети.

2. Добавить этику в рабочий процесс

Нейросеть с этикой пока на «Вы», а вот для дизайнера это отличный способ выделиться и показать свои лучшие качества. Важно установить этические стандарты во всем, за основу можно взять принципы от Microsoft и от Google.

3. Создавать адаптивный дизайн

В зависимости от того, какие решения принимает пользователь, дизайн должен подстраиваться. Нейросеть создает дизайн, который автоматически самообучается и работает одновременно с несколькими переменными.

Дизайн-инструменты, в основе которых лежит искусственный интеллект

• DALL·E 2 — нейросеть для создания иллюстраций, текстов, аудиоматериалов.

• KHROMA — находка для дизайнера, который мечтает упростить процесс работы с цветовыми палитрами.

Khroma — сайт со множеством цветовых сочетаний, количество которых не счесть. Нейросеть здесь для того, чтобы понять, какие цвета вы предпочитаете, после чего создать подходящие палитры, которые вы сможете использовать. Это бесплатный инструмент, который поможет решить вопрос менее чем за минуту.

• UIZARD — сервис для того, чтобы отсканировать скетчи и наброски и преобразить их в редактируемые прототипы.

• COPY.AI — инструмент для создания микротекстов, заголовков, слоганов, продающих текстов, контента для социальных сетей. Достаточно ввести название продукта или бренда, кратко описать, а все остальное выполнит программа.

• Let’s Enhance — сервис для улучшения фотографий плохого качества. Способен увеличить разрешение в четыре раза и восстановить мелкие детали.

Как нейросети и UX/UI-дизайнер могут существовать вместе

Начнем с того, что навыки дизайнера на сегодняшний день автоматизировать невозможно. Он способен сделать крутой дизайн даже тогда, когда нет четко сформулированного запроса, опираясь на тонкости переговоров или общие предпочтения всей команды. Нейросеть не может работать в таких условиях, где сроки постоянно меняются, требования уточняются, ей нужен четкий запрос.

Дизайнер и нейросеть могут эффективно дополнять друг друга. Если заглядывать в будущее, скорее всего, нейросеть займет первые этапы в разработке проекта — генерация идей, креативные решения. После чего дизайнер выберет подходящие варианты и самостоятельно доработает их.

Мир всегда будет нуждаться в творческих людях, которые способны изначально видеть работающие идеи и принимать серьезные решения.

Возможно, дизайнер уже не будет специалистом, который просто «рисует картинки», в его функционал будет входить и умение предугадывать боли и слабые стороны бизнеса, и создание грамотного запроса для нейросети, и обработка всех результатов. Т. е. на практике нет соревнования между дизайнером и нейросетью, они могут отлично существовать вместе.

Сколько бы споров на эту тему ни возникало, в конечном итоге все приходят к одному — в ближайшем будущем никакая нейросеть не сможет заменить дизайнера. Она может выступать в качестве помощника, партнера, но полностью исключить человека из дизайна — нет.

Дизайнеры общаются между собой, решают, какой именно детали не хватает до идеального визуала, понимают пользователей и зачастую разделяют их боли, поэтому в финале получается максимально продуманный интерфейс. Нейросети не могут похвастаться такими способностями, их результаты всегда нужно контролировать и, в большинстве своем, дорабатывать.

Но все-таки мы рассмотрим работы, выполненные дизайнером, и работы, созданные нейросетью, — не ради сравнения, а чтобы показать, что человек и нейронные сети по отдельности могут существовать, однако вместе они могут гораздо больше.

Попробуйте угадать, какая иллюстрация создана дизайнером, а какая нейросетью?

Рассмотрим геометрические узоры:

Логотипы реальных компаний. С первого взгляда сложно догадаться, где здесь работа дизайнера, а где нейросети.

Подводя итоги, хотелось бы еще раз напомнить, что нейросети способны заменить дизайнера в каком-то вопросе или помочь ему в работе лишь в том случае, если решение необходимо принять, основываясь на прошлом опыте. Однако стоит отметить, что новые технологии заметно облегчают работу UX/UI-дизайнеров, выполняя рутинные задачи за несколько минут, в то время как специалисты тратят на это часы.

Большинство людей всегда будут видеть в нейронных сетях угрозу, переживая, что вскоре они заменят всех специалистов, но самые предприимчивые научатся взаимодействовать с новыми технологиями и создавать свои лучшие проекты в тандеме с нейросетью.