Кейсы
2 поста
2 поста
5 постов
Когда у бренда есть постоянные покупатели, рано или поздно встаёт вопрос: как сделать так, чтобы интернет-магазин их узнавал и поощрял автоматически — без ручных промокодов, без «напиши менеджеру», без табличек в Excel. Для бренда одежды «Сколько? Можно»skolko-mozhno. мы собрали такую систему: четыре уровня клиента с автоматическим повышением, бонусные баллы, реферальная программа «приведи друга» и оплата подарочными сертификатами — всё работает в одной связке на сайте.
В статье рассказываем, что и зачем сделали, и показываем скриншотами, как это видит покупатель и менеджер.
У бренда уже был сложившийся круг постоянных покупателей и понятные правила лояльности на бумаге:
новички получают 3% скидки и 3 балла за каждые 100 ₽;
при выкупе на 50 000 ₽ клиент переходит во второй уровень — 5% скидки и 5 баллов;
на 150 000 ₽ — третий уровень, 7% и 7 баллов;
на 300 000 ₽ — VIP, 10%, 10 баллов и бесплатная доставка независимо от региона.
К этому добавлялись регулярные просьбы клиентов: «дайте бонус другу, я
готов рекомендовать», «можно ли продать подарочный сертификат и чтобы
его потом можно было реально потратить на сайте?».
Беда в том, что на сайте этого не было ничего. Все скидки приходилось вручную считать менеджеру, сертификаты продавали бумажными карточками с кодами, реферальной программы не существовало. Постоянный покупатель и случайный пользователь видели одну и ту же витрину, с одними и теми же ценами.
Поэтому «Сколько? Можно» пришли к нам — попросили собрать всё это в работающую механику прямо в интернет-магазине.
Велосипед не изобретали. За основу взяли проверенный модуль для «1С-Битрикс» — «Система бонусов. Программы лояльности» (acrit.bonus),
предназначенный для реализации бонусной системы с поддержкой групп
пользователей, бонусных счетов и скидок в корзине. Это сэкономило
клиенту время и деньги.
Но «из коробки» этот модуль закрывал не все потребности. Поэтому мы достроили вокруг него недостающие шестерёнки:
автоматическое повышение уровня клиента при достижении заданной суммы выкупа;
личный кабинет с прогресс-шкалой, историей баллов и реферальным разделом;
собственный механизм оплаты подарочным сертификатом — отдельно от бонусов, чтобы баланс баллов и баланс сертификата не смешивались.
Почему сертификаты вынесли отдельно — об этом позже. Это была принципиальная просьба клиента, и она оказалась оправданной.
В системе зарегистрированы четыре уровня:
«Выпусти стиль» (новичок);
«Нравится — надевай»;
«Стиль без запретов»;
«Всё можно» (VIP).
При регистрации каждый клиент сразу попадает на первый уровень. Дальше — двигается по шкале сам, без участия менеджера: магазин складывает суммы всех его выполненных заказов и, как только нужная сумма набрана, переводит клиента на следующий уровень. Тогда же меняется и его скидка, и ставка начисления баллов.
В личном кабинете клиент видит свою текущую ступень и прогресс-шкалу до следующей.
Покупатель не должен высчитывать свою цену в голове. Скидка применяется на сайте автоматически, как только клиент авторизуется. Старая цена зачёркнута, новая — рядом. В карточке товара дополнительно показано, сколько баллов клиент получит за этот заказ по своей текущей ставке.
То же самое — в списке товаров, в корзине и в форме оформления заказа.
В корзине клиент видит итог уже с учётом скидки своего уровня. На странице оформления заказа появляются два специальных блока: «Бонусный счёт» и «Сертификат».
В блоке «Бонусный счёт» клиент видит, сколько баллов у него есть, и может списать их на оплату — частично или полностью (1 балл = 1 ₽). Рядом, в правом столбце, ему сразу подсказано, сколько баллов начислится за этот заказ.
Под бонусным блоком — блок «Сертификат»: туда вводится код подарочной карты. Подробнее об этом — ниже.
Мы добавили в личный кабинет отдельный раздел /personal/bonus/. В нём всё, что касается лояльности, собрано в одном месте:
текущий уровень и шкала прогресса;
доступный баланс баллов;
история начислений и списаний (когда и за что);
реферальный кабинет (ниже).
Клиенту не нужно писать менеджеру вопросы «сколько у меня баллов» и «когда мне начислят за прошлый заказ» — он всё видит сам.
В кабинете «Бонусный счёт» у каждого клиента есть собственная реферальная ссылка вида ?ref=33 и кнопка скопировать. Клиент отправляет ссылку другу — друг проходит по ней и регистрируется. С этого момента магазин помнит, кто кого привёл.
Срабатывает это так:
другу при регистрации начисляются 500 ₽ бонусов за регистрацию плюс 500 ₽ за то, что он пришёл по приглашению — итого 1000 ₽ на старте;
тому, кто пригласил, начисляется 1000 ₽ после того, как друг оформит и выполнит свой первый заказ.
Менеджер в этой схеме не участвует — ни в подсчёте, ни в отслеживании «кто кого привёл». Всё делает интернет-магазин.
Она регулируется двумя правилами: бесплатно для всех заказов от 30 000 ₽ и бесплатно для VIP-уровня независимо от суммы и региона. Правила не противоречат друг другу — система сама подбирает, какое из них применять для клиента на конкретном заказе.
А вот здесь — самый интересный кусок и причина, по которой пришлось докручивать систему собственным механизмом.
Сначала мы попробовали вариант «через бонусы»: сертификат продаётся как товар, а после оплаты его номинал просто зачисляется покупателю на бонусный счёт. Так делают многие. Но у бренда было принципиальное требование — деньги с сертификата НЕ должны смешиваться с накопленными баллами. Чтобы человек, у которого 1 000 ₽ собственных бонусов плюс сертификат на 5 000 ₽, видел не «6 000 ₽ на одном счёте», а два разных источника денег с разной логикой жизни.
В стандартном модуле такое отделение сделать невозможно — там один общий бонусный счёт. Поэтому мы сделали для сертификатов отдельный механизм.
Как это видит покупатель на оформлении заказа:
вводит код с сертификата → нажимает «Проверить»;
сайт показывает остаток и максимум, который можно списать (но не больше суммы корзины);
вводит сумму, которую хочет списать (по умолчанию — весь остаток);
нажимает «Применить» → сайт пересчитывает итог;
оформляет заказ и доплачивает разницу обычным способом.
Если сертификат покрывает корзину полностью — доплачивать ничего не нужно, заказ сразу проходит как оплаченный.
В этом же блоке аккуратно обрабатываются нештатные ситуации: неправильный код, попытка списать больше, чем на сертификате, и отмена применения до оформления.
После применения покупатель в правом сайдбаре видит итог: сумма заказа,
сколько списано бонусов, сколько списано по сертификату, сумма доплаты — всё прозрачно.
Бонусные баллы и сертификат при этом можно использовать в одном заказе одновременно. Например, у клиента 1 500 ₽ на бонусном счёте, и подарили карту на 5 000 ₽ — в форме оформления он сначала вводит код сертификата на 5 000 ₽, потом в соседнем блоке списывает свои 1 500 ₽ баллами, и итог к доплате уменьшается сразу на обе суммы. Магазин это аккуратно посчитает и сложит в один заказ.
И всё это работает в том числе с мобильного: блок аккуратно ужимается, поля и кнопки крупные, все удобно.
В админке магазина в карточке заказа теперь появляется не одна платёжная
строка, а две: «Оплата на сайте» — на сумму к доплате, и «Подарочная карта» — на сумму, списанную с сертификата. В комментарии к платежу сертификата виден его код и сумма списания. Никаких недоразумений: всё видно сразу.
Бонусы при этом — отдельный сценарий: они уменьшают платёж «Оплата на сайте», что и логично, потому что для бухгалтерии это деньги клиента, а не подарочные.
В одном заказе могут одновременно встретиться: скидка по уровню, списание бонусов и списание сертификата. Чтобы они не перетягивали одеяло друг у друга, мы выстроили чёткую очередь:
Сначала магазин применяет скидку клиента — она определяется его текущим уровнем и считается до всего остального.
Дальше срабатывает обработчик бонусов: если клиент списал баллы, они уменьшают платёж «Оплата на сайте».
Последним работает обработчик сертификата:
он уменьшает баланс сертификата, создаёт в заказе вторую платёжную
строку «Подарочная карта» и уменьшает основной платёж на ту же сумму.
В итоге у клиента остаётся одна понятная сумма «к доплате», у менеджера — заказ с прозрачной структурой платежей, у магазина — корректная отчётность и корректная выгрузка в «1С» (она забирает заказ как обычно, никаких допработ со стороны 1С-программиста не потребовалось).
Учёт сертификатов хранится в отдельном справочнике в админке: код, номинал, текущий остаток, активность. Рядом — отдельная история всех операций: какой клиент, какой заказ, какая сумма списана или возвращена. Когда на сертификате остаётся ноль — магазин сам помечает его как неактивный, чтобы пустые коды не висели мёртвым грузом.
В момент, когда менеджер пробивает продажу сертификата в «1С», его код моментально прилетает на сайт в этот же справочник — никакой ручной заводки не нужно. Покупатель сразу может ввести этот код на сайте и потратить.
Это, кстати, ещё одна причина, почему сертификат сделан отдельным механизмом, а не «пополнением бонусного счёта»: подарочный сертификат часто покупают другу в подарок, а активирует его уже сам друг — со своего аккаунта на сайте. Деньги попадают именно туда, куда задумано, а не на счёт того, кто покупал.
Поверх этой системы мы добавили ещё один автоматический сценарий, который оживляет клиентскую базу — поздравление с днём рождения и скидку к нему.
Клиент один раз указывает дату рождения — в личном кабинете или прямо при оформлении заказа. Дата подтягивается в обе стороны: что заполнил в
одном месте, то подставится в другом. После первого сохранения сменить её может только администратор магазина — это защита от схемы «поставил день в день и пользуюсь скидкой».
Раз в сутки магазин проверяет даты рождения всех клиентов. Если у кого-то день рождения попадает в окно ±3 дня — система автоматически:
переводит клиента во временную группу «Скидка на День рождения»;
даёт ему скидку 10% на товары, которые не участвуют в других акциях;
отправляет поздравительное письмо — один раз в год, по красивому шаблону;
когда окно закрывается — так же тихо возвращает клиента в обычную группу.
Для бренда это маркетинговый инструмент возврата клиентов: повод заглянуть на сайт именно в тот момент, когда человек открыт к покупке для себя. Письмо приходит к точному поводу, а не «просто так» — открываемость у таких писем заметно выше, чем у обычных рассылок.
Настроенная нами автоматическая бонусная система на сайте интернет-магазина «Сколько? Можно» обеспечивает следующее преимущества:
Постоянные покупатели узнаются магазином автоматически — без ручных промокодов и переписок с менеджером.
Шкала уровней работает сама: чем больше клиент выкупает, тем выгоднее ему покупать дальше — это видно прямо в каталоге.
Реферальная программа снимает с менеджера задачу по учёту «кто кого привёл» — магазин помнит сам.
Сертификаты перестали быть «бумажками на удачу»: клиент гарантированно может потратить номинал на сайте — частично или полностью, в один заказ или за несколько.
Бонусные баллы и подарочные деньги живут отдельно — это сохраняет правильную бухгалтерию и не позволяет смешивать разные сценарии лояльности.
Скидка в день рождения работает фоном — каждый клиент получает поздравление в свой день, без участия маркетолога, и это прямой повод вернуть его за покупкой именно в тот момент, когда у него настроение что-то себе купить.
И всё это сделано без переписывания шаблона карточки товара, корзины и чекаута: стандартные компоненты «Битрикса» продолжают работать как работали, мы только аккуратно добавили в них новые блоки и обработчики.
Любому интернет-магазину с повторными покупками, где имеет смысл узнавать постоянных клиентов и поощрять их автоматически. В первую очередь это касается таких сфер, как:
одежда, обувь, аксессуары;
косметика и парфюмерия;
товары для дома, текстиль, посуда;
чай, кофе, сладости, специи;
спорттовары, нутрициология, БАДы;
товары для хобби — творчество, рукоделие, настольные игры.
Особенно нужна такая программа лояльности, если круг постоянных покупателей уже есть, но он никак не отмечен в магазине, или если вы продаёте подарочные сертификаты офлайн и хотите, чтобы клиенты могли гасить их на сайте без участия менеджера.
Мы сделали модуль, который связывает «1С-Битрикс» с системой учёта СБИС Retail в обе стороны. Главное достижение: он тянет из СБИС любые свойства товара — вес, фасовку, тип, происхождение — и они «живыми» оказываются в карточке на сайте, работают как фильтры и переключатели.
У нашего клиента — интернет-магазина чая chaichelovek.ru — офлайн-магазин живёт в СБИС Retail (Saby): там склад, кассы, ценники, характеристики каждого товара. Параллельно есть интернет-магазин на «1С-Битрикс» — и его надо как-то наполнять. Причем у каждого товара есть параметры, определяемые спецификой чайной сферы: тип чая, локация происхождения, формат упаковки, и главное — вес в граммах с возможностью купить любую фасовку от 25 граммов до целого прессованного блина.
Готовые интеграции СБИС ↔ «Битрикс» решают базовый сценарий: артикул, цена, остаток, картинка. Для витрины-ларька этого хватает. Но когда у товара есть собственные свойства, которые магазину важны для продаж — вес, фасовка, объём, сорт, состав, — готовое решение начинает скрипеть. Эти свойства либо не передаются вовсе, либо их приходится руками переносить и потом синхронизировать каждое изменение.
Разводить два каталога в двух системах — это не интеграция, это двойная работа. Что особенно заметно на ассортименте в сотни позиций.
Чтобы обеспечить двустороннюю связь между CMS «1С-Битрикс» и системой учёта Saby Retail (СБИС) с обменом необходимыми параметрами, мы сделали модуль «Интеграция со СБИС (Retail)» (wintra.sbisintegration). Каталог и остатки едут из СБИС на сайт по расписанию, заказы с сайта автоматически попадают в Saby Retail.
Главное, ради чего мы его и собирали: модуль тянет из СБИС любые свойства товара, какие нужно — вес, фасовку, тип, происхождение, характеристики упаковки — и они «живыми» оказываются в карточке товара на сайте. Работают как фильтры, как переключатели, как отображаемые поля.
СБИС → сайт. Модуль выгружает номенклатуру из Saby Retail по расписанию. В админке указываем, какое поле СБИС во что маппится на сайте: весовое свойство — в свойство «Фасовка» у элемента инфоблока, тип — в раздел каталога, характеристики — в отдельные свойства товара. Выгрузка идёт в YML, сайт подхватывает — получает актуальный каталог со всеми нужными полями.
Остатки — отдельным лёгким файлом, по своему расписанию (например, раз в десять минут). Это важно: полный каталог большой, гонять его часто нет смысла, а остатки должны быть свежими.
Сайт → СБИС. На событие оформления заказа модуль сам отправляет заказ в Saby Retail со всеми позициями, количествами и данными покупателя. Менеджер открывает свою обычную систему СБИС — заказ уже там.
Модуль «Интеграция со СБИС (Retail)» (wintra.sbisintegration) устанавливается через Маркетплейс «1С-Битрикс». Дальше в админке «Настройки → Настройки модулей → Интеграция СБИС» нужно:
Вбить ключи OAuth и выбрать магазин / точку продаж в СБИС.
Настроить маппинг: какое свойство СБИС соответствует какому свойству Битрикс-каталога.
Добавить расписания — отдельно для номенклатуры, отдельно для остатков.
Первая настройка занимает пару часов вместе с прогоном первой выгрузки. Дальше модуль работает тихо в фоне.
Вот живая карточка пуэра «Гу И Ваньгун»:
В блоке «Фасовка (гр)» — четыре варианта: 25 г за 129 ₽, 50 г за 257 ₽, 100 г за 1031 ₽, целый пресс 357 г за 1835 ₽. Рядом характеристики: «Локация — Юньнань», «Формат упаковки — Прессованный». Всё это не заводилось на сайте руками: модуль взял свойства из карточки товара в СБИС и разложил их туда, куда мы указали в настройках маппинга. Изменится цена в учётке или добавится новая фасовка — на сайте всё обновится само.
Модуль «Интеграция со СБИС (Retail)» (wintra.sbisintegration) от «Винтра» — нужный инструмент для тех, у кого офлайн-розница живёт в СБИС Retail, а параллельно есть (или планируется) интернет-магазин на «1С-Битрикс». Особенно — если ассортимент нестандартный: весовые товары, фасовки, наборы, если есть характеристики, которых нет в готовых коннекторах. Чайные магазины, специи и кофе, косметика на развес, хозтовары, стройматериалы — любая категория, где товар «живёт» свойствами.
Рассказываем, как разработали модуль для автоматической генерации картинок товаров под требования Wildberries, Ozon, «Яндекс.Маркет» и «Авито» прямо из административной панели «1С-Битрикс».
Весной 2026 года к нам обратились владельцы интернет-магазина шин «Шинснаб.рф». Задача была стандартная для крупного e-commerce: подготовить картинки 1000+ товаров для размещения на 4 маркетплейсах — Ozon, Wildberries, «Яндекс.Маркет» и «Авито».
Казалось бы, что сложного? Но дьявол кроется в деталях.
Каждый маркетплейс предъявляет собственные требования к размерам изображений:
Ozon: 700×933 пикселя;
Wildberries: 900×1200 пикселей;
Яндекс.Маркет: 1040×1440 пикселей;
Авито: 1280×960 пикселей.
Итого: 4000 картинок только для основного ассортимента. При ручной подготовке — 5–7 минут на товар с учётом обработки, наложения логотипа, добавления текстовой информации. Простая арифметика: 1000 товаров × 4 площадки × 6 минут = 400 часов работы.
Картинки должны выглядеть профессионально и узнаваемо на всех площадках. Это означает:
Единый брендовый фон.
Логотип в одном месте.
Консистентное расположение текста с характеристиками.
Качественное удаление фона у товара.
При ручной обработке поддерживать такую консистентность практически невозможно — человеческий фактор даёт о себе знать.
Каталог шин постоянно пополняется. Каждый новый товар означает необходимость создавать ещё 4 картинки вручную. При активном пополнении ассортимента это превращается в бесконечный процесс.
Мы разработали модуль «Послойный генератор изображений» — wintra.genimgmarketplace — решение для автоматической генерации картинок товаров прямо в административной панели «1С-Битрикс».
Принцип работы простой: создаёте один шаблон в визуальном редакторе, а модуль автоматически применяет его ко всем товарам и генерирует картинки нужных размеров для всех площадок.
Модуль работает по принципу послойной композиции. Доступно 7 типов слоёв:
Графические слои:
Фон — статическое изображение или фон с автоматическим удалением у товара.
Локальная картинка — загружаемое в админку изображение (логотипы, декоративные элементы).
Детальная картинка товара — основное фото из карточки товара.
Картинка из свойства товара — дополнительные изображения из характеристик.
Текстовые слои:
Статический текст — неизменяемые надписи (название магазина, слоганы).
Текст из свойства — динамические данные товара (название, размер, цена).
PHP-вычисляемый текст — сложная логика (например, «Скидка 15%» при определённых условиях).
Особенно полезная функция — условные слои. Можно настроить отображение элементов в зависимости от характеристик товара. Например:
Показывать стикер «ХИТ» только для топовых позиций.
Выделять товары со скидкой специальным фоном.
Добавлять сезонные элементы для зимних/летних шин.
Модуль написан на PHP для платформы «1С-Битрикс». Для рендеринга изображений используется библиотека GD2 — стандартное решение, которое есть на любом хостинге. Архитектура модуля состоит из 4 основных классов:
Template — управление шаблонами (создание, редактирование, удаление).
Layer — работа со слоями внутри шаблона.
Generator — послойный рендер финальных изображений.
Schedule — обработка фоновых заданий через cron.
Каждый шаблон редактируется в визуальном конструкторе слоёв — фон, логотип, текст, картинка товара. Изменения сразу видны в превью
Одна из самых трудозатратных операций при подготовке картинок — качественное удаление фона у товара. Модуль решает это автоматически:
Попиксельная обработка — анализ каждого пикселя на предмет принадлежности к фону.
Feather-сглаживание — создание плавных переходов по краям объекта.
Интеллектуальное определение границ — автоматический поиск контуров товара.
Результат не уступает ручной обработке в Photoshop, но выполняется за секунды.
Код модуля прошёл аудит безопасности:
Защита от XSS-атак через фильтрацию входящих данных.
Параметризованные SQL-запросы для предотвращения инъекций.
Валидация загружаемых файлов.
CSS и JavaScript вынесены в отдельные файлы для ускорения загрузки. Все текстовки интерфейса — через lang-файлы для возможной локализации.Исходный код размещён в:
/opt/stozer/projects/shinsnab/www/local/modules/wm.genimgmarketplace/
— стандартная структура модулей Битрикс.
До автоматизации на подготовку картинок 1000 товаров для 4 площадок требовалось 400 человеко-часов. После внедрения модуля:
Настройка шаблона: 2-3 часа.
Генерация всех картинок: 30-40 минут.
Итого: 95% экономии времени.
Все 4000 картинок получаются в едином стиле. При необходимости изменить дизайн (например, обновить логотип или поменять фон) достаточно отредактировать шаблон, и все картинки обновятся автоматически.
Добавление нового товара в каталог автоматически запускает генерацию картинок для всех площадок. Менеджер просто заполняет карточку товара — картинки создаются без его участия.
Брендовый фон, логотип, характеристики товара — всё на своих местах. Каждая картинка автоматически генерируется под нужный размер площадки
Модуль успешно прошёл модерацию и опубликован на Bitrix Marketplace как коммерческий продукт. Живые примеры работы можно посмотреть в карточках товаров «ШинСнаб.рф» на марктеплейсах — все картинки товаров созданы автоматически.
Модуль работает в фоновом режиме через систему заданий. Настроив cron на сервере, можно полностью забыть о ручной генерации:
Новый товар добавлен → картинки создаются автоматически.
Изменена цена → картинки обновляются с новой ценой.
Обновлён шаблон → все картинки пересоздаются с новым дизайном.
Система работает 24/7 без участия человека.
400 часов ручной работы × 1500 руб/час = 600 000 рублей экономии только на первичной подготовке картинок. При регулярном пополнении каталога экономия составляет десятки тысяч рублей ежемесячно.
При подключении к новому маркетплейсу не нужно заново готовить весь визуальный контент. Достаточно добавить новый размер в шаблон — и картинки для новой площадки готовы за полчаса.
Сезонные акции, редизайн, смена позиционирования — любые изменения визуального стиля внедряются за минуты вместо недель ручной работы.
Модуль интегрируется с любым интернет-магазином на 1С-Битрикс. Не требует изменения структуры базы данных или кастомизации стандартного каталога.Установка занимает 15-20 минут:
Загрузка модуля через маркетплейс.
Настройка первого шаблона.
Запуск генерации картинок.
Совместимость проверена с редакциями «Малый бизнес», «Стандарт» и «Профессионал».
Модуль «Послойный генератор изображений» (wintra.genimgmarketplace) — это практическое решение реальной бизнес-задачи. Вместо сотен часов рутинной работы получается автоматизированная система, которая работает быстрее человека и не допускает ошибок.
Владельцы необновленных сайтов на «1С-Битрикс» с решениями (в основном — снятыми с продажи, устаревших версий и т. п.) от «Аспро» и некоторых других разработчиков подвергаются риску заражения. За счет эксплуатации древних уязвимостей, которые давно устранены вендором, злоумышленник в лучшем случае нарушает работу сайта, в худшем — крадет информацию, переадресует пользователей на сторонние веб-ресурсы и выполняет другие нежелательные действия.
Причем попытки владельца откатить версию с помощью бэкапов хостера не спасают. Мы опишем наш опыт решения проблемы и изложим варианты восстановления сайта на устаревшем ПО «1С-Битрикс» с готовым решением «Аспро» без активной поддержки.
Ваш сайт создан на CMS «1С-Битрикс: Управление сайтом».
Ядро CMS и решения не обновлялись более 1,5 лет.
На сайте используется на решение от компании Аспро, Esolutions, Sotbit, Маяк и других. Проверьте тут, есть ли в списке ваше решение.
Сайт долго открывается или открываются не запрашиваемые страницы.
При попытке перейти на внутренние страницы сайта вы видите ошибку «Доступ запрещен».
Ваш хостер прислал письмо об обнаружении аномальной активности исходящего трафика или почтовых рассылок с угрозой приостановить функцию отправки почты, либо сообщил об уязвимостях с примерами зараженных файлов.
В файловой структуре присутствует множество непонятных файлов и папок, не относящихся к структуре вашего сайта.
Невозможно войти в админ-панель сайта.
Наблюдаются прочие аномалии в работе сайта.
В любом из этих случаев важно как можно быстрее начать действовать. Если пройдет слишком много времени без активной реакции, ситуация может усугубиться — ведь обычно стандартный shared-хостинг хранит архивы только за последние 30 дней. В этот период восстановление сайта можно провести значительно быстрее и дешевле.
Рассмотрим самый сложный пример из нашей практики. Вводные: Прошло более 30 дней с момента заражения. В админ-панель сайта не попасть, ни одна страница не открывается, да еще и пароль от админки никто не помнит. Единственная зацепка — доступ в панель управления хостингом.
Если вы помните пароль от админ-панели и заражение произошло не позднее 30 дней или у вас есть рабочий бэкап в «Списке резервных копий» (*ваш_домен*/bitrix/admin/dump_list.php), можно сразу восстановить сайт до последней рабочей версии до заражения. В таком случае пропустите пункты с 1-го по 4-й, описанные далее.
1. Для начала переходим в панель управления хостера. Нам необходимо восстановить работу админ-панели сайта, чтобы страница *ваш_домен*/bitrix/admin/ открывала форму авторизации, а не выдавала ошибку. Для этого идем в файловый менеджер и удаляем из папок bitrix и bitrix/admin/ файлы .htaccess. Не переживайте, что удалите лишнее, потом мы заново разместим все, что необходимо.
* В одном из последних восстановленных нами проектов вирус разместил более 5000 файлов .htaccess. Не пытайтесь вычистить их все руками — есть специальный инструмент, но об этом позже.
2. Теперь, когда можем открыть страницу авторизации, если мы не помним пароль от админ-панели, нам необходимо произвести сброс пароля и восстановить его. Обычно почтовая подсистема сайта уже не работает и стандартным механизмом сбросить пароль не выйдет. Но все же стоит попытаться. Если результата нет, то ищем в интернете способы восстановления пароля от админки CMS. Писать тут рабочий способ специально не будем, ибо это может стать еще одной уязвимостью. Кто понимает, тот сделает.
3. После входа в админ-панель сайта вы, скорее всего, обнаружите, что многие разделы не открываются. Причина — всё те же файлы .htaccess. Пока нам необходимо только попасть на страницу системы обновлений (*ваш_домен*/bitrix/admin/update_system.php).
Здесь жмем «Проверить обновления» (п. 1). Если видим, что лицензия и ключ (п.2) показываются, но период получения обновлений окончился — значит, всё в порядке. Если же видим ошибку и вместо ключа — что-то иное, то, скорее всего, неверен адрес сервера для получения обновлений. Внесите изменения на странице настроек главного модуля (*ваш_домен*/bitrix/admin/settings.php), как показано на скриншоте.
После этого вернитесь на страницу системы обновлений и перейдите по ссылке «Проверить ключ» (п. 3). Вы попадете на сайт «1С-Битрикс», где сможете оплатить продление лицензионного ключа. Либо обратитесь к своему разработчику, если его контакты еще у вас есть, он поможет приобрести продление для вас.
4. Перейдите в раздел «Настройки — Инструменты — Резервное копирование — Список резервных копий» (*ваш_домен*/bitrix/admin/dump_list.php) и проверьте, нет ли там свежего по дате архива. Обычно добропорядочные разработчики перед тем, как вносить масштабные изменения на сайте, делают бэкап.
5. Если есть сохраненная резервная копия сайта — просто восстановите сайт до последней рабочей версии до заражения.
6. Независимо от того, удалось ли вам восстановиться с бэкапа или нет, следующим шагом будет обновление ядра и решений, имеющих доступ к обновлениям до последней версии, через штатную систему. Если видите ошибку с переходом на PHP 8, игнорируйте ее, сначала нужно устранить уязвимость. Поэтому установите обновления, которые вам доступны без перехода на PHP 8.
7. Далее необходимо осуществить патчинг уязвимостей решений из списка «1С-Битрикс». В нем напротив каждого решения есть рекомендации. Практически каждый разработчик сделал простой патч. Просто закиньте нужный файл в корень сайта и выполните инструкции.
8. Пункт необходимый, если вы не смогли восстановиться из безопасной версии и работаете с зараженным сайтом. После того, как вы пропатчите все решения, вы устраните уязвимости для нового заражения вирусами, но они могут оставаться на сайте. У многих хостеров, как правило, в панели управления предусмотрен инструмент для бесплатной проверки файлов сайта на вирусы. Ее результатом в рассматриваемом случае обычно становится длинный список зараженностей. Игнорируйте всё, что связанно с .htaccess, а остальное удалите вручную.
9. Если на вашем сайте есть кнопка «Сайт под защитой», то можно сразу перейти к пунктам устранения угрозы с помощью системы проактивной защиты «1С-Битрикс».
Если кнопки нет, сначала нужно сделать п. 10.
С проактивной защитой «1С-Битрикс» работаем следующим образом:
Тут есть отличная функция «Настройки — Проактивная защита — Поиск троянов — Проверка .htaccess» (*ваш_домен*/bitrix/admin/xscan_htaccess.php). После проверки вы можете удалить все пораженные файлы и установить минимальный набор. Это самый простой и быстрый способ избавиться от зараженных файлов, сколько бы их ни было, не прибегая к удалению вручную.
Пройдите в раздел «Поиск троянов — Сканирование файлов» (*ваш_домен*/bitrix/admin/xscan_worker.php) и проведите сканирование. То, что вызывает подозрение, проверьте отдельно, указав путь вручную. А также можно написать в поддержку «1С-Битрикс» с просьбой проверить подозрительные файлы.
Далее, активируйте все варианты защиты: проактивный фильтр, веб-антивирус. Очень неплохо будет если вы подключите также двухэтапную авторизацию.
10. Осуществите переход на PHP 8. Тут начинается самое интересное. Скорее всего, вы столкнетесь с тем, что ваш сайт работает на PHP 7-й версии, поэтому необходимо будет перейти на PHP 8. У нас есть подробная статья об этом.
Если кратко, мы действуем по следующему сценарию:
Накатываем обновления, которые нам дает поставить система сразу.
Идем к хостеру меняем версию PHP на минимум 8.2. После этого, как правило, сайт перестанет работать, но админка будет функционировать, что даст нам возможность установить все последние обновления. Устанавливаем.
Переходим к обновлению решений, обновляем все, что можно. Если вы хорошо понимаете, что за компоненты установлены и для чего они нужны и видите, что в списке есть решения с оконченным демонстрационным режимом или неактивной поддержкой, которые точно не нужны в работе, лучше их удалить. Делайте это только если точно знаете, что это за решение и как оно взаимодействует с вашим сайтом.
После вам необходимо руками исправить все возникающие ошибки в публичной части и админ-панели сайта. Как правило ошибки возникают с PHP-функциями, подключением устаревших скриптов и так далее. В помощь вот такие шпаргалки: официальная и от хороших людей.
11. Перейдите по возможности на MySQL 8. Это выходит за рамки данной инструкции, поэтому оставим в виде рекомендации. Пункт в контексте рассматриваемой темы необязательный.
12. Перейдите в «Настройки — Модули» (*ваш_домен*/bitrix/admin/module_admin.php). Удалите все неиспользуемые модули. Важно: если не знаете, что за модуль и как он влияет на ваш сайт — не трогайте.
13. Аналогично пункту 12 делаем и тут: «Настройки — Настройки продукта — Список мастеров» (*ваш_домен*/bitrix/admin/wizard_list.php). Удалите обязательно демо интернет-магазин, демо корпоративный сайт и так далее. Если вы используете решение «Аспро», не удаляйте мастер «Аспро».
14. После всех пунктов выше сделайте следующее: перейдите в папку /upload/tmp/ и удалите в ней всё. Затем выполните повторное сканирование на вирусы с помощью хостерных утилит. Его результатом должна стать отметка, что вирусов не обнаружено. Далее, если у вас стоят ограничения на исходящий трафик, почтовые подсистемы и прочее, отправьте запрос хостеру, чтобы сняли ограничения с указанием на то, что все проблемы устранены и вирусов теперь нет.
15. В финале важно убедиться, что сайт работает как нужно. Это делается за два шага:
Пройдите в раздел «Настройки — Инструменты — Проверка системы» (*ваш_домен*/bitrix/admin/site_checker.php). Если обнаружатся ошибки — устраните их.
После тут: «Настройки — Настройки продукта — Автокеширование» (*ваш_домен/bitrix/admin/cache.php*), на вкладке «Очистка файлов кеша», удалите все.
Затем перейдите на сайт, откройте консоль (клавишей F12) и походите по сайту. Важно пройти по всем страницам, проверить весь функционал, работу форм, фильтров, слайдеров, получение писем из форм, работу сторонних интеграций.
Если всё в порядке — значит, ваш сайт спасен, и, даже если на нем останется старая версия «Аспро», он не будет уязвим для известных вирусов.
В дальнейшем важно не забывать обслуживать сайт, так как вредоносное ПО постоянно развивается и не исключено появление новых способов заражения. Регулярно проверяйте и устанавливайте обновления, следите за безопасностью паролей и не игнорируйте сообщения хостера.
В очередном проекте ключевым требованием заказчика стало исключение необходимости для администратора магазина управлять сайтом сразу в нескольких местах. В последнее время это правило очень актуально в электронной коммерции.
Главная страница https://rakisam.ru/
С появлением различных маркетплейсов, агрегаторов и прочих аналогичных сервисов владельцы бизнеса стали понимать, что у них не хватает ресурсов на информационную поддержку одновременно всех площадок. В ответ на запрос компаний на рынке стали появляться различные решения, позволяющие контролировать товары интернет-магазина в режиме одного окна, например, одновременно управлять товарами и на сайте, и на всех маркетплейсах. Одно из таких решений — система учета СБИС. Похожая ситуация наблюдается и в других нишах. Так, для гостиничного бизнеса создана платформа TravelLine, для застройщиков и девелоперов — Profitbase.
Нашему клиенту — федеральной сети магазинов «Царские Раки» — потребовалось централизованно управлять всем каталогом продукции. Причем не только ценами и остатками, как это обычно бывает, но и полным описанием товаров, изображениями, всеми маркетинговыми инструментами (разделами «Акции», «Скидки», «Новинки», метками «Хит продаж» и прочим).
Итак, на начало разработки интернет-магазина у нас были следующие слагаемые:
1. Система управления контентом «1С-Битрикс» в редакции «Бизнес» (1С-БУС).
2. Решение «Аспро: Максимум».
3. Система учета СБИС.
4. Система лояльности UDS.
5. CRM-система «Битрикс24».
6. Система сквозной аналитики Roistat.
7. Собственное мобильное приложение клиента для Android и iOS.
В ходе работы над проектом их предстояло встроить в цельную, синхронизированную систему. Далее мы подробно расскажем об основных моментах, на которые хотелось бы обратить особое внимание
С нее мы начали потому, что это сердце всей композиции и то самое единое окно управления для заказчика.
У системы СБИС есть несколько способов «подружиться» с сайтом на «1С-Битрикс: Управление сайтом»:
прямая интеграция с «Битрикс»;
интеграция через стандарты CommerceML;
обмен с помощью API.
Изучив все доступные варианты, выяснили:
1. Прямая интеграция с сайтом имеет следующие недостатки: выгружается все, что есть в каталоге, в том виде, как оно есть, и с той архитектурой, как есть. Чем-то похоже на интеграцию с «1С: Управление торговлей». Но в отличие от нее, СБИС не поддерживает сторонние изменения. На наш запрос в поддержку СБИС на тему «можно ли что-то в обмене подправить, дописать», получили ответ, что сделать могут что-либо с программой могут только сами сотрудники СБИС. Это первый минус. Теперь о втором. Что предусмотрена только выгрузка сразу всего, что есть и как есть — это полбеды, тут можно, конечно, все грамотно настроить внутри СБИС и актуализировать. Главной причина отказа от данного способа для нас стала невозможность управлять остатками отдельно по магазинам. СБИС выгружает остатки по магазинам (складам), затем суммирует их и вписывает результат в поле общего остатка. А это неприемлемо. Нам необходимо, чтобы в карточке товара на сайте была информация с остатками по магазинам, и пользователь мог видеть где товар есть, а где — нет.
2. CommerceML сразу отмели, ибо подключение на сайте происходит все в том же разделе «Интеграция с "1С: Предприятие"», и все минусы и ограничения первого способа актуальны и здесь.
3. Работа с API СБИС перспективна и дает очень большой простор для действий. Именно поэтому мы выбрали этот вариант.
Мы работали с API не с чистого листа, а использовали готовое решение от СБИС: «Выгрузить каталог в формате Яндекс.Маркета с помощью API». Формат YML нам понятен и наиболее подходит, плюс не нужно изобретать велосипед. Конечно же, не обошлось без приключений. Приведем лишь самые интересные из них.
Выгрузка осуществляется не из каталога СБИС, а из специального прайс-листа. С одной стороны, это удобно, потому что мы можем создать нужную структуру и добавить в прайс-лист только те позиции, которые хотим обменивать. Но при этом создается сложность для администратора — нужно поддерживать порядок сразу в двух местах: во внутреннем общем каталоге СБИС и в прайсе для сайта.
Поэтому нам пришлось дорабатывать выгрузку и создавать модернизированный файл YML. Причина — все те же остатки по складам. В формате YML вообще нет остатков: там есть только наличие товара и доступность к заказу available="true". Поэтому мы добавили в наш стандартный файл дополнительно «внешний код склада — остаток на складе». У нас три склада, итого к каждой записи мы получили по три дополнительных значения. Предварительно также создали склады на сайте и проставили в них внешний код СБИС. Таким образом, решение оказалось отличным способом управлять остатками по каждому складу в отдельности.
Выгрузка количества происходит в системе СБИС, из-за чего получаются «кг» вместо «килограмм», «шт» вместо «штук». Поэтому пришлось к уже имеющейся информации добавить единицы измерения, и на сайте перед импортом модифицировать значения для импорта на сайт под управление «1С-БУС».
Все инструкции по работе с изображениями прописаны и, на первый взгляд, никаких проблем не должно быть. Да и формат файла «Яндекс.Маркет» предусматривает картинки.
Но на момент создания нами сайта специалисты СБИС, как выяснилось, не знали, что, оказывается, выполнив все по их инструкции, мы никак не можем получить изображения. Они пообещали доработать систему, но нам ждать несколько месяцев было невозможно, и мы добавили внутренний архив на сайте с изображениями, представив имена файлов в формате {внешний код товара}.jpg. Из этого архива картинки при выгрузке каталога автоматически подтягиваются в карточку товара с таким же внешним кодом.
Тут совсем беда. СБИС использует какой-то свой синтаксис и разметку, поэтому в выгрузку попало множество непонятных тэгов. Так что стало понятно, что придется добавить в процесс импорта настройку обработки для удаления ненужных символов.
Решив все промежуточные задачи, мы написали программу на языке JSON, отправляющую периодический запрос (периодичность задали через cron раз в час) к БД СБИС и получающую ответ в виде нужного нам модернизированного файла в формате YML. Теперь у нас был обновляемый файл в нужном нам формате, и оставалось придумать, как его обрабатывать.
Обработку полученного от СБИС файла мы без раздумий доверили лучшему, на наш взгляд, приложению: «Импорт из XML/YML» от команды Esolutions. Мы уже много раз работали с их решениями. Их приложение мы применяли для обработки при импорте из XLS, XML и вот теперь — YML.
Что мы смогли реализовать с помощью данного способа:
разбор файла и распределение информации из него в нужные места нашего каталога на сайте;
модификацию значений, полученных от СБИС, и преобразование их под требования 1С-Битрикс (вырезание из кода описания спецсимволов, замена «кг» на «килограммы», преобразование имен картинок в путь до картинки на сервере и тому подобное).
Это стандартные действия, но вот дальше началась магия.
У нас выгружаются остатки отдельно по складам, а в карточке товара на странице списка товаров выводится общая метка «В наличии». Поэтому нам пришлось снова суммировать остатки по всем складам и ставить «В наличии», если значение больше заданного числа и наоборот.
Потребовалась также настройка, благодаря которой добавляются только те позиции, у которых стоит специальная отметка — пользовательское поле СБИС «Выгружать на сайт».
В СБИС нет такого понятия как старая и новая цена. В системе есть только одно поле для ввода цены, и менять его нельзя. Ведь магазин работает и офлайн, по этим ценам кассир пробивает товар. Но на нашем сайте есть скидки, и было бы неплохо показать цену с учетом скидки, например, в 20%. Плюс «Битрикс» имеет очень сильный и гибкий функционал работы с товарами в корзине, включающий применением специальных вычислений на сумму заказа, вес, количество и так далее, а также применение спеццен.
Поэтому мы добавили в СБИС внутреннее системное поле «Старая цена» и доработали обработку, установив, что если у товара есть значение в этом поле, то именно оно вносится в стоимость. Так мы получили возможность применить нужные акции и скидки к тем товарам, которые нас интересовали. При этом полученное автоматически новое значение цены соответствовало реальной цене в каталоге СБИС.
Заказчик хотел на сайте иметь специальный раздел «Акции» и в него помещать любые товары. Триггером служит слово «Акция» в начале имени товара — так администратор магазина понимает какой товар акционный в СБИС. Мы находили имена товаров с «Акция» в начале и привязывали такие товары и к реальной категории в каталоге, и одновременно к категории «Акции». При этом использовали каноническую ссылку с основным разделом (реальным).
В особом разделе «Акции» размещаются имеющие специальную отметку товары из обычных разделов каталога
Чтобы довести все это до нужного формата также применяли обработку имени для удаления слова «Акция» из названия.
Потребовалось также ввести специальный маркер для товара «Новинка». Не вопрос: смотрим на дату создания товара и, если она меньше 30 дней от текущей даты, значит, товар новый. Как только условие перестает выполняться — метка автоматически снимается.
В блоке лучших предложений на главной странице товары можно фильтровать по присвоенным им меткам «Но
Плюсом еще было сделано много мелких правок и доработок, на которых не стоит акцентировать внимание. Главный вывод такой — имея структурированный файл, внутри которого есть все, что нам нужно, и имея инструмент для его обработки, можно придумать сколько угодно таких хитрых обработок, и на выходе получить именно то, что нужно. Благо, решение Esolutions дает безграничные возможности.
Обработку заказов было принято отдать CRM «Битрикс24». Вместе с CMS «1C-БУС» она образует удачную связку внутри одной системы. Такое решение позволяет обрабатывать заказы внутри удобного функционала «Битрикс24», а не разбираться в дизайне 98-го года внутри админ панели БУС.
На момент создания ТЗ по разработке сайта в маркеплейсе «Битрикс» было приложение для БУС от UDS, но на момент непосредственной сборки приложение оказалось удалено. А студия, которая его разработала, сообщила для нас неприятную новость, что они более не поддерживают этот продукт. В настоящий момент ожидаем создания приложения от UDS для реализации этой задачи. По завершении работ на сайте можно будет видеть свой процент скидки и остаток баллов, а товары, купленные в магазин, будут увеличивать кешбэк внутри системы UDS.
Позволяет использовать метки для каждой категории, расширяющие число посадочных страниц, через работу с характеристиками умного фильтра внутри каталога товаров. Каталог СБИС имеет два уровня категорий, например, «Икра» — «Красная». Но для решения задач SEO нам нужны более глубокие уровни, например, раздел «Икра горбуши».
Посадочная страница созданная из фильтра с помощью «Модуля SEO» внешне ничем не отличается от страни
Чтобы не создавать лишние категории, мы приняли решение использовать функционал создания специальных меток. Для начала получаем ссылку на товары, отобранные по ряду условий умного фильтра. В нашем случае в категории «Икра красная» отбираем товары, соответствующие фильтру по типу: «Вид рыбы: Горбуша». Полученную страницу переделываем в посадочную страницу — наделяем ее уникальными заголовками, метатэгами и описанием. Далее внедряем ее в мегаменю, как фейковую категорию. Так мы можем создать абсолютно любое число страниц. При этом URL-адреса этих страниц, по сути являющиеся адресами страниц фильтра, добавляются в список разрешенных для индексации адресов.
В дополнительные работы также вошла настройка:
автоматизированной системы, изменяющей у всех загружаемых администратором сайта картинок формат на webp для ускорения работы сайта.
расчета стоимости доставки в зависимости от удаленности адреса покупателя от склада в километрах;
интеграции со службой доставки СДЭК;
интеграции с модулями оплаты «СберБанка»;
интеграции с мобильными приложениями клиента для обмена данными.
За 9 месяцев с начала разработки мы создали современно выглядящий сайт интернет-магазина, который фактически не нуждается в повседневном администрировании. Для внесения изменений в каталог используется только СБИС, для работы с заказами — CRM «Битрикс24». Благодаря настроенным нами алгоритмам сайт выполняет свои функции по взаимодействию компании с клиентами в автоматическом режиме.
Сайт rakisam.ru уже полноценно работает, но мы не намерены останавливаться на достигнутом и в ближайшем будущем расширим его функциональность. В планы входит:
1. Более точный количественный учет в СБИС. Для этого необходимо, чтобы в СБИС попадала информация о заказах.
2. Разработка собственного решения по программе лояльности, если UDS не вернет приложение. Бонусные баллы — это основа маркетинга в современном e-commerce, и без них нельзя.
3. Интеграция каталога с «ВКонтакте».
4. Выгрузка в «Яндекс.Маркет» оптимизированных, обработанных сайтом позиций.
5. Выгрузка каталога в специальный фид для расширения сниппетов в поисковой выдаче и для нужд директолога по товарной рекламе.
6. Внедрение сервиса сквозной аналитики Roistat.
Все это поможет интернет-магазину «Царские Раки» становиться удобнее как для пользователей, так и для владельца, и благодаря этому увеличивать свою эффективность как инструмента для получения прибыли.
В предыдущей части мы подробно рассматривали основные источники для поиска или генерации фото-контента для сайта и требования, предъявляемые к ним с учетом современного сайтостроения. В этой статье и последующих мы разберем наиболее интересные из них, а начнем с разработки изображений — самого сложного способа получения графического контента.
Иллюстрация — это изображение, которое всегда используется в контексте с текстовым описанием и служит пояснением. С иллюстрациями работает иллюстратор. В принципе, иллюстрацией можно назвать и фото, и гравюру, и рисунок: что угодно. Но мы рассмотрим именно векторные иллюстрации.
1. Окружающий текст тяжело отождествлять с готовым фото, купленным на стоке, например. Из определения следует, что основная задача иллюстрации — это помощь в восприятии окружающей текстовой информации. А значит, иллюстрация должна либо ассоциироваться с текстом рядом, либо прямо ему соответствовать. Когда мы говорим об одиночной странице с несколькими иллюстрациями, то задачу, в принципе, несложно решить с помощью фотостока. Но что если таких страниц — целый сайт. В рамках одного веб-ресурса мы должны придерживаться однообразия, а, значит, найти множество стилистически схожих изображений. А это уже задача незаурядная.
2. Текст в рамках одной страницы сложно структурирован, разнообразен или просто специфический. Подбирать готовые изображения для такого текста крайне сложно. А даже если и удастся, то не факт, что это станет понятным для всех пользователей, следовательно, иллюстрация не выполнит своей задачи.
3. Необходима строгая стилистика или точное соответствие фирменному стилю. К примеру, если речь идет о банковской сфере, страховании, юридических или бухгалтерских услугах или, вообще, сайт правительственный или государственный.
Выполненные в едином стиле монохромные иллюстрации курсов Яндекс Практикума отражают суть изучаемых навыков. Источник: https://practicum.yandex.ru/catalog/programming/
Абстрактные иллюстрации на reg.ru схематично показывают, что получит клиент. Источник: https://www.reg.ru/
На сайте «ДОДО ПИЦЦА» рассказ о компании сопровождается иллюстрациями-комиксами, выполненными в фирменных цветах. Источник: https://dodopizza.ru/moscow/about
Сайт канадского авиаперевозчика Porter украшают рисунки с маскотом — енотом. Источник: https://www.flyporter.com/en-ca/
Красочные иллюстрации сервиса по подбору профессий KPMI привлекают внимание, логично дополняют текст и задают настроение. Источник: https://kpmi.ru/
На сайте «1С:БухОбслуживания» изображения персонажей гармонично вписаны в рисованный фон. Источник: https://1cbo.ru/
Милые котики на сайте VPN-сервиса hideme.name наглядно иллюстрируют предоставляемые услуги. Кстати, такой персонаж может считаться маскотом? Источник: https://hidemy.name/ru/
1. Главное достоинство привлечения иллюстратора — это точное соответствие изображения окружающему тексту. Иллюстрации разрабатываются под уже готовый текст, который фактически служит готовым техническим заданием. Хорошая иллюстрация способна абсолютно точно визуализировать любой даже самый сложный текст.
2. Однообразие. Разрабатываемые изображения могут создаваться в точном соответствии с фирменным стилем компании. В том числе в одной цветовой гамме.
3. Брендирование. В создаваемые иллюстрации можно легко интегрировать логотип или любые другие элементы. Это дает и дополнительное преимущество — такие изображения тяжело своровать и использовать в ином контексте на других сайтах.
4. Возможность включения в иллюстрации фирменного персонажа — маскота. В некоторых компаниях вместе с брендбуком разрабатывают персонажей. Иллюстрациях — отличный способ задействовать персонажа на сайте.
5. Уникальность. Такие изображения будут разрабатываться индивидуально под требования и будут абсолютно уникальными. А значит никаких проблем с соблюдением авторских прав.
При разработке нашего сайта wintramedia.ru мы столкнулись со всеми сложностями, описанными выше. И единственно правильным решениям для себя выбрали именно создание фирменных иллюстраций. На каждой странице сайта векторное изображение дополняет окружающий текст и отлично вписывается в стилистику сайта.
Согласны, что такие иллюстрации смотрятся интереснее и солиднее однообразных мокапов и тем более растиражированных по всему интернету картинок с улыбающимися менеджерами? Будем рады узнать ваше мнение. И если понадобятся иллюстрации — дайте знать, разработаем индивидуальные изображения и для вас!
При разработке сайта мы всегда стараемся придерживаться фирменного стиля, цветовой гаммы и прочих элементов брендбука компании. На этапе дизайн-макета у дизайнера нет реальных фото от заказчика и мы используем картинки-заглушки или временные решения для презентации. На презентации сайт с грамотно подобранными картинками выглядит естественно, органично.
И вот настает момент истины. Мы запрашиваем реальный контент от заказчика и встречаемся с распространенной сложностью: на макете все было красиво, но в реальности — где брать такие изображения, да еще и в таком количестве?
Наши требования к контенту, предоставляемому заказчиком:
Естественно, стилистика. Если мы рассматриваем сайт для коллегии адвокатов, то логично предположить, что нам оптимально подойдут изображения, соответствующие корпоративной стилистике организации.
Размер. Это, казалось бы, мелочь, но 70% предоставляемых изображений отметаются именно по причине неподходящего размера. Сайты сегодня адаптивны, они должны корректно показываться и на широкоформатных компьютерных мониторах, и на экранах смартфонов, коих стало бесчисленное количество. И изображение должно быть универсальным: на широких форматах и на узких экранах смартфонов одно и тоже изображение должно уметь масштабироваться, а при необходимости — обрезаться. Поэтому квадратное фото сотрудника крупным планом не подойдет, например, для использования в слайдере размером 1920 на 600 пк. А панорамное изображение офиса обрежется по краям при масштабировании. А еще есть такие вещи, как генерация preview (картинки анонса) для статейных блоков или, например, создание изображения для Open Graph разметки og:image (вы видите эту картинку, когда добавляете ссылку на страницу сайта в мессенджер или соцсети) . Важно все это учесть.
Цветность. Единый фирменный стиль и соответствие цветовой гамме требуют использования изображений в определенных контентных блоках. Зачастую это блоки, где текст накладывается поверх изображения. Поэтому если спроектированный блок подразумевает, что текст будет белым на темном, то изображение не должно иметь белый фон. Конечно, можно обработать изображение в фоторедакторе, но изначально корректное фото — залог успеха.
Контекст и уместность. Пожалуй, самый сложный момент. Чаще всего, мы используем изображения в окружении какого-то текста. И в зависимости от его сути необходимо использовать максимально отвечающее контексту изображение. Это заставляет долго подбирать подходящее изображение, которое будет уместным именно в этом блоке. И хорошо, если есть из чего выбрать…
Легальность. Конечно же, легальность. Один из самых широко обсуждаемых моментов в последнее время. Мы подробно описали этот момент и последствия для бизнеса, если вы все еще смотрите на решение этой задачи с помощью Яндекс. Картинок, например. Сегодня за это можно получить иск на круглую сумму. Закон об интеллектуальной собственности строго стоит на страже авторских прав, чем пользуются меркантильные юристы, жаждущие легкой добычи. Изображения должны быть либо уникальными (принадлежащими заказчику) , либо легально приобретенными.
Итак, нам нужны изображения: уникальные/легальные, в одной стилистике, определенной цветности, нужного размера и пропорции, отвечающие сути окружающего текста, да еще и штук 40. Согласитесь, задача, мягко говоря, непростая. И поверьте, только у 1 из 10 заказчиков находится коллекция изображений, отвечающих всем требованиям. Остальные же упираются в эту стену, и проект начинает «буксовать». Мы в «Винтре» очень хорошо знаем об этой проблеме и при ее возникновении находим оптимальное решение, учитывая тематику бизнеса и тип разрабатываемого сайта.
Забегая вперед скажем, что, в дальнейшем мы подробно опишем каждый способ в отдельной статье. Сейчас же просто перечислим основные варианты в порядке сложности создания и стоимости:
Стоковые сервисы. На сегодня это один из самых доступных способов получения изображений. Существует множество площадок: от предлагающих свободно распространяемый контент (условно-бесплатных) до платных, российских и зарубежных. У каждого сервиса свои условия. Среди них: тип лицензии, определяющий варианты законного использования, оплата через расчетный счет (обязательно) , подпись-ссылка на источник, тираж, возможные места публикации и многие другие.
Есть и способы снизить стоимость за счет использования пакетных предложений. Помимо приемлемой цены, есть и самый главный плюс использования стоков: серии изображений и автоматический подбор похожих. Использование коллекций решает вопрос единой стилистики и схожести. Зачастую один фотограф создает коллекцию, делая фотосессию на определенную тему.
Изображение из фотобанка Shutterstock. Источник: https://www.shutterstock.com/ru/image-vector/cartoon-illustr...
Более дорогой и сложный момент — это проведение собственной фотосессии. В зависимости от тематики бизнеса нам потребуются разные фотографы с разным оборудованием. Если предстоит создать меню для ресторана, вам нужен фотограф специализирующийся на предметной съемке. Для интерьеров есть свои особенности, например, необходимость склейка фото или создание панорамы. С людьми работает, как правило, портретный фотограф. Ну а если нам необходим общий вид снаружи, то можно задействовать и фотосъемку с квадрокоптера.
При изучении этого вопроса может показаться, что стоимость услуг профессионального фотографа высока, но при правильно спланированной фотосессии, наличии отработанного сценария, четкого плана и грамотного технического задания на выходе мы получим огромный набор качественных фотографий, в полной мере удовлетворяющих нашим требования. Зачастую бывает так, что отснятого материала с лихвой хватает не только на нужды разрабатываемого сайта, но и на дальнейшее применение при создании полиграфии, рекламы, постов для соцсетей и прочего визуального сопровождения.
Предметная съемка. Стоматологическое оборудование в клинике PROident. Источник: https://proident.ru/
Самый сложный, дорогой и длительный способ — это разработка изображений. Здесь нам на помощь приходят иллюстраторы, аниматоры, 3D-дизайнеры и другие профессионалы в сфере производства цифрового контента. Суть работы заключается в том, что специалист создает изображения по нашим требованиям с нуля. К примеру, нам нужен фасад дома, но он есть только на чертеже — его заменит его 3D-рендер. Или необходимо показать, как будет выглядеть грузовой подъемник в разрезе шахты между 2-м и 3-м этажами. И дизайн интерьера относится сюда же.
Большинство рекламы, в которой в качестве ключевых объектов выступают продукты питания — это не фото. Попробуйте сфотографировать пачку чипсов так, чтобы она выглядела как в рекламе – никогда не выйдет. Все это 3D-макеты, отрисованные графическими дизайнерами. Мы, например, создавали так целую серию изображений для фабрики Сам-По.
Безусловными плюсами такого метода получения графического контента является тот факт, что создаваемые изображения полностью отвечают всем требованиям. Специалист рисует изображение так, как ему необходимо, и может влиять на все факторы. А наличие исходника позволяет генерировать разные изображения просто перемещая, к примеру, виртуально камеру или поворачивая объект в плоскости.
3D-рендер ЖК SamaRanta. Источник: https://townhouse-samaranta.ru/#3d
Мы в «Винтре» столкнулись с теми же проблемами. Нам нужно было использовать несколько изображений на одной странице сайта. При этом они должны были соответствовать смыслу окружающего текста. Нам не подходила ни покупка изображений, ни разработка mockup-ов.
На помощь пришла ручная отрисовка иллюстраций.
Загляните к нам на сайт wintramedia. ru и посмотрите сами на результат.
В продолжении серии наших статей про визуальный контент для сайтов расскажем про 3D-изображения. Это самый сложный в создании, и потому дорогой вид графики. Но иногда такие картинки незаменимы.
Мы живем в трехмерной реальности. Ее можно запечатлеть различными способами: с помощью фотографии или картины с перспективой. А в случае генерации изображений на компьютере для этого используется 3D-графика. Она создается в специальных программах, которые позволяют моделировать трехмерное пространство и любые предметы в нем.
Результатом работы с трехмерной компьютерной графикой может быть что угодно: от фотореалистичного изображения существующего объекта до мультяшного персонажа из фэнтези. Содержание, цвета, формы, текстура генерируемого контента ограничиваются только условиями технического задания или воображением дизайнера.
При этом любую 3D-модель на дисплее компьютера мы видим так же, как обычный предмет в реальном мире. Правда, такое отображение трехмерного объекта требует значительных вычислительных ресурсов. К тому же для сайтов в большинстве случаев нужны статичные изображения. Поэтому для практического применения трехмерную графику обычно превращают в стандартные растровые изображения.
Этот процесс, называемый 3D-рендерингом, можно сравнить с фотографированием. Как и при создании обычного фото, специалист выбирает направление и интенсивность освещения, ракурс, если нужно — добавляет спецэффекты. Причем 3D-графика дает значительно больше возможностей, так как не имеет характерных для физического мира ограничений. В результате создаются картинки — рендеры, которые могут минимально отличаться от реальных фотографий или профессиональных рисунков.
Кроме того, технология 3D-рендеринга позволяет на основе разово созданной модели впоследствии в любое время генерировать любое количество самых разных изображений объекта путем простого изменения настроек графического редактора.
Подобным образом создаются анимированные ролики с 3D-объектами, имитирующие видеосъемку. Но это — тема для отдельной статьи.
В отличие от фотографий, получаемые с использованием технологии трехмерной компьютерной графики изображения позволяют показать:
то, что еще не существует, например, будущий жилой комплекс;
вид с необычного ракурса, в том числе технически недостижимого при съемке реального объекта;
то, что скрыто от невооруженного глаза, например, внутренние элементы механизма;
любую желаемую обстановку;
нужное положение подвижного объекта.
И такие практически неограниченные возможности в 3D-рендерах сочетаются с высокой фотореалистичностью. Смоделированные объекты кажутся «настоящими», «осязаемыми», а потому выглядят привлекательнее обычных иллюстраций.
Изображения, созданные на основе трехмерных моделей, оптимально использовать в случаях:
когда фотографию нужного объекта сделать или приобрести невозможно или очень сложно;
когда необходимо получить выделяющийся визуальный контент, требования к которому превосходят возможности обычной 2D-иллюстрации.
Так, 3D-рендеры очень часто используют при создании изображений для рекламы и продвижения товаров. С помощью компьютера относительно просто нарисовать красивое объемное изображение упаковки так, чтобы были видны все важные надписи, логотип и «вкусная» картинка продукта. Добиться аналогичного эффекта с помощью фотографии зачастую невозможно.
Для sam-po.ru мы разработали трехмерные изображения упаковки для каждого мороженого.
Трехмерная графика также незаменима при желании показать:
1. Продукцию, изготавливаемую на заказ, и поэтому имеющую множество вариаций, которых нет в наличии.
Такие 3D-рендеры подъемников на https://www.lift-prom.ru/ используются в качестве изображений в карточках товаров.
2. Объекты, для которых затруднительно организовать фотосессию, например, из-за их местоположения.
Сфотографировать со всех сторон судно, которое обычно находится или на верфи или на воде — невозможно, а вот нарисовать 3D-модели в «воздухе» — несложно.
3. Важные свойства продуктов, которые нельзя передать с помощью фото из-за конструктивных особенностей.
3D-рендер, на котором изображена глухая шахта в разрезе, наглядно показывает устройство подъемника на странице
4. Результаты находящихся в разработке долгосрочных проектов, таких как строительство недвижимости.
Трехмерная графика показывает, как будет выглядеть внутри и снаружи пока еще только строящийся жилой комплекс https://vira-atmosfera.ru/.
Созданные на основе 3D-моделей изображения можно дополнять интерактивными элементами, чтобы объединить графический контент с текстовым и за счет этого сделать сайт более информативным и удобным.
На сайте https://gal63.ru/ при наведении на этажи торгового центра выводится список организаций и ссылка на страницу с подробной информацией о них.
Рендеры 3D-моделей могут использоваться и для демонстрации продукта в целом, и в качестве изображений для карточек товаров, и для оформления фона сайта.
Да, создание трехмерной графики обходится дороже фотосессий и отрисовки 2D-иллюстраций, требует больших затрат труда и времени. Но эти минусы с лихвой перекрываются возможностями 3D-графики по решению самых сложных задач в области визуального оформления сайтов и промо-материалов.