Оффтоп Vladislava Rakhmanova
4 000

«Дизайнерами станут все»: как ИИ-технологии повлияют на облик сайтов

Директор по продуктам uKit Group Ирина Черепанова о том, какие инструменты смогут предложить конструкторы сайтов в ближайшем будущем.

В закладки
Ирина Черепанова

В январской колонке для сайта O’Reilly Роб Гирилинг выдвинул гипотезу: благодаря внедрению «умной» автоматизации дизайнерами к 2025 году станут все, и даже на профессиональном уровне, предполагающем особый стиль мышления, дизайнеры начнут работать в тандеме с ИИ-ассистентами.

А незадолго до этого в Forrester Research озвучили прогноз, что инвестиции в ИИ-решения возрастут за 2017 год более чем на 300%. Подобные технологии могут стать драйвером новой революции и на рынке создания сайтов: методы машинного обучения и нейросети начинают находить здесь применение, вдобавок есть большая аудитория, способная обучать и обучаться с AI-технологиями.

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

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

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

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

А разве этого ещё не произошло? Читатели, активно мониторящие ленту Wired и каталоги вроде Crunchbase и ProductHunt, скажут: за минувший год-полтора появилось свыше десятка проектов в области создания сайтов, поднявших тезис о цифровом помощнике на свой флаг и лендинг.

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

Текущие реализации можно разбить на три типа:

  • Нормализация цветовой гаммы. Пожалуй, самый успешный в плане PR (50 тысяч бэкеров до запуска) проект с применением цифрового помощника — The Grid — предлагает услуги алгоритма Молли: вы добавляете контент, и она сама загибает за вас пальцы — старается наложить блюр выбранной палитры на картинки так, чтобы вместе всё смотрелось.

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

  • «Просто добавь воды». Сервисы Bookmark и Wix помимо возможности собрать сайт вручную предлагают ассистентов AiDA и ADI: вы выбираете сферу деятельности, даете немного информации о себе и бизнесе, а потом смотрите 30-секундное «кино» про то, как ассистент ловко работает за вас.

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

  • Чат-боты. Проекты вроде Firedrop, Opla (чат-бот в Facebook) и Heek предлагают начать создание сайта с обмена сообщениями с роботом — ответить на пару вопросов о себе и теме сайта, залить картинки, — а затем подставляют пару фраз из чата в шаблон из каталога. Все боты понимают несколько команд, на остальные обычно отвечают ссылками на руководство и техподдержку.

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

Но слушайте, внести название компании и контакты на выбранный по ключевому слову шаблон — это не rocket science. Мы научили пользователей делать это через обычный визард ещё пару лет назад — вместо конструирования со спецэффектами.

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

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

Лендинг или сайт — это minimal viable сущность, необходимая для того, чтобы нести благую весть о вашей идее или продукте сразу по всем доступным каналам. И конструкторы ценятся пользователями не только потому, что в них можно собрать сайт из блоков мышкой, но и потому, что в том же простом режиме в них можно прикрутить функциональные модули: корзины, оплаты, формы, рассылки, аналитику и так далее. Это даёт базовые возможности для результативной коммуникации с аудиторией.

Но для кого-то создание страницы и поиск понимания, как соединить продукт с ЦА, так и остаются двумя отдельными сферическими историями в вакууме. Что дальше? Настроить таргетинг для кампании в Facebook? Поменять цвет вон той кнопки? Переписать продающий текст? Искать SEO-специалиста? Вопрос, что делать и что добавить, чтобы любая страница быстро нашла клиентов, повисает в воздухе.

С этого и может начаться «рок-н-ролл» не только с ИИ-дизайном, но с ИИ-маркетингом, ИИ-персонализацией контента и заполнением других «пустот» в команде и знаниях пользователя.

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

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

1. Сбор, подготовка, компоновка контента сайта

Как театр начинается с вешалки, так и сайт начинается с текстов и графики.

1. Раскрепостить автора. Уникальные тексты уже не обязательно печатать — достаточно надиктовать их в голосовой блокнот, построенный на технологиях распознавания речи. Сейчас таких решений довольно много, и они снимают сразу два психологических «блока».

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

2. «Оттюнинговать» набросок. Обучаемые решения для этого и существуют. Правда, пока они узкоспециализированы: например, сервис для HR-специалистов Textio старается перестроить интонации в тексте вакансии так, чтобы получить больший отклик.

