Архив записей: Октябрь 2026

Универсальное решение для ресторанов, кафе и баров в трёх исполнениях — DemoResto

3 октября, 2026

Зачем я сделал DemoResto

Ресторатору трудно выбирать сайт по описанию: слова «онлайн-бронирование» и «кабинет» мало что говорят, пока не попробуешь сам. Поэтому вместо презентации я собрал вымышленный ресторан DemoResto — заведение с залом, террасой и салоном на берегу Женевского озера в Лозанне. В нём работает всё, что получит настоящий ресторан: меню, бронирование, заказы, подарочные сертификаты, мероприятия и кабинет команды.

Демо можно пройти двумя путями — как гость и как владелец. Панель «Démo» предлагает готовые сценарии: «Ужин на двоих», «Заказ домой», «В ресторане», «Банкет», «Подарочный сертификат», «Управление меню» и «Кабинет гостя». Платежи и письма только имитируются: наружу ничего не уходит, а письма сайта видны прямо в демо.

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

Три исполнения: что входит в каждое

Главная идея продукта — один сайт, который растёт вместе с заведением. Исполнения отличаются набором функций, а не качеством дизайна, и каждое следующее включает предыдущее. В демо они переключаются одной кнопкой.

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

• одностраничный сайт, сделанный в первую очередь под телефон;
• онлайн-меню, которое владелец правит сам, — вместо PDF;
• аллергены, режимы питания и версия меню для печати;
• часы работы, карта, маршрут, кнопки «Позвонить» и WhatsApp;
• QR-меню для столиков;
• форма заявки на бронь.

Visibilité — гости бронируют сами. Для ресторана с залом, которому нужно заполнять столики без звонков в час пик:

• мгновенное онлайн-бронирование по схеме зала;
• многостраничный сайт: о заведении, галерея, новости, контакты;
• афиша мероприятий и страница банкетов с онлайн-заявкой;
• кабинет ресторана: календарь броней, схема зала, заявки, гости;
• отзывы гостей на главной и страница вакансий с формой отклика.

Premium — заведение продаёт онлайн. Для тех, кто работает навынос, с доставкой и проводит мероприятия:

• онлайн-заказы навынос и с доставкой: время выдачи, зоны доставки, минимальная сумма;
• оплата картой и TWINT;
• экран кухни и отслеживание заказа для гостя;
• заказ со столика по QR-коду, вызов официанта и запрос счёта;
• подарочные сертификаты, баллы лояльности и личный кабинет гостя;
• напоминания и предоплата для броней, запись на мероприятия с ограничением мест, банкетные меню и групповой предзаказ.

Помимо функций сайта, в исполнения входит настройка профиля в Google, швейцарских справочников и соцсетей, а языков становится больше: от французского в Essentiel до четырёх в Premium.

Бронирование по схеме зала

Бронирование — сердце исполнения Visibilité. Гость выбирает дату и число персон, затем время из свободных слотов и место: зал, террасу или отдельный салон. Конкретный столик можно выбрать прямо на схеме зала. Пока гость вводит контакты, стол держится за ним, поэтому двойной брони не бывает.

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

Страница «Залы и терраса» показывает каждую зону с фото и планом, а также сколько столиков свободно на ближайший ужин — прямо по броням.

Меню, онлайн-заказы и QR-столик

Меню — это не PDF, а живой каталог блюд, который владелец правит сам. Есть поиск по блюдам и ингредиентам, фильтры по режиму питания (вегетарианское, веганское, без глютена, без лактозы), исключение любого из 14 аллергенов и фильтр «подаётся сейчас». Меню можно распечатать или сохранить в PDF.

У блюд есть опции и добавки, и цена меняется сразу при выборе. Блюдо вне часов подачи или из стоп-листа заказать нельзя, а стоп-лист сам снимается на следующий день.

В Premium гость оформляет заказ навынос или с доставкой. Время выдачи сайт предлагает с учётом загрузки кухни и времени приготовления блюд в корзине, адрес проверяет по зонам доставки, учитывает минимальную сумму и бесплатную доставку от порога. Работают промокоды, оплата картой и TWINT, а после оплаты гость видит, как заказ проходит этапы: принят, готовится, готов, в пути.

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

Кабинет ресторана: вся смена на одном экране

Для команды я сделал отдельный кабинет — без админки WordPress. В нём есть раздел на каждый участок работы: «Сегодня», брони и календарь, живая схема зала, заказы и экран кухни, заявки, мероприятия, гости, меню, контент сайта, сертификаты, цифры, команда, настройки и лояльность.

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

В разделе «Цифры» видны итоги за 30 дней и самые популярные блюда.

Сертификаты, лояльность и мероприятия

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

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

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

Дизайн и фирменный стиль

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

Вместе с сайтом заведение получает фирменный стиль, собранный на отдельной странице: знак-логотип, палитры обеих тем, шрифты Cormorant Garamond и Jost, кнопки и ценники в швейцарском формате «34.–», набор иконок, правила съёмки блюд и тон текстов. Сайт сделан в первую очередь под телефон.

Почему ресторану нужен свой сайт, а не только платформы

Гость сначала смотрит Google, потом меню и только потом решает, бронировать или идти к соседям. Ресторан теряет его в простых местах: телефон в разгар смены молчит, меню в PDF не читается с телефона, турист не понимает по-французски.

Платформы доставки и бронирования приводят новых гостей, но забирают 25–35 % с каждого заказа и оставляют контакт гостя у себя. Свой сайт не заменяет их полностью — он возвращает постоянных гостей к ресторану:

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

Начинать с максимума не обязательно. Кафе может запустить Essentiel, а бронирование, заказы или второй язык добавить позже на тот же сайт — без переделки.

Создание многоязычного сайта-каталога акустических офисных кабин Silentbox®

3 октября, 2026

Задача: один сайт для покупателей из двух десятков стран

Silentbox® — польско-украинский производитель акустических кабин для офисов: от одноместной Solo для звонков до Quartet, где можно провести встречу вчетвером. Штаб-квартира компании находится во Вроцлаве, а сами кабины, по данным клиента, стоят в офисах 25 стран. Значит, сайт читают офис-менеджеры, руководители и дизайнеры интерьеров из самых разных стран, и каждому нужно быстро разобраться в моделях, увидеть кабину в цветах своего офиса и получить цену.

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

Структура: главная-презентация и страницы моделей

Главная страница построена как подробная презентация с якорным меню: «О кабинах», «Кабины», «Цены», «Галерея», «Каталог», «Сертификаты», «Контакты». Её можно читать сверху вниз или сразу перейти к нужному разделу.

• первый экран — кабины на 1–4 человека и кнопка «Смотреть все модели»;
• восемь технических блоков: звукоизоляция до 35 дБ, отсутствие эха, вентиляция до 30 м³ в час, глушители, трёхслойный триплекс, светодиодный свет, розетка с USB и датчик присутствия;
• блок «Сколько стоит шум в вашем офисе» с цифрами исследований и ссылками на источники;
• карточки шести моделей, анонс нового WorkPod, таблица сравнения и 3D-просмотр;
• блок о Meetpoint — собственном сервисе Silentbox® для бронирования кабин через планшеты и Google Calendar, с переходом на его сайт;
• галерея, каталог в PDF, отзывы, ответы на частые вопросы, новости и контакты штаб-квартиры.

У каждой кабины — Solo, Duet, Quartet и трёх моделей серии Lite — есть своя страница: фото, описание, технические характеристики, размеры, кнопки «Скачать прайс» и «Смотреть в 3D», а внизу похожие модели.

Подбор цвета прямо в карточке кабины

Кабину покупают надолго, и она должна вписаться в интерьер. Поэтому в карточке два выпадающих списка: цвет передней панели (белый, серый, чёрный) и цвет боковой панели (семь вариантов — от белого до жёлтого, красного и синего). Для этого я написал собственный шаблон страницы кабины в дочерней теме Astra и небольшой скрипт: при выборе цветов фото меняется на нужную комбинацию, а у одной модели их 21.

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

Сравнение моделей и 3D-просмотр

Чтобы не переходить со страницы на страницу, на главной собрана таблица сравнения: вместимость, регулировка вентиляции и света, сетевая панель, мебель и внешние размеры — от 105×110×220 см у Solo до 210×138×220 см у Quartet. Здесь же кнопки «Смотреть в 3D» и «Скачать прайс» для каждой модели.

Для Solo, Duet и Quartet сделаны отдельные страницы с интерактивной 3D-моделью: кабину можно повернуть и рассмотреть со всех сторон. Сами модели встроены из сервиса Vectary, а страницы собраны на отдельном шаблоне, где рядом с моделью стоят описание и характеристики.

21 язык на одном сайте

Переводы подключены через TranslatePress. У каждого языка своя папка в адресе и правильные теги hreflang, поэтому поисковики показывают людям нужную версию. В переключателе 21 язык: украинский, английский, польский, немецкий, французский, испанский, итальянский, нидерландский, чешский, японский и другие. Арабская версия и иврит открываются справа налево, как и положено.

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

Формы и путь к заявке

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

• кнопка «Получить предложение» в шапке на каждой странице;
• «Скачать прайс» в карточках и таблице — открывает окно с формой запроса PDF-презентации и прайс-листа;
• «Оставить заявку» в карточке модели;
• заявка на тестирование кабины;
• форма в разделе контактов.

Все формы собраны на Elementor Pro и спрашивают только имя, электронную почту и телефон. Под каждой формой — обещание ответить в течение часа, чтобы клиент понимал, чего ждать.

Доверие: сертификаты, отзывы, галерея и блог

В покупке для компании доверие важнее красивых слов. На сайте собраны документы: ISO 9001, ISO 23351-1, ISO 11957, CE, RoHS, регистрация промышленного дизайна, торговые марки ЕС и Украины и два патента. Рядом — 14 логотипов компаний-клиентов, отзывы и предупреждение не путать кабины Silentbox® с подделками.

Отдельная страница галереи на 74 фотографии показывает кабины вживую, а блог из 11 статей рассказывает, как выбрать кабину, об установке в Вильнюсе, о попадании компании в рейтинг Forbes и о контракте с НАТО. Это и аргументы для покупателя, и тексты, по которым сайт находят в поиске.

Что важно в сайте производителя офисного оборудования

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

• говорить на языке покупателя — одного переключателя мало, нужны отдельные адреса для каждой версии и правильная разметка для поисковиков;
• показывать товар наглядно: фото во всех цветах, 3D, размеры и характеристики в одной таблице;
• давать документы — сертификаты и патенты для отдела закупок весят больше слоганов;
• превращать интерес в контакт: прайс и презентация в обмен на имя и почту — понятный обмен для покупателя-компании;
• передавать менеджеру заявку сразу с моделью и языком клиента.

Если вы производитель или дистрибьютор и продаёте в несколько стран, начинать стоит не с картинок, а со структуры: какие модели, какие языки, какие вопросы задают покупатели. Под это собирается сайт, и на WordPress с Elementor его можно сделать так, чтобы команда клиента сама правила тексты и добавляла модели.

Создание сайта-каталога LuxAdapt — оборудование для адаптации авто людям с инвалидностью

3 октября, 2026

Задача: рассказать о сложном оборудовании простыми словами

LuxAdapt — украинская компания, которая подбирает и устанавливает оборудование для адаптации автомобиля: поворотные сиденья для пересадки из коляски, подъёмники для колясок, боксы для кресла на крышу и комплекты ручного управления. Компания работает на рынке 13 лет и даёт на продукцию год официальной гарантии.

Посетители такого сайта — люди с инвалидностью и их близкие. Громкие лозунги им не нужны: важно понять, какое оборудование подойдёт к машине, сколько оно стоит, где его установят и можно ли доверять поставщику. Под эти вопросы я и строил сайт.

Главная страница: от первого экрана к консультации

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

• четыре раздела каталога с картинками;
• блок о том, что такое поворотное сиденье и как проходит установка;
• преимущества: удобная посадка и высадка, безопасность, совместимость со многими авто, установка в любом городе Украины;
• слайдер сертификатов;
• текстовый блок для поиска, который раскрывается по кнопке «Показать ещё» и не перегружает страницу.

В шапке всегда видны телефон и кнопка «Заказать звонок», а на смартфоне меню убирается в отдельную панель, чтобы до номера и кнопки было не дальше одного касания.

Каталог продукции

Каталог построен на рубриках WordPress, поэтому новые модели клиент добавляет так же просто, как записи в блоге. В каждом разделе есть хлебные крошки, счётчик позиций и карточки с фото, названием, ценой и кнопкой «Заказать». Сейчас в каталоге четыре раздела и десять моделей:

• поворотные сиденья — SlimTurn, LiftTurn, DropSeat, Royale и Royale EV;
• подъёмники для колясок — UVL Side, UVL Rear и DualAccess;
• бокс для кресла-коляски на крышу — AutoLift Box;
• комплект ручного управления без педалей — Hand Control.

Цены открыты: от 34 400 грн за комплект ручного управления до 752 500 грн за сиденье Royale EV с электроприводом. Для дорогого оборудования открытая цена бережёт время обеих сторон — человек приходит на консультацию, уже понимая свой бюджет.

Карточка товара

Шаблон карточки я собрал так, чтобы всё нужное для решения было на одной странице:

• слайдер фотографий с миниатюрами и увеличением по клику;
• описание с ключевыми преимуществами — например, у SlimTurn это поворот на 90°, управление с пульта, кнопок или смартфона и пройденный краш-тест;
• цена и две кнопки — «Купить» и «Получить консультацию»;
• вкладка «Технические параметры» со схемой размеров, видео и пояснениями;
• вкладка «Сертификаты».

Видео в карточке особенно важно: как работает поворотное сиденье или подъёмник, проще один раз увидеть, чем прочитать.

Заявки: звонок, консультация, покупка

Все формы работают на Contact Form 7 и открываются во всплывающем окне, не уводя человека со страницы. В поле телефона стоит маска, поэтому номер сразу вводится в правильном формате. Когда посетитель нажимает «Купить» или «Получить консультацию» в карточке, название модели само попадает в скрытое поле формы, и менеджер видит, о каком оборудовании речь.

На странице контактов — два телефона, почта и отдельная форма обратной связи с полем для сообщения: сюда пишут те, кому удобнее изложить ситуацию текстом.

Доверие и география установки

Оборудование для адаптации авто связано с безопасностью, поэтому доверию на сайте отведено много места. В разделе «О нас» — коротко о компании и цифры: 1 год гарантии, 13 лет на рынке, установка по всей Украине. Сертификаты собраны на отдельной странице, а на главной показаны в слайдере.

Страница контактов называется «Специализированные установочные центры LuxAutoTech»: на ней встроена карта центров, где ставят оборудование. Карта сделана в Google My Maps, поэтому новые точки клиент добавляет сам, не трогая сайт.

SEO и аналитика

У страниц понятные адреса, а через Yoast SEO для разделов и товаров прописаны свои заголовки и описания — например, раздел сидений называется в поиске «Каталог сидений LuxAdapt с поворотно-выдвижным механизмом для инвалидов в автомобиль». Хлебные крошки и структурированная разметка помогают поисковикам понять структуру каталога. Для статистики подключены Google Analytics 4 и Google Tag Manager.

