VIQQ: робот на первом экране и дизайн главной для IT-студии
Мы сделали здесь одну вещь, но главную: дизайн главной страницы, а вместе с ним персонажа. Идея робота, его генерация и анимация — наши. Разработку сайта и внутренние страницы студия вела своими силами.
У студий разработки одна и та же беда: их сайты неотличимы друг от друга. Тёмный фон, слово «инновации», абстрактные шары и список услуг — по такому первому экрану нельзя вспомнить, чей это сайт.
Задача была узкая и понятная: сделать главную, которую запоминают. Вёрстку, бэкенд и внутренние страницы команда VIQQ вела сама — в этом кейсе показана та часть, за которую отвечали мы.
Отсюда решение, с которого всё началось: у сайта должен быть персонаж. Не абстрактная иллюстрация, а конкретный герой, который смотрит на тебя с первого экрана.
1
экран, который держит всю страницу
6
нумерованных разделов главной
9
направлений услуг в одном блоке
17
секунд анимации робота
Робот придуман, сгенерирован и анимирован под этот экран
Персонаж не взят со стока и не куплен готовым: идея, генерация и анимация сделаны под задачу. Чёрный гуманоид с голубыми глазами стоит в кадре, чуть двигается и смотрит прямо в камеру — этого хватает, чтобы экран перестал быть шаблонным.
За ним во всю ширину лежит вордмарк VIQQ, срезанный нижним краем экрана. Ролик идёт без звука, зациклен и не спорит с заголовком справа: движение в кадре минимальное, читать оно не мешает.
Главная пронумерована как оглавление
Разделы подписаны номерами в квадратных скобках: [01] услуги, [02] о нас, [03] отзывы, [04] портфолио, [05] материалы, [06] связь. Это единственный декоративный приём, который позволяет себе макет.
Палитра из трёх цветов — чёрный, белый и синий акцент. Всё остальное держит типографика: крупный плотный гротеск в заголовках и мелкий моноширинный в служебных подписях.
Девять направлений в одном блоке
Слева девять направлений — от сайтов и магазинов до ИИ, интеграций и умного дома. Справа раскрывается то, что за ними стоит: типы сайтов, CMS и стек, отдельные ветки под Tilda и 1С-Битрикс, старт проекта, порталы и веб-приложения.
Это редкий случай, когда длинный список работает: он закрывает поисковые запросы и заодно показывает, что студия действительно занимается разным. Важно только не выкладывать его простынёй, а спрятать за переключателем.
Девять направлений в левой колонке
Внутри — типы сайтов, CMS и стек
Отдельные ветки под Tilda и 1С-Битрикс
Список закрывает поисковые запросы
Команда по именам и письма вместо звёздочек
Последний экран не уговаривает, а называет условие
Блок пронумерован [06] и назван «связь». В нём три поля, кнопка «прикрепить файл проекта» и заголовок, который работает лучше любого призыва: «закажи расчёт по ценам 2025 года».
Рядом три иконки — чат, телеграм, ватсап. Для подрядчика по разработке это честнее формы: обсуждение задачи всё равно уедет в мессенджер, и лучше дать эту дверь сразу.
На телефоне робот остаётся героем
Заголовок уходит вверх, робот занимает нижние две трети экрана и по-прежнему смотрит в камеру. Кадр не подменяется статичной картинкой — это единственное, что нельзя было терять на узком экране.
Блок услуг складывается в вертикальную ленту: направление, под ним раскрытый список. Карточки специалистов листаются свайпом.
Что здесь сделали мы
Дизайн главной страницы и персонаж. Робот — идея, генерация и анимация — сделан нами специально под этот первый экран, а не подобран из готового.
Разработку сайта и внутренние страницы студия VIQQ вела своими силами. Мы отвечали за то, как выглядит главная и чем она запоминается.
Приём переносится на любой сайт подрядчика: один узнаваемый герой на первом экране стоит дороже трёх абзацев про инновации.
1
первый экран
6
разделов главной
9
направлений услуг
17
секунд анимации
Дизайн в Figma
Генерация персонажа
Монтаж и грейд
Видео на первом экране
Тёмная типографика
Спрашивают чаще всего
Что именно вы делали на этом проекте?
Дизайн главной страницы и персонажа. Робот придуман, сгенерирован и анимирован нами под этот первый экран. Разработку сайта и внутренние страницы команда VIQQ делала сама — мы за них не отвечали и в кейс их не включаем.
Как сделан робот?
Сначала идея и облик персонажа, потом генерация кадров нейросетью и отбор тех, где взгляд и поза работают на задачу, дальше анимация, монтаж и цветокоррекция под палитру сайта. Ролик сведён так, чтобы движение читалось, но не мешало читать заголовок: сильная динамика на первом экране мешает, а не помогает.
Почему видео, а не иллюстрация?
Потому что запоминается взгляд. Статичный рендер робота — это ещё одна картинка в общем ряду тёмных айтишных сайтов; ролик, где герой чуть двигается и смотрит в камеру, читается как присутствие. Технически это дешевле съёмки и точнее по цвету: кадр сразу собирается под палитру макета.
Можно сделать такого персонажа для нашего сайта?
Да, и чаще всего это самая окупаемая часть работы: персонаж делает первый экран узнаваемым, а дальше его же можно разложить на соцсети, презентации и рекламу. Стоимость зависит от сложности героя и длины анимации. Напишите — обсудим идею.
Живые сайты, а не картинки в презентации
Команда Reut Art
сегодня
Здравствуйте, я владелец компании
производим входные двери
хотел обратиться за редизайном
Здравствуйте, Евгений!
Конечно, наша команда займется этим
Начнем обсуждение вашего лучшего проекта?
Подписаться на рассылку
Согласен получать письма о новых работах и статьях и на обработку персональных данных
Reut Art
ReutArt © 2026
ИП Реут Артём Юрьевич · ИНН 910402081314 · ОГРНИП 320911200026247