Сайты, которые дизайнят себя сами: как работает технология алгоритмического редизайна

Разбираем на юзкейсах, гифках и видео.

Адаптированный перевод публикации Websites Redesign Fully Automated из коллективного Medium-блога о дизайне Prototypr.

Часть 1: зачем нам это?

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

При этом тенденции сайтостроения подчинены своеобразному “закону Мура”: требования к технологиям и дизайн-тренды меняются все чаще.

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

"В сети насчитывает свыше миллиарда сайтов. Многие из них не менялись годами"

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

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

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

Упрощенная схема пересборки сайтов машиной

Как именно мы можем автоматизировать процесс редизайна сайтов? Вот один из путей:

1. Импорт. Мы должны добиться быстрой загрузки и адаптации страницы под мобильные устройства, а также избавить сайт от старых технологий (если они были). Для этого мы можем распознать структуру и контент старой версии, а затем завернуть эти данные в более современный код.

2. Генеративный дизайн. Контенту на сайте нужна упаковка. Алгоритм поможет нам найти и быстро оформить несколько вариантов оформления, опираясь на:

  • базовые правила: например, правило "если на сайте есть номер телефона, следует поставить его в шапку и сделать кликабельным",
  • примеры различных компоновок, на которых он обучен,
  • и контент старого сайта: набор текстовых блоков, картинок, файлов и т.д.

3. Выбор. Получив несколько новых вариантов компоновки контента и статических элементов дизайна, мы должны построить гипотезу о том, какой из них сработает лучше. Если речь идет о типовом сайте-визитке небольшого бизнеса, мы можем смоделировать “типичного посетителя” — и модель машинного обучения предскажет, какой дизайн скорее задержит посетителя на сайте.

Пример: одна веб-страница становится источником контента для другой

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

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

Это доказывают проекты вроде Pagevamp и uKit Alt, помогающие создать сайт из контента в соцсети: страница о вас в Facebook служит источником данных, конструктор дает оболочку для ее контент-копии, а алгоритм предлагает новое оформление. В общем, будущее где-то рядом. Просто в случае с веб-сайтами, ваш набор технологий несколько усложнится.

Часть 2: технологии для пересборки сайтов

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

Алгоритму предстоит работать “в условиях неопределенности”. Для этого он должен быть обучаем.

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

2.1. Компьютерное зрение: распознаем контент

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

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

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

Система распознавания контента в проекте uKit AI: пробуя разные подходы, мы выяснили, что большинство случаев попадает под 10 основных режимов детекции.

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

2.2. Генеративный алгоритм: создаем новое на основе пользовательского контента

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

Конверсия - пожалуй, главное ожидание любого бизнеса от собственного сайта.

Осовремененный дизайн - это логичный шаг к ее улучшению. Алгоритмы могут значительно ускорить этот процесс.

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

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

2.3. Скоринг: насколько красотивые страницы получилось создать у алгоритма?

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

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

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

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

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

Часть 3: заглядывая в будущее

Давайте посмотрим, как может выглядеть весь цикл автоматической пересборки сайта:

Визуализация работы системы uKit AI

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

0
39 комментариев
Написать комментарий...
Кирилл Лаптев

У вас на сайте в презентации сайт моей мамы )

Ответить
Развернуть ветку
Alexey Korneev
Автор

Мир тесен) Этот сайт мы увидели, когда готовили uKit Alt, ту штуку, которая собирает автоматом сайт из контента о компании в FB или VK - и он нам как-то запомнился и запал в душу. Насколько знаем, мама сайт обновила, да?

Ответить
Развернуть ветку
Кирилл Лаптев

Да, она начинает осваивать ворд пресс.

Ответить
Развернуть ветку
Alisa Lengova

Оценка 6,62

Этот сайт настолько хорош, что стоит незамедлительно рассказать об этом миру.

Приятно!

Ответить
Развернуть ветку
Alexey Korneev
Автор

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

Ответить
Развернуть ветку
Дмитрий Апрельский

vc.ru
Оценено сегодня в 17:54

Оценка — 5.88

Ответить
Развернуть ветку
Alisa Lengova

vc.ru хуже моего сайта? Ого!

Ответить
Развернуть ветку
Дмитрий Апрельский

немножечко не так)... ваш сайт лучше vc.ru)