Каким должен быть сайт компании, которая делает автомобиль доступным

Адаптация авто для людей с инвалидностью — узкая ниша, где решение принимают долго и часто всей семьёй. По опыту этого проекта сайт здесь должен:

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

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

Создание сайта чип-тюнинг студии UPstage Lviv с каталогом мощности на 8 000+ двигателей

3 октября, 2026

Задача: ответить на главный вопрос владельца машины

UPstage Lviv — официальное представительство Upstage Chiptuning во Львове. Студия делает чип-тюнинг Stage 1, 2 и 3, прошивку АКПП и попкорн-прошивку, программное отключение DPF, EGR, AdBlue, FLAPS и OPF, разблокировку ECU, а ещё дорабатывает выхлоп и тормоза. Результат проверяется на полноприводном диностенде.

Человек, который задумался о чип-тюнинге, приходит с конкретным вопросом: сколько сил и ньютон-метров добавит Stage 1 моему двигателю и сколько это стоит? Общие обещания вроде «плюс 20–30%» на него не действуют. Поэтому центром сайта стал каталог мощности, а страницы услуг рассказывают, что именно происходит с машиной.

Как устроен каталог мощности

Каталог стоит в самом начале главной: сетка логотипов марок и подсказка «Выберите марку авто». Дальше путь в четыре шага:

• марка — 72 марки от Alfa Romeo до Wiesmann, у каждой свой логотип;
• модель — например, у BMW их больше сорока, от 1-й серии до Z8;
• поколение с годами выпуска — у 3-й серии это E46, E9x, F3x, G2x и их рестайлинги;
• двигатель — моторы сгруппированы по типу топлива (бензин, гибрид, дизель), рядом сразу видна заводская мощность.

На каждом уровне есть хлебные крошки и боковые переключатели «Модель — Год — Двигатель», так что соседнее поколение или мотор открываются в один клик. Всего в каталоге 72 марки, около 800 моделей, больше 1 500 поколений и больше 8 000 страниц двигателей. Технически это вложенные рубрики WordPress и записи, а логотипы марок привязаны к рубрикам, поэтому клиент управляет каталогом в обычной админке.

Страница двигателя: сток против Stage

Это главная продающая страница. На примере BMW 330i в кузове G2x она устроена так:

• вкладки Stage 1 и Stage 2;
• таблица «Оригинал — После тюнинга — Прирост» для мощности и крутящего момента: на Stage 1 это 258 → 310 л.с. и 400 → 470 Нм;
• цена — 449 € за Stage 1, у Stage 2 — «по запросу»;
• что входит в работу: настройка на диностенде, индивидуальная прошивка, бесплатные обновления и диагностика, 3 года гарантии и 14 дней на возврат денег;
• кнопка «Оставить заявку».

Форма заявки сама подставляет адрес страницы, с которой её отправили. Менеджер сразу видит марку, модель, поколение и двигатель и не тратит первый звонок на уточнения.

Тысячи страниц для поиска

Каждая страница двигателя — отдельная посадочная страница под запрос вида «чип-тюнинг 330i BMW». Заголовок и описание собираются по шаблону из названия мотора, модели, поколения и города, например: «Чип-тюнинг 330i BMW 3-serie G2x… во Львове — Stage 1 / Stage 2, Dyno». Карту сайта Yoast SEO делит на части по тысяче записей, чтобы поисковики спокойно обходили весь каталог.

Страницы услуг

Кроме каталога у каждой услуги своя страница:

• Stage 1, Stage 2 и Stage 3 — что меняется в прошивке и в железе, какой прирост ожидать и как по шагам проходит процедура;
• прошивка АКПП и DSG, попкорн-прошивка, программное отключение систем экологии, разблокировка ECU;
• диностенд — характеристики стенда: до 1000 л.с. и 1300 Нм на ось, скорость до 280 км/ч, моно- и полный привод;
• доработка выхлопа и тормозов — с фотографиями работ.

Внизу страниц услуг повторяется блок с уровнями Stage 1, 2, 3 и ECO-тюнингом: человек, который пришёл за выхлопом, видит и остальные возможности студии.

Наши работы, контакты и заявки

Раздел «Наши работы» и блок на главной выводят ленту Instagram студии через Instagram Feed Pro: посты с замерами вида «Stock: 262 HP 412 NM → Stage1: 307 HP 483 NM» и кнопкой «Загрузить ещё». Для тюнинга это самое убедительное портфолио — реальные машины и реальные цифры.

На первом экране — ссылки на Facebook, Instagram, TikTok и YouTube и кнопка «Записаться на тюнинг». Блок контактов с адресом, телефоном, почтой и короткой формой (имя и телефон с маской) стоит на большинстве страниц, а на странице контактов добавлена карта Google. Для аналитики подключены Site Kit by Google и тег Google Ads.

Зачем тюнинг-студии каталог мощности

В чип-тюнинге клиент сравнивает цифры. Каталог мощности закрывает сразу несколько задач:

• отвечает на первый вопрос без звонка — человек видит прирост для своего двигателя и решает, стоит ли ехать;
• приводит людей из поиска — запросы с маркой, моделью и мотором точнее и ближе к решению, чем общий «чип-тюнинг Львов»;
• задаёт ожидания заранее — клиент приезжает, зная, какие цифры реальны, а диностенд их подтверждает;
• делает заявки точнее — в каждой есть ссылка на конкретный двигатель.

Что ещё важно в сайте автосервиса или тюнинг-студии

Каталог — сильный инструмент, но одного его мало. По опыту этого проекта на сайте студии стоит предусмотреть:

• доказательства результата — замеры до и после, фото и видео с диностенда, свежие работы из соцсетей;
• понятные цены или хотя бы ориентиры — «от» и «по запросу» честнее, чем полное молчание;
• простое объяснение услуг: чем Stage 1 отличается от Stage 2, что нужно поменять в машине для Stage 3, что даёт прошивка коробки;
• запись в пару касаний — короткая форма с именем и телефоном и кнопка звонка, особенно если студия работает по записи;
• адрес и карту — до тюнинг-студии часто едут из других городов, и найти въезд должно быть легко;
• удобство на смартфоне — марку, модель и двигатель часто ищут с телефона, стоя у своей машины.

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

Портал-каталог сельских усадеб для Союза сельского зелёного туризма Украины

3 октября, 2026

О проекте

«Спілка сільського зеленого туризму України» — профессиональная общественная организация, которая представляет отрасль сельского зелёного туризма и объединяет в сеть владельцев крестьянских и фермерских усадеб под знаком качества «Українська гостинна садиба». Усадьбы сети проходят категоризацию — от базовой до третьей, высшей категории.

Сайт должен был работать сразу для нескольких аудиторий. Туристу — помочь выбрать усадьбу и связаться с хозяином. Владельцу — дать возможность самому добавить и вести свою усадьбу. Союзу — открыто показать устав, положения, руководство, проекты, реестр членов и работу Академии сельского развития. Всё это я собрал на своей теме burum для WordPress.

Каталог усадеб: от карты к карточке

Каталог начинается с интерактивной карты Украины. У каждой области свой раздел: сколько усадеб сети в регионе, короткий рассказ о его истории и природе, галерея фото и кнопка перехода к усадьбам. Рядом — счётчики усадеб каждого уровня: три, два и один «цветок» и базовая категория.

Карточка усадьбы собрана из структурированных полей, поэтому все усадьбы описаны одинаково и их легко сравнивать:

• категория комфорта;
• услуги и цены — проживание, питание, дрова, туристическое сопровождение;
• виды жилья — одно-, двух- и трёхместные номера, отдельный дом, место для палатки;
• удобства и условия: душ и туалет, кухня, парковка, Wi-Fi, можно ли с детьми и домашними животными, приём велотуристов;
• расстояния до станции, медпомощи, музеев, магазина, кафе, мест для рыбалки и купания;
• описание, фото, контакты хозяина и карта проезда.

Под карточкой — другие усадьбы той же области, комментарии и счётчик просмотров.

Личные кабинеты владельцев

Кнопка «Додати садибу» на главной ведёт ко входу и регистрации. Личные кабинеты работают на плагине WP-Recall: регистрация с индикатором надёжности пароля и генератором паролей, вход, восстановление доступа. Через кабинет владелец добавляет свою усадьбу и сам поддерживает её карточку в актуальном виде.

У каждого владельца есть публичный профиль с его записями и усадьбами — туда ведёт кнопка «Написати власнику» из карточки. Зарегистрированный пользователь может написать хозяину личное сообщение, не уходя с сайта.

Членство и реестр участников

Сайт помогает союзу расти. Пользователь выбирает членский пакет — «Бізнес» для владельцев средств размещения и малого бизнеса, «Садиба (ОСГ)» для личных крестьянских хозяйств, «Експерт» для преподавателей, учёных и общественных организаций — и подаёт заявление онлайн. Форма повторяет официальное заявление в правление: контакты, адрес и описание будущей деятельности.

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

Академия сельского развития

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

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

Документы, блог и английская версия

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

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

Зачем отраслевому союзу портал, а не сайт-визитка

Сайт-визитка рассказывает об организации, но мало что даёт её участникам. Сайт отраслевого союза становится по-настоящему полезным, когда работает на всех сразу: турист находит у членов союза место для отдыха, владелец получает витрину и прямые обращения гостей, а союз — открытый реестр и весомый довод для новых участников.

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

Как сделать каталог объектов, который не устареет через год

Каталоги усадеб, гостиниц, мастеров или членов ассоциации часто начинают с красивой главной, а через год они полны пустых и устаревших карточек. Чтобы этого не случилось, при разработке я опираюсь на несколько правил:

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

Разработка платформы онлайн-обучения Student Hub для банка ПУМБ

3 октября, 2026

Что такое Student Hub

Student Hub — студенческий портал банка ПУМБ (Перший Український Міжнародний Банк). Здесь банк собирает всё, что предлагает молодёжи: встречи в университетах и онлайн-воркшопы, производственную практику, оплачиваемую стажировку ПУМБ DRIVE, консультации HR и вакансии. Сердце портала — платформа онлайн-обучения, на которой студенты проходят практику и дополнительные курсы.

Моя часть работы — эта платформа на WordPress: курсы и модули, тесты и задания, система баллов, личный кабинет, сертификаты и анкеты, через которые студенты попадают на практику, стажировку и консультации.

Как устроена онлайн-практика

Практика собрана в один курс из семи модулей. Каждый посвящён тому, что нужно знать человеку на стартовой должности в банке:

• знакомство с ПУМБ: ценности, банк как работодатель, волонтёрство;
• клиентоориентированность и эмпатия;
• стандарты обслуживания в отделении и онлайн, работа с недовольным клиентом;
• кибербезопасность и мошенничество с платёжными картами;
• мобильное приложение банка;
• депозитные и кредитные продукты;
• карьера в банке: возможности и стартовые должности.

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

Баллы, попытки и сертификат

Главное требование к платформе — прозрачная оценка, которая считается сама, без ручных таблиц. Правила заложены в настройки курса:

• после каждого модуля — тест или практическое задание;
• максимум за задание — 10 баллов, проходной балл — 8;
• на каждое задание и тест — три попытки;
• максимум за всю практику — 100 баллов;
• сертификат открывается от 72 баллов.

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

Регистрация и вход по номеру телефона

Логин на платформе — номер телефона в формате 380XXXXXXXXX: студенту не нужно придумывать имя пользователя. При регистрации он указывает телефон, e-mail и пароль. После ввода пароля на e-mail приходит код подтверждения — второй шаг защищает кабинет, даже если пароль кто-то узнал. Есть восстановление пароля и опция «оставаться в аккаунте».

Форма входа встроена прямо в страницы курсов. Студент, который пришёл по ссылке на курс, входит или регистрируется, не уходя со страницы, а после регистрации возвращается туда, откуда начал.

Каталог курсов и анкеты

Кроме практики на платформе есть дополнительные курсы, разбитые на блоки: тайм-менеджмент, деловое общение на украинском языке, работа в Teams, приёмы работы в Miro, курс о TikTok и курс «AI-инструменты студента». Для практики они необязательны, но дают студенту больше полезных навыков. Каталог сортируется по дате и названию, а у каждого курса виден счётчик записавшихся — у онлайн-практики их уже больше 1 100.

Чтобы попасть на практику, стажировку или консультацию, студент заполняет анкету. Формы собирают то, с чем HR может сразу работать: ФИО и дату рождения, телефон и e-mail, вуз, специальность и курс, направление практики (IT, отделение банка, финансовый лизинг), место проживания, ссылку на резюме и то, откуда студент узнал о проекте.

Разделы портала вокруг обучения

Платформа обучения живёт внутри карьерного портала. Страница стажировки ПУМБ DRIVE рассказывает об условиях — оплачиваемая работа на полставки, 4 часа в день, наставник, — о специализациях и сроках подачи заявок, а ответы на частые вопросы собраны в раскрывающиеся блоки. Раздел консультаций HR описывает, с чем помогут карьерные консультанты: аудит резюме и профиля в LinkedIn, подготовка к собеседованию, стратегия поиска работы. В разделе событий собраны встречи в университетах, ярмарки вакансий и онлайн-воркшопы с датой и кнопкой регистрации.

Почему WordPress и Tutor LMS

Для корпоративной платформы обучения не обязательно писать систему с нуля. Связка WordPress и Tutor LMS Pro закрывает основные задачи: курсы и уроки, тесты и задания, журнал оценок, сертификаты и личный кабинет студента. Страницы портала собраны на Elementor Pro с PowerPack, поэтому команда банка может обновлять тексты, события и баннеры без программиста, а обучение и сайт живут в одной системе с одной учётной записью студента.

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

Платформа обучения для компании: на что обратить внимание

Онлайн-обучение для студентов, сотрудников или партнёров работает, только если людям удобно учиться, а компании — видеть результат. Создавая LMS, я советую с самого начала продумать несколько вещей:

• Правила оценки. Баллы, проходной порог и число попыток стоит зафиксировать до запуска и заранее показать учащемуся.
• Мобильный формат. Студенты часто учатся с телефона, поэтому видео, тесты и кабинет должны работать на маленьком экране.
• Защита кабинета. Вход по телефону и код подтверждения на e-mail снижают риск чужого доступа к результатам и сертификатам.
• Понятный финал. Сертификат и следующий шаг — стажировка, кадровый резерв, консультация — мотивируют дойти до конца.
• Связь с HR-процессом. Анкеты должны собирать данные, с которыми команда подбора может работать сразу.

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

Разработка SaaS-сервиса MyInboxify — CRM для WhatsApp, Telegram и Viber в одном окне

3 октября, 2026

Что такое MyInboxify и зачем я его сделал

MyInboxify — SaaS-сервис, CRM для мессенджеров. Идея простая: небольшой компании не нужна громоздкая корпоративная система с десятками модулей — ей нужно, чтобы ни одно сообщение клиента не потерялось, а менеджеры отвечали быстро. Поэтому все обращения из разных каналов попадают в один ящик заявок, а работа с ними устроена так, чтобы её можно было освоить за один вечер.

