design-guide

Design guide

Это не инструкция к инструменту, а памятка о вкусе. Перечитывай перед началом сложной задачи и перед сдачей.

Иерархия

В любом макете глаз должен сразу понять, что главное, что второстепенное, что третьестепенное. Если три элемента борются за внимание — макет не работает.

Способы создать иерархию (в порядке силы):

1. Размер — самое мощное. 3× разница, не 1.2×.
2. Положение — верх и левая часть «громче».
3. Контраст к фону — тёмное на светлом.
4. Плотность вокруг — окружи воздухом то, что должно греметь.
5. Цвет — слабее размера. Используй последним.

Если у тебя в макете три заголовка одного размера — два из них не заголовки, а что-то другое. Переподпиши.

Ритм и негативное пространство

• Большие пустоты — это не «пусто», это «важно». Не заполняй ватой.
• Группируй связанное близко, отделяй несвязанное далеко. Закон близости.
• Между секциями зазор должен быть больше, чем между элементами внутри секции. В 2-3 раза.
• Не центрируй всё. Левый край — друг.

Плотность

• Низкая плотность — для манифестов, питчей, вступлений. Один тезис на экран.
• Средняя — рабочий уровень для большинства слайдов и страниц.
• Высокая — для дашбордов, отчётов, документации. Сетка обязательна.

Внутри одного артефакта плотность должна быть консистентной. Если первая страница пустая, а вторая забита — связи не будет.

Типографика

• Один шрифт по умолчанию. Два максимум.
• Шкала размеров кратна 1.25–1.5. Не «13, 14, 15, 16» — выбери 12 / 16 / 20 / 28 / 40.
• Высота строки 1.4–1.6 для тела, 1.0–1.1 для крупных заголовков.
• Длина строки 50–75 символов для тела. Выше — глаз не находит начало следующей строки.
• Tabular-nums для цифр в таблицах и метриках. Без этого «1,234» и «9,876» прыгают.
• text-wrap: pretty — бесплатный апгрейд читаемости.

Цвет

• 3 цвета — пол. 5 — потолок. 7+ — переделывай.
• Один акцент на макет. Два — если есть semantic-разделение (positive/negative).
• Никогда не используй чистый чёрный (#000) на чистом белом (#fff). Сдвинь оба на 5–10%.
• Контраст текста ≥ 4.5:1. Замерь, не на глаз.
• Серые делай тонированными в сторону твоего акцента. «Холодный серый» в тёплой палитре читается как чужой.

Копирайт

Текст — это часть дизайна. Каждое слово на экране — твоя ответственность.

• Заголовки — глаголы и обещания, а не категории. «Получите ответ за 30 секунд» лучше, чем «Скорость».
• Кнопки — действия от первого лица. «Сохранить» лучше, чем «Save changes». «Скачать отчёт» лучше, чем «Скачать».
• Ошибки — что произошло + что делать. Не «Ошибка 500».
• Числа — не больше 3 значащих цифр. «$2.4M», а не «$2,437,891.34».
• Выкинь слова: «просто», «легко», «можно», «есть возможность», «осуществить», «вопрос», «момент».

Изображения

• Не растягивай. Кропай или подставляй placeholder.
• Не круглые аватарки внутри прямоугольных карточек просто так — выглядит как stock-template.
• Full-bleed важен. Картинка от края до края — сильное решение, оставь его для одного-двух мест.
• Подписи под изображениями — мелкий моноширинный текст, не вставляй в основной поток.

Анимация

• Длительность 150–300 ms для UI-микро-движений. 600+ ms — только для больших переходов.
• Easing — не linear. Используй cubic-bezier(0.4, 0, 0.2, 1) или специфичные.
• Не анимируй всё. Если двигается всё — глаз не знает, на что смотреть.
• Не повторяй loop-анимации на статичной странице. Это раздражает.
• Уважай prefers-reduced-motion.

Адаптивность

• Mobile-first даже в десктоп-макетах. Сначала проверь, что узкая колонка работает.
• Hit-targets ≥ 44×44px на тач-устройствах.
• Шрифт 16px минимум в теле на мобильных. Меньше — Safari масштабирует страницу.

Доступность

• Контраст, см. выше.
• Семантический HTML — <button> для кнопок, <a> для ссылок. Не делай интерактивный <div>.
• Alt на каждой содержательной картинке. Декоративные — alt="".
• Focus visible — никогда не убирай outline без замены.
• Не используй цвет как единственный сигнал. «Красное = ошибка» не сработает у дальтоника.

Самопроверка перед сдачей

1. Выключи в голове цвет и шрифт. Понятна ли структура только по форме?
2. Прочитай весь текст вслух. Звучит как маркетинг-болван? Перепиши.
3. Уменьши страницу до 25%. Видна ли иерархия?
4. Покажи коллеге без контекста: что это и для кого?
5. Один элемент, который ты не можешь объяснить «почему он именно такой» — убери или переделай.

Главное правило

Хороший дизайн — это много решений «нет». Тысяча «нет» на одно «да». Каждый раз, когда ты что-то добавляешь, спроси: что станет хуже, если этого не будет? Если ничего — не добавляй.