Ответить
Развернуть ветку
Alexey Korneev
Автор

Ну весьма неплохо, учитывая, что система натренирована на оценку магазинов, сайты-визиток и леднингов услуг/товаров, а не медиа)

Ответить
Развернуть ветку
Владимир Карулин

4.33 только :( Ждем релиз софта тогда :)

Ответить
Развернуть ветку
Alexey Korneev
Автор

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

Ответить
Развернуть ветку
Владимир Соловьёв

http://podhod.ru
Оценка — 8.31. Нейросеть пока не отнимет мое рабочее место дизайнера? )
Если серьезно — а есть сайт который выдаёт 10 баллов? Хотел бы посмотреть какой критерий «идеального» сайта.

Ответить
Развернуть ветку
Alexey Korneev
Автор

Владимир, ну вот главная сайта Apple одно время оценивалась нами на 10-ку - а потом они внесли изменения, оценка подупала)

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

Ответить
Развернуть ветку
Alexey Korneev
Автор

И нейросети не отнимают работу у верстальщиков и дизайнеров) Это и недавнее исследование Bloomberg об автоматизации труда показывало, например. Наоборот, мы надеемся, что дизайнеры подружатся с ИИ.

И не только мы так думаем - вот целая подборка кейсов от разных проектов и компаний https://spark.ru/startup/ukit-ai/blog/31532/kak-nejroseti-podruzhat-zakazchikov-i-dizajnerov-razbiraem-zhiznennie-situatsii

Ответить
Развернуть ветку
Петр Фоменко

У нас 8.48 ))))
Круче чем сам webscore.ai )))

Ответить
Развернуть ветку

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

Развернуть ветку
Serge Arsentiev

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

Ответить
Развернуть ветку
Alexey Korneev
Автор

Сергей, летом на VC была занятная статья о том, как автоматизация и такие вот цифровые помощники тихой сапой уже помогают людям на каждом из описанных вами этапов, и как эти сервисы можно комбинировать https://vc.ru/26778-ai-site-assistant

Ответить
Развернуть ветку
Alexey Korneev
Автор

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

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

p.s. И это вы еще сайты из списка РКН не пробовали проверять ;)

Ответить
Развернуть ветку
Дмитрий Душкин

Если такой то набор виджетов в определенном порядке даёт значимый статистический результат на одном сайте, это же не значит, что это будет полезно для другого?
Средний сайт имеет небольшую посещаемость. Хватает ли таких данных для значимых результатов в АБТ?

Ответить
Развернуть ветку
Alexey Korneev
Автор

Дмитрий, клевый вопрос. Смотрите, да, планируем создавать несколько компоновок одного сайта под разные сегменты и помогать тестировать их на реальном трафике, подстраиваясь под общие знания о сегменте. При этом нам нужны данные об аудиториях - их можно покупать у DMP, плюс сама компания работает с 3,8 млн сайтовладельцев непостредственно. Это концепт продукта в версии 2.0.

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

Ответить
Развернуть ветку
Дмитрий Душкин

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

Ответить
Развернуть ветку
Alexey Korneev
Автор

Дмитрий, спасибо, что почитали наш блог. Пока проект в закрытом режиме, мы как в детской песенке с "и помажем, и покажем" - а ссылки не спалим) Но вот в сравнении скриншоты:

Ответить
Развернуть ветку
Vitaly Kuznetsov

Скажем так, это не про дизайн, а про оформиловку и структуру…

Ответить
Развернуть ветку
Alexey Korneev
Автор

Виталий, привет, рад видеть в нашем посте знакомых по фб)

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

Ответить
Развернуть ветку
Vitaly Kuznetsov

Дизайн сайта это совокупность разных аспектов. В точности — дизайн это «как это работает».

Т.е. это и текст и маркетинг и редактура и размещение блоков и фотки, видео и доверительная информация о компании и визуальная составляющая.

При чем — если один из аспектов не проработан — всё может не работать.

Как ИИ может сделать доверие, не общаясь с клиентом?) Разве что«делегировать» ему часть работ по графике, но тогда ИИ надо обучать по графичекому дизайну)

В ином случае это будет лишь «качественное» случайно оформление. Лишь небольшой элемент.

Ответить
Развернуть ветку
Дмитрий Душкин

Спасибо за статью.
А на основе каких данных и критериев определяется удачность полученного дизайна?