Я сделал сервис целиком: продумал структуру и роли, написал серверную часть, интерфейс панели, интеграции с мессенджерами и платёжной системой, а также продающий сайт с блогом и разделом помощи. Регистрация открытая, первые 14 дней — бесплатно.

Каналы: WhatsApp, Telegram, Viber, почта и сайт

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

• WhatsApp — через официальный WhatsApp Cloud API от Meta: мастер подключения сам настраивает вебхук, подписку и номер и подтягивает утверждённые шаблоны сообщений;
• Telegram — бот компании: достаточно вставить токен, вебхук устанавливается сам и восстанавливается, если платформа его сбросила;
• Viber — по токену бота;
• форма на сайте — готовый код формы со своими полями, UTM-метками и защитой от спама;
• чат на сайте — виджет с настраиваемым цветом, приветствием, приглашением к разговору и строкой согласия на обработку данных;
• e-mail — если клиент отвечает на письмо, его ответ попадает в чат той же заявки.

Двусторонний чат и правила WhatsApp

Менеджер отвечает из карточки заявки, а клиент получает сообщение там, откуда написал, — в WhatsApp, Telegram, Viber или на почту. У каждого исходящего сообщения видны автор, время и статус доставки. Если сообщение не дошло, рядом появляются причина и кнопка повторной отправки. Новые сообщения подтягиваются без перезагрузки страницы: обновляется счётчик непрочитанных, мигает значок вкладки, звучит короткий сигнал.

Отдельно пришлось учесть правило WhatsApp: свободный текст можно отправить только в течение 24 часов после последнего сообщения клиента. Когда окно закрылось, сервис блокирует обычную отправку и предлагает выбрать утверждённый шаблон — менеджер не упирается в непонятную ошибку, а сразу видит, что делать.

Команда, статусы и контакты

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

• на один контакт — одна открытая заявка: новое сообщение того же клиента добавляется в неё, а не плодит дубли;
• поиск дублей по телефону и объединение карточек с переносом всей переписки;
• поиск, фильтры и выгрузка заявок и контактов в CSV, который корректно открывается в Excel;
• для заявок с формы — кнопка «Позвонить» и отметка о состоявшемся звонке.

Telegram-группа с темами, уведомления и аналитика

Многие команды привыкли работать в Telegram, поэтому я сделал зеркало заявок в супергруппу с темами. На каждую заявку создаётся своя тема с карточкой клиента и кнопками «Взять» и «Закрыть». Сообщения клиента из любого канала дублируются в тему, а ответ менеджера прямо из Telegram уходит клиенту туда, откуда он писал. Защита от «эха» не даёт сообщениям ходить по кругу, а данные разных компаний никогда не пересекаются.

О новой заявке сервис сообщает в Telegram-чат компании, назначенному менеджеру приходит личное уведомление, а заявки без ответа дольше трёх часов собираются в напоминание. В аналитике видны заявки, закрытия и источники; на старших тарифах добавляются нагрузка менеджеров, каналы, UTM-метки и выгрузка статистики в Excel и PDF.

Тарифы, оплата и пять языков

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

Интерфейс полностью переведён на английский, русский, украинский, французский и немецкий. Язык можно задать прямо в адресе страницы — это удобно для рекламы на разные страны, — а на страницах входа и регистрации настроены canonical и hreflang. Для тех, кто не хочет разбираться сам, есть разовая услуга подключения: клиент оплачивает её на сайте, а заказ сразу попадает в админку.

Безопасность и надёжность SaaS-сервиса

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

• токены каналов хранятся в зашифрованном виде, пароли — только в виде хеша;
• входящие вебхуки проверяются по подписи, поддельные сообщения отклоняются;
• защита от подбора пароля, CSRF-токены на всех действиях, строгая политика безопасности контента;
• форма на сайте защищена ловушками для ботов, лимитами по IP, списком разрешённых доменов и капчей по выбору;
• ежедневные резервные копии базы и регулярная проверка вебхуков по расписанию.

Что учесть, если вам нужна своя CRM или интеграция мессенджеров

Если вы задумываете CRM для мессенджеров, интеграцию WhatsApp Business API или собственный сервис для работы с клиентами, по опыту MyInboxify стоит с самого начала продумать несколько вещей:

• правила каждой платформы — окно 24 часа и шаблоны в WhatsApp, особенности ботов в Telegram и Viber;
• доставку и ошибки — менеджер должен видеть, дошло ли сообщение, и уметь повторить отправку;
• дубли контактов — один и тот же клиент пишет из разных каналов;
• изоляцию данных, если сервисом пользуются несколько компаний;
• оплату и тарифы — пробный период, продление, смену тарифа;
• простое подключение — чем меньше технических шагов у клиента, тем выше шанс, что он останется.

Я разрабатываю веб-сервисы и интеграции под задачу — от небольшой связки «форма сайта → Telegram» до полноценной SaaS-платформы с оплатой и командной работой.

Разработка SaaS-сервиса Mypostlify — автопостинг и контент-календарь для соцсетей

3 октября, 2026

Что такое Mypostlify

Mypostlify — SaaS-сервис для планирования и автоматической публикации контента в соцсетях. Пользователь пишет пост один раз, выбирает сети и время, а сервис публикует его сам и затем собирает статистику. Сервис рассчитан на малый бизнес, авторов и SMM-агентства, которые ведут несколько аккаунтов и не хотят каждый день тратить время на ручные публикации.

Я сделал проект целиком: архитектуру, серверную часть, интерфейс панели, интеграции с API соцсетей, оплату и продающий сайт с блогом и разделом помощи.

Восемь сетей и подключение в один клик

Сервис работает с Instagram, Facebook, Threads, LinkedIn, YouTube, X, TikTok и Telegram. Ключевое решение — пользователю не нужно создавать собственные приложения разработчика и копировать токены. Mypostlify сам выступает приложением на платформах: человек нажимает «Подключить», видит стандартное окно согласия соцсети, подтверждает доступ — и аккаунт готов к публикациям. Технически это OAuth: токены хранятся в зашифрованном виде и обновляются автоматически там, где платформа это позволяет.

• Facebook — публикация на Страницу компании, Страница выбирается при подключении;
• Instagram — фото, карусели и Reels для профессиональных аккаунтов;
• Threads — текстовые посты и медиа;
• LinkedIn — посты от имени профиля, а при наличии доступа — от имени Страницы компании;
• Telegram — каналы и группы через общего бота сервиса или собственного бота клиента;
• YouTube, X и TikTok — модули подключения и публикации написаны, включение идёт по мере одобрения приложения каждой платформой.

Контент-календарь и редактор публикаций

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

Для Telegram доступны не только текст и фото, но и альбомы, опросы, файлы, аудио, голосовые сообщения, геолокация и контакты.

Требования площадок проверяются ещё при сохранении: пост для Instagram без картинки или ролик для YouTube без видео сервис не примет и сразу объяснит почему, а не сообщит об ошибке в момент публикации.

Движок публикации: надёжно и без дублей

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

• посты уходят порциями, а между публикациями в один и тот же аккаунт выдерживается пауза — сотня запланированных постов не улетает залпом;
• при сетевых сбоях попытка повторяется через 2, 10 и 30 минут, а сети, куда пост уже ушёл, при повторе пропускаются — дублей не будет;
• постоянные ошибки вроде отозванного доступа не повторяются бесконечно, а показываются пользователю с причиной;
• если процесс оборвался посреди отправки, задание само возвращается в очередь;
• для видео в Instagram и Threads сервис дожидается, пока платформа обработает ролик, и только потом публикует.

Аналитика и комментарии

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

В разделе «Посты» собраны опубликованные записи вместе с комментариями. На комментарии в Facebook, Instagram и Threads можно отвечать прямо из сервиса и скрывать лишние, а отдельная вкладка показывает те, что остались без ответа.

Медиатека и оплата за каждую сеть

Фото и видео хранятся в общей медиатеке и используются в постах повторно. Изображения при загрузке автоматически сжимаются до размера, который всё равно используют соцсети, — это экономит место без заметной потери качества. Для больших объёмов есть платное расширение хранилища.

Оплату я сделал модульной: регистрация бесплатная и без карты, каждая сеть подключается и оплачивается отдельно — помесячно или за год, а при первом подключении сети включается бесплатный период на 14 дней. Если оплата одной сети закончилась, останавливается только она. Платежи проходят через Stripe, по каждому есть PDF-чек, а отключив сеть, клиент может запросить возврат за оставшиеся дни. Для X, где публикации через API платные, предусмотрен отдельный предоплаченный кошелёк.

Проверка приложения на платформах

Чтобы реальные клиенты могли подключать свои аккаунты, приложение должно пройти проверку на каждой платформе. Для Meta — Facebook, Instagram и Threads — я подготовил заявку на App Review: описал сценарий использования каждого разрешения и записал видеодемонстрации — от входа через Meta до публикации, работы с комментариями и аналитики. Этот этап часто недооценивают: проверка занимает недели, а любое расхождение между описанием и видео означает повторную подачу.

Что учесть, если вам нужен сервис автопостинга или интеграция с соцсетями

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

• модерацию приложений — Meta, LinkedIn, TikTok и Google проверяют приложение, это нужно заложить в план;
• стоимость и лимиты API — у X публикации через API платные, у YouTube жёсткая квота на загрузки;
• требования к контенту — Instagram не публикует без медиа, у каруселей и текстов в каждой сети свои ограничения;
• очередь и повторы — без них массовая публикация теряет посты или дублирует их;
• понятную оплату — клиенту проще платить за те сети, которыми он действительно пользуется.

Я разрабатываю веб-сервисы и интеграции с API соцсетей и мессенджеров — от автопубликации новостей сайта в Telegram-канал до полноценной SaaS-платформы с оплатой.

Создание сайта апарт-отеля Cardinal в Трускавце — номера с бронированием, СПА и ресторан

3 октября, 2026

Об отеле и задаче

Cardinal — новый пятиэтажный апарт-отель с эко-ремонтом в Трускавце: три минуты пешком до центрального бювета, рядом прогулочный парк. Номера оборудованы кухнями и живут как отдельные квартиры, а вокруг — полноценная гостиничная инфраструктура: СПА-комплекс, ресторан с баром, салон красоты, конференц-зал, трансфер и доставка еды в номер.

Отелю нужен был сайт, на котором гость может рассмотреть номер, узнать про СПА и ресторан и сразу оставить заявку на бронь. Я сделал этот сайт: сверстал десять страниц, собрал слайдеры и вкладки, галерею с всплывающим просмотром и формы бронирования в модальных окнах.

Структура сайта

Всё, что предлагает отель, разложено по страницам так, чтобы гость находил нужное за один-два клика:

• главная — витрина всех направлений отеля;
• номера — шесть категорий с фото, оснащением и формой брони;
• СПА — семь зон комплекса и отдельная страница финской сауны;
• ресторан — часы работы, бронь столика по телефону, дресс-код и меню в PDF;
• галерея с фильтром по разделам и просмотром фото во всплывающем окне;
• отзывы, акции, контакты с картой и политика конфиденциальности.

Шапка общая для всех страниц: меню разделов слева, логотип в центре, справа телефон, Facebook, Instagram и кнопка «Забронировать». Внутренние страницы начинаются с заголовка и хлебных крошек, а подвал повторяет адрес, телефоны, соцсети, кнопку брони и ссылки на политику конфиденциальности, правила проживания и блог. Где бы ни находился гость, до звонка или заявки — один клик.

Главная страница: витрина отеля

Первый экран — фото номера на всю ширину, подпись Apart hotel, крупное название CARDINAL и короткое описание: современный пятиэтажный отель с эко-ремонтом. Ниже — абзац о главном преимуществе — расположении у центрального бювета и парка.

Дальше главная по очереди раскрывает поводы выбрать отель:

• слайдер номеров со стрелками и карточкой с кнопкой «Подробнее»;
• блоки «Расположение и отдых» и «Вид из номеров» с фото балкона над городом;
• четыре вертикальные плитки — конференц-зал, СПА, ресторан и салон красоты: при наведении плитка подсвечивается и показывает кнопку перехода;
• восемь услуг с иконками: ежедневная уборка, Wi-Fi, телевидение, будильник, трансфер, экскурсовод, стирка и глажка, доставка еды из ресторана в номер.

Номера: вкладки, слайдеры и бронь

Страница номеров — главная продающая. Шесть категорий — от однокомнатного двухместного номера до трёхкомнатного супер-люкса и представительского люкса «Кардинал» — переключаются вкладками, без перезагрузки страницы. У каждой категории свой слайдер фотографий, название, плашка с площадью (например, 38 м²) и пара слов о виде из окна.

Блок «Каждый номер оснащён» собирает в сетку иконок то, что гость обычно уточняет по телефону: мини-кухня, холодильник с морозильной камерой, посуда, чайник и чайный набор, душевая кабина, кровати 180×200, косметика, Wi-Fi и комплимент от заведения. Дополнительные услуги — стирка, room-сервис, экскурсии, доставка цветов, косметолог, визажист, массаж — идут крупной строкой, и при наведении на услугу рядом всплывает её фото.

Внизу страницы — форма «Забронировать номер»: даты заезда и выезда с выбором в календаре, количество гостей, имя, телефон, почта и комментарий, обязательные поля отмечены звёздочкой. Та же форма открывается в модальном окне по кнопкам «Забронировать», поэтому оставить заявку можно с любой страницы, не теряя того, что гость сейчас смотрит.

СПА-комплекс и финская сауна

СПА — сильная сторона отеля, поэтому у него своя страница: турецкая баня, финская сауна, джакузи, джакузи под открытым небом, фито-бар, тренажёрный зал и косметология. Каждая зона — большой слайдер с подписью и кнопкой «Подробнее».

Финская сауна вынесена на отдельную страницу, которая показывает, как устроено описание зоны. Параметры собраны в иконки — температура 80–100 °C, влажность 10–20 %, до 8 человек, натуральное дерево, лавки на двух уровнях, напитки из фито-бара, — рядом рассказ о пользе сауны и форма «Зарезервировать онлайн» с именем, телефоном и почтой.

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

Ресторан, галерея, отзывы, акции и контакты

• Ресторан — страница с фотографиями и ответами на практические вопросы: часы работы 08:00–23:00, телефон для брони столика, дресс-код, напитки фито-бара и кнопка «Скачать меню (PDF)».
• Галерея — вкладки «Территория отеля», «СПА», «Ресторан» и «Отдых» переключают подборки без перезагрузки, а по клику фото открывается во всплывающем окне со стрелками для листания.
• Отзывы — карточки с именем, городом, датой и оценкой звёздами, с постраничной навигацией.
• Акции — карточки предложений, например на СПА-услуги и трансфер до отеля.
• Контакты — фото фасада, адрес, телефоны, почта, соцсети, кнопка «Связаться с нами» и карта на всю ширину.
• Политика конфиденциальности — отдельная страница о том, как отель получает и использует данные гостей, оставленные в формах.

Внешний вид и вёрстка

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

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

Каким должен быть сайт отеля

