Полностью автоматическое перепроектирование простых сайтов

Заглядываем в ближайшее будущее на примерах технологий из настоящего.

Часть 1: Ожидания. Какие предпосылки и проблемы у нас есть

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

Как правило, у нас есть целый список базовых “правок”: например, мы хотим поиграться с типографикой, цветовой схемой, а также избавиться от анимации во Flash, которая блокируется современными браузерами, и полностью перейти на HTML5.

В мире насчитывается более 1 миллиарда сайтов. Многие из них так и остались в 2000-х. Что если мы заведем ИИ-помощника, который будет по команде быстро внедрять изменения на устаревший сайт?

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

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

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

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

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

Например, вот так:

1. Для современной веб-страницы важны быстрая загрузка, адаптация под разные экраны и верстка в HTML5/CSS3. И есть простой и надежный способ соблюсти эти условия: мы можем вычленить структурное ядро и уникальный контент со старой версии страницы и экспортировать эту информацию в новую и современную кодовую оболочку.

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

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

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

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

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

Собственно, такие инструменты как Pagevamp или uKit Alt уже предлагают «превратить вашу страничку в социальной сети в веб-сайт».

При этом страница в Facebook служит источником контента, а конструктор дает ту самую новую оболочку: чтобы автоматизировать процесс, достаточно перекинуть контент по API соцсети.

Часть 2: Реальность — что у нас есть

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

Мы определили 3 этапа, и в настоящее время у нас есть прототипы систем, которые последовательно закрывают каждый этап. В ближайшее время они будут объединены в один онлайн-сервис под названием uKit AI 1.0.

Машинное зрение для распознавания старой версии + парсер для переноса в новую оболочку

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

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

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

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

Генеративный алгоритм: создание различных версий страницы на основе контента с исходной версии

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

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

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

Дизайн-модуль uKit AI пробует найти более удобный для восприятия подход к подаче информации на новом сайте, взяв за основу контент и цветовую схему старой версии сайта

Состояние: прототип.

Система анализа качества дизайна

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

И что важно, такой фидбек нужен ещё до того, как владелец сайта увидит обновленный вариант.

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

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

Вы сможете не только испытать систему, но и стать одним из ее учителей

Часть 3. Будущее: что дальше?

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

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

--

--

--

Cамый большой коллективный блог про дизайн на русском языке

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
uKit ICO

uKit ICO

Boosting website conversion with Artificial Intelligence! Designing dynamic landing pages based on crowd data: https://ico.ukit.com

More from Medium

Creating an Object-Oriented CMS with Webflow

SIMO app has Launched!

Low-Code Development: Why It Is Important and Why It Can’t Replace Traditional Approach

The Disappearing Power Button

A dotted power button icon.