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

Сайт компании «Лидер»

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

Особенно тяжело было пририсовать в правильной перспективе чёртов замочек к портфелю

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

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

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

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

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

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

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

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

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

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

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

В навигации

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

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

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

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

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

  1. Крупные динамичные цифры на переднем плане контрастируют со статичным прямоугольником на фоне.

  2. Типографика согласована с вертикальным белым просветом в сером поле.

  3. Изогнутые контуры цифр контрастируют с вертикальными линиями.

  4. Крупный ноль привлекает внимание к слову «лет» (years).

  5. Короткие жирные линии контрастируют с длинными тонкими линиями. Две колонки намекают на колонки в финансовых отчётах.

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

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

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

В интерфейсе

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

Переключалка выглядит более связанной, если скругления активного элемента «знают» о соседних элементах
Переключалка выглядит более связанной, если скругления активного элемента «знают» о соседних элементах

Редактор согласовывает в тексте понятия, грамматику, логику и стиль:

 

Грамматика

Было

Залудите жало паяльника. Теперь следует нанести каплю флюса на контакт платы.

Стало

Залудите жало паяльника и нанесите каплю флюса на контакт платы.

 

Термины

Было

Переместите библиотеки из каталога, куда они скачались, в директорию, где создан сервер.

Стало

Переместите библиотеки из папки, куда они скачались, в папку, где создан сервер.

 

Стиль

Было

Наша задача — защитить ваших сотрудников от кидал и разводил в интернете.

Стало

Наша задача — защитить ваших сотрудников от мошенников в интернете.

Примеры из электронного учебника Максима Ильяхова «Информационный стиль»

Чем старше изобретение, тем лучше согласованы его детали. Палочки для еды «Уки хаси» идеально подогнаны друг к другу и к столу так, что их кончики не касаются поверхности:

В столовых приборах
Дизайнер Микия Кобаяси. Плюс‑Д

Все виды унификации и стандартизации в технике — это примеры согласования дизайна.

В технике

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

Благодаря унификации деталей и блоков производители снижают расходы на производство, упрощают обслуживание и модернизацию техники.

P. S. Это был понедельничный совет о решении дизайнерских задач. Хотите знать всё о работоспособном дизайне, полезном действии, разрешении противоречий, законах, приёмах и формулах? Присылайте вопросы.

Дизайн работоспособных системТехнический прогрессСогласованиеДизайн продуктов
Отправить
Поделиться
Запинить

Рекомендуем другие советы