Гость выбирает отель глазами: фото номера, вид из окна, СПА и ресторан решают больше, чем длинные описания. Собственный сайт — место, где отель показывает себя полностью и получает заявки напрямую. Создавая сайт для отеля, я опираюсь на несколько принципов:

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

Если вам нужен сайт для отеля, гостевого дома или СПА-комплекса, я помогу собрать его целиком — от структуры страниц до слайдеров, галереи и форм бронирования.

Дизайн и разработка корпоративного сайта Clever Meter Ukraine — учёт воды и тепла

3 октября, 2026

О заказчике и задаче

Clever Meter Ukraine занимается учётом воды и тепла: подбирает и поставляет счётчики, организует автоматический сбор показаний, предлагает программное обеспечение, аналитику, интеграцию с биллингом и сервис. Компания работает с производителями Apator Powogaz, GWF и ADD Grup. Ей нужен был корпоративный сайт, который с первого экрана показывает главное: компания строит всю систему учёта, а не только продаёт приборы.

Заказчик передал подробное техническое задание на 65 страниц — карта сайта, блоки каждой страницы, две аудитории, требования к формам, доступности, безопасности и ролям в админке. Я вёл проект целиком: дизайн, разработка, наполнение и проверка перед передачей.

Дизайн: от брендбука до UI-kit

Стиль я построил на брендбуке и фирменной текстуре воды: тёмно-синий и голубой бренда, фирменные шрифты, белые и светло-голубые секции. Текстуру я перевёл из исходного файла заказчика в векторную маску — на сайте она лёгкая и меняет цвет под фон. Фирменный оранжевый появляется только там, где есть действие или движение данных: главные кнопки, пунктиры путей данных, номера этапов, ключевые цифры.

Кроме главной, в макете — два десятка шаблонов внутренних страниц и отдельный UI-kit:

• цветовые токены, типографика, сетка на 12 колонок и шкала отступов;
• кнопки и поля форм во всех состояниях — обычное, наведение, фокус, ошибка, неактивное;
• карточки, бейджи, таблицы, сообщения, скелетон загрузки и пустые состояния;
• модальное окно формы в четырёх состояниях — заполнение, ошибка, отправка, успех с номером обращения;
• лист анимаций: что движется, сколько миллисекунд и зачем — без декоративного движения.

Две аудитории: «Партнёры» и «Бизнес»

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

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

Главная: регион посетителя на первом экране

Первый экран — фотография города на всю ширину, фирменная текстура и заголовок «от счётчика до аналитики», а внизу — стеклянная полоса пути данных: счётчики → передача данных → цифровая платформа → аналитика и биллинг. Фото зависит от области посетителя: регион определяется на сервере по IP-адресу через локальную базу, которая обновляется раз в месяц. Браузер ничего не спрашивает, IP нигде не сохраняется, а у кого регион не определился — универсальное фото.

В админке для каждой области задаются фото и при необходимости свои IP-диапазоны, а редактор может посмотреть, как главную видят в любой области. Дальше на главной — полный цикл учёта из восьми этапов, преимущества, цифры компании и бренды-производители, решения, технологии передачи данных, кейсы, новости отрасли и блок «Подберём решение».

Разделы о продукте: от учёта до сервиса

Каждый раздел отвечает на свой вопрос посетителя и заканчивается понятным следующим шагом:

• Учёт ресурсов — виды учёта и калькулятор: посетитель вводит число приборов, частоту обходов, время на прибор, стоимость часа контролёра и долю повторных выходов и сразу видит годовую экономию и высвобожденные часы при дистанционном сборе;
• Решения — направления для водоканалов, громад, дилеров, застройщиков, промышленности и аграриев; у каждого своя страница: боли объекта, состав комплекса, оборудование, связанные кейсы и документы;
• Телеметрия — путь данных от прибора до биллинга, технологии LoRaWAN, M-Bus, Wireless M-Bus и GSM/NB-IoT, а также интерактивная схема: выбираете тип объекта — и схема перестраивается под него;
• Программное обеспечение — сбор показаний, контроль потерь и небалансов, отчёты, интеграция с биллингом и запись на демонстрацию;
• Сервис и поддержка — обмен, ремонт и поверка, форма обращения с выбором прибора и загрузкой до пяти фото;
• О компании — история с картой расширения географии, видео во всплывающем плеере, производители-партнёры и форма для будущих дилеров.

Техническая документация и кейсы на карте

Документация — отдельный каталог для инженеров и проектировщиков. Документы ищутся по названию, модели и артикулу и фильтруются по типу (инструкции, каталоги, сертификаты, схемы подключения, BIM/CAD), категории оборудования, технологии, производителю и языку. У каждого документа видны формат, размер, версия и дата обновления, устаревшие версии помечены, а часть файлов выдаётся после короткой формы — так компания получает контакт проектировщика.

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

Новости, поиск и рассылка

Раздел новостей ведётся в блочном редакторе WordPress с моими блоками — мнение эксперта со справочником экспертов, выделенный факт, призыв, связанные материалы. У материала есть время чтения, оглавление, теги, кнопки «Поделиться» и похожие публикации; фото и галереи можно скачать по одному или архивом. Без заголовка, анонса, обложки и описания картинки материал не опубликуется.

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

Формы обращений: номер, отделы и защита от спама

На каждом языке работает 11 форм — подбор решения, консультация, поверка, ремонт, партнёрство, расчёт стоимости и окупаемости, запрос документа, подписка, общая форма на «Контактах». Формы открываются в модальных окнах с удержанием фокуса и закрытием по Esc, а на телефоне выезжают снизу. Каждое обращение получает номер вида CMU-год-номер — он приходит в письме и показывается на экране успеха.

• на «Контактах» посетитель выбирает тему — и письмо уходит в нужный отдел, а адреса отделов задаются в админке;
• к заявке можно приложить техническое задание, план объекта или фото узла учёта;
• от спама — невидимое поле-ловушка, проверка времени заполнения и лимит отправок с одного устройства, без капчи для живых людей;
• все заявки хранятся в админке, а раздел «Контакты клиентов» собирает их по людям — по e-mail или телефону, с поиском и выгрузкой в Excel.

Английская версия на Polylang

Основной язык сайта — украинский, английская версия переведена полностью: страницы, новости, кейсы, документы, рубрики, меню, формы, письма рассылки и все подписи интерфейса. Адреса у версий одинаковые, отличается только префикс языка; переключатель UA / EN ведёт на ту же страницу, а если перевода нет — показывает это, а не пустую страницу. Общие настройки и блоки сайта имеют свои значения для каждого языка, а незаполненное поле берёт украинский текст.

Всё редактируется из админки

Главное требование заказчика — никаких текстов, цифр и фото в коде. Каждый блок макета стал полем ACF: на странице, к которой он относится, или в общих разделах «Настройки сайта» и «Блоки сайта» — контакты, отделы, соцсети, кнопка быстрой связи, цифры компании, бренды, тексты окон форм, призывы. Тексты — в визуальном редакторе, при этом вид остаётся как в макете: абзацы и списки сами получают оформление дизайна. У полей есть подсказки, где они показываются на сайте.

Для команды предусмотрены роли: контент-менеджер ведёт новости, медиатеку и заявки, но не трогает страницы, документы и настройки. Медиатека сама убирает геоданные из фото, делает уменьшенные копии в WebP и показывает, где используется картинка. Видео подключается ссылкой на YouTube или файлом.

SEO, скорость и безопасность

Сайт готов к продвижению с первого дня: человекопонятные адреса с переадресацией старых, хлебные крошки с микроразметкой, SEO-заголовки и описания на Yoast, языковые метки для поисковиков. Шрифты подключены локально, картинки отдаются в нужном размере и подгружаются по мере прокрутки, внутренние страницы кэшируются, а главная с региональным баннером — нет.

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

Почему технологической компании нужен продуманный сайт

Когда компания продаёт сложные инженерные решения, сайт работает как первый консультант. Инженер водоканала, представитель громады или застройщик должен быстро понять, что ему предложат и как это работает. Поэтому в B2B-сайтах я опираюсь на несколько принципов:

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

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

Создание сайта ресторана Beef&Cake в Хмельницком — банкеты, VIP-комната, сертификаты и две языковые версии

3 октября, 2026

О ресторане и задаче

Beef&Cake — авторский мясной ресторан в центре Хмельницкого, на улице Проскуровской. Ставка здесь на мясные блюда по авторским рецептам, а кроме основного зала есть VIP-комната и банкетный зал. Ресторан продаёт подарочные сертификаты, держит сувенирную лавку, показывает залы в 3D-туре, получает награды и пишет собственные новости — например, о рекордном для Украины тартаре из говядины, который зафиксировала Книга рекордов Украины.

Всё это нужно было собрать в сайт, который передаёт характер заведения и ведёт к действию: забронировать столик, заказать банкет или купить сертификат. Я сделал этот сайт на WordPress с собственной темой — с двумя языковыми версиями, формами заявок, галереями, новостями и полной мобильной версией.

Структура: три сценария гостя

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

• «хочу поужинать» — кнопка «Забронировать столик» на первом экране, меню, часы работы, адрес и карта;
• «у меня событие» — страницы VIP-комнаты и банкетного зала с фото, вместимостью и заявкой на банкет;
• «ищу подарок» — блок подарочных сертификатов, всплывающее окно и форма заявки.

Остальные страницы поддерживают выбор: о ресторане, 3D-тур, галерея и новости. В шапке — логотип, ссылка на 3D-тур, переключатель языка ENG | UKR и кнопка меню. Меню раскрывает все разделы сайта, а также другие проекты владельца, кейтеринг и сувенирную лавку.

Главная страница

Первый экран — тёмное фото зала с кирпичными стенами и тёплым светом, логотип со схемой разделки туши и золотая кнопка «Забронировать столик». Дальше главная коротко проводит по всему, что есть у ресторана:

• о ресторане — коллаж из четырёх фото в золотой рамке, текст и ссылки на 3D-тур и сувенирную лавку;
• меню — крупный стейк на тёмном фоне и кнопка «В меню»;
• VIP-комната и банкетный зал — фото, вместимость и переход на отдельные страницы;
• подарочные сертификаты — слайдер с кнопкой «Купить»;
• новости и награды — слайдеры со стрелками и точками;
• график работы, адрес, телефон, почта, соцсети, ссылки на меню, резерв стола, доставку и отзывы в сервисе Choice, карта.

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

VIP-комната и банкетный зал

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

• VIP-комната — приватное помещение на 8–10 гостей с отдельным входом и балконом, телевизором и кондиционером — для встреч, праздников и переговоров;
• банкетный зал — до 50 гостей, отдельный вход, большой LED-экран для видео и фото, открытая барная стойка и возможность превратить зал в конференц-зал.

Обе страницы заканчиваются слайдером фотографий, а на странице банкетного зала кнопка «Запрос на банкет» открывает форму заявки.

Галерея, новости и 3D-тур

Галереи собраны на плагине Photo Gallery и разбиты на три темы — «Наше меню», «Наша атмосфера» и «Наш интерьер». На общей странице галереи видно по подборке из каждой темы, а у каждой темы есть своя страница с полным набором фото. Новые снимки ресторан добавляет сам из админки, без правки кода.

Новости — это записи WordPress: они выводятся слайдером на главной и открываются отдельной страницей статьи. 3D-тур вынесен в шапку и в блок «О ресторане» и открывается своей страницей — гость может заглянуть в зал ещё до визита.

Формы и всплывающее окно сертификатов

Заявки на банкет и на подарочный сертификат я собрал на Contact Form 7 и сделал короткими и одинаковыми по логике: имя, email и телефон с маской +380, пояснение, что менеджер перезвонит, и пометка о согласии на обработку персональных данных. Маска не даёт ввести номер в неверном формате, поэтому менеджер получает телефон, по которому можно сразу звонить. После отправки гость видит сообщение «Отправлено» — понятно, что заявка ушла.

Для сертификатов сделано всплывающее окно: изображение сертификата, описание и кнопка «Купить», которая ведёт к форме заявки. Гость не уходит со страницы, на которой заинтересовался подарком.

WordPress, две языковые версии и мобильная версия

Сайт работает на WordPress с собственной темой, написанной под этот проект. Тексты страниц, новости и фото ресторан меняет из админки, а внешний вид остаётся цельным, потому что все блоки — слайдеры, коллажи, карточки, формы — заложены в шаблоны темы.

• две языковые версии — украинская и английская, переключатель ENG | UKR в шапке на каждой странице;
• полная мобильная версия: главная, о ресторане, VIP-комната, банкетный зал, 3D-тур, новости, галерея, формы, сообщение «Отправлено», всплывающее окно сертификатов и меню перестроены под смартфон;
• на телефоне блоки выстраиваются в одну колонку, коллажи и слайдеры сохраняются, а кнопки и контакты остаются крупными и удобными для нажатия;
• Google Site Kit — данные о посещаемости и поиске видны прямо в консоли WordPress.

Каким должен быть сайт ресторана

Сайт ресторана продаёт не блюда, а впечатление: атмосферу, вкус и повод прийти. Поэтому, создавая сайт для ресторана, я опираюсь на несколько принципов:

• фотографии блюд и залов — главный контент, текст их только дополняет;
• бронь столика видна с первого экрана и доступна в пару касаний;
• банкеты, VIP-залы и сертификаты — отдельные страницы с заявкой, а не строка в меню;
• часы работы, адрес, телефон и карта всегда под рукой;
• мобильная версия продумана отдельно — ресторан чаще всего ищут со смартфона, по дороге или перед выходом из дома;
• новости и галерею ресторан обновляет сам, без разработчика.

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

Создание сайта и интернет-магазина Sparta Garage — кастомные мотоциклы и тюнинг Mercedes-Benz

3 октября, 2026

О мастерской и задаче

Sparta Garage строит кастомные мотоциклы под ключ: клиент озвучивает идею, согласует бюджет, а дальше наблюдает, как в металле и пластике появляется мотоцикл его мечты. Кроме кастома у гаража есть автомобильное направление — услуги для легковых и грузовых машин и интернет-магазин тюнинга и электроники для Mercedes-Benz.

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

Структура: мастерская и магазин под одним брендом

Проект состоит из двух частей с общим брендом и разной задачей:

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

Мостом между частями служит баннер магазина на главной: граффити-логотип Sparta Garage, надпись STORE и кнопка «Перейти». Шапка сайта мастерской — логотип, меню из шести разделов и соцсети; подвал — FAQ, поддержка, оплата, доставка, возвраты и контакты.

Главная страница мастерской

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

• блок о мастерской: постройка под ключ без выхода за рамки бюджета, соблюдение сроков, качество работ и материалов, возможность приехать и проконтролировать ход работ;
• полноэкранный слайдер проектов с подписями, стрелками и точками;
• блок «Почему стоит выбрать Sparta Garage?» с текстом и четырьмя карточками преимуществ на иконках;
• баннер интернет-магазина и подвал.

Проекты, услуги и контакты

Проекты — главный аргумент мастерской. Страница проектов открывается крупным заголовком и фото, дальше идут блоки о постройке на заказ и механике мотоциклов, видео с плеером, сетка проектов с датами и кнопкой для подгрузки, а в конце — форма с именем и email.

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

