Дизайн-макет · Hi-fi mockup

СВАРКА24

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

01

Лендинг — desktop & mobile

Главная страница в браузерной рамке и на телефоне. Скроллится внутри.
svarka24.ru
Открыть лендинг полностью →
02

Админ-панель

Бэк-офис: входящие заявки, чаты с клиентами, прослушка голосовых, превью видео, статусы сделок.
Открыть админку полностью →
03

Палитра

Бумага, чугун, искра. Доминируют монохром и чёрно-белый контраст; оранжевый горит точечно.
Бумага#F5F1EA
Чугун#0B0B0C
Искра#FF5A1F
Жёлтое пламя#FFB020
04

Типографика

Unbounded — для заголовков и акцентов, как клейма на металле. Manrope — для текста, чисто и читаемо.
Display · Unbounded 900
Сварим что угодно из металла.
Body · Manrope 400/500
Навесы, лестницы, ворота, каркасы, реконструкция. Аккуратно, в срок, с гарантией. Выезжаем по Красноярску и краю.
05

Заметки по дизайну

Краткие пояснения логики и моментов, которые стоит сохранить при разработке.

Эстетика

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

Параллакс и анимации

Параллакс на героическом блоке (текст медленно уезжает при скролле), летящие искры, плавное появление секций при попадании в зону видимости (IntersectionObserver), микроанимации на кнопках и плитках портфолио. Всё на CSS/JS, без тяжёлых библиотек.

Чат-форма

Форма стилизована под мессенджер: пузыри сообщений, прикрепление файла, фото с камеры, запись голосового, отправка. На реальной странице будут использоваться MediaRecorder API (для аудио) и обычный input[type=file] с capture (для фото/видео с телефона). Всё, что присылает клиент, попадает в админку.

Мобайл-фёрст

Всё компонуется в одну колонку на телефоне; на десктопе раскладка расширяется в 2-4 колонки в портфолио и услугах. Touch-цели не меньше 44 px, шрифт читается с расстояния вытянутой руки.

Фотографии

В макете использованы 12 реальных рабочих фотографий, прокроп и оптимизация под web. Они работают сильнее любого стока — показывают реальные сданные объекты. Стоковые кадры со сваркой можно добавить отдельной фоновой плашкой между секциями (предусмотрено место).

Что войдёт в разработку

Лендинг — статика на HTML/CSS/JS либо Astro/Next. Админка — сервер на Node + БД (заявки, файлы, логи). Загрузка медиа через подписные URL в S3-совместимое хранилище, чтобы не нагружать сервер. Уведомления о новой заявке — в Telegram/SMS.