Позднее Ctrl + ↑

Школа стажёров. I ступень — что да как

Закончила первую ступень Школы стажёров. Ура! Хочу рассказать, как это было, что понравилось, что нет, и дать пару советов поступающим.

Тут написала про вторую ступень.

Школа стажёров Бюро Горбунова обучает дизайнеров по шести дисциплинам: типографика и верстка, интерфейс и информация, переговоры и отношения, дизайн и право, текст и редактура, управление и результаты.

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

На вторую ступень проходят первые 30 студентов из 100 по рейтингу. Не добрал балов — проходи первую ступень повторно. Бонус: если закончил первую ступень и не попал в тридцатку, можешь снова пройти обучение, платно, но уже без вступительного задания.

Вступительное задание

Каждый год задание разное: страница записи на приём к доктору, страница записи на обслуживание в автосервис, интерфейс гаджета для заказа пиццы.
Наш поток делал терминал самостоятельной регистрации в аэропорту. Я набрала 27,78 балов и заняла 54 место в рейтинге. Сейчас понимаю свою ошибку: я не разобралась полностью в задаче, слишком углубилась в детали и предложила улучшенный вариант стандартного терминала. Чтобы получить высокий балл, нужно понять проблему, отойти от существующих стандартов и предложить решение, а не улучшенный дизайн.

Поступила в набор 29 августа 2016 года на 54 место

Учёба

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

Лекции

Лекции в гугл-документах. Я насчитала 1092 страницы 10 кеглем, большая их часть есть в видео-формате. Объемы большие, поступающим советую прочитать до начала учёбы все бюрошные советы и обязательную литературу — список книг на странице школы.

Дополнительно прочитайте:

Из 84 студентов 15 отчислены — кто-то трижды не успел к дедлайну, кто-то не осилил объемы и ушёл сам.

Совмещать работу и учёбу сложно

Понравилось, что все лекции построены на реальных примерах. Преподаватели дают теорию и тут же показывают применение.

Тесты

Тесты среди студентов вызвали большое негодование. Вопросы в целом по лекциям, но встречаются и такие, что мозг сломаешь. Часто натыкаешься на субъективное мнение преподавателя, с которым не всегда согласен. Бывало, что уверен в правильном ответе, а в результате вопрос не засчитан. Можно попросить преподавателя указать на ошибки, но он лишь направит — правильного ответа не скажет, а может и вовсе не ответить на письмо. Студентам обсуждать тесты между собой запрещено. Каждый копал в меру своей заинтересованности.

Мой средний результат за все тесты в процентах

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

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

Не понравилось, что совсем нет обратной связи. Иной раз хотелось подискутировать, задать вопросы и получить ответы.

Практические задания

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

Сейчас смотрю на свою осьминожку и понимаю, что местами недооценила, а где-то переоценила :-) Надо сделать новую

А вот задание по редактуре — нужно было выбрать одну из предложенных статей, отредактировать ее и подготовить к печати:

Переговоры казались мне самым сложным заданием. Они проходили в формате КУСа — нас разделили на пары и дали роли.

Подготовьтесь к переговорам заранее, продумайте все возможные варианты развития и подготовьте пару предложений решения проблемы. Отрепетируйте несколько раз, запишите вопросы и следуйте “заповедям” Кэмпа: будьте не в порядке, в мире клиента, проявляйте заботу, травите леску и не испытывайте нужду. Я посмотрела все ролики сокурсников — сразу видно, кто готовился к переговорам, а кто нет.

Переговоры дают 50 балов. В нашем потоке максимум никто не получил. Три студента получили 47,5 баллов, я — 46,7 балла, другие от 45,8 и ниже. Перевогоры — реальный шанс подняться в рейтинге.

Провалом считаются переговоры без решения или доведенные до суда. Будьте готовы к чему угодно от партнёра — были случаи, когда партнёр кричал и кидал бумагу в камеру. Разумеется, подобное поведение — провал, но правильная реакция и ответ могут спасти вашу оценку.

На деле всё прошло не так страшно, как я думала :-)

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

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

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

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

Курсовая работа

Курсовая работа даёт 150 баллов — это много, за тесты в 3—5 раз меньше. Поэтому курсовая может сильно повлиять на позицию в рейтинге.

За две недели надо нарисовать главную страницу сайта пластиковых окон. Ничего не выдумывая, просто нарисовать крепкий макет. Задание по дисциплине “Интерфейсы и информация”, но и другие предметы учтите: тексты в инфостиле, вёрстка по лекциям. Помните о пользе и удобстве.

Не скажу точно сколько всего времени я потратила на задание, думаю, порядка 12—15 часов. Я начала работать над макетом на второй неделе, глаз быстро замылился, но у меня уже не было времени отложить макет. Сейчас я вижу ошибки, которых не видела до этого. Поэтому не откладывайте на последнюю неделю. Начните делать курсовую сразу, чтобы была возможность отдохнуть от неё и доработать с новыми силами и свежим взглядом.

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

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