Страница услуг открывается фото сварки и крупным заголовком, ниже — сетка карточек направлений гаража, тёмных и светлых вперемешку, с фото: б/у запчасти для грузовых авто из Европы, магазин аксессуаров, замена масла для легковых авто, автомойка для грузовых и легковых машин. В контактах — блок о мастерской с цитатой, призыв начать проект, телефоны, адрес, почта, форма сообщения и карта.

Интернет-магазин: каталог и подбор по автомобилю

Магазин — это тюнинг и дооснащение автомобилей Mercedes-Benz: чип-тюнинг блоков управления, кодирование, электроника, экстерьер, интерьер и повышение мощности. Для автозапчастей главный вопрос покупателя — подойдёт ли деталь к его машине, поэтому подбор по автомобилю стоит на первом месте.

• баннер модели и строка «Ваш автомобиль» со ссылкой «Изменить» — машина задаётся один раз;
• вкладки категорий: все товары, ECU-тюнинг, кодирование, электроника, экстерьер, интерьер, повышение мощности;
• для каждой категории — ряд карточек с фото, названием, ценой «от» и метками совместимых моделей, плюс ссылка «Смотреть все»;
• в шапке магазина — личный кабинет, партнёрство, контакты, выбор валюты и корзина со счётчиком товаров.

Карточка товара: опции, Stage 1/2 и совместимость

Карточка товара собирает всё, что нужно для решения о покупке, на одном экране:

• галерея с миниатюрами, стрелками и увеличением фото;
• метки моделей, цена, количество, выпадающий список опций и выбор цвета;
• дополнения с ценами — отмечаются галочками и добавляются к заказу;
• кнопки «В корзину» и «В список желаний», ссылка назад в категорию;
• вкладки описания, характеристик и совместимости, ниже — слайдер похожих товаров.

Для прошивок сделан отдельный вид карточки: переключатель Stage 1 / Stage 2 меняет показатели мощности и крутящего момента после тюнинга, график и список необходимых деталей. Таблица совместимости перечисляет модели, кузова и годы выпуска — покупатель проверяет свою машину ещё до заказа.

Услуги как товар и корзина

Услуги гаража в магазине продаются так же, как детали. В карточке услуги покупатель выбирает модель и год автомобиля, видит длительность работ и интервал обслуживания, отмечает дополнения с ценами и нажимает «В корзину». Новинки помечены меткой «New», длинные описания раскрываются по кнопке «Показать ещё», а мини-корзина со счётчиком сразу показывает, что заказ пополнился, и ведёт к его просмотру.

Так деталь и работа по её установке оказываются в одной корзине: не нужно отдельно звонить, чтобы записаться на сервис.

Что важно в сайте мастерской и магазина тюнинга

Сайт мастерской продаёт доверие к рукам мастера, а магазин — уверенность, что деталь подойдёт. Поэтому в таких проектах я опираюсь на несколько принципов:

• готовые работы — главный контент: крупные фото, видео и история каждого проекта;
• понятный путь от вдохновения к заявке на постройку;
• подбор по автомобилю и метки совместимости на каждой карточке товара;
• опции и дополнения с ценами прямо в карточке, без звонка менеджеру;
• услуги, которые можно заказать вместе с деталью;
• единый бренд, даже если у частей сайта разные задачи: тёмная витрина мастерской и светлый функциональный магазин.

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

Создание сайта стоматологической клиники — услуги, запись на приём и вход для пациентов

3 октября, 2026

О проекте и задаче

Заказчик — стоматологическая клиника общего профиля: лечение каналов, эстетическая стоматология, импланты, отбеливание, профилактика и экстренная помощь. Клинике нужен был многостраничный сайт на английском, который делает три вещи: записывает на приём, помогает срочным пациентам и подробно рассказывает об услугах и команде.

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

Структура сайта

Сайт состоит из семи страниц, и у каждой своя роль:

• Home — главная: запись, экстренная линия, услуги, преимущества, специалисты, отзывы и новости;
• Services — все направления клиники в карточках;
• Blogs — новости и статьи клиники;
• About — рассказ о клинике;
• Contact — контакты;
• Login и Sign up — вход и регистрация пациента.

Меню в шапке одинаковое на всех страницах. Справа на главной и в услугах — кнопка «Book Now» и аватар пользователя, а на странице входа на их месте ссылки «Login» и «Sign up».

Главная: запись на приём и экстренная линия

Первый экран начинается с заголовка «Get Ready For Your Best Ever Dental Experience!» и короткого обещания о качестве материалов. Под ним — два действия: синяя кнопка «Book an appointment» и кнопка с телефонной трубкой и номером «Dental 24H Emergency». Пациент, который планирует визит, записывается, а тот, у кого болит прямо сейчас, сразу видит, куда звонить.

Ниже — карточка с отзывом специалиста и значком LinkedIn, а справа — фото улыбающегося стоматолога в обрамлении пунктирных орбит с иконками зубов. Сразу за первым экраном — три карточки главных услуг: лечение каналов, эстетическая стоматология и импланты. У каждой иконка, короткое пояснение и ссылка «Learn More».

Новые пациенты, преимущества и видео

Блок «We’re Welcoming New Patients» обращается к тем, кто ещё не был в клинике. В нём форма с одним полем — номер телефона — и кнопкой «Submit»: оставить контакт можно прямо на главной, не переходя на страницу контактов.

Дальше — блок «Why Choose…» с фото специалиста за работой и коротким списком причин выбрать клинику:

• сильная команда стоматологов;
• современные стоматологические услуги;
• скидки на лечение;
• быстрая и простая запись.

Под списком — снова «Book an appointment». Такая же кнопка стоит в блоке «Leave Your Worries At The Door…» с крупным фото улыбки: запись всегда в одном взгляде. Завершает эту часть видеоблок — широкий кадр из кабинета с кнопкой воспроизведения и кнопкой «Watch Playlist».

Специалисты, отзывы и новости

Блок «Meet Our Specialists» — слайдер команды: фото врача, имя и специализация на полупрозрачной плашке, значок LinkedIn в углу карточки. В команде ортодонт, эндодонтист, пародонтолог и детский стоматолог, а стрелки под слайдером листают карточки.

«Our Happy Clients» — второй слайдер, с отзывами пациентов: аватар, имя, оценка в пять звёзд и текст отзыва. Блок «News & Articles» выводит свежие материалы и кнопку «View All», которая ведёт в блог.

Страница услуг

Страница Services собирает все направления клиники в сетку из шести карточек:

• Root Canal Treatment — лечение каналов;
• Cosmetic Dentist — эстетическая стоматология;
• Dental Implants — импланты;
• Teeth Whitening — отбеливание;
• Emergency Dentistry — экстренная помощь, когда нужно остановить кровотечение или снять сильную боль;
• Prevention — профилактика и уход за полостью рта.

Карточки устроены так же, как на главной: иконка в голубом круге, заголовок, пара строк описания и «Learn More». Пациент быстро находит нужное, а новые услуги добавляются той же карточкой.

Вход и регистрация пациента

Страница входа разделена на две половины. Слева — фото врача за работой и цитата со стрелками для переключения. Справа — форма «Welcome Back»:

• кнопка «Log in with Google» — вход через Google-аккаунт;
• поля e-mail и пароля с иконками;
• флажок «Remember Me» и ссылка на восстановление пароля;
• кнопка «Log in» и ссылка «Create an account» для тех, у кого ещё нет аккаунта.

Регистрация — отдельная страница Sign up: на неё ведут кнопка в шапке и ссылка под формой входа.

Мобильная версия

На смартфоне страницы перестраиваются в одну колонку. Шапка сжимается до логотипа и квадратной кнопки меню. На первом экране сначала заголовок и текст, затем кнопка «Get Started» и экстренный номер в одном ряду, ниже — карточка отзыва и фото стоматолога. Главное — запись и телефон — пациент видит сразу, без прокрутки.

Каким должен быть сайт стоматологической клиники

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

• запись — на первом экране и повторяется по ходу страницы;
• экстренный номер — отдельно и заметно: у человека с острой болью нет времени искать контакты;
• услуги — короткими карточками с понятными названиями и ссылкой на подробности;
• лица врачей и отзывы пациентов вызывают больше доверия, чем общие слова о качестве;
• блог с новостями и статьями отвечает на частые вопросы и помогает сайту в поиске;
• мобильная версия — не уменьшенная копия: на телефоне кнопки крупные, а номер под рукой.

Если вашей клинике нужен сайт, который записывает пациентов, — я сделаю его под ключ: страницы, формы записи, слайдеры, вход для пациентов и адаптивную вёрстку.

Создание лендинга стоматологии «Мій Стоматолог» об имплантации MegaGen

3 октября, 2026

О клинике и задаче

«Мій Стоматолог» — украинская стоматологическая клиника: лечение зубов, хирургия, диагностика и имплантация. Под имплантацию на системе MegaGen AO клинике понадобилась отдельная страница с одним сценарием: человек узнаёт об услуге, убеждается, что клинике можно доверять, и оставляет номер телефона.

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

Первый экран и акции

На первом экране — всё, ради чего пациент зашёл: крупный заголовок «Імплантація зубів системою MegaGen AO», кнопка «Отримати консультацію» и цена. Старая цена 12 000 грн зачёркнута, рядом — актуальная 10 000 грн: человек сразу понимает порядок суммы и видит выгоду. Ниже — три цифры клиники: 15+ лет работы с имплантами, 1000+ довольных клиентов и 20+ врачей.

Справа — фото врача за работой с «рассыпающимся» краем из квадратов и голубым блоком позади. Главные кнопки сайта — с градиентом из розового и голубого, цветов логотипа: он повторяется по всей странице, и глаз быстро учится находить действие. В шапке, кроме меню, — две заметные кнопки «Напишите нам» и «Позвоните нам».

Сразу за первым экраном идут «Акційні пропозиції»: карточки с фото, вертикальной цветной меткой направления — лечение, хирургия, диагностика, — списком того, что входит в услугу, новой ценой и зачёркнутой старой.

Экспертная статья, которой можно доверять

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

• дата публикации — видно, что информация актуальна;
• автор с должностью — лечащий врач, а не безымянный копирайтер;
• рецензент — второй специалист, который проверил текст;
• плашка «Важливо!» с предупреждением, что статья не заменяет консультацию врача и не служит для постановки диагноза.

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

Форма консультации и каталог имплантов

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

Блок «Імпланти в наявності» помогает разобраться, что именно предлагает клиника. Карточки AnyOne и AnyRidge чередуют фото слева и справа и устроены одинаково:

• название системы и короткое описание;
• список преимуществ — малоинвазивная хирургия, высокая первичная стабильность, сокращённый период реабилитации;
• ссылка «Читати більше», которая раскрывает полный текст;
• кнопка «Прослухати текст» — описание можно послушать, а не читать;
• цена «від 12 000 грн» и кнопка «Записатися на прийом».

Работы «до и после», врачи и прайс

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

Дальше — «Чому обирають нас?»: четыре карточки с фото про опыт в имплантации, качественные протезы, сопровождение в период адаптации и сложные клинические случаи. Блок «Наші лікарі» — карусель со стрелками: фото, имя, специализация, иконки Instagram и Facebook и кнопка перехода к профилю врача. Под каруселью — кнопка «Задати питання лікарю».

Прайс «Вартість послуг» разложен в две колонки строк «услуга — цена». Активная строка подсвечивается синим, а вместо цены в ней появляется стрелка — сразу понятно, что по строке можно перейти.

Вопросы об имплантации и дополнительные услуги

Блок «Питання про імплантацію» — аккордеон в две колонки: вопросы видны сразу, ответ раскрывается по клику, и длинный список не растягивает страницу. Здесь закрываются типичные страхи — например, приживётся ли имплант: в ответе приведены данные MegaGen о приживаемости 98,9%.

Завершают лендинг «Додаткові послуги» — те же карточки с меткой направления, что и в акциях: пломбирование, удаление кисты, панорамный снимок. Повторяющийся формат делает страницу цельной, а новые услуги добавляются той же карточкой.

Адаптивная вёрстка под ПК, планшет и смартфон

Лендинг сверстан адаптивно: на широком мониторе, планшете и смартфоне каждый блок перестраивается под ширину экрана, а не просто сжимается. На смартфоне первый экран идёт в другом порядке: заголовок, цена и кнопка консультации стоят выше фотографии, цифры клиники выстраиваются в столбик, а меню прячется в бургер. Справа в шапке — синяя кнопка звонка: с телефона позвонить в клинику проще, чем писать.

Каким должен быть лендинг стоматологии

Сайт клиники продаёт не услугу, а доверие. Человек доверяет незнакомым людям своё здоровье и немалые деньги, поэтому каждая деталь работает либо на спокойствие, либо против него. Когда я делаю медицинские лендинги, опираюсь на несколько правил:

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

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

Создание сайта онлайн-школы кондитерского искусства ART DESSERT by Maria Tulchevska

3 октября, 2026

О заказчике и задаче

Мария Тульчевская — шеф-кондитер и основательница Art Dessert LLC. Её компания в Калифорнии делает европейские десерты и выпечку, сотрудничает с местными кофейнями и проводит профессиональные кондитерские занятия онлайн и вживую по всем США. Лично Мария обучила больше двухсот учеников.

Для онлайн-школы ART DESSERT by Maria Tulchevska нужен был сайт на английском, который продаёт курсы — по эклерам и по торту. Главный из них — «Contemporary Éclairs»: научиться делать эклеры профессионального уровня можно даже без опыта выпечки. Моя задача — сделать сайт, в котором этому обещанию веришь с первого взгляда: сверстать главную и страницу курса, собрать интерактивные блоки и мобильную версию.

Как выглядит сайт: десерты, графит и золото

Эклеры Марии сами по себе выглядят как украшения: зеркальная глазурь, сусальное золото, ягоды. Поэтому сайт не спорит с ними декором — главную роль играют фотографии:

• десерты на чистом белом фоне — крупно, с разрезами начинки и отражениями;
• три цвета: графитовый, песочно-золотой и белый — как витрина дорогой кондитерской;
• тонкий контрастный шрифт заголовков в верхнем регистре и курсив для подписей вроде «online course»;
• кнопки-«таблетки» с градиентом от чёрного к золоту — единый знак действия на всех страницах;
• тонкие контуры шестиугольников как сквозной мотив — от блоков страницы курса до логотипа в подвале.

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

Главная: автор и курсы с первого экрана

Меню в шапке разделено логотипом-монограммой: слева — «Éclairs», «Cake» и «Your instructor», справа — «Events», «Professional blog» и Instagram. На первом экране — портрет Марии в кондитерском кителе, название школы, короткое обещание научить делать эклеры профессионального уровня без опыта выпечки и две кнопки — «éclairs» и «cake». Посетитель выбирает курс, ещё не прокрутив страницу.

Ниже курсы подаются шахматными блоками: фото десертов и тёмная плашка с подписью «online course», названием, описанием и кнопкой «more about course».

Знакомство с автором

