Дорогой вид сайта держится на 5 правилах сетки, и ни одно из них не про эффекты: единый шаг отступов, честные поля от края, ритм между секциями, выравнивание по колонкам и ограничение ширины контента. Сайт на React мы собираем от 80 000 ₽ за 1-2 недели от материалов и всегда проверяем сетку до сдачи - потому что аккуратная страница продаёт, а страницу, которая не приносит обращений, мы не отдаём.
Ниже - каждое правило с конкретными значениями, типичными поломками и тем, как воздух связан с заявками. Без разговоров про «уникальные решения»: всё измеряется в пикселях.
I. Почему дорогой вид - это отступы
Когда человек говорит «сайт выглядит дорого», он почти всегда описывает две вещи: много свободного места и всё ровно выстроено. Ни градиенты, ни анимации, ни редкая гарнитура этого не заменяют. Наоборот: анимация поверх кривой сетки только подчёркивает кривизну, а в плотно забитом блоке любой эффект выглядит как реклама на рынке.
Обратная сторона тоже верна: дешёвый вид - это когда элементы прижаты друг к другу, отступы каждый раз разные, а карточки в ряду разной высоты. Глаз это считывает мгновенно, даже если человек не умеет объяснить, что именно не так. Поэтому наведение порядка в сетке - самая дешёвая правка, которая заметно поднимает доверие к сайту. В нашем проекте редизайн сайта SkyFarm (агротех, системы выращивания на искусственном интеллекте) дорогой вид держится ровно на этом: крупные фото продукта, горизонтальная карусель с боковой прокруткой и плавные появления блоков при прокрутке работают только потому, что стоят на одном шаге отступов.
Прототип главной страницы делаем бесплатно. До договора и без предоплаты вы видите, как будет выглядеть ваш сайт: первый экран, набор блоков, их порядок, отступы и логика заявки. Нравится - работаем дальше, не нравится - расходимся, вы ничего не должны. Бесплатен именно прототип главной страницы, а не весь дизайн, не вёрстка и не бесконечные правки.
II. Единый шаг отступов
Первое правило - все расстояния кратны одному шагу. Обычно берут 8 пикселей: 8, 16, 24, 32, 48, 64, 96, 128. Отступ в 13 или 27 пикселей не появляется никогда, потому что его неоткуда взять. Это звучит как формальность, но именно из-за случайных значений страница выглядит собранной на глаз.
| Где | Рабочее значение | Частая ошибка |
|---|---|---|
| Шаг сетки | 8 px и кратные | Случайные 13, 21, 27 px |
| Между секциями, десктоп | 96-160 px | 40 px - секции слипаются |
| Между секциями, телефон | 56-80 px | Те же 96 px, экран рвётся |
| Поля от края, десктоп | 40-80 px | Контент упирается в край |
| Поля от края, телефон | 16-24 px | 8 px - текст прилипает к рамке |
| Внутри карточки | 24-32 px | 12 px - содержимое душное |
Проверить это можно без дизайнера: откройте страницу и посмотрите, повторяются ли расстояния между однотипными элементами. Если заголовок отстоит от текста на 18 пикселей в одном блоке и на 26 в соседнем, шага нет, и его нужно ввести.
III. Поля и ритм между секциями
Второе правило - поля. Контент не должен упираться в край экрана: на десктопе обычно оставляют 40-80 пикселей, на телефоне 16-24. Восьмипиксельные поля на мобильном - характерная примета дешёвой вёрстки: текст буквально прилипает к рамке телефона и читается тяжело.
Третье правило - ритм. Расстояние между смысловыми блоками должно быть заметно больше, чем внутри блока. Тогда страница читается как последовательность разделов, а не как сплошная лента. Рабочее соотношение простое: между секциями - минимум вдвое больше, чем между элементами внутри секции.
- Один ритм на всю страницу. Если между секциями 120 пикселей, пусть так будет везде, а не 120, потом 70, потом 200.
- Отступ сверху и снизу секции симметричный. Иначе блок «съезжает» визуально.
- Заголовок ближе к своему тексту, чем к предыдущему блоку. Это базовая логика группировки.
- Карточки в ряду одной высоты. Разная высота из-за длины текста - самая заметная небрежность.
- Отдельно проверьте отступы вокруг форм. Форма, зажатая между блоками, читается как техническая деталь, а не как приглашение написать.
IV. Выравнивание по колонкам
Четвёртое правило - все элементы выстроены по общим вертикальным линиям. Обычно берут 12 колонок на десктопе и 4 на телефоне. Заголовок секции, текст под ним, карточки и кнопка начинаются с одной и той же линии. Именно это создаёт ощущение, что сайт делал человек, который знает, что делает.
Асимметрия при этом не запрещена - она запрещена случайная. Блок, намеренно смещённый на 3 колонки, выглядит как решение; блок, смещённый на 17 пикселей неизвестно почему, выглядит как ошибка. Хорошо это видно на проектах, где много разнородного контента: ayvazzovsky.com, сайт салона сложного окрашивания в Москве с двумя адресами, онлайн-записью, видео работ мастеров, портфолио и командой - там фото, видео и текст живут в одной сетке, поэтому страница не рассыпается.
V. Ограничение ширины контента
Пятое правило - у контента есть предел ширины. Для текстовых страниц это обычно 600-750 пикселей на колонку, для страниц с карточками - 1200-1440 пикселей на всю раскладку. На мониторе шириной 2560 пикселей страница без ограничения превращается в километровые строки, которые никто не читает.
Не путайте воздух с пустотой. Первый экран, на котором есть только огромный заголовок и больше ничего, - это не премиальность, а потеря: человек прокручивает и не понимает, что вы продаёте и сколько это стоит. Воздух должен окружать содержание, а не заменять его.
VI. Воздух и заявки: где граница
Сетка и отступы влияют на обращения косвенно, но заметно. Аккуратная страница поднимает доверие, а доверие в услугах со средним чеком - половина решения. При этом воздух не должен отодвигать ключевую информацию вниз: вилка цены, суть услуги и способ связаться должны читаться в первом же экране на телефоне, а не после трёх экранов декоративной пустоты.
- Задайте шаг 8 пикселей и приведите к нему все отступы на главной.
- Проверьте поля на телефоне: меньше 16 пикселей - увеличить.
- Выровняйте расстояния между секциями к одному значению.
- Сделайте карточки в ряду одной высоты.
- Ограничьте ширину текстовой колонки 750 пикселями.
- Убедитесь, что цена и кнопка видны без долгой прокрутки.
Наши цены для ориентира: сайт на React от 80 000 ₽ и 1-2 недели от получения материалов, перенос с конструктора от 80 000 ₽, SEO-статья от 500 ₽, 200 статей в месяц - 100 000 ₽, прокачка блога от 75 000 ₽ в месяц. Чужие расценки называем только вилками: они обычно сильно зависят от города и загрузки исполнителя. Позиции, трафик и количество заявок не гарантируем; что входит в работу, описано на странице разработка сайтов и SEO.
Если обращения нужны раньше, чем закончится переделка сайта, канал можно подключить отдельно - по модели лиды с оплатой за результат, когда вы платите за обращения, а не за процесс. Как отделять годные обращения от мусора, разобрано на странице валидная заявка.
VII. Короткий итог
Дорогой вид собирается из пяти вещей: шаг 8 пикселей, поля от 16 на телефоне и от 40 на десктопе, ритм между секциями вдвое больше внутреннего, выравнивание по общим колонкам и ограничение ширины контента. Всё это проверяется линейкой за полчаса и не требует ни эффектов, ни редких шрифтов. И если вы сомневаетесь, как это будет выглядеть на вашем проекте, посмотрите бесплатный прототип главной: он показывает и сетку, и логику заявки до того, как вы что-то заплатите.
Наши работы
Сайты, которые студия уже запустила
Четыре проекта N3MIROFF, которые можно открыть прямо сейчас и посмотреть, как они работают.
Агротех с ИИ
SkyFarm ↗
Редизайн сайта систем выращивания: первый экран с контейнерной фермой, схема работы из трёх шагов, карусель продуктов и экран приложения.
Сайт салона
ayvazzovsky.com ↗
Салон сложного окрашивания в Москве: онлайн-запись, видео работ, портфолио и команда. Переехал с Тильды на свой хостинг.
Онлайн-академия
ayvazzovsky.academy ↗
Видеоуроки колористики: каталог, посадочные страницы уроков, личный кабинет и промокоды.
Event-агентство
navsegda-event.ru ↗
НАВСЕГДА: корпоративы и конференции - услуги, кейсы, этапы работы и расчёт мероприятия.
Витрина магазина
Monkey Market ↗
Премиальная витрина магазина кроссовок с заказом в Telegram.
Хотите сайт, который выглядит дорого и приносит обращения?
Покажем бесплатный прототип главной: сетка, первый экран и логика заявки - до договора и без предоплаты.
Частые вопросы
Какой шаг сетки использовать на сайте?
Обычно 8 пикселей и кратные ему значения: 8, 16, 24, 32, 48, 64, 96. Случайные отступы вроде 13 или 27 пикселей - главная причина, по которой страница выглядит собранной на глаз.
Какие поля от края экрана делать на телефоне?
16-24 пикселя. При 8 пикселях текст прилипает к рамке и читается тяжело, а страница выглядит дёшево независимо от качества дизайна.
Сколько места оставлять между секциями?
На десктопе обычно 96-160 пикселей, на телефоне 56-80. Главное - чтобы между секциями было минимум вдвое больше, чем между элементами внутри секции.
Может ли слишком много воздуха мешать заявкам?
Да. Если суть услуги, вилка цены и способ связаться уезжают за три экрана декоративной пустоты, человек уходит раньше. Воздух должен окружать содержание, а не заменять его.
Можно ли посмотреть сетку будущего сайта до оплаты?
Да. Прототип главной страницы мы делаем бесплатно, до договора и без предоплаты: видно первый экран, блоки, отступы и логику заявки. Не понравилось - расходимся, вы ничего не должны.
Разберём ваш сайт и покажем прототип новой главной
Оставьте заявку - посмотрим сетку и отступы, а затем покажем, как будет выглядеть первый экран.
Получить целевые заявки → Telegram