Лендинг — размеры макета: готовые ширины, сетки и экспорт

Короткий ответ: для рабочей верстки лендинга проектируйте макеты в нескольких точках: desktop (обычно 1440px artboard с контейнером 1200px), tablet (768px) и mobile (375px и 320px); используйте 12‑колоночную сетку с фиксированным контейнером 1200px, экспорт изображений 1x и 2x (retina), контролируйте веса и размеры файлов — это обеспечивает совместимость дизайна с реальной версткой и хорошую скорость загрузки.

Краткое содержание

• Рекомендуемые размеры артбордов (Figma/Sketch/Photoshop)
• Контейнер, сетка и отступы
• Точки перелома (breakpoints) и резиновая верстка
• Высота «героя» и блоков
• Изображения: форматы, экспорты и ретина
• Типографика: базовый размер, межстрочный интервал, длина строки
• Размеры UI‑элементов и доступность
• Передача макета в разработку — чеклист
• SEO и производительность (как размеры влияют)
• FAQ
• Что дальше — как мы помогаем

Рекомендуемые размеры артбордов (Figma/Sketch/Photoshop)

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

• Desktop (основной): artboard 1440px — оптимален для большинства экранов и удобен для презентации заказчику. Дизайн предполагает контейнер max-width 1200px.
• Desktop (широкие экраны): 1920px — когда ожидаете много десктопного трафика и большие фоновые изображения. Полезно для hero с растянутым фоном.
• Laptop/Old Desktop: 1366px — все еще критична точка для многих пользователей.
• Tablet: 1024px и 768px — планшеты в ландшафтном и портретном положениях.
• Mobile: 375px (iPhone 8/11 Pro/12 mini схожи), 414px (iPhone Plus/Max), 360px (Android) и 320px (узкие экраны). Для простоты достаточно 375px и 320px, но если аудитория — Android, добавьте 360px/412px.

Рекомендация: в Figma создавайте артборды 1440 / 1024 / 768 / 375 / 320. Это покрывает 95% вариантов и не перегружает проект.

Контейнер, сетка и отступы

Сетка — основа точной верстки. Я использую 12‑колоночную сетку, потому что она гибкая и стандартна для CSS‑фреймворков.

Рекомендации по контейнеру и колонкам

• Максимальная ширина контейнера: 1200px — универсальное решение, которое хорошо смотрится на 1440px артборде и не делает контент слишком растянутым. Альтернатива — 1140px / 1170px в зависимости от системы сетки.
• Количество колонок: 12 колонок, gutters (межколоночные отступы) 20–24px. На мобильных применяется 4 или 6 колонок для гибкой сетки.
• Отступы по краям (padding): для контейнера — 16–24px на мобильных, 32–48px на планшетах и десктопе (внутри контейнера). Внешний отступ (margin) от окна — по центру.
• Вспомогательная сетка: создавайте baseline‑grid 4px или 8px (8px‑system) для унификации размеров, отступов и высот блоков.

Точки перелома (breakpoints) и резиновая верстка

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

Стандартный набор breakpoints

• 320px — очень узкие мобильные
• 375px — базовая мобильная точка (iPhone/популярные Android)
• 414px — широкие мобильные
• 768px — планшет (портрет)
• 1024px — планшет (альбомный) / маленькие ноутбуки
• 1280px — средние десктопы
• 1440px — стандартный десктоп artboard
• 1920px — широкие экраны

В макете фиксируйте критичные состояния (desktop/tablet/mobile). В CSS используйте min‑width медиа‑запросы («mobile first»), а в макете — описывайте поведение элементов для каждого breakpoint.

Высота «героя» и блоков

Высота hero‑блока сильно зависит от задачи: продающего лендинга, промо или презентации продукта. Практические ориентиры:

• Полноэкранный герой: vh‑основанный — 100vh, но будьте аккуратны: на мобильных 100vh может вызывать «прыжки» при появлении адресной строки. Для мобильных используйте min‑height: calc(100vh - 64px) либо фиксируйте контент по центру.
• Оптимальный «визуальный хетч»: 520–800px на desktop для сильной визуальной подачи. Для лендинга с призывом к действию достаточно 600–700px.
• Блоки контента: секции контента — 320–480px для описания преимуществ, 180–260px для карточек услуг/функций. Не делайте блоки слишком высокими — контент должен оставаться «сканируемым».

Проектируя высоту, учитывайте видимую область со CTA и первые 2–3 экранные зоны: важные действия в пределах первых 1–2 экранов повышают конверсию.

Изображения: форматы, экспорты и ретина

Изображения сильно влияют на скорость загрузки и визуал. Правильные размеры и форматы — залог баланса качества и скорости.

Форматы и рекомендации

• Формат: WebP для фото и иллюстраций — лучший компромисс качества и веса. PNG — для прозрачных логотипов/иконок, SVG — для векторных элементов (логотипы, иконки, иллюстрации в виде линий).
• Размеры для экспорта:
  • Hero фон: экспортировать в ширине 1920px (или 2560px для ultra) и в 2× (или использовать responsive srcset: 768/1200/1920).
  • Контентные изображения: не больше ширины колонки. Для контейнера 1200px макс изображение 1200px, но чаще 800–1200px.
  • Thumbnail/preview: 400–600px.
