Лютик
Люди идут вместе. Геометрический коллаж с главной страницы «Лютика».
Лучше делать, чем выделяться

AI-студия

Лютик

Брендбук

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

Ваш восторг — наша цель

Как мы работаем →Разбор кейса →

Главная задаёт клетку, цвет, шрифты и композицию. Открыть главную ↗

Карточки кейсов задают правила обложек и движения. Открыть каталог ↗

01 / Подход студии

Показываем на вашей задаче

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

Первый экран

Операция, знакомая клиенту

Назовите человека, его действие и изменение. В «Бухгалтерии аренды» бухгалтер ведёт привычную таблицу, а система готовит счёт в 1С по отмеченной строке.

Первое действие

Макет до договора

Берём согласованный пример данных клиента и вместе проверяем один сценарий. Кнопка «Макет на ваших данных» ведёт к форме, где можно описать операцию и приложить пример.

Дальше по странице

Понятный результат

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

Перед началом макета редактор и дизайнер формулируют одну фразу. «Когда [человек] делает [операцию], система [действие], поэтому [изменение в работе]».

Как это устроено в студии ↗ · Разобранный пример ЯМЦК ↓

02 / Визуальная основа

Из «Эвриста» в «Лютик»

Было

Эврист

Тёплый фон #FAF3E0, шаг 40 px, тонкие тёмно-синие линии. В архиве Severina загружалась с компьютера, а запасным шрифтом был Impact.

К переключателю версий ↑

Сейчас

AI-студия «Лютик»

Светлый фон #FFFDF4, клетка 24 × 24 px. Линии толщиной 1 px, синий #3963A8 с непрозрачностью 12%. Справа тонкое красное поле, на телефоне поле скрывается.

Цвета и их роли

Тёмно-синий#042D50

Текст, заголовки, знак. Допустим в кнопках.

Синий#3963A8

Линии, клетка и обводки.

Красный#AC1414

Рукописная реплика, рамка и активное действие.

Жёлтый#EDB20E

Небольшой акцент в графике.

Бумага#FFFDF4

Основной фон сайта.

Кремовый#FAF3E0

Локальный фон карточки или образца.

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

Шрифты, ссылки и состояния

Severina · 400Рабочий макет

Настоящий веб-шрифт сайта. Крупные заголовки, знак «Лютик» в шапке и акцентные цифры.

Sofia Sans Semi CondensedМакет на ваших данных

400 — наборный текст, 500 — меню, 600–700 — кнопки и смысловые акценты. Размеры подбираем по экрану.

Kindentosca · 400Сначала пробуем на деле

Красный курсив для короткой реплики, цитаты или позывного. Усиление штриха — точечно, как на главной.

Макет на ваших данных →Состояние наведения

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

Задача для команды

Разработайте новый логотип и проверьте его в шапке сайта, на мобильном экране и в виде иконки. Подготовьте знак отдельно и вместе с названием «Лютик». Для публикации передайте утверждённые SVG для светлого и тёмного фона.

Файл ниже можно примерить на двух фонах. Предпросмотр работает в этом браузере. Утверждённый файл добавим в брендбук после сдачи задачи.

Светлый фон
Тёмный фон

03 / Эталон каталога

Люди в кадре

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

Основной стиль

Кейсы, услуги, направления и отрасли

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

Дополнительный стиль

Манифест, кредо и принципы студии

Авторские коллажи выражают идеи «Лютика». Команда с ноутбуком показывает совместную работу, бумажный самолёт передаёт момент запуска. Жесты, ритм и геометрия помогают раскрыть мысль студии.

Фотообложки ↓ · Авторские коллажи ↓

Фото

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

Видео

Движение добавляет смысл. Например, видно передачу велосипеда или переход от выезда техники к рабочему экрану. Выбираем стоп-кадр, который понятен сам по себе.

Коллаж

Выражает идею, кредо или принцип студии. В коллаже о макете команда собирается вокруг общего предмета, и это показывает, как мы работаем вместе.

Обложка начинает двигаться

Наведите курсор на обложку или нажмите кнопку. Короткий фрагмент начинается без звука. Статичный кадр сохраняет смысл на телефоне и при отключённом движении.

