В первой части разбирали минимализм как стресс-тест — для бренда, продукта, контента и студии.
Допустим, тест пройден. Мысль выбрана, контент сильный, лишнее убрано. Дальше дизайнер задаёт себе следующий вопрос: как теперь это должно выглядеть, чтобы ощущалось дорого?
Небольшой эксперимент. Берём два макета с одним и тем же текстом, одним шрифтом, одной фотографией, одной палитрой. Показываем людям на полсекунды. Первый назовут «дорогим», второй — «шаблонным». Объяснить разницу толком никто не сможет.
Потому что разница не в элементах. Она в расстояниях между ними, в пропорциях, в паузах — в том, где заканчивается один блок и начинается другой, одинаково ли «дышат» соседние экраны.
Дальше разберём, из чего собирается это чувство дороговизны. Из размеров, расстояний и ритма — ещё до того, как прочитано хоть одно слово.
Воздух как материал
Для заказчика пустое место часто выглядит как неиспользованная площадь. «Здесь же можно разместить ещё один блок». Он смотрит на экран как на квартиру, в которой пропадают квадратные метры.
Дизайнер смотрит иначе. Для него пространство такой же материал, как шрифт или фотография — и здесь снова уместна аналогия с витринами из первой части: в одной сто предметов, в другой пять, сами предметы те же, разница только в воздухе вокруг них.
Что этот воздух вообще делает. Чем больше места вокруг объекта, тем он важнее — мозг считывает это быстрее, чем успевает прочитать текст рядом. Ещё воздух даёт время на восприятие, работает почти как пауза в речи: кто говорит без пауз, звучит как продавец на рынке, а кто делает паузы — звучит так, будто ему правда есть что сказать. И третье — он сигнализирует об уверенности. Тот, кто не торопится заполнить тишину, явно не боится, что его перебьют.
Есть и чисто механический момент. Мозг воспринимает расстояние как связь: что стоит рядом, то и относится друг к другу. Отступы в этом смысле не украшение, а грамматика интерфейса. Заголовок обязан быть ближе к своему тексту, чем к предыдущему блоку. Подпись должна буквально прилипать к фотографии. Расставьте расстояния неправильно — и пользователь соберёт смысл криво, сам не понимая почему. Просто почувствует: что-то не то.
Но воздух может быть и дешёвым
Самая частая ошибка начинающих минималистов — равномерная пустота. Когда все блоки отбиты друг от друга одинаковыми 80 пикселями, а ничего при этом не выделено, получается не воздушно, а рыхло. Экран разваливается на куски без всякого напряжения между ними. Пространство есть, смысла в нём нет.
В дорогом дизайне пустота нагружена работой. Она подводит взгляд к объекту. Вокруг заголовка воздуха много, потому что заголовок важен. Рядом с подписью к фото воздуха мало — подпись служит фотографии, а не живёт сама по себе.
Рабочее правило простое: воздух вокруг элемента должен быть пропорционален его значимости, а не количеству свободного места на экране.
Это, кстати, отвечает на старый страх «а не слишком ли пусто?». Пусто становится не тогда, когда воздуха много, а когда в нём нет иерархии. Там, где каждый отступ что-то значит, большой экран с одной фразой читается как уверенность. Там, где отступы случайны, тот же экран читается как недоделка.
Быстрейший способ убить акценты ‒ попытаться сделать акцент сразу на всех объектах. Договоритесь от том, ЧТО для вашего клиента имеет первостепенную важность, что на втором месте, а что менее важно. Так вы создадите сильную визуальную иерархию.
И последнее про воздух. Премиальный сайт почти никогда не расставляет отступы на глаз — за ним система: базовая единица, скажем 8 пикселей, и короткая шкала вроде 8, 16, 32, 64, 128. Нестандартный отступ в 37 пикселей чаще всего означает, что системы нет, и это считывается, даже если человек не умеет объяснить словами, что именно не так. Отступы — самое незаметное и при этом самое надёжное доказательство принципа «ничего случайного».
Масштаб: худший вариант — «почти»
Откройте сотню сайтов, которые пытаются выглядеть дорого, и у большинства найдётся общая черта: размеры почти одинаковые.
Заголовок 32 пикселя, текст 18, подзаголовок 24, подпись 16. Разница технически есть, но она не убеждает — глаз не может понять, перед ним иерархия или просто небрежность.
Дорогой дизайн решителен. Размеры либо совпадают, либо явно различны. 96 пикселей рядом с 16–18 читается как решение. 32 рядом с 24 — как нерешительность.
Крупное существует только рядом с мелким, это стоит повторить отдельно. Если на экране всё большое — ничего не большое. Сила огромного заголовка складывается именно из контраста с тихим текстом возле него, а не из собственного размера.
Поэтому сильный сайт держится на короткой типографической шкале — четыре-пять размеров на весь проект, не больше. Каждый лишний размер — потенциальная ошибка.
Контраст делается не только размером. Есть вес: тонкий крупный заголовок рядом с плотным мелким текстом. Есть цвет и яркость: главное контрастнее, второстепенное тише. Регистр и ритм букв — мелкий капс с увеличенным трекингом звучит как служебный голос. И положение: то, что стоит на оси или в начале чтения, автоматически воспринимается главным.
Чем меньше таких рычагов использует дизайнер одновременно, тем сильнее работает каждый. Поэтому премиальный сайт часто обходится одной-двумя гарнитурами и парой начертаний — не потому что так модно, а потому что так контраст не размывается.
Иерархия: в каком порядке сайт говорит
Три вопроса, на которые отвечает иерархия: что человек увидит первым, что вторым, что третьим. Если на экране нельзя ответить на них за секунду, иерархии там нет — есть просто набор элементов.
Простой тест: прищурьтесь или размойте макет. Должны проступить одно-два пятна, максимум три. Семь пятен значит семь сообщений конкурируют за внимание, и каждое громче, чем могло бы быть.
Арт-директор решает, что пользователь должен увидеть, почувствовать, понять и запомнить — а иерархия переводит эти решения в геометрию: размер, расположение, контраст, дистанцию между объектами.
С действиями та же логика. Поставить ещё одну кнопку легко. Решить, какая одна кнопка действительно нужна — трудно. На уровне иерархии это выглядит так: главный призыв к действию один, второстепенные не меньше по размеру, но тише по весу, чтобы не спорить с главным.
Иерархия работает и между экранами целиком. Один экран — одна мысль. Каждый отвечает на один вопрос интервью, и следующий не перебивает предыдущий.
Заголовок как строка стихотворения
Одна и та же фраза может выглядеть по-разному.
Дёшево:
Мы создаём современные решения для вашего бизнеса
Дорого:
Создаём решения, которые меняют восприятие бренда.
Слова почти совпадают. Разница в том, что во втором варианте строку разрезали по смыслу, а не по ширине контейнера. Когда перенос идёт по логике мысли, текст читается как утверждение. Когда он идёт там, где просто кончилось место — как справка.
Браузер не знает, где у фразы пауза. Это знает только человек. Поэтому крупные заголовки в премиальных проектах почти всегда разбирают вручную, строка за строкой.
Остальная микротипографика держится на нескольких вещах сразу. Ширина строки — комфортно 50–75 знаков, длиннее глаз устаёт, короче ритм рассыпается. Интерлиньяж у крупного заголовка плотный, около 1,0–1,1, у основного текста свободный, около 1,5–1,6 — если везде одинаковый, значит настройки просто не было. Трекинг — крупные заголовки слегка стягивают, мелкий капс раздвигают; глаз этого не называет, но считывает как качество. Висячие предлоги — однобуквенные «в», «и», «с» в конце строки убивают впечатление мгновенно, лечится неразрывными пробелами. Типографские знаки — кавычки-ёлочки, длинное тире, правильные пробелы — мелочь, которая отличает сверстанный текст от набранного кое-как. И «вдовы» — одно слово на последней строке абзаца выглядит как оборванная мысль.
Отдельный разговор про кириллицу. Русские слова в среднем длиннее английских, и макет, собранный под английский заголовок в две строки, на русском может растянуться на все пять. Поэтому премиальный макет проверяют на настоящем русском тексте, а не на lorem ipsum и не на черновике с английскими плейсхолдерами. Если кириллица в системе выглядит второсортной приставкой, премиальности не будет при любом количестве воздуха вокруг неё.
По-настоящему крутой web-дизайнер работает не только с графикой, фото, сеткой и текстами. Огромное влияние на восприятие сайта оказывает количество строк текста, переносы, гармония между абзацами и длина слов в заголовках.
Сетка
Пользователь не видит сетку. Но чувствует её отсутствие.
Левый край заголовка совпадает с левым краем текста, кнопки, фотографии. Колонки повторяются от экрана к экрану. Элементы не гуляют по странице. Каждое такое совпадение — маленькое доказательство: здесь всё под контролем. Тысяча таких совпадений и складывается в то самое ощущение дорогого продукта, которое невозможно показать пальцем, но легко почувствовать кожей.
Премиальные сайты любят асимметрию — текст на три колонки из двенадцати, остальное воздух. Но асимметрия работает только пока за ней есть сетка. Без неё та же асимметрия превращается просто в хаос.
Сетку можно нарушать, но только там, где она есть. Элемент, вышедший за привычные границы при видимом правиле — это жест. Тот же выход за границы без всякой сетки — просто ошибка. Смелая композиция всегда стоит на дисциплине, а не заменяет её собой.
Ритм: скролл как драматургия
Допустим, каждый экран собран идеально. Остаётся вопрос, как они звучат вместе.
Типичный шаблонный сайт — десять секций по одной схеме: заголовок, три карточки, кнопка. Каждая секция сама по себе нормальна. Вместе они усыпляют, потому что человек быстро понимает: следующий экран будет таким же.
Дорогой сайт собран скорее как режиссура. Плотный экран с фактами. Пауза с одной фразой на всю высоту. Полноэкранный образ. Спокойный текст. Цифры. Снова тишина.
Хороший сайт уже сравнивали с отредактированным интервью: вопрос, точный ответ, доказательство. Ритм — интонация этого интервью. Нельзя говорить всё одинаково громко. Если каждый экран кричит, слушать перестают. Если всё тихо — слушать нечего.
Отсюда несколько правил на практике. Чередовать плотность — после насыщенного блока нужен воздух, после воздуха конкретика. Менять масштаб — резкий переход от крупного к мелкому создаёт ощущение движения. Беречь кульминации — один-два момента максимальной плотности воздуха и масштаба на весь сайт, иначе кульминации нет вообще. И следить за финалом — последний экран должен звучать как последняя фраза разговора, а не как свалка ссылок в подвале.
Минимализм — это минимализм момента, не минимализм бизнеса. Ритм как раз решает, какой момент остаётся перед глазами и насколько долго.
Мобильная версия: тут всё ломается первым
Неудобный факт: большинство посетителей приходят со смартфона, а презентуют макет почти всегда на большом мониторе.
Пропорционально уменьшенный десктоп мобильной версией не является. Заголовок, эффектный в две строки, на узком экране превращается в шесть коротких строк по семь букв. Воздух либо исчезает совсем, либо раздувается в пустой бессмысленный скролл. Иерархия, продуманная под широкий экран, просто перестаёт работать.
Мобильная версия — отдельная композиция, а не сжатая копия десктопа. Заново решается размер заголовка, отступы, что уходит ниже по странице, где расставить переносы. Если русское слово в заголовке на телефоне рвётся посередине — вся премиальность исчезает за секунду, и никакой воздух это уже не спасёт.
Именно на 375 пикселях видно, есть ли в проекте система или просто набор красивых приёмов. Если дизайн выглядит дорого на узком экране — он сделан по-настоящему хорошо.
Как говорить с клиентом на языке расстояний
С тревогой заказчика нельзя спорить вкусом. Зато её можно перевести в измеримое — это мы уже обсуждали в первой части применительно к самому страху минимализма.
Сравните. Не работает: «Здесь нужно больше воздуха, так выглядит дороже». Работает: «Сейчас вокруг заголовка столько же места, сколько вокруг второстепенного блока. Поэтому мысль теряется среди остального. Увеличим дистанцию вдвое — и заголовок станет первым, что человек видит на экране».
Вторая формулировка спорит не со вкусом, а с задачей. И её можно проверить — в этом разница.
Несколько приёмов, которые реально работают в переговорах. Показать два варианта одного экрана, плотный и воздушный, а потом размыть оба — заказчик сам увидит, где главное сообщение, а где каша. Показать макет в реальных условиях: на ноутбуке, на телефоне, в натуральную ширину, а не в Figma на двухсотпроцентном зуме. Предложить выбор вместо вердикта: «Если на первом экране можно оставить только одну вещь — что это будет?» Клиент, который сам убрал лишнее, защищает решение гораздо лучше, чем тот, кого просто убедили. И найти место для ценной информации, не выбрасывая её: «Мы не убираем преимущества, а переносим туда, где они подкреплены доказательствами» — так тревога снимается тем, что ничего на самом деле не потеряно.
| Что говорит студия | Что слышит клиент | Как лучше |
|---|---|---|
| «Здесь будет много воздуха» | «Здесь будет пусто» | «Мы даём главной мысли пространство, чтобы её заметили первой» |
| «Уберём блоки» | «Уберём информацию» | «Перенесём её туда, где она сработает лучше, и снимем конкуренцию за внимание» |
| «Огромный шрифт» | «Мы будем выглядеть самоуверенно» | «Главное сообщение станет первым объектом внимания» |
Диагностика: почему сайт выглядит дёшево
Короткий список для проверки, если сайт «вроде современный, но не ощущается дорогим».
- Отступы одинаковые или на глаз — нет шкалы, нет системы.
- Размеры почти одинаковые — иерархия так и не решилась стать иерархией.
- На экране больше трёх акцентных пятен — цвет, размер и анимация конкурируют вместо того, чтобы работать вместе.
- Заголовок перенесён по ширине контейнера, а не по смыслу — читается как справка.
- Края гуляют — сетка не чувствуется.
- Все секции собраны по одной схеме — ритма нет, есть шаблон.
- Мобильная версия — просто сжатый десктоп.
За каждым пунктом один и тот же вопрос: это решение или случайность? Если случайность — дизайн выдаёт себя, даже когда шрифт, фотографии и палитра сами по себе безупречны.
Дорого — это отношение
Премиальность не сидит в отдельных элементах. Она в отношениях между ними: между большим и малым, близким и далёким, громким и тихим, плотным экраном и паузой после него.
В первой части говорили про выбор — что оставить, что убрать. Здесь стало видно, что выбор — только половина дела. Вторая половина — как расположить оставшееся: сколько дать воздуха, насколько развести главное и второстепенное, в каком порядке и с каким ритмом вести человека по странице.
Пользователь не посчитает пиксели. Но почувствует, что кто-то их посчитал за него.
Минималистичный сайт выглядит спокойно, потому что вся борьба закончилась ещё до того, как человек его открыл. Только теперь понятно, что это борьба не только за смыслы — но и за каждые 8 пикселей, за каждый перенос строки, за каждую паузу.
Лучшее, что можно услышать после такой работы — равнодушное «ну да, а что тут сложного». Решение выглядит неизбежным именно потому, что в нём не осталось места случайностям.
В следующей части — от структуры к тому, что её наполняет: изображению, движению, доказательствам. Почему фотография способна обесценить точный макет, как анимация усиливает или ломает иерархию, и почему «красиво» без подтверждённого доверия всё равно не продаёт.