• Retina: экспортируйте 2x версии (например, 750px artboard для мобильного экспортировать как 2x — 750x2 = 1500px) и используйте srcset для адаптивной загрузки.
• Вес файлов: hero — стремитесь к <200–300 KB; контентные изображения — <150 KB; иконки (SVG) — единицы КБ. Всегда оптимизируйте и включайте lazy‑loading для дальних изображений.

Пример srcset для hero

Типографика: базовый размер, межстрочный интервал, длина строки

Типографика — не только эстетика; она влияет на читаемость и конверсию. Базовые рекомендации:

• Базовый шрифт (root): 16px — стандарт для body. Используйте rem/ems для адаптивности.
• Шкала заголовков: H1 34–40px, H2 26–30px, H3 20–24px (в зависимости от визуала). На мобильных уменьшайте на 10–20%.
• Межстрочный интервал: 1.4–1.6 для основного текста; 1.2–1.3 для заголовков.
• Длина строки: 50–75 символов — оптимально. Если строка длиннее, увеличьте боковые поля или ширину контейнера с текстом.

Размеры UI‑элементов и доступность

UX‑и‑a11y простые правила:

• Кнопки и интерактивные элементы — минимум 44–48px по высоте для удобства на сенсорных экранах.
• Формы: поля ввода 44–56px по высоте с четким фокусом и контрастными лейблами.
• Точки клика: избегайте близкого расположения элементов; расстояние между интерактивными целями минимум 8–16px.
• Контраст текста: WCAG 2.1 AA — минимум 4.5:1 для основного текста.

Передача макета в разработку — чеклист

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

1. Артборды: добавьте 3–5 основных размеров (1440/1024/768/375/320) с пометкой «design width».
2. Контейнер: укажите max‑width (например, 1200px) и внутренние отступы.
3. Сетка: экспортируйте/прописать колонку, gutter и baseline.
4. Типографика: список шрифтов, размеры в rem, межстрочные интервалы и веса.
5. Изображения: экспорт 1x и 2x, webp где возможно, указать размеры и рекомендованный вес.
6. Иконки: предоставить SVG и спрайт или набор иконок в Figma с именованием.
7. CSS‑переменные: предложите palette, spacing scale (8px system) и типографическую шкалу.
8. Интерактивы: описать состояния кнопок, форм, ховеры, анимации (время, easing).
9. Assets: сложные иллюстрации — предоставить в нескольких размерах и версиях (webp/png/svg).
10. Accessibility: ARIA‑подсказки, порядок табуляции, альтернативный текст для всех изображений.
11. Прототип: если есть — дать link на интерактивный прототип или прописать поведение в спецификации.

SEO и производительность (как размеры влияют)

SEO и UX тесно связаны с размерами макета и весом ресурсов:

• Скорость загрузки: тяжелые hero‑изображения и большие SVG могут замедлить страницу — это ухудшает Core Web Vitals и позиции в выдаче.
• Мобильная адаптация: responsive макеты и разумные breakpoints важны, т.к. Google индексирует mobile‑first.
• Структура контента: выравнивание в контейнере и логика блоков помогают удержанию и сканируемости — поведенческие факторы влияют на SEO.
• Lazy‑loading, оптимизированные форматы (WebP), правильный srcset — обязательны для хороших показателей LCP/FCP.

FAQ

1. Какие размеры макетов нужно отдавать верстальщику?

Минимум: desktop (1440px), tablet (768px) и mobile (375px). К каждому макету прилагаются спецификации: контейнер, колонки, типографика, экспорт изображений 1x/2x. Если есть большая доля Android — добавьте 360px/412px.

2. Нужно ли делать макет для 1920px?

Стоит, если ожидается много пользователей на широких экранах или если hero/фон должен покрывать всю ширину. В большинстве случаев достаточно 1440px + адаптивные фоновые изображения.

3. Как правильно экспортировать изображения для ретины?

Экспортируйте версии 1x и 2x (или 1x/1.5x/2x по необходимости). В коде используйте srcset и sizes, чтобы браузер сам выбрал подходящий вариант. Для фонов — предоставляйте несколько размеров и задавайте медиазапросы/параметры в CSS.

4. Какие отступы и сетку лучше использовать — 8px или 4px система?

8px system — универсальный и удобный вариант, он хорошо сочетается с большинством компонентов. 4px дает большую гибкость, но усложняет систему. Я рекомендую 8px для лендингов и крупных проектов.

5. Какую ширину задавать для контентного блока на desktop?

Оптимально — 680–900px для текстового контента, чтобы держать длину строки в пределах 50–75 символов. Для общих контейнеров используйте max-width 1200px.

6. Нужно ли подстраиваться под конкретные устройства (iPhone/Pixel)?

Не обязательно проектировать под каждое устройство, достаточно покрыть статистические точки: 320/360/375/414/768/1024/1440. При критичных аудиториях (например, B2C мобильный трафик) добавьте дополнительные точки.

Что дальше — как мы помогаем

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