Прокат электровелосипедов: передача велосипеда

Видеообложка · без звука

F-BIKE и Электродрайф

Кадр показывает выдачу велосипеда и живой контакт.

Смотреть кейс →

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

Предметная раскладка: ноутбук, телефон и карты

Что переделываем

Предметы без героя

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

Геометрический коллаж: команда собирает макет

Дополнительный формат

Авторская иллюстрация

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

Как принять новую обложку

  1. Сверьте сцену с кейсом. Кто этот человек, что он делает и чем ему помогает продукт? Проверьте устройство, жест и обстановку по материалам проекта.
  2. Откройте кадр крупно. Проверьте пальцы, хват, пропорции, опору для тяжёлых предметов и контакт с поверхностью. Сравните масштаб рук, техники и людей.
  3. Уменьшите кадр до размера карточки. Должны читаться человек, действие и важная деталь. Геометрия помогает заметить эту деталь.
  4. Сравните с соседними обложками. Ракурс, лица и позы должны отличаться, а общее впечатление держится на свете, палитре и характере графики.
Две заготовки для генерации

Обложка. [Человек и роль] выполняет [конкретное действие] в [рабочей среде]. Естественный жест и свет, тёплые нейтральные тона, немного плоской геометрии вокруг действия. Референс — «Бухгалтерия аренды» или «Приёмка». Без надписей внутри кадра.

Иллюстрация. [Люди] делают [действие]. Крупные плоские формы, бумажная фактура, приглушённые красный, синий и охра. Референс — главная «Лютика». Прозрачный фон, чистый силуэт, читается в маленьком размере.

04 / Типовая страница

Кейс показывает систему

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

Пять вопросов перед написанием

Деньги

Какая потеря сократилась или какой доход появился? Откуда цифра, за какой период и что в неё входит?

Время

У кого исчез ручной шаг? Сколько времени занимала та же операция до и после, если это измеряли?

Нервы

Какую ошибку или аварию процесса теперь можно увидеть заранее? Что происходит в спорном случае?

Люди

Какую функцию забрала система? За кем осталось решение и как поменялась работа команды?

Удобство

Какие шаги, окна или переходы исчезли? Можно ли показать это одним сценарием?

Выберите результат, который важен клиенту и подтверждается. Замер подписываем периодом и источником, расчёт — исходными данными и допущениями, наблюдение — конкретным изменением. Если замера нет, описываем работу до и после.

В «Бухгалтерии аренды» доказательство можно собрать из одной цепочки. Бухгалтер отмечает строку, в 1С появляется счёт, по неоплаченному счёту уходит первое напоминание. Так видно, где исчезает ручная работа. Посмотреть исходный кейс ↗

Образец от задания до публикации

ЯМЦК. Как рассказать про один выезд

Берём действующий кейс аренды спецтехники. Ниже — редакторский пример, который разворачивает один из его сценариев на всю страницу.

  1. Собрать исходники

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

  2. Выбрать главный результат

    Директор видит долг до выезда и принимает решение с телефона. Это одна понятная перемена, которую можно подтвердить действиями в системе. Остальные результаты раскрываем ниже.

  3. Связать обложку с туром

    В каталоге оставляем мотив выезда техники. На первом экране связываем выезд с решением директора. Для короткой демонстрации записываем на тестовых данных три кадра: заявка на паузе, карточка долга, решение в MAX. Существующий тур рядом показывает, из каких разделов состоит система. Вернуться к обложке ЯМЦК ↑

Пример первого экрана · аренда спецтехники

Директор видит долг до выезда техники

Было
Долги проверяли отдельно от заявок.
Сделали
Заявка с большим долгом ждёт согласования, директор получает сумму и варианты решения в MAX.
Итог
Решение о выезде принимают с учётом долга, прямо с телефона.
Проверить свою задачу на макете →
ЯМЦК · действующий тур по системе
Открыть полный кейс ↗

  1. Разложить подтверждения

    Деньги
    В кейсе заявлено от 150 000 ₽ в месяц от прозрачного учёта. Для первого экрана с этой цифрой нужна раскладка расчёта.
    Время
    Счета и акты формируются из заявки. Это можно показать на экране без оценки сэкономленных часов.
    Нервы
    Долг виден до назначения выезда. Уведомление помогает разобрать спорную заявку.
    Люди
    Система сверяет оплаты с 1С, решение о спорной заявке остаётся за директором.
    Удобство
    Для решения достаточно телефона. Показываем, где оно принимается в MAX.

    Бюджет похожего проекта выносим отдельно от эффекта клиента.

  2. Передать в публикацию

    В HTML оставляем заголовок, цепочку действий и результат. BreadcrumbList повторяет «Главная / Кейсы / ЯМЦК», Article содержит заголовок, дату и автора текста, VideoObject описывает опубликованный тур. Автор статьи и участники разработки подписаны отдельно. Когда появится новая запись, добавляем разметку по её фактическим данным. Открыть пример JSON-LD ↓

Что сверить в HTML и микроразметке ЯМЦК
Заголовок и автор
В опубликованном кейсе заголовок «Кейс ЯМЦК», автор текста Павел Богер (Шор), дата 20 октября 2026 г. Сверяем с Article.headline, author и datePublished. После смены главного заголовка обновляем и разметку.
Сценарий
В HTML словами объясняем, что происходит с заявкой при большом долге и где директор её подтверждает. Тот же смысл должен читаться без звука и вне плеера. Главный результат кратко отражаем в описании статьи.
Демонстрация
У действующего тура своё название, обложка и адрес файла. В VideoObject длительность указана как PT1M3S. Для новой записи проверяем длительность, дату загрузки, обложку и адрес по самому ролику.
Навигация
Сопоставляем видимые крошки с BreadcrumbList. Ссылка из кейса ведёт в «Системы управления», ссылки на участников — в их профили.

05 / Единый подход

Страницы сайта

Услуга и направление

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

Отрасль и отдел

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

Команда и профиль

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

Блог и процесс

Один вопрос или следующий шаг на экран. Для практической темы выбираем живую сцену. Авторский коллаж подходит, когда говорим о принципах и подходе студии.

Как перенести принцип на другой тип страницы

Три коротких образца

Услуга · системы управления

Видно, где застряла заявка

Показываем очередь заявок глазами диспетчера. Под экраном объясняем, как назначаются исполнитель и статус, и даём ссылку на ЯМЦК. Следующий шаг — проверить на макете один тип заявки клиента.

Действующая страница услуги ↗

Статья · почему CRM не приживается

Куда попадают заявки из переписки

Сначала отвечаем на вопрос. Если менеджеру быстрее вести заказ в переписке, часть сделок исчезает из общей картины. На примере показываем, как найти этот обходной путь и что посмотреть до покупки системы.

Действующая статья ↗

Профиль · Лиза Чернышова

Системы учёта и автоматизация

Рядом с портретом называем специализацию, затем показываем подтверждённые работы. Здесь это ЯМЦК и «Бухгалтерия аренды». Вклад описываем по данным конкретного проекта, ссылки ведут на сами кейсы.

Действующий профиль ↗

Обязательно. Читатель понимает, чью задачу решаем, видит пример и знает, что открыть дальше. На выбор автора. Размер фото, расположение блоков и степень детализации, если смысл считывается на телефоне.

Кадр из фильма студии «Лютик» Студия на выпуске курса ТРИЗ
Лютик · настоящие кадрыДумаем вместе

Кадр из фильма и фото с выпуска ТРИЗ. Пример композиции для команды: рабочая история, живые фотографии и немного фирменной геометрии.

07 / Передача в работу

Материалы и приёмка

Материалы

Перед сдачей страницы

  1. Сопоставить задачу страницы с семантикой. С первого экрана должно быть понятно, какая операция изменится и что клиент может проверить.
  2. Проверить, что человек и его действие понятны с первого взгляда. Сверить сцену с кейсом, а пропорции и опору предметов — с реальностью.
  3. В кейсе выделить один подтверждённый эффект. Сверить обложку, заголовок и демонстрацию с этим эффектом.
  4. Проверить крошки, ссылки и медиа на телефоне, а также совпадение JSON-LD с видимыми фактами.