Печать визиток, штампов, рекламной полиграфии, сувенирки и широкоформатной печати — сайт до сих пор доступен как демо, можно открыть и посмотреть, как выглядит готовый результат.
Вёрстка · кейс
Кейс: вёрстка сайта для московской типографии PrintMSK
Это один из проектов, которые я делал в статусе фрилансера в 2020–2022 годах, оттачивая чистую вёрстку на HTML, CSS и JS без фреймворков. Заказчик — реальная типография «Принт-МСК» в Москве, у метро Шаболовская.
Что нужно было сверстать
Задача касалась главной страницы сайта — по сути, всего сайта целиком, потому что это классический для полиграфии формат «одна длинная страница со всем ассортиментом», а не сайт с отдельными страницами каталога.
- Шапка с адресом, графиком работы и телефонами
- Блок с преимуществами типографии
- Карусель популярных товаров (визитки, листовки)
- Блок «как сделать заказ» с нумерованными шагами
- Витрина партнёров и форма заявки с загрузкой макета для печати
Свёрстано в связке с небольшой студией «АБВ сайт» — так указано в футере готового сайта. Демо-версия сайта открыта и сейчас.
Технологии — без фреймворков
HTML, CSS и JavaScript, без React или Vue: для одностраничника с таким набором блоков это осознанный выбор, а не ограничение. По репозиторию проекта — 37 коммитов, соотношение примерно HTML 48% / CSS 46,5% / JS 5,4%.
Особенности, которые запомнились
Полиграфия — тематика с обилием визуального контента: карточки товаров, иконки преимуществ, логотипы партнёров, фото продукции. Нужно было выстроить сетку так, чтобы десятки карточек не превращались в кашу, а сохраняли ритм и читаемость на любой ширине экрана.
Форма заявки — отдельная история: помимо стандартных полей (имя, email, телефон), там есть загрузка макета для печати с подсказкой «ознакомьтесь с требованиями» и чекбоксом согласия на обработку данных. Мелочь, которая на практике требует аккуратной вёрстки: drag-and-drop зона для файла должна одинаково понятно работать и с мышью, и с тапом на телефоне.
Меню и телефон в шапке — с бургер-иконкой для мобильной версии и кликабельными номерами (сразу два телефона плюс почта) — стандартный, но обязательный элемент для локального бизнеса, которому в первую очередь звонят, а не пишут через форму.
Почему я вспоминаю именно этот кейс
Не все заказы одинаково полезны для роста: одни — про красивую картинку, другие — про то, чтобы разобраться с реальными ограничениями бизнеса. У типографии — конкретный, приземлённый продукт: визитки, календари, магниты, — и сайт должен был не «вдохновлять», а быстро отвечать на вопрос «что вы печатаете и как заказать». Это другой навык вёрстки, чем эффектный сторителлинг лендинга: здесь важнее плотность информации и то, чтобы форма заявки реально заполнялась, а не просто красиво выглядела.
Нужна вёрстка каталожного сайта с формой заявки?
Расскажите про макет и набор блоков — оценю объём работы и сроки, без обязательств.
Веб-разработчик, Краснодар. Делаю сайты под ключ на Vue/Nuxt и React/Next, вёрстку по макетам из Figma и PSD, сайты на WordPress и SEO-продвижение — сам, без субподрядчиков.
Работаю с 2GIS, Яндекс.Бизнесом, самозанятость оформлена официально с 2024 года. С клиентами по всему Краснодарскому краю и удалённо по России.