Я получила 4 из 5 баллов за идею и логику и 3 балла за эстетику

Рейтинг

Я начала учёбу на 54 месте и поднялась во вторую десятку после первой недели. 3,5 месяца я плавала между 16 местом и 28, а окончила на 17 месте.

Если хочешь продолжить обучение, главное не выпасть из первой тридцатки — вернуться в неё с каждой неделей будет сложнее. Если сдавать тесты в среднем на 75—85%, то вырваться вперед можно лишь на переговорах и курсовой работе.

Мне нравится эта система рейтингов. Она подстёгивает учить и рваться вперёд. Кто-то считает иначе, были комментарии и недовольных студентов.

Польза

Я увидела для себя пользу уже на первом месяце обучения:

  • Информацию не нужно искать, всё дают готовое и по темам.
  • Есть доступ к видео-лекциям курсов, посещение которых стоит 20—40 тысяч рублей за каждую дисциплину.
  • Тесты помогают усваивать информацию лучше, чем дважды прочитанная лекция или книга.
  • При желании можно получить помощь или обратную связь от других студентов.
  • Школа учит не только дизайну, но и отношениям с клиентом, управлению проектами, редактуре текста и юридическому праву. До обучения мне не хватало этих знаний.

-Школа стажёров выпускает самостоятельных дизайнеров, которые решают задачи и заботятся о клиенте, рисуют макеты и редактируют текст, проводят переговоры и сдают проекты в срок, составляют договора и знают закон в сфере дизайна. Она учит преодолевать трудности, планировать работу и профессионально расти.

Школа для тех, кто хочет учиться.


И я продолжу на второй ступени :-)

Вторая ступень стартует 9 января

Спасибо Артёму Горбунову, Илье Бирману, Максиму Ильяхову, Илье Синельникову, Николаю Товеровскому, Владимиру Беляеву за любовь к своему делу, за желание развиваться и делиться знаниями.

Запустила сайт агентства «Дом свадеб Кати Кещян»

Задача
Рассказать невестам для чего нужен свадебный организатор и почему лучше обратиться к нему, чем делать свадьбу самостоятельно.
dom-svadeb.ru

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

Сайт адаптируется под все разрешения экранов:


Участники проекта

Дизайнер
Таня Соколовская
Верстальщик
Даниил Соколовский
Разработчик
Кодельная

Объекты внутри модуля

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

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

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

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

Модуль и объекты внутри него

Роль объектов внутри модуля играют иллюстрации, заголовки, логотипы, цитаты, фактоиды, текстовые блоки, подписи, сноски, словом — все, что располагается в модуле.

Чтобы модуль визуально не развалился, значимые объекты внутри него должны тяготеть к углам, сторонам или визуальному центру

Значимые объекты расположены по углам, сторонам или в визуальном центре модуля

Правилу подвластны прямоугольные объекты. Если говорить о круге, то он может занимать любую позицию внутри модуля. Окружность приятна для глаз и легко воспринимается, она контрастирует с прямоугольниками и раньше привлекает внимание зрителя.

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

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

Посмотрите на рисунок ниже:

Прямоугольные объекты в модуле. Слабый вариант

Тут две ошибки:

1) Сверху и снизу есть незадействованное пространство — комозиция неустойчива:

Незадействованное пространство

2) Объекты разбросаны хаотично, как следствие образовалось много блоков отрицательного пространства. Композиция разваливается:

Отрицательное пространство

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

Хороший модуль

Объекты организованны между собой в прямоугольники и тяготеют к углам и сторонам модуля. Отрицательное пространство приняло более простую форму:

Отрицательное пространство хорошего модуля

Композиция стала организованной, устойчивой и легкой для восприятия.

Добавим в модуль круг. Помним, он может занимать любую позицию. Круг в первую очередь привлекает внимание, поэтому с его помощью можно направлять взгляд зрителя:

Круг в модуле

Круг — очень эгоистичная фигура, он должен быть один. Если в макете их будет два и более, то внимание зрителя рассеется, взгляду будет тяжело зацепиться. Так делать нежелательно:

Два равнозначных круга в модуле

Допустим, все объекты в модуле равнозначны:

Сейчас мы смотрим на макет и нам не за что зацепиться. Привлечь внимание можно с помощью цвета или начертания:

Также можно использовать другой шрифт или увеличить его размер:

Добавить значимый объект и воздух вокруг него:

Структура в модуле

Объекты в модуле принято разделять по значимости. На первом месте всегда стоит иллюстрация. Именно за нее цепляется взгляд на странице. Затем мы смотрим на заголовок, переносим взгляд на цитаты или фактоиды, и, если нас заинтересовало все это, обращаем внимание на текстовый блок.

