x
 
Артём
24 июля 2017
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Что такое согласование в дизайне?

(Часть первая: согласование элементов)


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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

В навигации


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


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

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

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

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

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

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

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

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

В интерфейсе

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


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

БылоСтало
Грамматика Залудите жало паяльника. Теперь следует нанести каплю флюса на контакт платы. Залудите жало паяльника и нанесите каплю флюса на контакт платы.
Термины Переместите библиотеки из каталога, куда они скачались, в директорию, где создан сервер. Переместите библиотеки из папки, куда они скачались, в папку, где создан сервер.
Стиль Наша задача — защитить ваших сотрудников от кидал и разводил в интернете. Наша задача — защитить ваших сотрудников от мошенников в интернете.
Примеры из электронного учебника Максима Ильяхова «Информационный стиль»

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

В столовых приборах

Дизайнер Микия Кобаяси. Плюс-Д

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

  • В технике

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

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

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

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


Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Что такое согласование в дизайне? (Часть третья: структурирование) Что такое согласование в дизайне? (Часть вторая: согласование взаимодействия) Расскажите об управляемости. Часть десятая Задумался, как сделать такие ключи, чтобы наощупь было понятно, какой от какого замка 27




Недавно всплыло

5 2 4 3