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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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