Чтобы разглядывать страницу было комфортно, сбор макета всегда нужно начинать с самых значимых объектов и вести взор читателя от одного к другому. Людям свойственно считывать информацию по ходу письма: слева направо, сверху вниз. В иврито-язычной среде направление меняется в обратную сторону — справа налево, сверху вниз.

Одна колонка текста

Если текст набран в две колонки, то мы начнем чтение с левой колонки (или правой в тексте на иврите) сверху вниз, а продолжение будем искать наверху второй колонки.

Две колонки текста

Если колонок и строк больше, направить взгляд помогут расстояния между объектами по правилу близости:

Слева уменьшены горизонтальные расстояния, справа — вертикальные

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

Модули на практике

Разберем пример:

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

В главном модуле есть два значимых объекта:

  1. Заголовок «Time» — расположен в правом верхнем углу, при этом слева и снизу от него достаточно свободного пространства.
  2. Белый прямоугольник — в левом нижнем углу, с противоположных сторон он также дышит.

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

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

Еще один пример:

Мы видим три ключевых объекта: крупные красные иероглифы в правом верхнем углу, фигуру человека вдоль левой стороны модуля и текстовый блок на черной травяной плашке внизу. Все они расположены по углам или сторонам.

Или вот:

Значимые объекты распределены по углам и сторонам своих блоков, иллюстрации выглядят гармонично.

Проанализируйте разворот журнала:

Разворот состоит из двух модулей: левой и правой страницы.

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

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

Еще пример с кругом:

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

Часто круг используют для специальных предложений, скидок, акций:

Посмотрите, как ловко орудует композицией Ян Чихольд:

Он мастерски направляет взгляд читателя от одного объекта к другому.

А вот пример плохого распределения объектов в модуле:

Во-первых, тут два круга. Помним, круг эгоистичен и должен быть один. Во-вторых — значимые объекты расположены случайным образом. Макет разваливается.

Еще плохой пример:

Комментарии излишни.

Располагать значимые объекты сверху и снизу принято в операционных системах:

macOS Sierra

Меню на многих сайтах привязано к верху:

А вот пример расположения по центру:

Но подобная симметрия хороша единожды, иначе не избежать хаоса:

Меню сайта

Композиция из модулей

Теперь рассмотрим, как взаимодействуют между собой модули на страницах сайтов.

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

Посмотрите, как решили задачу дизайнеры BBC. Вдоль всей страницы идет чередование ритма: разные размеры модулей, иллюстраций и заголовков. Внимание читателя не рассеивается, и ему интересно изучать страницу:

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

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

Чем проще макет, тем легче его считывать. Динамика достигается за счет чередования ритмов. Посмотрите, как с длинной страницей справляется Apple:

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

Запустила партнерский сайт компании Epson

Задача
Рассказать потенциальным партнерам о программе авторизации.
partners.epson.ru

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

О процессе

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

Обычно производители техники либо торгуют напрямую через свои филиалы и интернет-магазины, либо через партнерские сети. Эпсон работает по второй схеме.

Компания создала для партнеров Партнерскую зону — закрытый сайт со специальными программами и медиаматериалами. Проблема была в том, что на сайтах Эпсон не было информации о партнерской программе. Заинтересованным компаниям приходилось сначала искать контактную информацию, а затем писать менеджерам. Менеджерам, в свою очередь, приходилось подробно рассказывать каждому о процедуре авторизации.

Таким образом мы с менеджером сформировали миссию проекта: «помочь потенциальным партнерам узнать о программе авторизации Эпсон и принять решение о присоединении». Для этого решили сделать одностраничный сайт с поэтапным рассказом.

Вникаю в детали

Изучаю презентации и документацию, чтобы понять в процесс:

Изучаю презентации, таблицы и документы по программе авторизации Эпсон

Информации много, но у меня есть преимущество: так как с условиями партнерской программы я ранее не сталкивалась, это позволило посмотреть на неё глазами новичка.

Составляю структуру

Структурирую всё изученное в последовательное изложение:

  1. Программа авторизации — что это такое
  2. Зачем нужна авторизация
  3. Преимущества партнеров
  4. Как стать партнером
  5. С кем связаться

Приступаю к работе

Собираю первый «этаж». Категории авторизации, по которым компании становятся партнерами, показываю наглядно в виде фотографий устройств этой категории. Здесь же решаю добавить социальное доказательство в виде фактоида: 500 компаний уже стали партнерами Epson.

Первый «этаж» сайта рассказывает о программе и категориях авторизации

Дальше отвечаю на вопрос «Зачем нужна авторизация» и рассказываю о преимуществах партнера.

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

Преимущества партнера: всё только по делу

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

