Alexey Korneev
3 018
Блоги

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

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

Поделиться

В избранное

В избранном

Адаптированный перевод публикации 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

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

{ "author_name": "Alexey Korneev", "author_type": "self", "tags": [], "comments": 40, "likes": 32, "favorites": 31, "is_advertisement": false, "section_name": "blog", "id": "34236", "is_wide": "" }
{ "is_needs_advanced_access": false }

Комментарии Комм.

Популярные

По порядку

0

Прямой эфир

Подписаться на push-уведомления
[ { "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", "tablet" ], "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" } } } ]