о подаче информации, айдентике, интерфейсах и жизненной среде.
Посмотреть работы · Поддержать · Подписаться

Позднее Ctrl + ↑

От работающего к идеальному через итерации

Фиксированные дедлайны стимулируют работоспособные решения. Но они не всегда идеальны.
Часто кажется, будь у меня ещё день, нашёл бы решение чище и остроумнее. Это чувство мешает рассказывать о решении смело. Знаю же, что есть решение круче, просто не нашёл его ещё. Кажется, что подвожу клиента. Просыпается нужда.

Нужду лучше оставить в покое. В этом поможет идея «если решение работает, его характеристики легко улучшить в будущем».

Визуализация идеи:

Не знаю, какие задачи были перед дизайнерами Шела. Но не рекомендую ставить задачу просто улучшить решение. У такой задачи нет полезного действия. Лучше сделать что-то полезное и заодно улучшить и предложить новую версию клиенту. Важно при этом уделить достаточно времени основной задачи итерации.

P. S. C ноября заметки о дизайнерском росте, типографике, подаче информации, интерфейсах, ведении проектов и городской среде читайте в блоге Кирилла Беляева (подробнее о переезде).

 1 комментарий    91   2014  

«Модульные системы в графическом дизайне» Йозефа Мюллера-Брокманна

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

Система, описанная в книге, разработана в Швейцарии после Второй мировой. В её основе деление страницы (с вычетом полей) на клетки (ещё автор называет их модулями, но я так называю любой блок-прямоугольник, следуя совету о модульной вёрстке). Они «могут иметь одинаковые или разные размеры. Высота клетки соответствует определённому числу строк текста, а ширина — ширине колонки набора». Автор последовательно разбирает элементы, влияющие на размер модульной клетки. Система читается в содержании:

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

Автор пишет, как и зачем делать кратными все характеристики элементов страницы (интерлиньяжи заголовков, текста и подписей, высоты иллюстраций, поля и отступы). Во-первых, кратность автоматически уменьшает вариации оформления элементов. Следовательно, повышает выразительность оформления (чем меньше средств, тем они заметнее):

Только при разумном ограничении числа вариаций до минимума оформление может получиться цельным и выразительным.

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

В-третьих, кратность и сетка избавляют от нестыкующихся элементов:

Все плоскости иллюстраций должны совпадать со строками шрифта использованных кеглей.

Мюллер-Брокманн не пишет о том, что малое число характеристик оформления легко усвоить, человек быстро разбирается в структуре и переходит к содержанию (пример — заметка Максима Ильяхова о вложенной структуре). Польза от заголовка 5-го уровня минимальна. Если структура информации сложная и не поддаётся упрощению, лучше использовать схемы и графику.

Примеры того, как сетка работает, определены модой 80-х. Они не раскрывают всего потенциала системы. Если отбросить «швейцарский дизайн», система продолжит работать. Как минимум она будет учить аккуратности (очень полезной в больших проектах).

Цитаты о шрифтах:

У дизайнера есть выбор. В зависимости от своего понимания формы он может использовать хорошие или плохие шрифты...
Ни в коем случае нельзя смешивать шрифты одного стиля, например Гельветику соединить с Универсом или Гарамон с Бодони.

О полях:

При маленьких полях сразу заметно, что страница обрезана криво.
Если поля слишком малы, <...> пальцы касаются полос текста и иллюстраций, это вызывает безотчётную негативную реакцию.

О кеглях:

Если применяются шрифты разного размера, то кегли должны чётко различаться по величине.

О сути дизайна:

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

Модульная система — мощный инструмент, но он не спасёт слабое содержание:

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

Дополнения

Оригинал автор оформил с помощью модульной сетки в 32 модуля. В студии от оригинальной сетки отказались и разработали свою. Она современнее и гибче к задаче, но слабо демонстрирует описанное в тексте.

Размеры изданий в подписях к примерам заданы неуклюже: «большая сторона × меньшая». Видимо, традиция времени автора. Увы, сегодня этот формат тоже встречаются. Плох тем, что требует указания ориентации листа или миниатюры. Формат: «ширина × высота» ничего лишнего не требует. Приличные типографии отлично с ним работают.

Понравилось определение «иллюстрации со свободным контуром». Обычно такие иллюстрации называют так, как подсказывает контекст беседы. Определение Мюллера-Брокманна от контекста не зависит.

P. S. C ноября заметки о дизайнерском росте, типографике, подаче информации, интерфейсах, ведении проектов и городской среде читайте в блоге Кирилла Беляева (подробнее о переезде).

«Образцы шрифтов» Яна Чихольда

Читал в епубе, формат не помешал восприятию альбома. В книге 248 страниц, из которых около 3/5 — иллюстрации. Читается за вечер.

Для меня в текстах Чихольда много патетики и мало аргументов, поэтому придумал два правила: верю ему на слово, потому что так считают те, чей подход мне нравится; считаю его тон сарказмом, чтобы было веселее.