В онлайн-обучении покупают не только программу, но и преподавателя. Блок «Meet Your Instructor» открывается крупной цитатой Марии о том, сколько времени и сил ушло на мастерство кондитера. Рядом с её портретом — золотая плашка с тремя фактами: компания Art Dessert LLC, сотрудничество с кофейнями Калифорнии, которые продают выпечку по рецептам Марии, и больше двухсот учеников.

Дальше — полоса разрезанных эклеров с отражением на всю ширину и блок миссии: Мария с эклером в руках и цитата о том, что ей в радость делиться знаниями и делать современные кондитерские техники доступными каждому. Кнопка «more about Maria Tulchevska» ведёт к подробному рассказу об авторе, а тёмный подвал собирает меню, логотип и контакты.

Страница курса: от «запись открыта» до видео

Страница «Contemporary Éclairs» построена как продающая история. Первый экран — название курса, надпись «Enrollment is now open», обещание результата и кнопка «get started» рядом с крупным фото эклера с малиной в разрезе.

Следом — тёмный блок «About»: приглашение в ART DESSERT и пояснение, что курс создан профессиональным шеф-кондитером для людей с любым уровнем подготовки. Рядом — фото эклеров с круглой кнопкой «play» для видео о курсе: оно показывает работу нагляднее любого текста.

Четыре преимущества сформулированы как ответы на сомнения покупателя:

• «Video tutorials» — Мария простыми словами проводит через весь процесс;
• «For people of all skill levels» — от новичков до опытных кондитеров;
• «Solid information foundation» — объяснение роли каждого ингредиента;
• «Support via chat» — преподаватель на связи в чате, если что-то не получается.

Что получит ученик: результаты, цифры, программа

Блок «What You Get» — семь пронумерованных пунктов с золотыми цифрами и тонкими разделителями: секреты декора и зеркальных глазурей, заварное тесто и ровные эклеры без трещин, современные десерты на основе французских техник, хранение эклеров до двух недель, 7 начинок и 3 глазури, теория за каждым рецептом и то, как ингредиенты работают вместе.

Затем — золотая полоса с тремя цифрами курса:

• 6/9 месяцев — доступ к курсу 24/7 в зависимости от тарифа;
• 50+ страниц для печати — рецепты, техники, приёмы и заметки кондитера;
• 36 уроков в высоком качестве с подробными инструкциями.

После крупного макрокадра эклера идёт «Course Syllabus» — программа по модулям на тёмном фоне: вводный урок, теория за рецептами, а затем практика — заварное тесто, начинки, глазури и подготовка декора. Модули раскрываются по клику на «плюс», поэтому программа видна целиком и не растягивает страницу.

Мобильная версия

На телефоне шапка сжимается до бургера, монограммы и ссылки «get started» — кнопка записи стоит прямо в шапке. Первый экран страницы курса перестроен в колонку: название, фото эклера, кнопка и только потом текст. Шахматные блоки складываются друг под друга, сохраняя чередование тёмного и светлого, а кнопка «play» ложится поверх фото на стыке секций.

Каким должен быть сайт онлайн-школы

Онлайн-курс нельзя попробовать на вкус до покупки. Человек решает по сайту: можно ли доверять автору, получится ли у него и стоит ли курс своих денег. Поэтому, когда я делаю сайты для онлайн-школ, опираюсь на несколько правил:

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

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

Создание лендинга производителя EVA-ковриков EVACraftAuto с конструктором и подбором по авто

3 октября, 2026

О компании и задаче

EVACraftAuto — украинский производитель автомобильных ковриков из EVA-материала. Компания работает во Львове и отправляет заказы по всей Украине. Коврики делают по оригинальным лекалам для каждой модели авто за 1–2 дня, а к ним можно заказать подпятники разной формы и шильды с логотипом марки. На сайте компания пишет о 3500+ моделях авто и 150+ вариантах исполнения для одной машины.

EVA-коврик подбирают под конкретный автомобиль, поэтому у покупателя всегда три вопроса: есть ли лекала для моей машины, сколько стоит комплект и как он будет смотреться в салоне. Лендинг должен отвечать на них без звонка, поэтому в центре страницы — подбор по автомобилю и конструктор коврика. Остальные блоки идут в том порядке, в каком возникают вопросы: почему вам можно доверять, сколько это стоит, есть ли моя машина, каким будет мой коврик и что произойдёт после заказа.

Шапка, первый экран и аргументы производителя

Шапка — белая панель со скруглёнными краями поверх первого экрана: логотип, меню «Каталог», «Переваги», «Наші роботи», «Співпраця», «Контакти», «FAQ», иконки Telegram и Viber и жёлтая кнопка с номером телефона. Под ней — затемнённое фото EVA-коврика в салоне, заголовок «Автомобільні килимки нового покоління», название бренда жёлтым и подпись «Виробник автомобільних килимків із EVA матеріалу». Кнопка одна — «Конструктор»: она сразу ведёт к самому полезному инструменту страницы.

Дальше лендинг отвечает на вопрос «почему именно вы». Блок «Чому варто обрати EVACraftAuto?» — шесть карточек с жёлтыми иконками:

• индивидуальные лекала для любого авто;
• материал, который не впитывает влагу, устойчив к износу и легко моется;
• изготовление на заказ за 1–2 дня;
• больше 13 цветов основы и 15 вариантов цвета канта;
• подпятники разной формы и шильды с логотипом авто;
• доставка по всей Украине.

За ним — блок «Про нас» на тёмном фото салона с тремя пронумерованными фотокарточками «Чому ми?» и инфографика «Перевага автокилимків EvaCraftAuto»: вокруг комплекта ковриков по дуге расставлены семь преимуществ — от экологичного материала и оригинальных креплений до 3500+ моделей авто и лазерного кроя. Тёмные графитовые секции чередуются на странице со светлыми кремовыми, а жёлтый цвет логотипа выделяет кнопки, цены и выбранные варианты.

Шесть комплектов с ценами

Блок «Комплекти» отвечает на вопрос о цене ещё до разговора с менеджером. В каждой из шести карточек — цена в гривнах в жёлтой рамке, вид автомобиля сверху, где жёлтым подсвечены коврики из комплекта, круглая вставка с фактурой материала и список состава:

• Basic — 1 350 грн: любой ряд легкового авто;
• Багажник — 1 590 грн: коврик в багажник и система липучек;
• Comfort — 1 990 грн: два передних и два задних коврика, перемычка на тоннель, оригинальные крепления и липучки к полу;
• Style — 2 900 грн: всё из Comfort, плюс четыре шильдика с логотипом авто и металлический подпятник;
• Comfort Plus — 3 430 грн: состав Comfort и коврик в багажник;
• Elite — 4 340 грн: передние и задние коврики, перемычка, крепления и липучки, четыре шильдика и металлический подпятник.

Схема машины работает быстрее любого списка: покупатель за секунду видит, какие зоны салона закроет комплект.

Подбор по марке, модели и году

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

• марка — выпадающий список «Оберіть бренд» и сетка плиток с логотипами и названиями марок; сначала видны четыре ряда, остальные открывает кнопка «Показати більше»;
• модель и год выпуска — два выпадающих списка в одну строку;
• кнопка «Очистити пошук» сбрасывает выбор, если нужно подобрать коврики для другой машины.

Логотип узнаётся быстрее, чем название в длинном списке, поэтому сетка марок — самый короткий путь к своей машине. А тех, кто свою модель не нашёл, страница не отпускает: сразу после конструктора стоит тёмная карточка «Не знайшли свій автомобіль?» с полями «Телефон», «Ім’я» и «Опис», кнопкой «Надіслати» и машиной под жёлтым чехлом.

Конструктор EVA-ковриков

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

Справа — карточки с параметрами, и рядом с названием каждого в жёлтой рамке выводится текущий выбор: «Перший, другий ряди», «Ромб», «Жовтий», «Чорний». Покупатель выбирает:

• комплектацию — четыре иконки автомобиля сверху с подсвеченными рядами и ценой: 1 350, 1 990, 3 430 и 1 590 грн;
• тип материала — образцы фактур в кружках, в том числе «ромб» и «соты»;
• цвет коврика — 13 образцов с фактурой материала;
• цвет канта — отдельная палитра в два ряда;
• шильд с маркой авто — изображение шильда и выпадающий список;
• подпятник — один из трёх на выбор: EVA (бесплатно), квадратный или фигурный.

Внизу — блок «Загальна сума» с итогом и жёлтая кнопка «Замовити комплект». Покупатель собирает коврик сам, видит, что получится, и приходит к заказу с готовым решением — менеджеру остаётся уточнить детали по телефону.

Этапы работы, фото работ и «до/после»

Заказать проще, когда понятно, что будет дальше, и видны настоящие работы:

• «Як ми працюємо?» — четыре карточки со стрелками: выбор комплекта или заявка на сайте, звонок менеджера в течение 30 минут, изготовление за 1–2 рабочих дня и доставка Новой Почтой;
• «Наші роботи» — слайдер фото ковриков в салонах с подписями моделей, от BMW X5 до Mazda CX-5; активный слайд шире соседних, листать можно стрелками и точками;
• «До/після» — слайдер сравнения: жёлтый ползунок делит кадр на старый текстильный коврик и новый EVA-коврик в том же салоне, а стрелки и точки переключают пары фото;
• «Бажаєте придбати килимки вигідно?» — форма персонального предложения на фоне тёмного салона: телефон и имя.

Частые вопросы и контакты

Последние сомнения перед заказом лендинг снимает в блоке «Поширені запитання» — аккордеоне из семи вопросов: гарантия, что делать, если коврики не подошли, срок службы, запах, гипоаллергенность EVA, прочность материала и как укладывать коврик. Ответ раскрывается по жёлтой кнопке с плюсом. Например, о запахе: новые коврики могут пахнуть, но запах выветривается за 2–3 дня и не возвращается даже в жару.

В конце страницы — контакты: телефон, город и почта на фоне карты мира и форма с полями «Ім’я», «Пошта», «Тема», «Повідомлення» и кнопкой «Надіслати повідомлення».

Что важно в сайте производителя автоковриков

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

• подбор по автомобилю на виду — покупатель сначала проверяет, есть ли его машина, и только потом смотрит на цены;
• цены видны сразу — готовые комплекты снимают вопрос «сколько это стоит»;
• есть конструктор — человек сам собирает коврик и видит результат, а не описывает его словами в мессенджере;
• фото настоящих работ подписаны моделями авто — владелец Tucson ищет глазами свой Tucson;
• сравнение «до/после» показывает разницу с текстильным ковриком нагляднее любого описания;
• для нестандартных случаев есть короткая форма — «не нашёл свою машину» не должно означать «ушёл к конкуренту».

Если вы производите автоаксессуары или другой товар «под размер», продумайте заранее, какие параметры выбирает покупатель, в каком порядке и что он должен увидеть до заказа. Тогда лендинг с конструктором и подбором по авто станет не витриной, а инструментом продаж.

Создание корпоративного сайта-каталога для производителя металлоконструкций UNI METAL technology

3 октября, 2026

О компании и задаче

«Унітехнології» (бренд UNI METAL technology) — украинская компания, которая работает с 2009 года. Начинала она с инженерного обеспечения промышленных и гражданских объектов, а сегодня берёт на себя комплексные решения в проектировании и строительстве. У компании собственные производственные мощности, современное оборудование и полный цикл: от анализа задачи заказчика до сдачи объекта в эксплуатацию со всем пакетом сопроводительной документации. Главный принцип, который компания выносит на сайт, — один исполнитель на всех этапах и один ответственный за результат.

Ассортимент у такого производителя очень широкий: щитовая продукция, стеллажное оборудование, сэндвич-панели, промышленные трапы, воздуховоды, вентилируемые фасады, оборудование для бомбоубежищ, двери, ворота и ограждения, мебель и дымоходы из нержавеющей стали. К этому добавляются услуги металлообработки на заказ. Задача сайта — разложить всё это так, чтобы инженер, снабженец или застройщик быстро нашёл своё направление и без лишних шагов связался с компанией.

Шапка, меню и навигация

Шапка общая для всех страниц и работает как короткая визитка компании. В верхней строке — логотип UNI METAL technology, телефон, почта и адрес с подписями «Подзвонити нам», «Написати нам», «Завітати до нас», а справа — тёмная кнопка «Замовити дзвінок». Ниже — основное меню:

• «Компанія» — выпадающий список с разделами «Про нас», «Вакансії» и «Блог»;
• «Каталог продукції» — выпадающее меню со всеми 16 направлениями, от щитовой продукции до вентиляционного оборудования;
• «Послуги» — выпадающий список услуг металлообработки;
• «Галерея» и «Контакти»;
• иконки YouTube, LinkedIn, Facebook, TikTok и Instagram;
• переключатель языка с флагом.

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

Главная: от слайдера до формы консультации

Главная выстроена как путь промышленного заказчика от знакомства до заявки:

• слайдер первого экрана на пять слайдов со счётчиком «01 — 05» и стрелками; на первом — «Будівельні технології» и обещание комплексно выполнить требования заказчика;
• «Продукція» — сетка карточек с фото и круглой кнопкой-стрелкой и кнопка «Вся продукція»;
• «Послуги компанії» — слайдер на графитовом фоне со стрелками и точками: аргонодуговая и лазерная сварка, гибка металла, обработка на координатно-пробивном станке и другие услуги;
• «Переваги компанії» — четыре плитки с иконками: растём с 2009 года, собственные производственные мощности, современное оборудование, полный цикл производства;
• «Співпраця з нами» — работа «под ключ», сопроводительная документация и комплексные решения для промышленных, общественных и гражданских объектов, лабораторий и исследовательских комплексов, объектов энергетики;
• «З нами легко взаємодіяти» — четыре шага на вертикальной линии: обращение и консультация, коммерческое предложение в оговорённый срок, техническое задание или документация по запросу, договор и выполнение;
• форма «Отримайте консультацію зараз» с полями «Ім’я» и «Телефон».

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

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

Каталог — сердце сайта. Каждое из 16 направлений получило свою страницу, и все они устроены одинаково — так заказчику проще сравнивать и не теряться. Возьмём страницу «Навісні вентильовані фасади»:

• первый экран разделён на зелёную половину с заголовком и хлебными крошками и большое фото фасада;
• плитка «Технічна документація» с иконкой PDF — документы можно скачать прямо со страницы;
• подробный текст о продукте: из каких панелей делают фасады, где их применяют, гарантия на продукцию и монтаж, индивидуальный расчёт стоимости;
• блок «Вигоди та переваги» — эстетика, энергоэффективность, стойкость к погоде и защита стен;
• кнопка «Більше прикладів продукції»;
• форма консультации, слайдер «Відеоматеріал» с роликами о производстве и блок этапов сотрудничества.

Такой шаблон работает для любого направления: щитов, стеллажей, сэндвич-панелей или дверей. Компания добавляет текст, фото, документацию и видео — и страница готова.

Услуги металлообработки

Услуги вынесены в отдельный раздел, потому что их заказывают другие клиенты и по другим запросам. Страница «Послуги» — сетка из девяти плиток с крупными фото и подписью на белой плашке со стрелкой:

• слесарные работы и порошковая покраска;
• плазменная и лазерная резка металла;
• обработка металла на координатно-пробивном станке;
• лазерная и аргонодуговая сварка;
• гибка металла и токарно-фрезерная обработка.

Фото с реальными процессами — искрами сварки, лучом лазера, гибочным прессом — сразу показывают, о какой работе идёт речь, ещё до того, как посетитель прочитает подпись.

О компании, галерея, вакансии, блог и контакты

Остальные страницы отвечают на вопросы тех, кто выбирает надёжного подрядчика или ищет работу:

• «Про нас» — блоки «Основна мета» и «Про компанію», полоса из четырёх преимуществ и форма консультации;
• «Галерея» — фото, разделённые на «Продукція», «Виробництво і устаткування» и «Реалізовані об’єкти»;
• «Вакансії» — карточки вакансий с ожиданиями от кандидата и задачами: инженер-технолог по программированию станков с ЧПУ, директор по персоналу, директор по продажам;
• «Блог» — лента статей с пагинацией «Перша», «Попередня», «Наступна», «Остання»;
• «Контакти» — телефон, почта, адрес, контакты менеджера по продажам и технического консультанта и форма консультации.

Палитра сайта — фирменный зелёный и графитовый с белым, крупные фото производства и строгая сетка. Такой вид подходит промышленной компании: он спокойный, деловой и не отвлекает от продукции.

Что важно в сайте производственной компании

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

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

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

Создание сайта производителя пищевых красителей YERO COLORS — каталог продукции, private label и экспорт

3 октября, 2026

О компании и задаче

YERO COLORS — торговая марка компании, основанной в Одессе 14 февраля 2019 года. Она сама производит гелевые водорастворимые красители — классические, блестящие и на натуральной основе, — красители для аэрографа, сухие блестящие и жирорастворимые красители в дропсах на какао-масле, ароматизаторы, сахарную пудру премиум-класса, мастику для моделирования, айсинг и сахарный декор «Жемчуг». Продукция сертифицирована по ISO 22000, проходит лабораторный контроль, а с 2022 года у компании собственное производство и склад в Одессе и склад в Черновцах.

Покупатели YERO COLORS — реселлеры, розничные магазины, кондитерские производства и учебные заведения, а также зарубежные дистрибьюторы. Им нужен был сайт, на котором видно весь ассортимент, есть характеристики каждого продукта, понятные условия сотрудничества и простой способ запросить образцы. Я сделал этот сайт: сверстал все страницы, собрал вкладки, слайдеры, всплывающие окна и формы и адаптировал его под смартфоны.

Структура сайта

Меню повторяет путь оптового покупателя — от знакомства с брендом до заказа:

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

Шапка общая для всех страниц: логотип, меню, переключатель языков УКР/ENG, иконки Facebook и Instagram и кнопка «Заказать звонок». Внутренние страницы начинаются с хлебных крошек и крупного заголовка, а внизу каждой страницы — форма подписки и подвал с меню, адресом, телефоном и почтой.

Главная страница: бренд, преимущества и новинки

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

Преимущества собраны в список с разделителями — каждое отвечает на вопрос закупщика:

• сертификация ISO 22000 и международные стандарты;
• качество на уровне европейских аналогов;
• обновление линейки по трендам;
• собственные производственные мощности и современные технологии;
• лабораторный контроль;
• образцы продукции по запросу.

Ниже — блок «Новинки»: три крупные карточки, например новые оттенки гелевых красителей и линейка GEM YERO COLORS с девятью «драгоценными» цветами от аметиста до бронзы. При наведении название карточки и стрелка подсвечиваются фирменным синим. Под карточками — широкая кнопка «Перейти в каталог». У главной несколько состояний: обычное, с открытым окном «Заказать звонок» (имя и телефон) и с экраном благодарности после отправки.

Каталог и карточка продукта

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

Карточка продукта собирает всё, что закупщик обычно уточняет у менеджера. На примере AIRBRUSH SPARKLE — жидких блестящих красителей для аэрографа:

• крупное фото флакона и цветные плашки с другими продуктами линейки;
• описание: для чего продукт, на каких поверхностях работает, как подготовить его к использованию;
• кнопка «Скачать каталог» — полный ассортимент в одном файле;
• состав списком и отметка, что продукт не содержит компонентов животного происхождения;
• срок годности (18 месяцев) и фасовка (пластиковый флакон 70 г) крупным контурным шрифтом;
• слайдер «Сферы применения» со стрелками — упаковки и продукты в деле.

Справа на каталоге закреплена яркая вертикальная кнопка «Запрос образцов продукции»: она остаётся на экране при прокрутке, и попросить образец можно в любой момент, не теряя карточку из виду.

Private label: продукция под маркой клиента

Для крупных клиентов у YERO COLORS есть отдельное предложение — выпуск продукции под собственной маркой. На сайте ему отведён блок Private Label с двумя направлениями: разработка собственного продукта под заказ и выпуск продукции под маркой клиента на мощностях компании. Каждое направление оформлено строкой со стрелкой, а рядом — фото упаковок: сахарный жемчуг, мастика в коробках, гелевый краситель. Так клиент сразу видит, как может выглядеть его собственная линейка.

Раздел «Компания», условия и новости

• «Компания» — четыре вкладки: профиль с полным списком продукции и историей, собственное производство, сертификация (что такое ISO 22000 и как компания контролирует качество) и экспорт. Вертикальная надпись ™ YERO COLORS и фото наборов красителей держат фирменный стиль.
• «Сотрудничество» — образцы и сертификаты по запросу, описания и фото для интернет-магазинов партнёров, кратность упаковке, заказ через личный кабинет, отправка в день оплаты до 14:00 и бонусы товаром от 3 до 15 % в зависимости от месячной выборки.
• Новости — лента с датой и кнопкой «Подробнее», страница всех новостей и шаблон отдельной новости с блоком «Другие новости»; например, новость о поиске дистрибьюторов в Европе, Америке, Азии и Африке.
• Контакты — адрес производственно-складского комплекса, телефон, почта и график работы.

Мобильная версия и внешний вид

Сайт сверстан адаптивно, начиная с экранов шириной 320 пикселей. На смартфоне меню прячется в выпадающую панель с переключателем языков и контактами, карточки новинок и категорий выстраиваются в одну колонку, вкладки каталога и раздела «Компания» остаются удобными для пальца, а формы подписки и заказа звонка — на своих местах.

Внешне сайт строгий: белый фон, чёрные рубленые заголовки, фирменный синий и сочные цвета самой продукции — фиолетовый, мятный, розовый, золотой. Контурные надписи ™ YERO COLORS и стрелки-указатели повторяются на всех страницах, поэтому при вёрстке я собрал повторяющиеся элементы — шапку, вкладки, списки с маркерами, карточки, формы — как общие блоки.

Каким должен быть сайт производителя пищевой продукции

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

• каталог, разбитый на понятные категории, а не одна длинная лента товаров;
• карточка продукта с составом, фасовкой, сроком годности и сферами применения;
• сертификаты и рассказ о производстве — главные аргументы для B2B;
• прозрачные условия: минимальная партия, отгрузка, бонусы, документы;
• запрос образцов и обратный звонок в один клик с любой страницы;
• английская версия для зарубежных партнёров и удобная мобильная версия.

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

Создание сайта FALX LTD Metal Roofing — монтаж металлической кровли в Онтарио (Канада)

3 октября, 2026

О компании и задаче

FALX LTD Metal Roofing — канадская компания из Онтарио, которая продаёт и монтирует металлическую кровлю. Бригады работают в Торонто и соседних городах — от Брамптона и Вона до Гамильтона и Лондона. Услуги компании: монтаж металлической кровли под заказ, замена старой крыши, установка софитов, мансардных окон и световых труб, замена вентиляционных проходок.

Клиент компании — владелец частного дома. Он меняет крышу раз в несколько десятилетий, сравнивает нескольких подрядчиков и боится двух вещей: переплатить и получить плохой монтаж. Компании нужен был англоязычный сайт, который отвечает на эти опасения и приводит человека к звонку или заявке на бесплатный расчёт. Я сделал такой сайт: всё предложение компании собрано на главной странице.

Структура главной: от предложения к заявке

Главная выстроена как разговор с покупателем кровли. Каждый блок отвечает на следующий вопрос, который возникает у человека, и почти каждый заканчивается кнопкой заявки:

• первый экран — кто вы и как быстро узнать цену;
• о компании — можно ли вам доверять;
• преимущества и рассказ о металлочерепице — что это за материал;
• «Why metal roof» — чем металл лучше привычной битумной черепицы;
• слайдер работ — как это выглядит на настоящих домах;
• форма с финансированием — что делать, если всю сумму сразу не потянуть;
• отзывы, принципы работы и партнёры — что говорят клиенты и как устроена работа;
• зоны обслуживания — приедут ли мастера в мой город.

Внешне сайт строгий: белый и светло-серый фон, чёрные блоки и красный акцент из логотипа FALX. Крупные заголовки в верхнем регистре продублированы бледной надписью на фоне, а красная вертикальная черта рядом с заголовком помогает быстро находить начало каждого раздела при прокрутке.

Шапка и первый экран: расчёт за минуту

В шапке — логотип, меню с выпадающими пунктами Company и Products, разделы Services, Gallery и Contact, номер телефона с иконкой и кнопка «Get estimate» в красной рамке. Телефон крупный и заметный: многие домовладельцы предпочитают позвонить, а не писать.

Первый экран — затемнённое фото дома с тёмной металлической кровлей, диагональные красные полосы фирменного стиля, название компании и короткий текст о том, что FALX работает не только в Торонто, но и по всей Канаде. Справа — форма «Get a free quote in 1 minute» всего из двух полей, имени и телефона, с красной кнопкой «Get a quote». Чем короче форма, тем охотнее её заполняют, а детали менеджер уточнит по телефону.

Под текстом — значки площадок, где у компании есть профиль и отзывы: HomeStars, BBB, Houzz и другие. Для канадского домовладельца это привычные знаки доверия, и они стоят рядом с формой не случайно: именно в этот момент человек решает, оставлять ли свой номер.

Справа на экране закреплена красная кнопка «Call now» с иконкой трубки. Она видна в любом месте страницы, поэтому позвонить можно в ту же секунду, когда созрело решение.

Доверие: видео, гарантии и преимущества

После первого экрана идут слоган компании о комфорте клиента и два блока с видео о работе FALX. В первом — короткий ответ на вопрос «Planning to change your roof?» и кнопка «Get free quote». Во втором — «Trusted Metal Roofing Company» со списком того, что важно домовладельцу:

• страхование ответственности на 5 миллионов;
• обученные бригады с опытом не меньше года;
• покрытие WSIB и допуск к работе на высоте у всех монтажников;
• надёжные и энергоэффективные кровельные системы.

Дальше — три преимущества на чёрном фоне с красными иконками: разумная цена без скрытых платежей, быстрые сроки монтажа и срок службы с гарантией производителя 50 лет. Завершает раздел полноэкранное фото крыши и рассказ о металлочерепице, похожей на керамику или сланец: из каких слоёв она состоит (сталь, цинк, антикоррозийное покрытие, грунт, цветной полимер) и в каких популярных цветах её предлагает компания — Terracotta, Colonial Red, Slate Grey, Chocolate Brown и Graphite Black.

«Why metal roof»: материал, объяснённый по пунктам

Многие домовладельцы в Канаде привыкли к битумной черепице и не понимают, зачем платить за металл. Поэтому на главной есть отдельный раздел «Why metal roof» — четыре пронумерованных пункта, каждый с заголовком и подробным текстом:

• энергоэффективность — экономия 30–35 % на отоплении и охлаждении дома;
• долговечность — металлическая кровля служит 40–70 лет и выдерживает ветер до 140 миль в час, тогда как обычную черепицу меняют через 7–10 лет;
• пожаробезопасность — металл не искрит и не загорается;
• экологичность — от 25 до 95 % переработанного сырья, полная переработка в конце срока службы и монтаж поверх старой черепицы без лишнего мусора.

Пункты с номерами 01–04 и тонкими линиями-разделителями читаются как спокойный справочник, а не как реклама. Это важно: человек, который сравнивает материалы, скорее доверится объяснению, чем лозунгу.

Работы, финансирование и отзывы

Блок «Toronto houses after metal roofing installation» — слайдер фотографий домов после монтажа на чёрном фоне, со стрелками и кнопкой «See our work». Сразу под ним — форма «You can get new roof today» с пометкой «5-year financing available»: вместе с партнёром Home Trust Company компания предлагает домовладельцам финансирование на срок до пяти лет. Форма снова короткая — имя, телефон и кнопка «Get a quote».

Затем — «What customers say»: слайдер карточек с отзывами из Google, с городом клиента и точками навигации. После отзывов — принципы работы FALX: современные технологии и материалы, профессиональное оборудование, опытные сотрудники, высокий темп работ, умеренные цены и индивидуальный подход к каждому клиенту.

Партнёры, города и подвал

Блок «Our partners» рассказывает о совместной работе с DryMax Waterproofing — компанией, которая отвечает за гидроизоляцию кровли. Для покупателя это ещё один довод в пользу того, что крыша будет защищена от протечек.

Раздел «Service areas» на чёрном фоне перечисляет 12 городов: Миссиссога, Торонто, Брамптон, Вон, Ричмонд-Хилл, Аврора, Ньюмаркет, Кесвик, Гамильтон, Лондон, Маркем и Гуэлф. Каждая строка оформлена как «Metal roof installation in …»: посетитель сразу находит свой город, а у сайта появляется основа для страниц под локальные запросы. Завершают страницу красная полоса со слоганом компании и подвал — услуги, цвета кровли, разделы о компании, блоге и отзывах, контакты и соцсети.

Что важно в сайте кровельной компании

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

• короткий путь к заявке — форма на первом экране, телефон в шапке и кнопка звонка, которая всегда под рукой;
• доказательства надёжности — страхование, допуски, гарантия производителя, рейтинги на известных площадках;
• фотографии реальных домов, а не картинки из фотобанка;
• понятное объяснение материала: срок службы, экономия, уход;
• ответ на вопрос о деньгах — честная цена без скрытых платежей и возможность финансирования;
• отзывы клиентов с привязкой к городу;
• список зон обслуживания для локального поиска.

Отдельно стоит продумать локальное SEO. Кровельщиков ищут по запросам вида «монтаж металлической кровли» плюс название города, и сайт, где есть перечень городов и под каждый можно сделать свою страницу, проще продвигать в Google в своём регионе.

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

Создание интернет-магазина профессиональной косметики Fillers Shop — пилинг PRX-T33 и средства WIQO

3 октября, 2026

Задача: продавать профессиональную косметику без консультанта рядом

Fillers Shop продаёт косметику бренда WIQO и инновационный пилинг PRX-T33 — средства, которые раньше в основном покупали косметологи для работы в кабинете. Теперь их всё чаще берут и для домашнего ухода: женщины и мужчины, подростки с проблемной кожей, специалисты, которым нужен надёжный поставщик. Магазин обещает оригинальную продукцию по доступным ценам, а сайт должен был это обещание показать.

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

