Блог

Как делать адаптивные макеты: брейкпоинты, сетки, контейнеры, правила для разработчика

Практическая схема адаптива: ключевые брейкпоинты, сетки под разные экраны и правила передачи в разработку.

UIUXLayout
Как делать адаптивные макеты: брейкпоинты, сетки, контейнеры, правила для разработчика

Основа адаптива

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

Минимальный набор брейкпоинтов

  • Mobile: до 576px.
  • Tablet: 768px+.
  • Desktop: 1200px+.

Что передавать разработчику

  • Макеты ключевых экранов для основных брейкпоинтов.
  • Правила перестройки блоков и навигации.
  • Сетку, отступы, контейнеры и ограничения ширины.
  • Поведение компонентов между точками перелома.

Ключ

Чем точнее описано поведение интерфейса между брейкпоинтами, тем меньше расхождений между макетом и кодом.

Related

Похожие статьи

Как писать UX-тексты в интерфейсе: правила микрокопирайтинга (с примерами “до/после”)

Как писать UX-тексты в интерфейсе: правила микрокопирайтинга (с примерами “до/после”)

Практические правила UX-текстов: как писать короче, яснее и дружелюбнее, чтобы снижать ошибки и повышать конверсию в интерфейсе.

Как передавать макеты разработчику: спецификация, состояния, токены, redlines, checklist

Как передавать макеты разработчику: спецификация, состояния, токены, redlines, checklist

Практичный handoff без потерь: какие состояния и спецификацию передавать, как оформить redlines и финальный checklist перед разработкой.

Как провести UX-аудит сайта самому: чек-лист из 60 пунктов + примеры ошибок

Как провести UX-аудит сайта самому: чек-лист из 60 пунктов + примеры ошибок

Практический самостоятельный UX-аудит: что проверять на сайте, как пройтись по категориям и какие типовые ошибки встречаются чаще всего.

Как оценить удобство интерфейса без тестов: эвристики Нильсена + примеры на лендинге

Как оценить удобство интерфейса без тестов: эвристики Нильсена + примеры на лендинге

Эвристический анализ интерфейса по Нильсену: как быстро найти UX-проблемы на лендинге, даже если нет доступа к юзабилити-тестам.

Как оформлять статьи, чтобы их дочитывали: структура, сканируемость, блоки, визуальные паттерны

Как оформлять статьи, чтобы их дочитывали: структура, сканируемость, блоки, визуальные паттерны

Практика оформления длинных статей: как повысить дочитываемость с помощью структуры, сканируемости и визуальных паттернов чтения.

Как правильно настроить Auto Layout в Figma: 10 типовых ошибок и как их исправить

Как правильно настроить Auto Layout в Figma: 10 типовых ошибок и как их исправить

Разбираем частые ошибки Auto Layout и практичные исправления: Hug/Fill, отступы, выравнивание, поведение при изменении контента.