Как стать партнером и критерии отбора

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

Изучаю, смотрю что можно улучшить:

Обычный способ представления контактной информации, который использовался на сайтах и в презентации

Имя, должность и регион менеджера условно назовём карточкой контакта. Замечаю, что в карточках много словесных повторов:

«Соколов Василий (менеджер по работе с партнерами) — работа с дилерами, корпоративными партнерами и заказчиками Санкт-Петербурга, а также Мурманской, Архангельской, Вологодской и Новгородской областей, и Республики Карелия.»

«Петров Иван (менеджер по работе с партнерами) — работа с дилерами, корпоративными партнерами и заказчиками Центрального ФО — Белгородская, Брянская, Воронежская, Калужская, Курская, Липецкая, Орловская, Рязанская, Тамбовская и Тульская области.»

Сначала убираю должности, потому что слово «менеджер» сказано в заголовке, а то что они работают с партнерами ясно из контекста.

«Соколов Василий — работа с дилерами, корпоративными партнерами и заказчиками Санкт-Петербурга, а также Мурманской, Архангельской, Вологодской и Новгородской областей, и Республики Карелия.»

«Петров Иван — работа с дилерами, корпоративными партнерами и заказчиками Центрального ФО — Белгородская, Брянская, Воронежская, Калужская, Курская, Липецкая, Орловская, Рязанская, Тамбовская и Тульская области.»

Затем убираю повторяющуюся фразу «работа с дилерами, корпоративными партнерами и заказчиками», потому что это очевидная сущность. Заодно меняю имя и фамилию местами, потому что в русском языке принято обращаться по имени.

«Василий Соколов — Санкт-Петербург, Мурманская, Архангельская, Вологодская и Новгородская области, Республика Карелия.»

«Иван Петров — Белгородская, Брянская, Воронежская, Калужская, Курская, Липецкая, Орловская, Рязанская, Тамбовская и Тульская области.»

Стало в два раза компактнее и информативнее.

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

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

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

Региональные менеджеры. При наведении курсора фотографии становятся цветными

Готовлю презентацию и показываю всё клиенту. Клиент принял работу.

Верстаем сайт, адаптируем под все разрешения экранов, тестируем и запускаем. Готово!

Результат работы

Участники проекта

Дизайнер
Таня Соколовская
Дизайнер и верстальщик
Даниил Соколовский
Разработчик
команда со стороны клиента

Правило близости

Дизайнеры часто ставят дизайн на первое место и оправдывают неряшливость работ словами: «здесь такой творческий замысел» или «такая авторская задумка». Но дизайнер — не художник.

Дизайнер ≠ художник

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

В этом посте я расскажу о главном принципе восприятия информации и следующем из него правиле.

Немного теории

В основе правила лежит принцип близости в гештальт-психологии — расположенные рядом объекты воспринимаются вместе.

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

Отсюда вывод:

Внутренние расстояния элемента должны быть меньше внешних.

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

Рассмотрим текстовый блок. Расстояние между словами является внутренним, а расстояние между строками (интерлиньяж) — внешним. Поэтому, согласно правилу, увеличим интерлиньяж:

Справа интерлиньяж увеличен. Блок выглядит аккуратнее и легче

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

Блок с правильно выстроенными расстояниями считывается легче

Если этот блок положить на плашку, то ее поля будут играть роль внешнего, поэтому они должны быть больше интерлиньяжа заголовка:

Большие поля плашки придают блоку значимость

Теперь рассмотрим это на примерах.

В буквах и словах

Для примера напишем слово:

В слове внутреннее расстояние играет пространство внутри буквы, а внешнее — пространство до соседних букв. Сейчас правило близости нарушено. Буквам тесно, прочитать слово тяжело. А серединка буквы О напоминает дырку.

Увеличим межбуквенное расстояние так, чтобы визуально буква О перестала дырявить слово:

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

Добавим еще два слова, но пробел между ними оставим стандартным:

Фраза читается тяжело, создается впечатление, что это одно длинное слово.

Увеличим пробелы между словами:

Уже лучше, продолжаем эксперимент. Заменим шрифт на более вытянутый:

Так как буквы ýже, расстояние внутри них стало меньше, значит можно уменьшить расстояние между самими буквами:

Готово! Фраза стала компактной, ясной и легко считываемой.

Так эта надпись выглядит на здании аэропорта:

Фото из сети

А вот как она могла бы выглядеть при соблюдении правила близости:

Не мешало бы и флаг выровнять по буквам, но не об этом речь

В текстовом блоке

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

Рассмотрим пример из абзаца с заголовком. Абзац и заголовок это два самостоятельных объекта. Роль внешнего для них играет расстояние от заголовка до первой строки. Роль внутреннего играет расстояние между строками — интерлиньяж текста.

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

Приведем его в порядок. Сперва увеличим расстояние от заголовка до текста:

Стало лучше. Заголовок приобрел независимость.

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

Готово.

В текстовом блоке с изображением

Теперь рассмотрим связку из текстового блока, заголовка и иллюстрации. Например, такой скриншот сайта:

Блоки состоят из трех элементов: картинка, заголовок и описание. Мы видим, что текстовые описания трех столбцов болтаются сами по себе, а их заголовки прилипли к картинкам. Это неправильно.

Тут работает еще один принцип из гештальт-психологии — принцип схожести:

Элементы, схожие по размеру, очертаниям, цвету или форме, имеют тенденцию восприниматься вместе.

Заголовок и текст имеют большую связь, нежели картинка и заголовок, поэтому следует описания подвинуть к своим заголовкам:

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

На каждом уровне соблюдено правило близости:

Еще один пример. Разберём такой блок:

Было

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

Стало

Элементов меньше, информативность не пострадала, блок стал чище и аккуратнее.

Еще пример:

Было

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

Уже лучше

Объединяем «Подробнее» с заголовком блока и увеличиваем иконку.

Стало

Блок стал компактнее и привлекательнее.

Вывод

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


Читайте подробнее:
О расстояниях между объектами и их восприятии в «Редактируем дизайном» Яна Уайта.
Правило внутреннего и внешнего в «Типографке и верстке» Горбунова.
Теория близости в ководстве Лебедева.
Об интерлиньяже в «Модульных системах» Мюллер-Брокманна, в «Облике книги» Чихольда, в «Живой типографике» Корольковой.
Разрядка прописных в «Образцах шрифтов» Чихольда.

Процесс: лого визажиста Анны Ротарь

Анна Ротарь — визажист и стилист по волосам в городе Одесса. Я разработала для Анны логотип и оформила визитную карточку.

Вместе с Анной мы решили, что рукописный вариант ближе ей по характеру. От этого и отталкнулись.

Набросала варианты:

Перевела некоторые в вектор и выбрала наименее «завитушный»:

Смотрю на носителях:

Не нравится, что все буквы рукописные, но нравятся формы букв A и R. Решаю их оставить, а остальные набрать шрифтом:

Логотип стал серьезнее, как раз под звучание фамилии. Попробуйте произнести Ротарь. Она рычит, звучит твердо, в то же время мягкий знак смягчает рычание. Продолжаю работу. Хочется соединить горизонтальный штрих A и полуовал R, а засечки nn превратить в хвостики, как у буквы a. Пробую, смотрим:

Да. Так появилась целостность. Связываю логотип с деятельностью Анны: буква A выполняет роль карандаша со следом от него:

Показываю клиенту предварительный вариант:

Фото из сети для примера

Получаю одобрение — Анне логотип нравится. Работаю дальше. Облегчаю жирные линии A и R, слегка укорачиваю вертикальный штрих R и убираю хвостик буквы A.

Настал этап прорисовки букв. Отмечаю основные проблемы, которые нужно поправить:

Выравниваю параллели, привожу к одному размеру все схожие полукруглые хвосты:

Корректирую дугу от R относительно ножки:

Смотрю в черном цвете:

Не нравится стык полуовала R и ее ножки:

Исправляю:

Настала очередь карандашного следа. Смягчаю его:

Смотрю в логотипе:

Корректирую еще, чтобы он не сильно выпирал над буквой A:

Смотрю:

Делаю вариант логотипа из инициалов:

Готово! Приступаю к визиткам. Для них я доработала карандашный след:

Внутри появился силуэт лица

Отражаю силуэт вертикально:

Собираю макет визитки и отправляю клиенту:

Анна принимает работу.

Книга про буквы от Аа до Яя. Конспект. Часть 1

Юрий Гордон

Замечательная книга Юрия Гордона лежит у меня на столе и очень помогает в работе с буквами. «Книга про буквы от Аа до Яя» — это настоящая энциклопедия и учебное пособие.

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

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

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


Конструкция букв

Графема

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

Буква — зверь определенного вида и породы, у которог оесть тело, лапы и хвост (иногда несколько). Индивидуальные черты отличают каждого члена стаи — алфавита.

Каждый знак письма уникален, обладает яркими индивидуальными признаками, позволяющими читателю мгновенно узнавать его в тексте. Обобщенный образ знака — графема. Комплект графем — алфавит. Современные европейские алффавиты — латиница, кирилица, греческий — для каждой буквы имеют как минимум две — строчную и прописную — графемы.

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

Графемы — это не буквы. Они не пренадлежат к какому-либо конкретному шрифту. Это обобщенные образы букв.

Облако форм

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

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

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

Шрифтовая терминология по В. Кричевскому

Шрифтовая терминология по В. Ефимову

Оптические иллюзии

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

