HTML-страницы: базовые правила дизайна

HTML-страницы: базовые правила дизайна

У большинства HTML-файлов уже есть шаблон. Начинайте с него:

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

Решите, какой нужна страница, до первой строки

Усилие — по запросу. Чек-лист, разовый калькулятор или внутренняя заметка получают простую аккуратную страницу: настоящая иерархия, настоящие отступы, один акцентный цвет, ничего лишнего. Лендинг, питч клиента или страница для его покупателей заслуживают собственного облика. Если сомневаетесь — простая и хорошо сделанная страница подходит всегда; перегруженный внутренний инструмент — нет.

Используйте то, что уже есть, в таком порядке: что попросил человек; затем бренд клиента (цвета логотипа, его сайт, его страницы в этом пространстве); затем фирменные токены Plank. Не придумывайте бренд клиенту, у которого он есть.

Настоящее содержание. Настоящие имена, настоящие числа в настоящих единицах (₸, кг, дни), термины самого клиента. Никакого lorem ipsum и «Название компании». Если значения нет — оставьте видимый пропуск, который человек заполнит, а не правдоподобную выдумку.

Что просмотрщик разрешает загружать

Страница, открытая в Plank, работает в закрытой рамке. Можно: встроенные <style> и <script>, шрифты Google Fonts (<link> на fonts.googleapis.com), картинки и файлы рядом по относительному пути (img/cover.png), data:-URI. Нельзя: скрипт или стиль с любого CDN (ни Tailwind, ни Chart.js, ни иконочных шрифтов), картинку из интернета, iframe чужого сайта. Заблокированный ресурс не выдаёт ошибки — страница просто выглядит не так у читателя.

Поэтому CSS и JS пишите в сам файл, графики рисуйте встроенным SVG (Charts), иконки вставляйте встроенными (Иконки), а у каждого шрифта указывайте системный запасной (font-family: Inter, system-ui, sans-serif).

Тема: три состояния, только токены

Приложение Plank сообщает просмотрщику, светлая тема или тёмная, и просмотрщик передаёт это любой странице, которая использует соглашение data-theme. Вне Plank решает настройка ОС. Поэтому каждый цвет — токен: светлые значения на :root, тёмные дважды:

:root{ --bg:#fafaf7; --surface:#ffffff; --ink:#0a0a0f; --ink-2:#3a3a42; --muted:#72706b; --line:#e5e2dc; --accent:#4f6df5; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0a0a0f; --surface:#16161d; --ink:#fafaf7; --ink-2:#d6d3cc; --muted:#918e87; --line:#2a2a35; --accent:#6f88ff; color-scheme:dark; } }
:root[data-theme="dark"]{ --bg:#0a0a0f; --surface:#16161d; --ink:#fafaf7; --ink-2:#d6d3cc; --muted:#918e87; --line:#2a2a35; --accent:#6f88ff; color-scheme:dark; }
body{ background:var(--bg); color:var(--ink); }

• Каждый токен впервые получает значение на голом :root. Цвет, заданный только в тёмном блоке, в светлой теме не существует.
• Компоненты берут цвета из токенов, никогда не из литерала: hex, который читается в одной теме, в другой обычно невидим.
• У body свой фон. Прозрачная страница показывает то, что за просмотрщиком.
• Тёмную тему проектируйте, а не инвертируйте: акцент должен читаться на обоих фонах, контраст проверяйте в обеих темах.

Вёрстка, которая переживёт телефон

• Боковое поле не меньше 16 px на любой ширине; на 390 px ничего не прокручивается вбок. Поле ставьте на body или одну внешнюю обёртку.
• Группы раскладывайте flex или grid с gap, а не отступами у каждого элемента. На узком экране строки переносятся или складываются в колонку.
• Дочерний элемент flex или grid, в котором текст, таблица или код, получает min-width:0 — тогда длинное содержимое переносится внутри него, а не расширяет страницу.
• Шире экрана могут быть только таблицы, схемы и блоки кода — каждый в своём контейнере с overflow-x:auto.
• Картинкам и блокам с aspect-ratio — max-width:100%.

Шрифт

• Одной гарнитуры достаточно (Inter); вторая — только для цифр (JetBrains Mono) или осознанно выбранная акцидентная из Google Fonts. Проверьте кириллицу и казахские буквы (ә, ғ, қ, ң, ө, ұ, ү, һ, і) в любом выбранном шрифте.
• Фиксированная шкала размеров для всей страницы, например 12 / 14 / 16 / 20 / 28 / 40 px. Основной текст 15–16 px, интерлиньяж 1,5–1,65, около 65 знаков в строке.
• Заголовки: насыщенность 600–700, чуть плотнее разрядка, text-wrap: balance. Подписи капителью — с небольшой разрядкой.
• Числа в колонках: font-variant-numeric: tabular-nums. Формат чисел: 12 450,50 ₸.

Цвет

• Нейтральные цвета выбраны, а не унаследованы: серый с лёгким тёплым или акцентным оттенком выглядит намеренным, чистый средний серый — настройкой по умолчанию.
• Один акцентный цвет — для одного действия или одной важной вещи. Не на каждом заголовке.
• Контраст текста не меньше 4,5:1 (3:1 для крупного текста, а также для линий и иконок, которые читатель должен видеть).
• Цвета статуса означают статус: зелёный, жёлтый, красный — только для «хорошо / внимание / плохо», и всегда со словом и иконкой.
• Проверенная палитра и validate_palette.py — только для серий графиков и статусов. Арт-дирекция свободна: акцентный фон слайда, тёплая палитра иллюстраций, цвет бренда клиента — в пределах правила контраста выше.
• Иконки — маленькие знаки у подписи; картинку, которая несёт мысль, рисуйте сами встроенным SVG с заливками и цветом (Иконки). Большая контурная иконка — не иллюстрация.

Признаки страницы, которую никто не проектировал

Если на странице есть что-то из этого, исправьте до передачи:

• градиентный «ореол» или пятно за первым экраном; фиолетово-синие градиенты на кнопках и заголовках;
• карточки с толстой цветной полосой слева; каждый раздел в одинаковой скруглённой карточке;
• эмодзи вместо иконок или маркеров;
• огромный первый экран со слоганом во внутреннем инструменте;
• три карточки «возможностей»: иконка, жирное слово и расплывчатая фраза;
• всё по центру; тень у каждого элемента;
• «Lorem ipsum», «Иван Иванов», «Название компании», выдуманные отзывы;
• серый текст на цветном фоне; 10 px для того, что читателю нужно прочитать;
• страница, правильная в светлой теме и сломанная в тёмной.

Проверьте — потом передавайте

Отрисуйте страницу в обеих темах и на ширине телефона и посмотрите на картинки — команды в Charts → Render it and look. Для документа запустите ещё проверку типографики и схем из Схемы → Проверка.