Конечно, для многих задач есть замечательный «Главред». Однако фраза «Textio обучен на анализе 273 млн документов» звучит достаточно интересно, чтобы попробовать что-то новое, верно?

3. Оценить изображения. Сервисы вроде Everypixel и LaMem учатся вычислять эстетически-выверенные картинки для масс. Параметров оценки уже много: цвет, освещение, насыщенность, количество деталей, композиция.

А для отбора лучших визуальных решений под конкретные ЦА подобным сервисам как раз-таки не хватает связки с системами, собирающими данные об аудиториях (ведь предпочтения каждого из нас уже зашиты в то, что называется big data).

Но представьте, что уже сегодня из пары десятков изображений можно отобрать те самые три-пять картинок, которые «зайдут» лучше. А в будущем изображения на сайт могут выбираться не на основе субъективной оценки, а по соответствию эстетике ЦА.

4. Скомпоновать контент на сайте. Только самые безрассудные начинают задумываться о наполнении сайта, попав в визуальный редактор. У остальных к этому моменту копится гора разрозненных файлов, документов, а что-то из важного, хорошего и полезного может быть опубликовано на старом сайте или в соцсетях.

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

uKit Alt сам заполняет шаблон сайта контентом из Facebook или «ВКонтакте». Impress.ly пытается «поженить» ваш старый сайт и Facebook. А ребята из проекта Hu²la просто дают спарсить дизайн любого сайта и подправить его в визуальном редакторе.

Пока эти решения строятся на понятном алгоритме, но содержат намек на возможности компоновки контента машиной и data mining (глубинный анализ данных — vc.ru).

2. Решение проблемы запоминаемости (фирменного стиля)

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

1. Подобрать шрифты. Хотя конструкторы уже предлагают готовые шрифтовые пары и регулярно расширяют ассортимент по просьбам пользователей, на деле мы хотим не подбирать, а просто нажать на кнопку «сделать так, чтоб мне понравилось».

Основанный на принципах машинного обучения Fontjoy — как раз про это. Нажимаем кнопку «Сгенерировать» и видим шрифтовую пару. Чуть дальше стоит Rene от экс-сотрудника The Grid и нынешнего дизайнера Airbnb Джона Голда. Опираясь на базовые требования, сервис генерирует наборы «заголовок-текст-кнопка» и сразу показывает «что будет, если мы вот тут чуть увеличим кегль и отступ».

2. Подбор цветовых палитр. Генератор цветовых схем Сolormind по клику готов выдавать палитры из пяти сочетающихся цветов. А параллельно обучается на пребывающих визуальных данных — даже если это скриншот из фильма. Да, сюда можно загрузить кадр из «Игры престолов» и получить свой готовый колористический сет в духе сериала.

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

3. Создание фирстиля целиком. Отсутствие логотипа (ну или хотя бы приемлемого логотипа в SVG) и времени на его создание — ещё одна распространённая проблема. Генераторы логотипов существуют давно, но редко предлагают настоящую вариативность и выбор.

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

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

Ещё ниже стоит Brandmark — сервис, запущенный в августе 2017 года, субъективно генерирует хуже, зато всё и сразу: набор цветов, шрифтов, логотип, визитки и даже шаблон сайта. Всё в едином стиле.

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

И на последнем примере мы, вероятно, видим связку решений: Brandmark создал тот же человек, что ранее запустил Fontjoy и Colormind. В чём-то эти сервисы пересекаются. И вот такие логические связки инструментов под потребности недизайнеров — предвестник того будущего, где каждый сможет стать себе дизайнером. Несмотря на то, что пока результат труда машин выходит, скажем так, «рабочим», а не «парадным».

3. Решать маркетинговые задачи

Читая предыдущие абзацы вы могли подумать: «Какие-то неизвестные имена, названия, небось, все стартаперы и ничего не взлетит». Но и Adobe недавно выпустил инструмент на базе машинного обучения Sensei, который много чего умеет: анализировать статистику перехода по ссылкам, распознавать и редактировать изображения (например, менять выражения лиц на фото), считывать текст на картинках, играться со шрифтами, определять тип документа и его содержание, добавлять теги к изображению для индексации в поиске и так далее.

