Согласование
Элементов
В 2003 году я только пришёл работать в Студию Лебедева и получил один из важнейших уроков дизайна. В студии делали сайт компании управления активами пенсионных фондов, и арт‑директор Илья Михайлов поручил мне нарисовать четыре иллюстрации для четырёх разделов сайта. Все иллюстрации должны были быть в трёхмерной перспективе, напоминать логотип компании и как‑то соответствовать смыслу раздела. Например, вот такая псевдодиаграмма иллюстрировала услуги управления фондами:
Согласование
Элементов
Это было моё боевое крещение. Я нарисовал картинки за полдня, а потом неделю утверждал их у Ильи Михайлова: то не сходились линии перспективы, то тени падали не под тем углом. В итоге я вымучил четыре иллюстрации:
Я испытал невероятное облегчение, когда Михайлов наконец сказал «ну ладно» и иллюстрации оказались на сайте.
И тогда картинки увидел Артемий Лебедев. Ко мне подошёл менеджер проекта и передал его просьбу: «У вас тут картинки все как бы немного поворачиваются. Надо сделать так, чтобы при переходе между разделами картинки поворачивались в одном направлении и получалась линейная последовательность».
Слава богу, почти все картинки уже стояли как надо. Пришлось поменять только одну, чтобы согласовать ракурсы:
В хорошем дизайне согласованы все элементы. По мере прогресса в технике всё более согласованы движения частей механизма, частоты, время взаимодействия и общая структура. В развитом бизнесе согласованы реклама, продажи, производство и логистика. В зрелом графическом дизайне согласованы цвет, модульная сетка, типографика.
Дизайнеры нашли удачное слово «причесать» — причесать шрифты, причесать иконки, причесать заголовки:
Причесать — значит согласовать угол наклона волос к голове
Не сделать угол равным, а превратить волосы в согласованную систему — причёску. Согласование — это наведение порядка и усиление связей в системе.
Согласование — тоже закономерность эволюции дизайна, как максимизация полезного действия, минимизация конструкции, динамизация и повышение управляемости. Согласование происходит на поздних, зрелых стадиях дизайна системы. Согласование не сделает «сырую» систему работоспособной. Но для работоспособной системы оно действует как катализатор — повышает её пользу и КПД.
Поэтому слишком раннее согласование — пустая трата сил, времени и ресурсов, а уже рабочая система с несогласованными элементами не реализует свой потенциал.
Согласование элементов
Ещё один урок согласования графики я получил от Людвига Быстроновского. Он проходил мимо, когда дизайнер показывал мне эскиз навигационного указателя торгового центра. В фирменном стиле этого торгового центра использовались волнообразные мотивы:
Людвиг сказал: «Извините, что вмешиваюсь, но не хотите ли вы, чтобы отдельные элементы образовывали общую волну?»
Конечно, так графика перестала резать глаз.
В своей книге Вилли Кунц анализирует композицию обложки годового отчёта, показанной на левой стороне разворота:
На правой стороне он пишет о связях между отдельными парами элементов:
Крупные динамичные цифры на переднем плане контрастируют со статичным прямоугольником на фоне.
Типографика согласована с вертикальным белым просветом в сером поле.
Изогнутые контуры цифр контрастируют с вертикальными линиями.
Крупный ноль привлекает внимание к слову «лет» (years).
Короткие жирные линии контрастируют с длинными тонкими линиями. Две колонки намекают на колонки в финансовых отчётах.
Чем профессиональнее графическая работа, тем более согласованы её элементы. Но опытные дизайнеры тратят время на нюансы, когда основная композиция уже найдена.
Транспортные схемы — пример максимального графического согласования. На схемах согласовано всё со всем: ритм линий, углы наклона, центры дуг, пересечения, скругления, надписи и отступы.
В хорошем пользовательском интерфейсе согласованы и функция, и вид элементов. Несколько лет назад Алексей Ларченков предложил в «Советах» вариант выбора диапазона с помощью двух ползунков, при этом представил на шкале графическое распределение элементов поиска:
Сейчас такие элементы нетрудно встретить, а тогда это был редкий пример вдумчивого дизайна. Но я предложил усилить связь между элементами графически и функционально. Пусть два ползунка «знают» о существовании друг друга и станут взаимно дополняющими. Второе улучшение — протянуть между ползунками «стёклышко» для перетаскивания интервала целиком:
Редактор согласовывает в тексте понятия, грамматику, логику и стиль:
Грамматика
Было
Залудите жало паяльника. Теперь следует нанести каплю флюса на контакт платы.
Стало
Залудите жало паяльника и нанесите каплю флюса на контакт платы.
Термины
Было
Переместите библиотеки из каталога, куда они скачались, в директорию, где создан сервер.
Стало
Переместите библиотеки из папки, куда они скачались, в папку, где создан сервер.
Стиль
Было
Наша задача — защитить ваших сотрудников от кидал и разводил в интернете.
Стало
Наша задача — защитить ваших сотрудников от мошенников в интернете.
Чем старше изобретение, тем лучше согласованы его детали. Палочки для еды «Уки хаси» идеально подогнаны друг к другу и к столу так, что их кончики не касаются поверхности:
Все виды унификации и стандартизации в технике — это примеры согласования дизайна.
В технике
Винтовая резьба, железнодорожная колея, электрическая розетка сначала были изобретены, а потом стандартизированы. Винты стали взаимозаменяемыми, поезда — международными, бытовые приборы — доступными в каждом доме. Во всех случаях стандартизация дала мощный толчок развитию систем.
Благодаря унификации деталей и блоков производители снижают расходы на производство, упрощают обслуживание и модернизацию техники.
P. S. Это был понедельничный совет о решении дизайнерских задач. Хотите знать всё о работоспособном дизайне, полезном действии, разрешении противоречий, законах, приёмах и формулах? Присылайте вопросы.