Найти в Дзене

ИИ, абстракция и кот: необычная история создания сайта для «Автодории»

Мы — команда 4-6, и мы любим создавать не просто страницы с кнопками, а живые истории — чтобы было и красиво, и понятно, и запоминалось надолго. Недавно к нам обратилась компания «Автодория» — настоящие новаторы в безопасности дорог. Они первые в России придумали, как контролировать среднюю скорость машин (не просто ловить нарушителей радарами, а анализировать весь путь!). Благодаря их системе в Татарстане аварий стало меньше на 15,6%, а смертность упала вдвое — вот это результат! Но как рассказать о таких сложных технологиях просто и красиво? Тут нам на помощь пришел... Василий Кандинский! Нет, не лично (хотелось бы!), а его стиль. Перед нами стояла интересная задача: создать сайт для «Автодории». Цель сайта: Показать, что технологии «Автодории» — это не скучные камеры, а прорывной подход. Нужно было сделать дизайн, который кричит: «Мы — инновация!» Идея: Сравнить «Автодорию» с… абстрактным искусством! Звучит неожиданно? Вот и мы так подумали сначала. Вызов: Как превратить эти умные м
Оглавление

Мы — команда 4-6, и мы любим создавать не просто страницы с кнопками, а живые истории — чтобы было и красиво, и понятно, и запоминалось надолго.

Недавно к нам обратилась компания «Автодория» — настоящие новаторы в безопасности дорог. Они первые в России придумали, как контролировать среднюю скорость машин (не просто ловить нарушителей радарами, а анализировать весь путь!). Благодаря их системе в Татарстане аварий стало меньше на 15,6%, а смертность упала вдвое — вот это результат!

Но как рассказать о таких сложных технологиях просто и красиво?

Тут нам на помощь пришел... Василий Кандинский! Нет, не лично (хотелось бы!), а его стиль.

Что нужно было сделать?

Перед нами стояла интересная задача: создать сайт для «Автодории».

Цель сайта: Показать, что технологии «Автодории» — это не скучные камеры, а прорывной подход. Нужно было сделать дизайн, который кричит: «Мы — инновация!»

Идея: Сравнить «Автодорию» с… абстрактным искусством! Звучит неожиданно? Вот и мы так подумали сначала.

Почему искусство?

  • Художник Кандинский первым начал рисовать абстракции — ломал шаблоны.
  • «Автодория» первой придумала новый подход к безопасности на дорогах — тоже ломает стереотипы.
  • В абстракции кажется, что это просто линии и круги, но за ними — глубокая система. Так и у «Автодории»: за простой идеей («контроль скорости») — сложные технологии.

Вызов: Как превратить эти умные мысли в дизайн, который поймёт любой водитель? Пришлось немного поколдовать!

Как мы это сделали: от карандашей до нейросетей

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

Шаг 1. Учимся у Кандинского (и немного завидуем)

Сначала мы устроили «погружение в искусство»:

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

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

Шаг 2. Зовём на помощь ИИ

Решили попробовать нейросети:

  • Midjourney: На наши многочисленные промты выдавал то психоделические узоры, то странных роботов. Не то!
  • Озарение: В Яндексе по запросу Кандинский выдавалась одноименная ИИ от Сбера — это было знамение!
  • Магия: Загрузили настоящие картины, написали промт про «дороги, технологии и абстракцию» — и... заработало!

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

Шаг 3. Собираем пазл: от картинок к сайту

Теперь нужно было сделать из этого рабочий дизайн.

  1. Динамичная дорога на главной
-2
  • Простые формы показывают машины, дорога под углом создаёт ощущение движения.
  • Белые круги — взгляд системы. Они расставлены как точки контроля, подчеркивая идею наблюдения ИИ за трафиком.
  1. Возможности «Автодории» в стиле Кандинского

Динамичная дорога на главной

-3

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

Технологии «Автодории» в стиле Кандинского

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

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

3. Портрет Кандинского, нарисованный... самим Кандинским?
Нейросеть удивила нас — она создала стилизованный портрет художника! Узнается его фирменная бородка, строгий взгляд, но всё состоит из тех самых линий и кругов, которые он любил.

-7

-8

Мы разместили этот портрет в разделе «О компании» — как намёк на то, что новаторство бывает и в искусстве, и в технологиях.

4. Пушистый секрет Кандинского


Художник обожал своего кота, и мы не смогли удержаться — добавили стилизованного котика в форму обратной связи. Теперь там живет маленький геометричный котёнок. Пушистый мостик между искусством и пользователем!
Художник обожал своего кота, и мы не смогли удержаться — добавили стилизованного котика в форму обратной связи. Теперь там живет маленький геометричный котёнок. Пушистый мостик между искусством и пользователем!

Что в итоге получилось?

Сайт, который говорит образами

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

Что мы вынесли из этого проекта?

Этот проект стал для нас не просто очередной работой, а настоящим творческим открытием. Вот какие важные выводы мы сделали:

Главный урок: ИИ — это не просто «инструмент», а творческий партнер

Раньше мы воспринимали нейросети как вспомогательный инструмент — что-то вроде "умного фотошопа". Но этот проект полностью изменил наше представление!

Оказалось, что ИИ может:

  • Стать источником вдохновения — когда наши дизайнеры зашли в творческий тупик, нейросеть подсказала неожиданные визуальные решения
  • Выступать «переводчиком» между стилями — она помогла "перевести" язык абстрактного искусства Кандинского на современный цифровой дизайн

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

После этого проекта мы ещё больше полюбили нестандартные задачи.

Приглашаем вас создать сайт, который:

  • Не будет похож ни на что другое в вашей отрасли
  • Расскажет историю вашего бренда через уникальный дизайн
  • Возможно, тоже обзаведется своей «фишкой»

Давайте обсудим ваш проект — вместе мы сможем создать что-то по-настоящему особенное!

P.S. Кстати, расскажите как вы обучали нейросеть в комментариях. Мы будем рады узнать, как это проходило у вас и поделимся своим опытом! ;)