Адаптивный дизайн для дизайнеров: брейкпоинты и сетки

Коротко: что такое адаптивный дизайн

Адаптивный дизайн — это не три отдельных макета, а набор правил: как интерфейс меняется при изменении ширины экрана. Разработчик реализует именно правила, поэтому ваша задача — описать их, а не нарисовать каждую возможную ширину.

Базовый подход выглядит так:

1. Начать с мобильной версии.
2. Определить брейкпоинты — ширины, на которых раскладка перестраивается.
3. Для каждого диапазона задать сетку и поведение блоков.
4. Передать это в виде компонентов на auto layout и коротких пояснений.

Почему mobile-first

Mobile-first — значит сначала решить, что важно на самом узком экране, а потом добавлять пространство и детали.

• Узкий экран заставляет расставить приоритеты контента: что пользователь видит первым.
• Добавлять колонки при расширении проще, чем выкидывать лишнее при сужении.
• В CSS это естественный порядок: базовые стили для мобильных, затем min-width медиазапросы.

Mobile-first не означает, что десктоп второстепенный. Это порядок мышления, а не приоритет аудитории. Для внутренних систем, где работают за компьютером, иногда логичнее начинать с десктопа — но и тогда стоит проверить, как экран сжимается.

Какие брейкпоинты брать

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

Если команда использует Tailwind или другой фреймворк, проще взять его шкалу брейкпоинтов, чем придумывать свою: разработчику не придётся её переопределять.

Для широких экранов задайте максимальную ширину контейнера. Строка текста на всю ширину монитора читается плохо.

Как перестраивается раскладка

Основные паттерны, которые стоит назвать прямо в макете:

• Колонки в стопку. Три карточки в ряд становятся одной колонкой на мобильном.
• Изменение порядка. На десктопе картинка слева, на мобильном — под заголовком.
• Скрытие и сворачивание. Боковая панель превращается в выдвижное меню, фильтры — в отдельный экран.
• Горизонтальная прокрутка. Ряд карточек или вкладок прокручивается вбок, а не переносится.
• Изменение плотности. Таблица на мобильном становится списком карточек.

Отдельно продумайте типографику: заголовок 64 px на десктопе не поместится на мобильном. Задайте размеры для каждого диапазона или опишите плавное масштабирование, если команда использует clamp().

Как передать макет разработчикам

Самая частая проблема — макеты на трёх ширинах без объяснения, что происходит между ними. Что помогает:

• Auto layout и constraints в Figma. Растяните фрейм — если макет разваливается, в коде он развалится так же.
• Компоненты с вариантами для разных брейкпоинтов, а не отрисованные заново копии.
• Ключевые ширины: минимальная (например, 360 px), каждый брейкпоинт и широкий экран.
• Аннотации поведения: «колонки складываются в стопку ниже 768», «максимальная ширина контента 1200».
• Токены отступов вместо произвольных значений, чтобы отступы менялись по системе.
• Состояния на мобильном: открытое меню, клавиатура поверх формы, длинные тексты.

Хорошая проверка — показать макет разработчику до финализации и спросить, что ему непонятно между брейкпоинтами.

Частые ошибки

• Проектировать только для 375 и 1440 px, забывая про планшеты и узкие ноутбуки.
• Скрывать на мобильном важный контент вместо того, чтобы его переупорядочить.
• Делать кликабельные элементы слишком мелкими для пальца.
• Использовать фиксированную высоту блоков, из-за чего текст вылезает при переводе или увеличении шрифта.
• Не учитывать горизонтальную ориентацию и экраны с вырезами.