Ответить
Развернуть ветку
Alexey Korneev
Автор

Как видно на примере https://webscore.ai/ - мы обучаем модели, которые эмулируют реакцию будущих посетителей. В планах также использовать прогноз распределения внимания - т.е. строить прогнозную тепловую карту (тут недавно на пощупать свой проект выложили MIT - visimportance называется, например).

Ответить
Развернуть ветку
Иван Вундермахер

У меня на сайте 6.2 балла оценка вашим сервисом, это хорошо? Что это вообще значит

Ответить
Развернуть ветку
Alexey Korneev
Автор

Иван, там есть маленькая приписочка в оценках на этот счёт)

Базово оценка значит следующее: если бы мы запустили на вашу страницу пару десятков человек, а потом попросили их увиденное оценить по шкале от 1 до 10, то средняя оценка была бы на уровне 6,2. То есть, люди бы не стали уходить с сайта сразу вероятнее всего, походили бы - но вам есть куда расти. Сейчас модель калибруется на предмет аномалий в оценках, дальше начнет давать рекомендации, куда именно и как расти) То есть, к коллективному мнению толпы добавятся уже практические рекомендации, что можно улучшить на вашем сайте.

Ответить
Развернуть ветку
Иван Вундермахер

На мобильной версии приписок не заметил, интересно, держите в курсе обновлений :)

Ответить
Развернуть ветку
Alexey Korneev
Автор

Иван, спасибо за фидбек, - ну и на сайте основного проекта (https://ukit.ai/) можно подписаться на обновления проекта: а заодно мы пишем в рассылках о технологиях и инструментах генеративного дизайна.

Ответить
Развернуть ветку
Nikita Zhuchkov

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

Ответить
Развернуть ветку
Alexey Korneev
Автор

Никита, спасибо за вопросы. Отвечу по очереди.

Про код - в данном случае, мы оборачиваем контент и данные в соответствующие виджеты конструктора uKit, т.е. в кодовое окружение, оптимизируемое и поддерживаемое командой разработчиков. И написанное людьми) Собственно, сам код уже можно посмотреть.

Ребята серьезно занимаются оптимизацией контента и кода сайтов в параллель с разработкой новых фич - от авто-оптимизации тяжелого контента вроде картинок до сокращения объема JS и CSS кода на странице в принципе.

Например, сейчас в среднем странички получают 80 из 100 от Google Pagespeed Insights, а вы знаете, система требовательна к коду.

Ответить
Развернуть ветку
Alexey Korneev
Автор

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

По сути, я описал правила "хорошего тона" - и нужно системе преподать их. А уж она сама будет искать, как применять их к разным ситуациям - и разным объемам и комбинациям контента. В этом и прелесть технологии генеративного дизайна - вот на wiki хорошо описано https://ru.wikipedia.org/wiki/%D0%93%D0%B5%D0%BD%D0%B5%D1%80%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B9_%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD

Ответить
Развернуть ветку
Alexey Korneev
Автор

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

Ответить
Развернуть ветку
Алексей Коробченко

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

Ответить
Развернуть ветку
Alexey Korneev
Автор

Если речь про сам WebScore AI, то у него есть как набор из 125 предзаданных параметров оценки в 15 категориях (начиная с верного отображения на популярных экранах, микроразметки и заканчивая оценкой контрастности фона, форматирования и пр), так и набор из порядка тысячи высокоуровневых признаков, выявленных нейросетью и используемых алгоритмом для доуточнения оценки. Детали можно найти здесь: https://ukit.ai/ai-evaluates-websites

Ответить
Развернуть ветку
Alexey Korneev
Автор

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

На сайте проекта есть примеры сайтов с оценками от 9+ до 1 с копейками, по версии системы. Причем в разных языковых версиях примеры разные. Ну и они хорошие или плохие на момент времени - система реагирует на изменения на сайте. Например, в один момент она котировала "морду" Apple на 10, а сейчас они сменили часть графики - и оценка снизилась где-то до 8.

Ответить
Развернуть ветку
Alexey Korneev
Автор

Благодаря читателям с VC обнаружили одно занятное свойство сервиса - мы еще и непреднамеренно умеем проверять, не истекли у вас SSL-сертификат)

Ответить
Развернуть ветку

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

Развернуть ветку
36 комментариев
Раскрывать всегда