Геометрия букв текстового шрифта полностью подчинена оптике:

  • Вертикальные штрихи всегда толще горизонтальных.
  • Нижние части овалов опускаются под базовую линию строки, а верхние — выступают над верхней линией.
  • В места, где могут образоваться черные залипы (например, в середине Ж), штрихи делаются тоньше.
  • Буквы, которые должны казаться круглыми, всегда несколько у́же точного круга.
  • Средняя линия шрифта, проходящая по горизонтальному щтриху H, всегда неменого выше середины роста знака.
  • Диагональные штрихи на концах, как правило, несколько толще, чем в точке пересечения.
  • Засечки, капли и другие концевые элементы служат не только украшением, но и фиксируют окончания штрихов.
  • В местах, где штрихи сходятся под острым углом, часто делают зарезы, «ловушки для краски», дополнительно облегчая место стыка.

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

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

Динамика текста

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

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

Графическая рифма

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

В текстовом шрифте любая слишком явная рифма смотрится нарочито и быстро утомляет. Поэтому так неважно выглядят в сплошном наборе шрифты стиля модерн конца XIX — начала XX века.

Шрифт или логотип

Различия в подходе

Шрифтовик, каллиграф и графический дизайнер, делающий логотип, работают с буквами, но относятся к этому материалу по-разному.

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

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

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

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

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

Некоторые способы рифмовки знаков в логотипе:

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

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

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

Шрифты делятся на три большие группы:

  1. Текстовые. Хороший текстовый шрифт должен прежде всего быть максимально разнообразен графически в рамках предельно жестко заданного стиля. Буквы ни в коем случае не должны подделываться друг под друга, что помешает читаемости. Геометрия всегда приносится в жертву иллюзии. Текстовый шрифт должен выглядеть строго, умеренно и стройно.
  2. Акцидентные. Если текстовый шрифт должен нести сообщение, то акцидентный может его усилить. Акциденция не ограничена ничем. Единственный критерий качества акцидентного шрифта — количество хорошего дизайна, сделанного при его участии.
  3. Картиночные, состоящие не из букв.

Рифма в логотипах

С наибольшей силой рифмы проявляются, конечно, в логотипах. Логотип, являясь центром притяжения внимания, — сам по себе рифма для фирменного стиля. Его присутствие на всех продуктах, связанных с данным брендом, задает общий эмоциональный тон. Например, Coca-Cola — яркий представитель поп-музыки в логотипах, этакий Майкл Джексон, а, скажем, Cartier — это тоже поп-музыка, но уже классическая, вроде Штрауса.

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

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

Как начать делать шрифт

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

Кирилизация латинского оригинала

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

Направляющие: стандартно это высота прописных по букве H, высота строчных по букве x, высота верхних выносов (ascender) по b и l, величина нижних выносов (descender) по p или g, свисания под строку у круглых строчных и прописных знаков.

Знаки без изменений: скорее всего это будут A, B, C, E, H, O, P, T, X, a, c, e, o, p, x, y. Обычно подходит и M, за исключением случая описанного в таблице ошибок.

Знаки с минимальной переделкой: B в Б, Ъ, Ы, Ь; F в Г; K в К (если есть желание сделать шрифт более «русским»).

Все остальное рисуется самостоятельно, как если бы шрифт придумывался целиком, за одним важнейшим исключением:

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

Воспитанные дети так не делают:

Обычно так делать не следует:

Отчаянный способ или «кавалерийский наскок» на кириллицу

С чего начать? Со шрифтовой идеи. Это графический ход, найденный для одного-двух знаков. Из них «вытягивается» вся гарнитура.

1. Рисование

Первые наброски шрифта, как правило, делаются от руки на бумаге. Рисовать надо суть идеи, самое вкусное, то что представилось еще не замыленному внутреннему зрению.

Буквы-лидеры. Латинские: a, g, e, Ss, Cc, A, B, R, p, f. Кириллические: Кк, Лл, Дд, Уу, б. В этих буквах концентрируются почти все шрифтовые красоты: капли, выносы, хвосты, дуги.

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

Artemius. Ю. Гордон, сентябрь, 2000
Никакой критики, только поиск и находки

Если на бумаге рисуются буквы-лидеры, то при помощи компьютера строятся в первую очередь круглые и квадратные знаки. В шрифте их держат самые «скучные» знаки: Нн, Оо, треугольная A и самые насыщенные пересечениями буквы Вв и Мм. В поле внимания попадают еще знаки с выносами и диакритикой: b, i, k, y, Йй, ф.

2. Построение

Когда трассированные знаки приведены к единому размеру, начинается сравнение и отбор наиболее подходящих друг к другу вариантов. Строятся буквы НО, определяющие пропорции шрифта. Проверяется общая идея шрифта.

