ПРИМЕНЕНИЕ НЕЙРОННЫХ СЕТЕЙ ПРИ ПРОЕКТИРОВАНИИ ДИЗАЙНЕРСКИХ РЕШЕНИЙ ВЕБ-САЙТОВ

Современные цифровые технологии быстро развиваются, предоставляя творческим людям новые возможности. Однако качество многих веб-сайтов является низким от того, что ИТ-специалисты обладают слабо выраженной экспертизой в области визуального дизайна [1]. Они ставят фокус на функциональность и код, упуская принципы визуальной иерархии и психологии восприятия, что приводит к снижению доверия и репутации, высокому показателю отказов и сложности использования [2].

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

Разработчик, не имеющий опыта в UX/UI‑дизайне, зачастую сталкивается с трудностями при выборе цветовых схем, типографики, структуры страниц и визуальных паттернов, соответствующих специфике сферы деятельности сайта (медицина, образование, культура и искусство, IT, государственные услуги и др.). В результате принимаются субъективные решения, которые не всегда согласуются с существующими стандартами.

На данный момент для поддержки веб‑дизайна зачастую используются ручные гайдлайны, общие принципы UX, а также инструменты в виде нейронных сетей для генерации изображений, которые создают исключительно визуал. Также существуют системы на основе автоматических макетов (например, Figma), но они, как правило, ориентируются на общий контент, а не на конкретную сферу деятельности сайта. [3]

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

В статье предоставлено исследование процесса разработки дизайна для разработчиков без специальной подготовки в области дизайна. Предмет исследования – рекомендательная система дизайна веб‑сайта на основе LLM‑сгенерированной базы знаний.  Задача исследования – показать, что LLM‑модели могут выступать инструментом генерации базы дизайнерских рекомендаций, разделённой по тематическим категориям веб‑ресурсов. 

Цель статьи – предложить и описать подход к построению рекомендательной системы дизайна, опирающейся на LLM‑модели, и продемонстрировать перспективы использования в сфере цифрового проектирования. 

В отличие от ручной экспертизы, LLM позволяют автоматизировать процесс формирования дизайнерских решений. В данной работе выбран именно LLM‑подход, так как модели способны оперировать большими объёмами нормативных и методических материалов и преобразовывать их в понятный для разработчика формат. [4]

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

• переводит экспертные знания по дизайну в структурированную форму;
• адаптирует рекомендации под конкретную тематику сайта и уровень подготовки разработчика;
• добавляет элемент поиска по реальным сайтам, что делает советы практико‑ориентированными и связанными с существующими веб‑проектами.

Архитектура системы включает четыре основных блока (рис.1): 

1.  блок опроса пользователя; 
2.  база дизайнерских рекомендаций, сформированная на основе LLM; 
3.  алгоритм поиска похожих веб-сайтов, который связывает запрос пользователя с реальными примерами цифровых ресурсов;
4.  блок выдачи рекомендаций в интерфейсе системы.

Рисунок 1. Архитектура рекомендательной системы

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

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

База разбита на тематические категории, соответствующие основным сферам веб‑ресурсов (образование, цифровое искусство, финансы, e‑commerce, государственный сектор и др.), внутри категорий выделены подгруппы, учитывающие стиль (минималистичный, корпоративный, яркий, и др.) и технические характеристики (уровень анимации, наличие тёмной темы, требования доступности). Каждая подгруппа содержит подготовленный пакет рекомендаций, представленных в виде структурированного текстового блока. LLM‑модель в данном подходе выступает как надёжный инструмент упорядоченных знаний, которые затем используются в рекомендательной системе.

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

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

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

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

Рисунок 2. Схема работы алгоритма

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

– шрифты – конкретные предложения по типу шрифтов, размерам, контрасту и их сочетанию с основным содержанием.

– палитра – рекомендуемые HEX‑коды, основные и акцентные цвета, согласованные с выбранным стилем и требованиями доступности.

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

– навигация и структура – рекомендации по типу меню, количеству страниц, логике разделов и глубине навигации.

– дополнительное – советы по тёмной теме, уровню анимаций и использованию готовых UI‑библиотек или своих компонентов.

Рисунок 3. Рекомендации приложения при выборе сфере «Экология»

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

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

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

Список литературы

1. How Visual Design and Hierarchy Make (or Break) UX [Электронный ресурс] // Coveo. – URL: https://www.coveo.com/blog/visual-hierarchy-and-user-experience/ (дата обращения: 29.03.2026).
2. 75% of Consumers Judge a Company’s Credibility by Its Website [Электронный ресурс] // Made for Web. – URL: https://www.madeforweb.co.uk/blog/75-of-consumers-judge-a-companys-credibility-by-its-website (дата обращения: 29.03.2026).
3. Как AI преобразует создание веб-сайтов [Электронный ресурс] // Tobiz. – URL: https://tobiz.net/support/kak-ai-preobrazuet-sozdanie-veb-saytov/ (дата обращения: 29.03.2026).
4. Ван, Ц. Педагогика цифровых искусств и технологии цифровизации художественного образования в вузах Китая / Ц. Ван // Мир науки. Педагогика и психология. — 2024. — Т. 12., № 4. — URL: https://mir-nauki.com/PDF/43PDMN424.pdf (дата обращения: 30.03.2026).
5. Тренды веб-дизайна 2026 [Электронный ресурс] // Tilda Education. – URL: https://tilda.education/web-design-trends (дата обращения: 30.03.2026).