Создание сайта для производителя мебели для стоматологических клиник: от структуры и макетов до вёрстки и запуска всё сделал один человек, Евгений Росляков. Сайты он делает с 2016 года. Работает самозанятым, по договору, для юрлиц оформляет закрывающие документы. Живые встречи возможны в Москве, остальное идёт удалённо.
Заказчик проектирует и выпускает мебель для кабинетов: гарнитуры со столешницами из искусственного камня, подвесные модули, тумбы, тележки. Десять лет гарантии, доставка и монтаж по всей России.
Покупает такую мебель владелец или главный врач клиники, иногда дизайнер интерьера. Для них кабинет — часть лица клиники. Сайт должен был сделать две вещи сразу: показать мебель так, чтобы её захотелось поставить у себя, и тут же дать параметры, сроки и цену, чтобы ничего не приходилось выспрашивать по телефону.
Был ещё один запрос. Главврач открывает сайт между приёмами, с телефона, и ждать загрузки не будет. Значит, быстро и без горизонтальной прокрутки.
Корзина тут не нужна: мебель делают под конкретное помещение. Сайт ведёт человека к заявке, а не к оплате. И белая мебель на сером фото выглядит дёшево, а на хорошем снимке с воздухом вокруг — дорого, так что фотографии стали отдельной заботой.
Макеты нарисовал в Figma. Мебель подана как экспонат в галерее: крупное фото гарнитура, много воздуха, чёрно-белая гамма. Единственный яркий цвет — красный из логотипа, и стоит он только в нескольких местах: на кнопке, на активной вкладке, у цены.
Обе темы, тёмную и светлую, собрал на переменных цвета. Тёмная показывает белую мебель как в вечернем шоуруме, светлая — как в дневной клинике. Поменять оттенок красного можно в одном месте, а не в сотне слоёв.
Вёрстка на Tailwind CSS. При сборке лишние стили отбрасываются, поэтому файл стилей получился маленьким. Переключатель темы в шапке написан на Javascript ES6, на модулях. Выбор запоминается в браузере, и страница при следующем визите сразу открывается в нужной теме, без вспышки.
Блок «Линейка продукции» устроен вкладками: стандарт, подвесные модули, подкатные тумбы, тележки, столы, органайзеры. Фото и характеристики меняются на месте, без перезагрузки. Под фото четыре параметра и цена, отдельно за гарнитур и за погонный метр.
Мобильные сайты здесь не запасной вариант: главврач открывает страницу с телефона, поэтому макет я начал с телефона и только потом растянул до компьютера. Вкладки листаются пальцем, форма из двух полей помещается на экран целиком.
Оптимизация скорости страницы вышла простой. Изображения переведены в WebP и подгружаются по мере прокрутки, из чужих сервисов подключена только Яндекс Метрика. HTML главной весит около 20 КБ в сжатом виде, 22 из 23 картинок в WebP.
Заголовки страниц написал так, как мебель ищут клиники, например «Мебель для стоматологического кабинета». Каждая страница может находиться в поиске сама по себе.
Владелец клиники видит на одном экране мебель, параметры, срок изготовления и цену и оставляет заявку в форме из двух полей. Менеджеру производителя реже приходится объяснять по телефону то, что и так написано на сайте. Разговор начинается с конкретного вопроса: какой кабинет и на какую дату.
Тёмную тему можно включить вечером, когда каталог смотрят дома. Белая мебель на тёмном фоне выглядит выигрышнее, а выбор остаётся за посетителем.
В работе сайт лёгкий. Страницы открываются быстро и при слабой связи, в клинике или в машине. Чужих скриптов почти нет, поэтому ломаться почти нечему.
Есть и ограничение. Линейки и цены лежат в самой разметке, а не в панели управления: поменять цену может только человек, который умеет править код. Для производителя, у которого ассортимент меняется редко, так терпимо. Если номенклатура начнёт расти, следующим шагом стоит вынести каталог в простую админку или в таблицу, из которой сайт сам подтягивает строки.
Если вам нужен лёгкий сайт-витрина для производства, где продают через заявку, а не через корзину, расскажите об этом мне в сообщении на freelance.ru. Обсудим состав работ и сроки.