3. Ритм

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

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

Единственный способ контролировать ритм — постоянно просматривать серии знаков в разных сочетаниях.

4. Межбуквенные просветы

Этот этап может занять почти столько же времени, сколько конструирование знаков.

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

Железное правило, пришедшее из времен металлического набора, гласит: хорош тот шрифт, который гармонично смотрится без «подпиливания», то есть кернинга. В идеале буквы, стоя рядом в строке, должны создавать ровный тоновый рисунок без белых дыр и черных залипов.

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

5. Апроши

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

Сверху вниз: широкие апроши, узкие апроши, перетекание знаков

Межбуквенные расстояния должны быть такими, чтобы набор выглядел максимально равномерным, без дыр и залипов. Апроши похожих по форме букв визуально должны казаться одинаковыми. Буквы лучше ставить чуть шире, чем хочется. Апроши расставляются на довольно крупном превью, где буквы хочется сближать еще и еще. А потом в тексте выяснится, что они слиплись, как черная икра в банке. Поэтому ставьте свободнее — не прогадаете.

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

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

Буквы текстового шрифта Octava обходятся без кернинга даже в паре гд — настолько плотно заполнено пространство внутри буквенной площадки

Также я всегда стараюсь привести апроши к системе, организуя их в группы. Начинаю с основных — для прямых и круглых букв: ИЙНП, ОСЭЮ и их латинских аналогов. Потом ставлю прямые и круглые вперемежку и добиваюсь равномерности просветов: НННОООНОНО. После этого ввожу знаки промежуточной формы: ERSБВЗЯ. Затем треугольные и явно требующие кернинга знаки: AFTVГЬЪ. Когда буквы выровнены, перехожу к знакам препинания, цифрам и другим дополнительным знакам. Апроши для знаков препинания должны четко отделять их от букв любой формы.

6. Кернинг

В принудителном выравнивании особенно нужнаются треугольные буквы: в сочетании АТА просветы без кернинга всегда будут больше, чем в ННН. Также необходим кернинг в парах заглавная-строчная, особенно с буквами F, Г и Т. Количество кернинговых пар в разных кирилических шрифтах колеблется от нескольких сотен до полутора-двух тысяч. Если пар получается больше, значит, шрифт был недостаточно хорошо выравнен на стадии расстановки просветов.

Межбуквенные пробелы и кернинг надо обязательно проверять распечаткой. В текстовой массе сразу заметны дыры и залипы. Конечно, заодно проверяется и ритм, «командная игра» букв.

Для облегчения проверки шрифтв приводятся тестовые примеры и таблицы кернинговых пар, которые применялись в работах фирм «Паратайм» и «Леттерхед».

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

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

Сверстала и оформила электронную версию книги «О Жизни, Смерти и Любви»

Задача
Оформить и сверстать электронную версию книги «О Жизни, Смерти и Любви» в формате ePub.

В дополнение к печатному изданию книги «О Жизни, Смерти и Любви» я разработала ее электронную версию. Туда вошли все рассказы и иллюстрации из оригинала.

Каждая глава оформлена в точности, как печатное издание
Для удобства чтения между абзацами предусмотрен небольшой отступ
Иллюстрации вписаны в текст
Все сноски идут сразу после соответствующего абзаца

Книга доступна для бесплатной загрузки на сайте ЛитРес.


Участники проекта

Дизайнер
Таня Соколовская
Автор
Леа Веденски
Художник-иллюстратор
Маша Ройтман
Литературный редактор
Гульнара Сабрекова

Открытки и постеры для презентации книги «О Жизни, Смерти и Любви»

Задача
Разработать подарочные материалы для презентации книги «О Жизни, Смерти и Любви»

Для презентации книги Леи Веденски «О Жизни, Смерти и Любви» разработала рекламные и подарочные материалы: флаеры, открытки и постеры с иллюстрациями и цитатами из рассказов.

Постер с главным образом проекта «Живое Слово». Формат А3 и А2
Пригласительные флаеры на презентацию

Также сделала открытку с образом проекта «Живое Слово», которую можно подписать с оборотной стороны самостоятельно:

Участники проекта

Дизайнер
Таня Соколовская
Автор
Леа Веденски
Художник-иллюстратор
Маша Ройтман

Как я сверстала и оформила книгу

Представляю мое первое книжное издание! Я очень рада, что довелось открыть для себя это новое направление в дизайне. Работа над оформлением книги оказалась не легкой, но интересной. Тут я покажу процесс работы и всякие закулисные подробности.

Задача: сверстать, оформить и помочь издать художественную книгу израильского писателя и психолога Леи Веденски. Книга называется «О Жизни, Смерти и Любви»

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

Проиллюстрировала рассказы художник Маша Ройтман. Иллюстрации потрясающие и живые, выполнены в графическом стиле карандашом на бумаге:

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

