спецайти × Le Fabric
Салон штор / Редизайн / Перенос с Тильды / 3DLe Fabric: Редизайн корпоративного сайта салона штор: перенесли сайт с Тильды, добавили 3D и страницы под запросы из поиска
Сохранить характер.
Ответить на спрос.
Привести к дизайнеру.
Перенесли сайт с Тильды на собственный код, сохранили узнаваемый стиль и превратили сайт-визитку в рабочий инструмент: он захватывает внимание с первого экрана, отвечает на вопросы из поиска и ведёт человека к заявке.
- С Тильды
- на собственный код: старые ссылки работают
- 3D
- интерактивная штора на главной странице
- ≈20
- вариантов дизайна проверили внутри команды
- 96/100
- скорость сайта по проверке Google
Редизайн сайта компании: красивый сайт на Тильде не приносил заявок. Красивый сайт уже был.
Заявок с него не было.
Прежний сайт Le Fabric не приносил заявок.
У салона штор и интерьерного текстиля в Челябинске уже был выразительный визуальный язык: крупная типографика, журнальная вёрстка, бордовые акценты и интерьерные фотографии.
Перед спецайти стояла задача сохранить этот характер и разработать сайт, который поможет привлекать клиентов. Мы изучили спрос и конкурентов, продумали содержание страниц и переходы к обращению.
Прежний сайт был собран на конструкторе Tilda (Тильда). Новый разработали на собственном коде: с 3D-сценой на главной, отдельными страницами под вопросы покупателей и формой, которая передаёт дизайнеру выбранные условия.
Было / Tilda
Стало / Собственный код
- Исследование
- Поисковые запросы и предложение салона
- Структура и тексты
- Темы, выбор, проекты и консультация
- Дизайн
- Главная, внутренние страницы и мобильная версия
- Разработка
- 3D, взаимодействия и формы обращения
Всю работу над новым сайтом выполнила спецайти. Фотографии и материалы интерьерных проектов предоставлены Le Fabric.
Структура сайта под запросы из поиска. Сначала — что ищут люди.
Потом — страницы.
Люди ищут тип шторы и комнату. Под эти вопросы и построили сайт.
При проектировании изучили поисковые запросы в Челябинске и сайты конкурентов. Исследование помогало определить, какие потребности стоит раскрыть на сайте и как они соотносятся с предложением Le Fabric.
Вывод оказался простым: в поиске называют изделие и помещение — «римские шторы», «шторы на кухню». Поэтому у каждого типа штор и у каждой комнаты появилась своя страница.
- 7
- страниц по типам штор: от тюля до деревянных жалюзи
- 3
- страницы по комнатам: кухня, гостиная и спальня
- 12
- проектов салона в портфолио
- 7
- статей с ответами на вопросы о шторах
Тема из поиска → страница сайта
шторы на кухню
Шторы на кухнюСтолешница, мойка и плита, чек-лист окна, сравнение римских, рулонных штор и тюля, проекты салона и стоимость.
шторы в спальню
Шторы в спальнюСон, дневной свет и приватность, подбор затемнения, зазоры по краям и положение карниза.
римские шторы
Римские шторыКак открывается и крепится, ткань и механизм, сочетание с тюлем и портьерами, из чего складывается стоимость.
жалюзи
Деревянные жалюзиКак ламели управляют светом, что проверить на окне и когда нужна другая система.
Каждая страница —
самостоятельный вход.
Каждую из них проектировали как самостоятельную точку знакомства с компанией. Посетитель может начать с нужной ему темы и получить достаточно информации для дальнейшего выбора, не проходя предварительно через главную.
Рядом с объяснением решения посетитель видит, как оно выглядит в выполненной работе, и может перейти к подробностям. Опыт компании становится частью выбора покупателя.
Редизайн сайта без потери фирменного стиля. Узнаваемый Le Fabric.
Новая композиция.
Сохранили бордовый цвет, крупные заголовки и ведущую роль фотографии. Развили эти опоры в единую систему главной, направлений и портфолио.
Сравниваем способы представить работы: блок прежней главной и вход в новый раздел. Отдельные страницы проектов были и раньше.
≈20
вариантов дизайна внутри команды
Проверяли разные решения главной, внутренних страниц и переходов. Остановились на варианте, который понравился и команде, и заказчику.
Создание 3D-сайта: живая штора на главной странице. Сайт салона штор
начинается со шторы.
На главной разработали интерактивную 3D-штору: при прокрутке движется ткань, меняется свет и появляются направления салона. Её задача — создать запоминающееся первое знакомство, связанное с самим продуктом компании.
Физика, а не ролик
Ткань рассчитывается прямо в браузере как сетка связанных точек. Поэтому штора отзывается на прокрутку и движение курсора.
За окном проходит день
Пока человек листает главную, ночь сменяется днём и закатом. Вместе со светом появляются направления салона.
Только на главной
Полноэкранную 3D-сцену оставили на главной, чтобы ограничить нагрузку от сложной графики. Она подгружается после того, как страница открылась; внутренние страницы обходятся без неё.
Дизайн страниц, портфолио и мобильная версия сайта. Первое впечатление.
И всё, что за ним.
У каждой страницы своя работа: познакомить с салоном, помочь разобраться в шторах, показать решение в интерьере или подготовить разговор с дизайнером.
Направление
От интереса
к пониманию
Страница типа штор раскрывает конкретное предложение. Посетитель знакомится с решением и может продолжить выбор — с учётом своего окна.
Посмотреть римские шторы
Проект
Фотографии
с контекстом
В отдельном проекте можно рассмотреть интерьер и прочитать о текстиле. Работы помогают понять подход салона и обсудить похожую задачу.
Открыть «Дом с птицами»Мобильная версия
Тот же характер.
Другой ритм.
Крупные заголовки, фотографии, переходы и действия выстроены в вертикальную последовательность. Вот как разные страницы выглядят на телефоне.
Как получить заявки с сайта: путь от запроса до обращения. За запросом «шторы на кухню» —
конкретное окно.
Человек ещё не знает, какие шторы выбрать. Зато знает свою кухню: рядом мойка, створку часто открывают, а вечером хочется закрыть обзор с улицы. С этих обстоятельств начинается выбор.
- 01Запрос
- 02Выбор
- 03Примеры
- 04Условия в форме
Поисковая тема стала полезной страницей
«Шторы на кухню» — одна из тем, выделенных при исследовании спроса. На отдельной странице можно сравнить римскую штору, рулонную и лёгкий текстиль: когда рассматривать каждый вариант и что проверить у своего окна.
Рядом — работы «По линии свода», «Жажда белого», «Гармония цвета». Примеры связаны с объяснениями и ведут в проекты.
Необязательный шаг
Можно просто оставить телефон. А можно — три отметки об окне.
Заявку можно отправить и без чек-листа. Но три касания — где окно, как оно открывается и что важнее — избавляют от долгих расспросов: разговор с дизайнером начинается с конкретики.
Тот же приём работает на страницах спальни, рулонных штор, карнизов, пошива, прайса и ухода за шторами.
Как перенести сайт с Тильды: старые ссылки и хостинг. Сменили платформу.
Ссылки и хостинг остались.
Старые ссылки живут в поиске, на картах и в переписке дольше, чем прежний дизайн.
У страниц сайта на Tilda были свои адреса — в том числе безымянные, вроде page24085017.html. Для них составили карту соответствий: старая ссылка открывает нужную страницу нового сайта.
Адреса, которым замены нет, отвечают «страница удалена» — это понятный сигнал для поисковых систем.
lefabric.ru/dom_s_pticamilefabric.ru/hilllefabric.ru/page24085017.htmlСовременный сайт —
на обычном хостинге.
Сайт собирали и проверяли на сервере спецайти. Заказчик хотел оставить свой недорогой хостинг — обычный тариф, без аренды отдельного сервера.
Серверную часть сайта на таком хостинге не запустить. Поэтому сайт переделали: он собирается в набор готовых файлов и работает там, где работает любой простой сайт. Условие было одно — ничего не упростить и не урезать визуально.
Разработка и проверка
Сервер спецайти
Выделенный виртуальный сервер, на котором сайт собирали и проверяли до запуска.
Запуск
Хостинг заказчика
Обычный недорогой тариф, который заказчик хотел сохранить. Тот же сайт: с 3D-главной, формой и всеми страницами.
Форма осталась формой
Обработчик заявок переписали под возможности хостинга. Для посетителя ничего не изменилось: те же поля и то же подтверждение отправки.
Фотографии готовы заранее
На обычном тарифе сервер не уменьшает картинки на лету, поэтому каждый снимок заранее сохранён в 13 размерах.
Обновление с возвратом
Новая версия выкладывается в отдельную папку и включается одним переключением. Предыдущая остаётся рядом: вернуться к ней — одна команда.
Технологии: на чём сделан сайт. Из чего сшит сайт.
Простыми словами.
Собственнику не обязательно помнить названия инструментов. Но от них зависит, как быстро открывается сайт, во сколько обходится его содержание и насколько легко добавить новую страницу или функцию. Семь слоёв: сверху то, что видит посетитель, в основании — хостинг.
То, что видит посетитель
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS
Next.js и React — инструменты, на которых собран сам сайт. Страницы готовятся заранее, при сборке: человек сразу получает готовую страницу, а не ждёт, пока она соберётся у него в браузере. TypeScript проверяет код ещё до запуска: часть ошибок просто не доходит до сайта.
3D-штора с физикой ткани
- Three.js
- WebGL
- GLSL
Three.js — библиотека трёхмерной графики для браузера: ничего устанавливать не нужно. Штора — не записанный ролик: ткань рассчитывается как сетка связанных точек и отзывается на прокрутку и курсор. Небо и свет рисует шейдер — небольшая программа для видеокарты. Сцена подгружается после страницы; там, где 3D недоступно, остаётся спокойная версия без него.
Фотографии, которые не тормозят
- WebP
- Sharp
- 13 размеров
Интерьерная фотография — главный герой сайта и главный вес страницы. Каждый снимок заранее сохранён в 13 размерах в формате WebP: телефон получает маленький файл, большой монитор — крупный. Для телефона у части кадров своя обрезка, чтобы смысл фотографии не терялся на узком экране.
Заявка, которая не теряется
- PHP
- SMTP
- Защита от спама
Заявки приходят на почту салона. Форма считает заявку отправленной, только когда почтовый сервер принял письмо. Если доставка не удалась, человек видит это и получает предложение позвонить. От спама защищают скрытое поле-ловушка и ограничение частоты отправок — без капчи.
Чтобы находили в поиске и нейросетях
- Schema.org
- Sitemap
- Редиректы
- Canonical
Schema.org — подписи к странице на языке поисковиков: «это салон», «это услуга», «это вопрос и ответ», «это статья». Карта сайта подсказывает, какие страницы обойти. Редиректы ведут со старых адресов на новые. Сборка не пройдёт, если у страницы из карты сайта нет заголовка или основного адреса.
Автоматические проверки
- Playwright
- axe-core
- ESLint
Playwright открывает сайт в настоящем браузере и проходит сценарии так, как это сделал бы человек: больше ста автоматических проверок. axe-core ищет ошибки доступности — например, слабый контраст или кнопку без подписи.
Хостинг без отдельного сервера
- Статическая сборка
- .htaccess
- Shared-хостинг
Shared-хостинг — обычный недорогой тариф, где на одном сервере живут сайты многих клиентов. Сайт собирается в готовые файлы: страницы, картинки и правила для сервера — переадресации, защита, кеширование. Новая версия выкладывается в отдельную папку и включается одним переключением; предыдущая остаётся для отката.
- 96 из 100
- Скорость на телефоне
- 100 из 100
- Скорость на компьютере
- 100 из 100
- Готовность к поиску
- 100 из 100
- Доступность: контраст, подписи, управление с клавиатуры
Оценки независимой проверки скорости от Google, октябрь 2026 года.
Результат редизайна: что получил салон. Была визитка.
Стал инструмент для заявок.
Сайт перестал просто существовать в интернете. Теперь он работает на салон.
Новый Le Fabric запоминается с первого экрана, отвечает на вопросы, с которыми люди приходят из поиска, показывает опыт салона на реальных проектах и подводит к разговору с дизайнером. Выбранный вариант понравился и команде, и заказчику.
- 3D-главная, которую хочется показать другим
- Своя страница под каждый частый вопрос покупателя
- 12 проектов, которые показывают уровень салона
- Заявка приходит дизайнеру уже с вводными по окну
- Больше ста автоматических проверок берегут сайт от поломок
- Старые ссылки работают, сервер арендовать не нужно
Что проверить, когда заказываете сайт. Попросите показать
путь одного покупателя.
Особенно если выбор зависит от размеров, помещения, комплектации или способа использования. Откройте сайт с телефона и пройдите одну задачу целиком.
- 01
Вход
Понятно ли с первого экрана, что здесь есть предложение под конкретный вопрос покупателя?
- 02
Выбор
Помогает ли страница учесть условия клиента и сравнить подходящие варианты?
- 03
Примеры
Есть ли работы с похожей задачей? Объяснено ли, какое решение в них показано?
- 04
Продолжение
Понятно ли, куда перейти за подробностями или консультацией?
- 05
Обращение
Сохраняются ли выбранные условия? Видит ли человек, что передаёт компании?
А потом — обязательная
дорогая поддержка?
У спецайти сопровождение добровольное. Работа сайта Le Fabric не зависит от покупки поддержки. Последующие изменения и дополнительные задачи обсуждаются отдельно.
Этот вопрос стоит обсудить с подрядчиком вместе со структурой и дизайном: что потребуется для работы сайта и как будут устроены будущие доработки.
Вопросы о редизайне, переносе с Тильды и стоимости сайта. Коротко
о важном.
Можно ли перенести сайт с Тильды и сохранить дизайн?
Да. В проекте Le Fabric сохранили бордовый цвет, крупные заголовки и ведущую роль фотографии — сайт остался узнаваемым. Композицию, структуру и страницы разработали заново на собственном коде.
Что будет со старыми ссылками после переноса сайта?
Старые ссылки продолжают работать. Для адресов прежнего сайта составили карту соответствий: из поиска, закладок и переписки человек попадает на нужную страницу нового сайта. Например, старая ссылка на проект «Дом с птицами» открывает его новую страницу в портфолио.
Когда пора делать редизайн сайта или уходить с Тильды?
Когда сайт есть, а заявок с него нет, и когда бизнесу нужны вещи, которых нет в конструкторе: собственная 3D-сцена, отдельные страницы под десятки запросов из поиска, формы, которые передают менеджеру выбранные условия. Так было у Le Fabric.
Куда переходят с Tilda выросшие проектыСколько стоит редизайн или разработка корпоративного сайта?
Корпоративный сайт — от 150 000 ₽ без панели управления и от 250 000 ₽ с панелью, срок — от 30 рабочих дней. 3D-сцены и интерактивные инструменты оцениваются отдельно, по составу задачи.
Корпоративные сайты: состав и ценыЗачем сайту 3D и не будет ли он тормозить?
3D создаёт первое впечатление и связывает его с продуктом: у салона штор на главной живая штора. Сцену оставили только на главной и подгружают после того, как страница открылась. Страницы, на которые человек приходит из поиска за ответом, работают без неё и открываются быстро.
Какой хостинг нужен для такого сайта?
Обычный. Сайт Le Fabric работает на недорогом хостинге, который заказчик хотел сохранить: арендовать отдельный сервер не пришлось. Сайт собирается в готовые файлы, а форму обслуживает небольшой обработчик на стороне хостинга.
На чём сделан сайт Le Fabric?
Сайт собран на Next.js 16 и React 19 с TypeScript. Интерактивная 3D-штора на главной работает на Three.js. Раньше сайт был на Tilda. Заявки приходят на почту салона.
Может ли заказчик сам менять тексты и цены на сайте?
В этом проекте панели управления нет: содержание хранится вместе с кодом, правки вносит разработчик. Так решили, потому что ассортимент салона не меняется каждый день. Если сайт нужно вести самим, к нему подключают панель управления — как в кейсе ПЭТ Индустрии.
Кейс ПЭТ Индустрии: сайт с панелью управленияРазработка и редизайн корпоративного сайта под ключ. Какую задачу должен
решать ваш сайт?
Если ваш сайт тоже на Тильде и не приносит заявок, начните с задач, которые он должен решать.
Расскажите о бизнесе и о том, что хотите получить от сайта. Если сайт уже есть — пришлите ссылку. Обсудим, как помочь посетителю разобраться в предложении и перейти к обращению.
Сайт Le Fabric — дизайн и разработка спецайти. Источник фотографий и материалов интерьерных проектов — Le Fabric.