На ста страницах Чихольд рассказывает о шрифте, как задаче, классифицирует шрифты, объясняет, как работать со строчными и прописными. Много обращает внимание на шрифтовые композиции в архитектуре.

Выделяет шрифты старого и нового стилей. Вторые — это наборные шрифты, первые — все им предшествовавшие.

Делит шрифты нового стиля на округлые (римские) и ломаные. Округлые — это антиквы, гротески, бруски, в которых есть и кириллица. А ломаные — это круглый готический шрифт, текстура, швабахер, фрактура. Часто их все невежественно называют готикой.

Происхождение почти всех шрифтов рукописное, поэтому, чем ближе формы к тем, что написаны пером, тем выше читаемость шрифта.

Чихольд ругает шрифты без засечек. Положительно пишет о Гилл сансе, отмечая, что и он уступает антиквам.

Цитаты о сути шрифта:

Шрифт — это нечто исторически сложившееся. <...> Гораздо разумнее <...> не поддаваться ошибочному убеждению, будто шрифт должен нести «отпечаток индивидуальности». Это заблуждение во многом является причиной того, что нас окружают такие безобразные шрифты. <...> Для хорошего шрифта важно как раз противоположное тому, что проповедовалось до недавнего времени: не отпечаток индивидуальности (как правило, скромной), а полная самоотдача, даже самоотречение, в служении правильно понятой задаче. <...> Прежде чем использовать шрифты, нужно развить хороший вкус. Вкус, хороший вкус, может развиться только благодаря изучению наилучших образцов. Никто не рождается с хорошим вкусом. Он всегда является результатом образования.

О конструкции букв:

Чем короче верхние и нижние выносные элементы, тем бесформенней выглядит слово. <...> Нижние выносные элементы ни в коем случае не должны быть короче верхних.

Высота верхних выносных элементов и верхняя граница прописных букв не так уж связаны друг с другом. <...> Гораздо лучше, когда высота прописных букв чуть меньше, чем верхние выносные элементы строчных.

Прописные буквы почти всегда чуть плотнее строчных, и так и должно быть. Но это выясняется только при измерении. Это не должно ощущаться.

О разрядке в прописных:

Нельзя укоротить L. Придвинуть L и А друг к другу тоже нельзя. Это означает, что по крайней мере прописные буквы не должны стоять очень плотно. <...> ...ритм хорошо построенного слова никогда и ни в коем случае не получается при помощи равномерных линейных отрезков между буквами. Принимается в расчет только вся плоскость пространства между буквами. Оно, а не расстояния между буквами должно быть всюду равномерным. Дело в том, что наш глаз, а не линейка определяет правильные размеры пространства между буквами, как вообще обо всем зримом судит наш глаз, а не рассудок. Труднее всего сделать равномерную разрядку в шрифте без засечек, в гротеске.»

Пока буква О стоит плотно в ряду других букв, ее серединка образует настоящую дыру в строке. Но если раздвинуть соседние буквы достаточно сильно, чтобы окружающее белое пространство зрительно более или менее уравновешивало зияние буквы О, дыра в слове исчезает. Я называю это «нейтрализацией». Необходимый минимальный пробел между прописными буквами всегда и всюду должен соответствовать этой оптической величине, даже если в слове нет ни буквы О, ни сбивающих ритм букв L или V.

Об интерлиньяже в наборе прописными:

Предпочтительное соотношение 1 к 1, то есть межстрочный пробел должен быть равен высоте буквы. Пробел между строками прописных букв не может быть меньше. Можно также использовать пропорцию 2 к 3. Тогда межстрочный интервал будет наполовину больше высоты букв. Третья хорошая пропорция — соотношение 1 к 2. В этом случае пробел между строками равен двойной высоте букв

О сторочных:

Прописные буквы всегда образуют прямоугольник, иногда чуть-чуть оживляемый точками и акцентами, стоящими над строкой, или хвостиком буквы Q. Характерные очертания слов из строчных букв делают их гораздо более ясными и удобочитаемыми, чем строки прописных.

...измеримое расстояние между словами должно быть примерно вдвое шире трети от высоты буквы n.

О шрифте в архитектуре:

Надписи на вывесках магазинов относятся к архитектуре, потому что являются ее элементом. <...> Тот, кто заказывает надпись для магазина, сделанную невыразительным шрифтом, имитирующим манеру письма свободной кистью, да еще и платит за дорогие, из металла сделанные буквы, только зря деньги тратит. Потому что через пару лет придется заменять шрифт другим, так как он устареет и всем будет казаться уродливым.

Тому, кто хочет делать шрифты для зданий (а магазины — это часть зданий), должно быть ясно, что его шрифт станет элементом общего облика этого дома и, таким образом, немаловажной частью облика всего города.

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

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

О количестве шрифтов в композиции:

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

Реорганизация блога

До ноября мы реорганизуем блог дизайн-группы «Кипо». Теперь будет два блога.