Но главное, в этот суперкомбайн встроены ещё три инструмента: сегментация ЦА, поиск ЦА, похожей на уже охваченную и предиктивное моделирование изменений на рынке. Нет гарантии, что Adobe выпустит свой конструктор, а интегрировать такие функции в них было бы здорово: согласитесь, будет как минимум неудобно постоянно переключаться между Creative Cloud и административной панелью сайта.

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

#колонка

{ "author_name": "Vladislava Rakhmanova", "author_type": "editor", "tags": ["\u043a\u043e\u043b\u043e\u043d\u043a\u0430"], "comments": 17, "likes": 20, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 26778, "is_wide": false, "is_ugc": false, "date": "Wed, 27 Sep 2017 13:01:27 +0300" }
{ "id": 26778, "author_id": 75278, "diff_limit": 1000, "urls": {"diff":"\/comments\/26778\/get","add":"\/comments\/26778\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/26778"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

17 комментариев 17 комм.

Популярные

По порядку

Написать комментарий...
7

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

Ответить
3

"Борис, ты не прав" (с) из интернетов

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

Ответить
6

Такие системы подталкивают "директоров" на мысль "а может сами сделаем? вроде сис. админ умеет в ворде печатать"

Ответить
1

ИМХО, сайт должен нести информацию (контент). На хорошем сайте информации много, она расположена плотно но доступно, в т.ч. для людей с инвалидностью. Остальное - в т.ч. эстетика - второстепенно.

Сейчас плотность контента на сайтах падает - отчасти в угоду модульности и гибкости интерфейса (причем негибкость, с которой борются, создана искусственно - излишним применением тега div и каскадных таблиц стилей), отчасти в силу других причин.

Дизайнеры предлагают закрыть глаза на эту проблему, и полностью сосредоточиться на эстетических решениях в рамках заранее заданых функционально калечных концепций (чего стоит только шествие Material Design по просторам сети, концепция Landing Page, etc).

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

Ответить
1

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

А вот насчет эстетики - не соглашусь: контент, безусловно, важен и критичен, красивая упаковка его отсутствие не спасет - но не стоит забывать и об исследованиях, что эстетика (и компоновка как ее часть) является важным фактором в оценке человеком "я доверяю этому сайту и хочу на нем остаться"

Ответить
1

"Борис, ты не прав" (с) из интернетов

Это не из интернетов. Это в конце 80-х Горбачёв с Ельциным спорили в телевизоре

Ответить
0

Как уроженец 88го, честно скажу, что почерпнул это из медиа (сначала относительно-свободный телек, потом развитие мема в онлайн). А предыстория вопроса доступна любому гуглящему, это да.

Ответить
0

Лигачев сейчас перевернулся в гробу.
(на самом деле не перевернулся, потому что он, оказывается, еще жив!)

Ответить
7

генеративный дизайн

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

Ответить
0

Почитал про возможности генеративного дизайна на wiki, прифигел

Ответить

Комментарий удален

0

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

Ответить
0

Александр, генеративные системы служат ответом на тот самый угар, не находите? И ждём примеров и статистики)

Ответить
0

Влажные мечты конструкторов сайтов :)

Ответить
0

Если посмотреть квартальные отчёты публичных игроков, то уже реальность.

Ответить
0

"вжух — и за час готов лендинг под продукт, услугу, резюме или событие". Это да, если бы за разработку НОРМАЛЬНОГО сайта, не говоря уже о хорошем, отвечал только дизайнер и разработчик. А так... Вжух и через час у вас очередное га*но коих в сети десятки тысяч.
А все это потому, что до сих пор есть стереотип что для того, чтобы создать нормальный сайт, нужен только дизайнер и программист, а по факту, это специалисты которые являются лишь частью и даже не половиной, одного большого процесса в разработке.

Ответить
0

Михаил, дело в том, что конструкторы и команды под ключ прямо не конкурируют примерно что из-за ценника (иначе странно объяснить, как они существуют 15+ лет). Конструкторы делают и развивают команды разнопрофильных профессионалов. А разница в задачах клиента. Тарификация складывается на любом цивилизованном рынке, вот и под разный спрос существует разное предложение.

Ответить
–2

Здорово!

Как раз делаю ИИ которое генерит бесплатные Landig Page.
Опробывать систему можете в октябре.
Пишите мне ВК: https://vk.com/andrew.nefedov

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления