Webfly. От задачи к системе.
Как связать продажи, команду, торговлю и клиентский сервис в одном сайте — с предметной графикой и живыми маршрутами вместо витрины несвязанных услуг.
Мы собрали для Webfly сайт, который начинает разговор не с перечня технологий, а с задачи бизнеса. За крупной сценой с настоящей командой — пять понятных входов: продажи, HR, онлайн-торговля, клиентский сервис и клиники. Передвиньте разделитель, чтобы сравнить с исходным сайтом. Кнопка «После» целиком открывает живой макет — в нём можно попробовать выбор задачи.
Это самостоятельная портфолио-концепция Peacedata, не заказ Webfly и не заявление о партнёрстве или результатах компании. Полную принятую версию можно открыть отдельно: у неё свои страницы, навигация и подробные разборы.
Не четыре отдела. Одна бизнес-задача.
На исходном сайте Webfly рядом живут Битрикс24, веб-разработка, маркетинг и медицинское направление. Внутри — магазины и B2B-кабинеты, интеграции с учётом, обратная связь, обучение команды. Для посетителя это часто не разные услуги, а части одной ситуации.
Оптовику нужен не просто сайт: ему нужны личные цены, документы и обмен с 1С. Руководителю клиники — связь обращений, работы администраторов и аналитики. Поэтому структуру начали с ответственности человека, а не с внутренней структуры подрядчика.
Задача ведёт дальше
Мы сохранили глубину: составы услуг, шесть приложений с честными статусами, шесть проектов, статьи, публикации и архив мероприятий. Но связали их переходами — от ситуации к решению, от решения к похожей работе, от неё к следующему действию.
Поиск и фильтры помогают сравнивать каталог. Архивный эквайринг для CMS не выдаётся за актуальное приложение для CRM, а тестирование базы знаний не превращается в выдуманный запуск.
- Задача
Кто отвечает: продажи, команда, торговля, сервис или клиника.
- Состав решения
Сайт, CRM, учёт и коммуникации связаны в один процесс.
- Похожая работа
Конкретный кейс и настоящее доказательство внутри.
- Следующий шаг
Контекст задачи переходит в краткий локальный бриф.
От задачи к системе
Выберите, за что отвечаете в бизнесе. Свяжем задачу с инструментами и покажем похожую работу.
Руководителям продаж
Заявки из разных каналов, понятные стадии сделки, задачи менеджеров и отчёты руководителя. Внедряем Битрикс24 с нуля или развиваем уже работающую CRM.
- Аудит процессов и действующей CRM
- Воронки, автоматизация и контроль задач
- Интеграция сайта, телефонии и учёта
- Обучение команды и сопровождение
HR и руководителям команд
Корпоративный портал объединяет сотрудников, документы и знания. Настраиваем найм, согласования, внутренние заявки, учёт времени и инструменты обучения.
- Найм и адаптация сотрудников
- База знаний и внутренние коммуникации
- Права доступа, задачи и бизнес-процессы
- Практическое обучение администраторов
Рознице и B2B-компаниям
Помогаем выйти из ограничений шаблона или ручной обработки заказов. Создаём магазин для розницы и отдельный кабинет для оптовиков с ценами, документами и интеграциями.
- Каталог, поиск, корзина и личный кабинет
- Индивидуальные цены и несколько юрлиц в B2B
- Обмен остатками и заказами с 1С
- Оплата, доставка и программа лояльности
Командам клиентского сервиса
Помогаем видеть историю обращений и возвращать клиентов. Объединяем каналы связи, настраиваем работу call-центра, обратную связь и действия после оценки клиента.
- Обращения в режиме одного окна
- Сценарии повторных продаж и коммуникаций
- Опросы NPS после нужной стадии сделки
- Задачи на разбор негативной обратной связи
Клиникам и стоматологиям
Связываем привлечение пациентов с работой администраторов и аналитикой. CRM дополняет медицинскую систему, а руководство видит путь от обращения до лечения.
- Сайт, продвижение и онлайн-репутация
- Интеграции CRM с МИС и телефонией
- Напоминания, call-центр и обратная связь
- BI-отчёты по воронке и источникам обращений
В этом фрагменте выбор меняет не только заголовок. Меняются состав работ, связанный проект и продукт. Каждый живой фрагмент работает внутри себя: выбор не прокручивает статью, а навигация показана как часть макета. По отдельной ссылке на полную версию можно пройти направление до собственной страницы и локального брифа без сбора персональных данных и имитации отправки.
У референса взяли композицию. Не чужую компанию.
Основной визуальный ориентир — Obra — Logistics & Transport Website. В финальных титрах проекта указан WebGeniusLab; публичная карточка обозначает нескольких авторов. Мы опираемся на этот студийный кредит, не приписывая работу непроверенному отдельному дизайнеру.
Ориентир · Obra, WebGeniusLab Фрагмент сохранённого проекта: рамка сцены, отдельный отсек логотипа, крупный спокойный гротеск и фактовое действие рядом с изображением. Авторская работа по ссылке выше.
Из логистической сцены — в цифровой интегратор
Вместо контейнера и жёлтого поля — настоящая команда Webfly, чернила и кобальт. Вместо логистических направлений — реальные бизнес-процессы. Сохранили выразительность крупной сцены и регулярного шрифта, но не переносили чужие тексты, логотипы или отраслевые образы.
В живом первом экране выше это можно проверить: шапка остаётся компактной, карточка «с 2011» собирает факты о компании, а выбор задачи сохраняет своё состояние внутри сцены. Подробный состав решения можно переключать в отдельном фрагменте выше.
Помогаем
бизнесу расти
Автоматизируем отделы продаж и HR, оцифровываем клиентский сервис. Создаём цифровые продукты: B2B-порталы, кабинеты, сайты.
и развиваем цифровые продуктыПознакомиться с Webfly ↗
Адаптация · Webfly
Живой узкий разворот той же сцены: свои лица, свои задачи, тот же прямой отсек логотипа. Меню раскрывается, выбор переключается — без выхода из фрагмента.
Дополнительно изучали Atlas by WorkOS — связь сценария и предметного образа; Produx Design — вес проектного изображения; The Content Architecture — разделение чернил и бумаги. Это отдельные принципы, не заимствованные иллюстрации. Intaro, VediTa и Work & Co служили UX-компараторами в исследовании, не заменяли основной визуальный ориентир.
Кириллица держит характер.
Мы не переносили из референса жёлтую идентичность. Белые и бумажные поверхности оставили воздух для длинных русских названий, чернила собрали крупные сцены, а синий получил разные роли: фирменный акцент и более спокойный материал действия.
#F6F5F0#10151C#234BE8#142B4D#E1E8F1Golos · 400 / 700
От задачи
к системе
Кириллица, цифры, длинное название приложения и короткое действие — один голос, разные роли.
Golos уже принадлежал визуальному языку исходного Webfly. В заголовках он работает крупно и без лишней тяжести; внутри управления — спокойным обычным начертанием. Полужирный остаётся для смыслового акцента, а не для всех ссылок сразу. Подчёркивания и декоративные тонкие разделители не заменяют иерархию: её делают масштаб, материал, группировка и понятное действие.
Образ объясняет тему. Скриншот доказывает работу.
У проектов очень разные предметы: цветы, кофе, клиника, кухня, данные, обучение. Сводить всё к одинаковым уменьшенным скриншотам значило бы потерять эту разницу. Мы создали шесть оригинальных AI-иллюстраций как одну серию предметных натюрмортов: бумага, сталь, оптическое стекло, кобальтовые детали.
Букет связан с заказом и клиентским путём, кофейный пакет — с оптовым самообслуживанием, клош и лента — с кухней и доставкой. Это редакционные образы темы, не нарисованные интерфейсы клиентов и не доказательства внедрения. Внутри страниц кейсов остаются настоящие опубликованные экраны с отдельной ролью.
Серия получена через нативную генерацию изображений Codex; сохранены исходники и происхождение, выбранные изображения проверены перед локальной WebP-подготовкой. Модель не перерисовывала официальные логотипы, клиентские экраны или людей. Публичный рассказ показывает результат и принцип отбора, не приватные промпты и технические журналы.
Проекты в работе бизнеса
Не отдельные экраны, а системы для покупателей, сотрудников и руководителей.
Все кейсы«Цветов.ру»
Магазин для цветочной сети
Переход от ограничений шаблона к индивидуальному магазину, личному кабинету и интеграциям сети.
«ДентТайм»
BI-аналитика для клиники
Собрали источники данных и превратили отдельные отчёты в понятные дашборды для руководства.
«Лоботрясы»
Самообслуживание для оптовиков
Юрлица, адреса, кофейные лоты, программа лояльности и счета — в одном B2B-кабинете.
«Баранкин»
Сайт, кухня и CRM вместе
Связали сайт заказа еды с R-Keeper, программой лояльности и Битрикс24.
«ДентТайм»
Достоверные данные вместо таблиц
Отдельный кейс о проверке исходных данных, учёте пациентов и показателях администраторов.
FishTech Digital
Внутренние эксперты по Битрикс24
Практическое обучение администраторов: от прав доступа до согласований и смарт-процессов.
Продукт — не просто иконка на карточке.
Для собственных приложений нужен другой тип изображения: не сюжет кейса, а объяснение функции. У NPS — опрос, оценка и действие в CRM; у оплаты — счёт и платёж; у регионального SEO — связанные страницы. Предметные SVG-сцены и узлы показывают эти отношения, не изображая выдуманный экран приложения.
Наши приложения
Собственные решения для Битрикс24 и CMS 1С-Битрикс. Связываем готовые инструменты с вашей задачей.
Подобрать приложение
NPS + отзывыБитрикс24- Опрос
- Оценка
- Задача в CRM
NPS + отзывы
Обратная связь после сделки: опросы, оценки и работа с причинами недовольства в CRM.
- Запуск роботом CRM или бизнес-процессом
- Свои тексты, цвета и логотипы в опросах
Битрикс24- Счёт в CRM
- Эквайринг
- Оплата заказа
Эквайринг Сбербанк для CRM
Оплата счетов и заказов из Битрикс24.CRM и Битрикс24.Магазина.
- Счета из Битрикс24.CRM
- Заказы из Битрикс24.Магазина
CMS 1С-Битрикс- Город
- Поддомен
- Контент
SEO: поддомены и метатеги
Региональные поддомены, свои контакты, метатеги и SEO-тексты из одной системы управления.
- Региональные данные для поддоменов
- Метатеги title, description, robots
Битрикс24- Обращение
- CRM + МИС
- Аналитика
Готовая CRM для медицины
Работа с пациентами, call-центр и аналитика в связи с медицинской информационной системой.
- Интеграция с МИС и каналами связи
- Работа call-центра и администраторов
Битрикс24- Инструкция
- Практика
- Команда
База знаний для клиник
Инструкции по Битрикс24 для руководителей, администраторов и команд стоматологий.
- Блоки для руководителя и администратора
- Пошаговые инструкции по CRM
Участие в тестировании — по согласованию с командой.
Подробнее о решенииСхемы соединяются по настоящим центрам портов, а не случайным отступам. При наведении материал немного поднимается, внутренние значки коротко подтверждают последовательность. Это обратная связь интерфейса, не «живые данные», бесконечный пульс или видимость выполняющегося бизнес-процесса. При уменьшении движения композиция остаётся стабильной.
Одна серия — разные поводы открыть материал.
Та же материальная логика продолжается в трёх обложках видео и шести обложках публикаций. У каждого сюжета свой предмет: аналитика, обращения, возврат клиента, различие B2B и B2C, координация, знания, портал, дорожная карта. Мы не заменяли настоящие видео и статьи новыми историями — дали темам узнаваемые входы.
Редакционные обложки не притворяются оригинальными обложками издателя или кадрами с реальными ведущими. В полной версии названия и ссылки ведут к исходным материалам; внутри статьи они остаются частью макета. Доступность внешних страниц Т-Банка и МТС не гарантируется: при проверке источников были ограничения доступа, поэтому адреса сохранили, а не подменили похожими.
Финиш — это ещё и точность управления.
Один аккуратный первый экран не спасает неудобную кнопку. На финальных проходах мы работали с вещами, которые заметны именно в использовании: центрировали целиком значок с текстом, оставляли место для маркера выбора, делали услугу одной ссылкой вместе с её полями и изображением. Маленький выбор в hero получил собственную, более компактную композицию — не копию больших карточек.
До финальной правки · наш V6 Проверка текста по line-height ещё не означает оптического равновесия. В текущем живом селекторе выше вся группа центрируется, а короткие подписи не растягиваются фиксированными пустыми строками.
Шапка стала общей для всех 32 страниц: один прямой отсек логотипа, одинаковая геометрия и спокойный прямоугольный материал текущего пункта. Меню «Компания» раскрывается из своего триггера. Между главной и подробным материалом не приходится заново искать навигацию.
До разделения глав · наш V6 Формально две колонки уже были. Но изображение события могло читаться продолжением публикации: разные темы разделяла только дистанция.
Материал и порядок вместо разделителя
У каждой главы теперь своя поверхность и один порядок: заголовок, объяснение, связанное изображение, действие. Важно не просто «сделать фон», а показать, кому принадлежит каждое изображение. На телефоне эта связь сохраняется при вертикальном чтении.
Мероприятия остаются архивом с настоящим периодом, не превращаются в несуществующую будущую программу. Обложка статьи и её заголовок открывают саму исходную публикацию, а не дополнительный экран с пересказом уже видимого текста.
Мы в СМИ
Публикации об e-commerce, управлении, CRM и клиентском сервисе.
(в новой вкладке)Почему ecom-проектам нельзя объединять B2B- и B2C-клиентов на одной площадке ↗ (в новой вкладке)
Чем путь оптового клиента отличается от розничного и какие приёмы e-commerce полезны обеим моделям.
Мероприятия
Программы для руководителей бизнеса и клиник: продажи, HR, сервис, аналитика и маркетинг.
Инновационные подходы к управлению клиникой ↗
CRM и МИС, сайт, репутация, ИИ, аналитика и работа администраторов.
Не только первый экран.
В принятой версии работают 32 локальные страницы: от первого выбора до состава решения, конкретного проекта, приложения и контекстного брифа. Проверяли не только контраст на бумаге: переходы между маршрутами, целые кликабельные поверхности, настоящие состояния указателя и клавиатуры, длинные подписи, увеличенный текст и режим без движения.
Открыть сайт Webfly ↗