1. Персональный блог Кирилла Беляева о дизайнерском росте, типографике, подаче информации, интерфейсах, ведении проектов и городской среде по адресу kirillbelyaev.com. Личное должно быть личным, без искусственных «мы» и с лицом, в которое полетят помидоры, если автор пишет ерунду.

2. Обновлённая версия блога дизайн-группы «Кипо» о рабочем процессе, общении с клиентами и новых работах по адресу blog.kipo.name. Настройки РСС скорее всего изменятся.

До 31 октября будем дублировать заметки в оба блога.

Строго ориентированные усы Безье

Работаю с векторными объектами в Иллюстраторе. Речь пойдёт о кривых Безье. Насколько знаю, они работают в разных программах по одному принципу.

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

Источник — The AGSC

Решение — делать ориентацию усов горизонтальной и вертикальной. Но если лучше подойдут 45-градусные усы, используйте их. Метод не ограничивает длины усов одной точки, они могут быть разновеликими:

Давно заметил, что, если исправлять изломы строго ориентированными усами, добиваюсь желаемой гладкости быстрее.

Нехитрые умозаключения подтвердили наблюдение. Линии бывают прямые и гнутые —других нет. Прямым усы не нужны. А все гнутые — это фрагменты разной длины окружностей разных радиусов. Все кривые сделаны из кругов. Иллюстратор сам подсказывает как правильно — круг он строит с четырьмя точками, усы которых горизонтальные и вертикальные:

Статья «So What’s the Big Deal with Horizontal & Vertical Bezier Handles Anyway?» щёлкнула в голове нужные связи и картина собралась полностью. Статья малоинформативная, но полезная для осознания. Полезное в ней ровно то, что строго ориентированные усы подаются, как решение. Плюс несколько практических советов.

Ограничение приводит к уменьшению точек и направлений усов. Вначале это сложнее, потому что позиционирование точек становится стратегически важным. Точку следует ставить на вершину дуги. С другой стороны: легко выбирать угол наклона уса из двух вариантов. С практикой, приходит автоматика. Ограниченные комбинации помогают выработать чувствительность.

Иллюстратор для новичков:

  • галочка «Show handles when multiple anchors are selected» (Preferences (⌘K; Ctrl+K) → Selection & Anchor Display) показывает все усы выделенных объектов в режиме контуров (View → Outlines/Preview (⌘Y; Ctrl+Y));
  • вытягивать усы на углы кратные 45 градусам удобно, зажав шифт (Shift).

Предлагаю сразу ввести термин «Строго ориентированный ус Безье», сократить его «Строгий ус Безье», потом до аббревиатуры «СУБ» и превратить в простое слова «суб» (строго ориентированные усы Безье вполне тянут на подмножество :-) Использовать так: «В логотипе лучше все точки сделать с субами».

Как думаете?

Комментарии из Кипоблога:
Егор Чистяков
Плохой термин. Помимо конкретно неудачного примера («сссубами»), он напрочь оторван от языка и нерасшифруем для неспециалистов. Одни «кривые» и так уже довольно спотыкают об себя людей. В несжатом виде намного лучше, но всё так же непонятно.
Предлагаю собрать аналоги и подумать.
Англичане используют термин «tangency», но это «касательная» в общем, и однозначной ясности не несёт.
Если взять не только начерталку, но и системы координат в целом, можно использовать «крен». Тангажа и рысканья, понятное дело, на плоскости, нету, а «крен» — вполне обычное слово (накренить, накренённый). Усы без крена. «Хреновые» усы в обратном случае.
Но лично мне больше нравится «устойчивые усы». Люди довольно быстро раскручивают цепочку, вспоминают про качели и качение и соображают смысл.

Артур Адэки
Мне кажется, что этот термин предполагает использование только специалистами. Так что расшифруемость — неудачный довод :-)

Не могу представить ситуацию, когда термин использовался бы не специалистом. Фраза «Скиньте логотип в кривых» от менеджера, например, вполне привычная. А как кривые выстроены — знать ему совсем не нужно.

Илья Харитонов
Буквально недавно объяснял этот принцип коллеге, что усы (я правда их «плечи» называю) удобно ориентировать строго вертикально и горизонально (за редкими исключениями). Тогда и контроль кривых проще и что-то поправить подвинуть проще — двинул одну точку и поправил длину плеч, а не сражаешься с десятью точками с хз как ориентироваными плечами.
Для себя этот принцип открыл еще года два назад, просто просматривая работы одного чувака (тоже леттеринг в основном), у него везде были выложены их скрины в режиме контуров и с плечами. Тогда то я и обратил на это внимание, сам попробовал — красота!

Анна
Пришло на ум слово «соосные». Ведь то, что Вы предлагаете — это усы, параллельные осям координат.
Или «нормальные» — расположенные по нормалям (перпендикулярам) к краям листа.
Или «ортогональные» (по той же логике).

Ранее Ctrl + ↓