Главная: от первого экрана к каталогу и консультации

Первый экран посвящён главному товару — пилингу PRX-T33. Слева заголовок, короткий текст о том, что средство восстанавливает кожу, разглаживает морщины, уменьшает пигментацию, следы акне и растяжки, и четыре значка с фактами о процедуре: 3–5 сеансов, 30 минут на процедуру, без периода восстановления, результат виден сразу. Справа — крупное фото процедуры, под текстом — кнопка «Buy».

Дальше главная идёт в таком порядке:

• каталог «WIQO product» — восемь карточек товара с кнопкой «Show more» для остальных;
• блок «Results» — фото до и после процедуры и текст о том, как меняется кожа;
• аккордеон частых вопросов о пилинге PRX-T33;
• форма бесплатной консультации по средствам WIQO и PRX-T33 — имя, телефон и кнопка отправки;
• блок «About» о магазине и подвал с меню, страницами доставки, контактов и политики конфиденциальности.

В шапке всегда под рукой меню, строка поиска по товарам и корзина с выпадающим списком.

Каталог и карточки товаров

Карточка в каталоге простая: фото на белом фоне, название, цена и кнопка «Add to cart». Товар добавляется в корзину прямо с главной, без перехода на отдельную страницу, — это удобно тем, кто уже знает, что ему нужно, например косметологам, которые докупают привычные средства.

Страница товара собрана так, чтобы решение можно было принять на одном экране:

• хлебные крошки и галерея фото с переключением точками;
• название и четыре главных эффекта средства — увлажнение, меньше мелких морщин, более плотная и гладкая кожа, быстрее обновление клеток;
• цена со старой ценой и три ступени «from 1 / from 2 / from 3» — при покупке нескольких упаковок цена за штуку ниже;
• счётчик количества и кнопка «Buy now»;
• строка о гарантии возврата денег в течение 90 дней;
• описание товара и блок «Featured Products» с рекомендуемыми средствами внизу страницы.

Рейтинг и отзывы прямо в карточке

Для косметики отзывы — главный аргумент, поэтому они стоят на странице товара, а не на отдельной странице. Слева — средняя оценка и распределение отзывов по звёздам полосками от пяти до одной. Справа — сами отзывы: имя покупателя, отметка проверенной покупки, оценка, заголовок, текст, кнопки «Share» и «Comments» и вопрос «Was this review helpful?». Под отзывом может отвечать сам магазин — такой ответ виден покупателю и показывает, что за товаром кто-то стоит.

Оформление заказа и быстрые способы купить

Страница оформления — одна форма «Where should we ship?»: имя, фамилия, адрес доставки, индекс, город, штат, e-mail для чека и телефон для курьера. Галочка «Billing Address is same as Shipping Address» избавляет от повторного ввода адреса, рядом — сводка заказа и оплата. Под формой — напоминание, что данные защищены и зашифрованы, и блок гарантии возврата за 90 дней.

Не каждому хочется заполнять адрес, поэтому на сайте есть ещё три пути к покупке:

• «Buy in one click» — всплывающее окно с одним полем телефона;
• «Call me» — заказ обратного звонка;
• форма обратной связи с выбором, как удобнее получить ответ: e-mail или сообщение;
• форма бесплатной консультации на главной.

Внизу экрана при первом визите появляется баннер cookie с кнопками «Configure», «Decline» и «Accept all»: необязательные cookie включаются только с согласия посетителя.

Что важно в интернет-магазине профессиональной косметики

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

• объяснять действие средства простыми словами и короткими фактами: сколько процедур, сколько времени, нужен ли период восстановления;
• показывать результат — фото «до/после» убеждают сильнее любых описаний;
• держать отзывы и рейтинг рядом с ценой, а не прятать их;
• снимать страх покупки гарантией возврата и понятными условиями доставки;
• давать скидку от количества — косметологи и постоянные покупатели берут средства упаковками;
• оставлять путь к человеку: консультация и обратный звонок нужны тем, кто сомневается.

Магазин, который подходит и косметологу, и новому покупателю

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

Создание сайта ландшафтной компании TOPIAR с анимированной главной и портфолио работ

3 октября, 2026

О компании и задаче

TOPIAR — ландшафтная компания из Киева. Она проектирует участки, поставляет и высаживает растения, озеленяет крыши и делает ландшафтное освещение. На сайте компания выступает вместе с общественной организацией «Щаслива країна», которая продвигает простую идею: среда вокруг дома влияет на здоровье, настроение и качество жизни, а продуманный участок — это не роскошь, а нормальные условия для жизни. О себе компания говорит цифрами: 13 лет на украинском рынке, 150 клиентов по всей стране, 120 специалистов в команде и 500 реализованных проектов.

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

Первый экран и миссия

Шапка — тёмная полоса с логотипом TOPIAR и меню: «Головна», «Портфоліо», «Проєкти», «Блог», «Про нас», «Документи», «Контакти». Под ней — фото современного дома с террасой и подсветкой, а в центре кадра круглая «линза» с названием организации и кнопкой «Зв’язатись з нами». По сторонам от неё — две подписи с тонкими линиями-выносками: тип организации и её главная мысль о том, как важно менять среду вокруг себя. Первый экран анимирован, а на внутренних страницах свою анимацию получает и верхний блок с заголовком.

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

Услуги, которые раскрываются при наведении

Блок «Послуги» — широкая лента из четырёх фото, разделённых тонкими вертикальными линиями. Внизу каждой колонки — название направления:

• ландшафтное проектирование;
• поставка и высадка растений;
• озеленение крыш;
• ландшафтное освещение участка.

Главная особенность блока — поведение при наведении. Стоит навести курсор на название услуги, как фото меняется, а поверх появляются описание направления и кнопка перехода. Например, о ландшафтном освещении сказано, что специалисты компании проектируют, собирают и монтируют его в Киеве, в том числе на больших участках и в нестандартных задачах. Так в одном блоке помещаются четыре коротких рассказа, а страница остаётся лёгкой. Под лентой — ссылка «Всі проєкти» на страницу всех услуг.

О компании, цифры и блог

Блок «Про нас» стоит на светлом фоне с тонким орнаментом: широкое фото цветущего сада, а поверх него полупрозрачная карточка с текстом о команде энтузиастов, которые хотят сделать жизненное пространство украинцев удобнее, и кнопкой «Зв’язатись з нами». За ним — четыре цифры компании крупным зелёным шрифтом: 13 лет на рынке, 150 клиентов, 120 специалистов и 500 проектов. Цифры анимированы и оживают, когда блок появляется на экране.

Дальше — тёмный блок «Блог»: три карточки статей с фото, заголовком, датой и анонсом и ссылка «Всі статті». После него — зелёная карточка «Замовити безкоштовну консультацію» с кнопкой на фоне светлых силуэтов трав. Этот блок призыва тоже анимирован и повторяется на внутренних страницах, поэтому дорога к заявке всегда рядом.

Портфолио, команда и отзывы

Портфолио на главной — тёмная секция с тремя проектами: два кадра в верхнем ряду и широкий снимок под ними, у каждого — название объекта на светлой плашке. Блок анимирован, а ссылка «Всі роботи» ведёт на страницу портфолио. Следом — «Наша команда»: слайдер с фотографиями сотрудников в фирменной форме, именами и должностями, который листается стрелками.

Отзывы клиентов стоят на фото аллеи из подстриженных кустов: две полупрозрачные карточки с иконкой кавычек, текстом и именем автора. Завершает главную блок «Зв’яжіться з нами» — зелёная карточка с полями «Прізвище», «Телефон», «Email» и «Повідомлення», отметкой согласия на обработку персональных данных и чёрной кнопкой. Форма, как и отзывы, появляется с анимацией.

Услуги и портфолио с фильтром

Внутренние страницы начинаются с тёмного верхнего блока с заголовком, коротким вступлением и той же линейной графикой. Страница услуг — сетка карточек с фото и названием. Страница «Наші роботи» устроена так же, но над сеткой стоит фильтр по типам объектов:

• все работы;
• коммерческие объекты;
• жилые комплексы;
• частные дома.

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

Карточка объекта рассказывает о проекте подробно: блок «Про об’єкт», команда, которая над ним работала, площадь, статус и описание хода работ. Карточка услуги открывается большим фото с названием, дальше идут вступление и список с иконками, три преимущества — «100% виконання побажань клієнта», «Завжди доступність онлайн», «Поліпшується якість життя» — и раздел с описанием, где фото и текст чередуются в шахматном порядке.

Блог, «Про нас», контакты и политика

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

Что важно в сайте ландшафтной компании

Ландшафтные услуги дорогие и долгие, и клиент выбирает подрядчика очень придирчиво. По опыту этого проекта сайт такой компании работает, когда:

• фото работ крупные — сад, терраса или зелёная крыша должны занимать экран, а не прятаться в миниатюрах;
• портфолио разбито по типам объектов — владельцу дома не нужно листать коммерческие проекты, а застройщику — частные сады;
• в карточке объекта есть площадь, статус и команда — это делает работу настоящей и проверяемой;
• направления описаны коротко, а подробности открываются по запросу — как в блоке услуг с раскрытием при наведении;
• анимации подчёркивают содержание, а не мешают ему: цифры, отзывы и форма оживают по мере прокрутки;
• заявка на консультацию доступна с каждой страницы и занимает четыре поля.

Если вы занимаетесь благоустройством, озеленением или строительством, начните сайт с вопроса, что клиент хочет увидеть до звонка. Чаще всего это готовые объекты, понятные услуги и люди, которые будут работать на его участке. Тогда сайт станет не визиткой, а витриной, которая приводит заявки.

Разработка интернет-магазина LuxCap — модульные кунги для пикапов с подбором по марке и модели

3 октября, 2026

Задача: 542 кунга и короткий путь к своему

LuxCap — продавец кунгов (их ещё называют хардтопами или канопи) для пикапов из Львова. Бренд работает в премиум-сегменте: модульные кунги собираются из нескольких частей, закрываются на замки, на многие модели можно поставить палатку или экспедиционный багажник. Компания — авторизованный дилер и обещает установку за 2 часа.

Ассортимент делится на три линейки, и у каждой своя логика:

• Classic — глухие боковые окна, максимум прочности и защиты груза;
• Sport — боковые стеклянные окна со сдвижным механизмом, быстрый доступ к багажу;
• City — все окна стеклянные, переднее окно сдвижное.

Каждая линейка выпускается под десятки пикапов, поэтому в каталоге 542 товара. Главная задача сайта — чтобы владелец Ford Ranger или Chevrolet Colorado не листал всё подряд, а сразу попадал в свою модель.

Главная страница: бренд и три линейки

Главную я сверстал как витрину бренда, которая ведёт в каталог:

• слайдер первого экрана на три слайда с крупными фото пикапов и кнопкой «Узнать больше»;
• четыре преимущества с иконками: гарантия качества, быстрая доставка, установка за 2 часа, авторизованный дилер;
• текст о бренде для поиска и изображение модульной конструкции кунга;
• секции Classic, Sport и City — у каждой описание, фото-галерея со слайдером миниатюр и кнопка «Узнать больше», ведущая в каталог линейки.

Шапка при прокрутке прилипает к верху экрана, так что меню и телефон всегда под рукой, а на длинных страницах появляется кнопка «наверх».

Каталог: линейка → марка → модель → кунг

Каталог построен на WooCommerce, но привычную сетку товаров я заменил пошаговым подбором. Сначала покупатель открывает линейку и видит плитку логотипов 11 марок: Chevrolet, Dodge/RAM, Ford, GMC, Isuzu, Jeep, Mitsubishi, Nissan, SsangYong, Toyota и Volkswagen. Затем — страница марки с фото моделей: у Ford, например, это F-150, F-250, F-350, Ranger и Raptor. И только на третьем шаге — товары под выбранную модель, разделённые по годам выпуска и длине кузова.

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

Карточка товара: все ответы до звонка

Покупателя кунга интересуют прежде всего технические детали — подойдёт ли он к машине. Поэтому в карточке всё собрано на одном экране:

• галерея фото со слайдером и миниатюрами;
• артикул;
• таблица характеристик: бренд, автомобиль, серия, год выпуска, тип и длина кузова, Origin, Edition, PART NO.;
• ссылка «Больше характеристик» к полному списку;
• цена в гривнах, поле количества и кнопка «Купить сейчас»;
• описание под конкретную модель автомобиля.

Название товара тоже работает на подбор: в нём есть линейка, модель пикапа, годы выпуска и длина кузова — например, «Кунг алюминиевый LuxCap Sport для Chevrolet Colorado 2015–2022 (длина 5′ 1″)».

Заявка вместо длинного оформления

Такую покупку (Sport для Chevrolet Colorado, например, стоит 150 000 гривен) редко оплачивают картой за минуту: сначала хотят поговорить с продавцом. Поэтому кнопка «Купить сейчас» открывает всплывающее окно «Оформление заявки» — имя и телефон, без регистрации и без многошаговой формы. Менеджер перезванивает и уточняет детали.

Для тех, кто ещё выбирает, в шапке есть «Заказать звонок» — тоже во всплывающем окне. Формы работают на Contact Form 7. Классическая корзина при этом сохранена: в ней я вывел блоки «Вас может заинтересовать» и «Новинка в магазине», чтобы подсказать аксессуары и новые модели. Для полей оформления под Украину подключён Saphali Lite.

Аксессуары, центры установки и контакты

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

SEO и техническая основа

Магазин работает на WordPress 6.8 и WooCommerce 10.4 с моей темой burum. Yoast SEO отвечает за заголовки, описания и структурированную разметку, а многоуровневый каталог даёт отдельные страницы под запросы вида «кунг на Ford Ranger» или «канопи для Chevrolet Colorado». Слайдеры собраны на slick, вёрстка адаптивная: на смартфоне главная, каталог и карточка перестраиваются в одну колонку, а кнопки остаются крупными.

Каким должен быть интернет-магазин автотоваров с подбором по машине

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

• строить каталог от машины покупателя, а не от склада продавца: марка, модель, год, тип кузова;
• показывать логотипы марок и фото моделей — так ищут быстрее, чем по выпадающим спискам;
• писать совместимость прямо в названии и таблице характеристик;
• давать хлебные крошки, чтобы легко вернуться на шаг назад;
• для дорогих позиций — предлагать короткую заявку вместо полного оформления;
• сразу отвечать, где и как товар установят.

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

Найти:

Свежие записи

• Универсальное решение для ресторанов, кафе и баров в трёх исполнениях — DemoResto
• Создание многоязычного сайта-каталога акустических офисных кабин Silentbox®
• Создание сайта-каталога LuxAdapt — оборудование для адаптации авто людям с инвалидностью
• Создание сайта чип-тюнинг студии UPstage Lviv с каталогом мощности на 8 000+ двигателей
• Портал-каталог сельских усадеб для Союза сельского зелёного туризма Украины

Свежие комментарии

Архивы

• Октябрь 2026
• Июль 2026

Рубрики

• Мои работы

Мета

• Войти
• Лента записей
• Лента комментариев
• WordPress.org