Набросок обложки. Текст на иврите — грубый перевод русккоязычного названия в Google Translate

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

Первый вариант книжной полосы был таким:

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

Вертикальная иллюстрация
Горизонтальная иллюстрация

На этом этапе автор отказался от объединения иврита и русского языка в одной книге — это было лучшим решением.

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

Думаю над решением:
— Раз у нас пропала необходимость в двухколоночной верстке, то и придерживаться квадратного формата больше нет необходимости. Почему бы его не поменять?

Учитывая, что все иллюстрации нарисованы на бумаге формата А4, для полной гармонии я выбрала пропорциональный им формат — А5.

Работая над квадратным вариантом я полагалась только на свой эстетический вкус, но с форматом А5 возникли трудности. В поиске гармоничной пропорции наборы полосы я открыла для себя Яна Чихольда и его «Облик книги» — восхитительный «учебник» про вёрстку и оформление книг.

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

Иллюстрации также вписаны в полосу набора. Заодно прикинула обложку под новый формат
Чертеж Виллара

Гармония для текстовых блоков и иллюстраций найдена. Отпала нужда в крупном шрифте, поэтому для удобства чтения уменьшила его с 12 до 11 пт, теперь строка вмещает в среднем 5—7 слов.

Для текста я выбрала два шрифта: Newton для основного текста (сочетает в себе высокую удобочитаемость и признаки шрифтов старого стиля, под вечные темы, затрагиваемые в повествовании) и Jakob для заголовков (рукописный шрифт, отлично гармонирует с графическими иллюстрациями).

Работая над текстом, я также руководствовалась рекомендациями Чихольда.

Заголовок отцентрировала и набрала капителью с небольшой разрядкой букв, а от основного текста отделила его отступом. Поэтому первый абзац не имеет отступа слева:

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

Чтобы визуально выравнять границу текстового блока, я частично вынесла знаки пунктуации за нее:

Неправильно
Правильно

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

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

Убираем «висячие» предлоги в InDesign

Открываем документ и создаем Character Style с единственной настройкой «No Break», имя даем ему такое же:

Далее создаем Paragraph Style для основного текста и идем во вкладку GREP Style. Там жмем кнопку «New GREP Style» и в выпадающем списке «Apply Style» выбираем наш заранее созданный «No Break»:

В поле «To Text» вписываем следующее:
(?<= )((в|‬на|‬под|‬с|‬со|‬во|‬без|‬то|‬ли|‬бы|‬или|‬да|‬но|‬что|‬а|‬и|‬у|‬уж|‬так|‬как|‬для|‬перед|‬через|над|‬‬при|‬по|‬до|‬от|‬о|‬об|‬‬про|‬к|‬ко|‬не|‬за|‬из|‬ни|‬нас|‬я|‬он|‬она|‬оно|‬они|‬мы|‬ее|‬её|‬его|‬вас|‬ты|‬вы‬|‬все|‬всё)( |\. |, ))+

Далее, создаем новый GREP Style по аналогии с первым, но уже для предлогов с большой буквы:
‭‭‭((?<= )|(?<=^))((В|‬На|‬Под|С|‬Со|‬Во|‬Без|‬То|‬Ли|‬Бы|‬Или|Да|‬Но|‬Что|‬А|‬И|‬У|‬Уж|‬Так|‬Как|Для|‬Перед|‬Через|Над|‬‬При|‬По|‬До|‬От|‬О|‬Об|‬‬Про|‬К|‬Ко|‬Не|За|Из|‬Ни|‬Нас|‬Я|‬Он|Она|‬Оно|‬Они|‬Мы|‬Ее|‬Её|‬Его|‬Вас|‬Ты|‬Вы‭|‬Все|‬Всё))+‬

Чтобы было понятно:

  • Условие (?<= ) означает: только если перед предлогом стоит пробел;
    (?<=^) — только если предлог стоит в начале абзаца;
  • (‬в|‬на|‬под|‬с|‬со|‬во‭|...|‬вы‬|‬все|‬всё) — список всех предлогов, местоимений и союзов, которые не должны оставаться в конце строки;
  • ( |\. |, ) — знаки после предлогов: пробел, точка+пробел, запятая+пробел. Символ \ указывает на то, что точка после него рассматривается как точка, а не как GREP-метасимвол);
  • + указывает, что условие применимо и к идущим друг за другом предлогам, местоимениям и союзам, например «но нам это показалось интересным».

Подробнее о GREP метасимволах и принципах работы читайте в GREPоводстве.

Результат работы:

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

Участники проекта

Дизайнер
Таня Соколовская
Автор
Леа Веденски
Художник-иллюстратор
Маша Ройтман
Литературный редактор
Гульнара Сабрекова
Ранее Ctrl + ↓