В 2003 году я только пришёл работать в Студию Лебедева и получил один из важнейших уроков дизайна. В студии делали сайт компании управления активами пенсионных фондов, и арт-директор Илья Михайлов поручил мне нарисовать четыре иллюстрации для четырёх разделов сайта. Все иллюстрации должны были быть в трёхмерной перспективе, напоминать логотип компании и как-то соответствовать смыслу раздела. Например, вот такая псевдодиаграмма иллюстрировала услуги управления фондами:

Это было моё боевое крещение. Я нарисовал картинки за полдня, а потом неделю утверждал их у Ильи Михайлова: то не сходились линии перспективы, то тени падали не под тем углом. В итоге я вымучил четыре иллюстрации:

Я испытал невероятное облегчение, когда Михайлов наконец сказал «ну ладно» и иллюстрации оказались на сайте.

И тогда картинки увидел Артемий Лебедев. Ко мне подошёл менеджер проекта и передал его просьбу: «У вас тут картинки все как бы немного поворачиваются. Надо сделать так, чтобы при переходе между разделами картинки поворачивались в одном направлении и получалась линейная последовательность».

Слава богу, почти все картинки уже стояли как надо. Пришлось поменять только одну, чтобы согласовать ракурсы:

В хорошем дизайне согласованы все элементы. По мере прогресса в технике всё более согласованы движения частей механизма, частоты, время взаимодействия и общая структура. В развитом бизнесе согласованы реклама, продажи, производство и логистика. В зрелом графическом дизайне согласованы цвет, модульная сетка, типографика.

Дизайнеры нашли удачное слово «причесать» — причесать шрифты, причесать иконки, причесать заголовки:

Причесать — значит согласовать угол наклона волос к голове

Не сделать угол равным, а превратить волосы в согласованную систему — причёску. Согласование — это наведение порядка и усиление связей в системе.

Согласование — тоже закономерность эволюции дизайна, как максимизация полезного действия, минимизация конструкции, динамизация и повышение управляемости. Согласование происходит на поздних, зрелых стадиях дизайна системы. Согласование не сделает «сырую» систему работоспособной. Но для работоспособной системы оно действует как катализатор — повышает её пользу и КПД.

Поэтому слишком раннее согласование — пустая трата сил, времени и ресурсов, а уже рабочая система с несогласованными элементами не реализует свой потенциал.

Согласование элементов

Ещё один урок согласования графики я получил от Людвига Быстроновского. Он проходил мимо, когда дизайнер показывал мне эскиз навигационного указателя торгового центра. В фирменном стиле этого торгового центра использовались волнообразные мотивы:

В навигации

Людвиг сказал: «Извините, что вмешиваюсь, но не хотите ли вы, чтобы отдельные элементы образовывали общую волну?»

Конечно, так графика перестала резать глаз.

В своей книге Вилли Кунц анализирует композицию обложки годового отчёта, показанной на левой стороне разворота:

В типографике

На правой стороне он пишет о связях между отдельными парами элементов:

1. Крупные динамичные цифры на переднем плане контрастируют со статичным прямоугольником на фоне.
2. Типографика согласована с вертикальным белым просветом в сером поле.
3. Изогнутые контуры цифр контрастируют с вертикальными линиями.
4. Крупный ноль привлекает внимание к слову «лет» (years).
5. Короткие жирные линии контрастируют с длинными тонкими линиями. Две колонки намекают на колонки в финансовых отчётах.

Чем профессиональнее графическая работа, тем более согласованы её элементы. Но опытные дизайнеры тратят время на нюансы, когда основная композиция уже найдена.

Транспортные схемы — пример максимального графического согласования. На схемах согласовано всё со всем: ритм линий, углы наклона, центры дуг, пересечения, скругления, надписи и отступы.

В хорошем пользовательском интерфейсе согласованы и функция, и вид элементов. Несколько лет назад Алексей Ларченков предложил в «Советах» вариант выбора диапазона с помощью двух ползунков, при этом представил на шкале графическое распределение элементов поиска:

В интерфейсе

Сейчас такие элементы нетрудно встретить, а тогда это был редкий пример вдумчивого дизайна. Но я предложил усилить связь между элементами графически и функционально. Пусть два ползунка «знают» о существовании друг друга и станут взаимно дополняющими. Второе улучшение — протянуть между ползунками «стёклышко» для перетаскивания интервала целиком: