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

Позднее Ctrl + ↑

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

А тут электронная версия книги

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

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

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

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

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

Набросок обложки. Текст на иврите — грубый перевод русккоязычного названия в 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оводстве.

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

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

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

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

Обновление сайта daniellesden.com

Задача
Адаптировать сайт под любые экраны.
www.daniellesden.com

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

Первая версия
Вторая версия
Третья версия
Адаптивная версия

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

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

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

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

Изначальный дизайн раздела в виде таймлайна

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

Разбиваем все советы по темам: написание музыки, диджеинг, менеджмент, маркетинг, бизнес.

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

Размышляем:

— А что если в группировках по темам выводить не все советы, а только важные по усмотрению автора? И показать их в красивой журнальной вёрстке с крупными картинками?

— И как это поможет?

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

— А где будут жить остальные статьи, помимо этих важных?

— Все остальные советы будут снизу в ленте, с этим без изменений.

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

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

Звучит здорово. Приступаем к реализации:

Собираем макет предложенной идеи

Смотрим, оцениваем и продолжаем рассуждать:

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

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

— Это как?

— А вот так:

Анимация подгрузки помогает расставить акценты внимания

Это решение и вошло в финальную версию сайта.


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

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

Типографика и верстка книг. Часть 2

Ян Чихольд

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

Читайте также первую часть конспекта.

В продолжении моего конспекта «Облика книги» Яна Чихольда мы углубимся в правила набора и форматирования текста и в верстку иллюстраций. Будет познавательно и интересно :-)


Издательские правила набора текста

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

  1. Во всех заголовках и тем более в сплошном наборе пробел должен составлять одну треть кегельной шпации (кегельная шпация — пробельный элемент, равный по высоте и ширине кеглю данного шрифта).
  2. После точек в конце предложений и после сокращений нужно ставить только нормальный пробел, как во всей строке.
  3. Отдельные буквы и сокращения, такие как т.д., н.э., К. Ф. Майер, всегда набираются с уменьшенным пробелом.
  4. В конце заголовков и титулов точка не ставится.
  5. Нельзя набирать строчные буквы вразрядку. Вместо разрядки всегда применяется курсив.
  6. Прописные буквы всегда набираются с разрядкой (от 8 пунктов и выше минимум 1 1/2 пункта), а пробелы между ними тщательно выравниваются, причем лучше в сторону увеличения разрядки, а не уменьшения.
  7. Абзацный отступ всегда делается в круглую. Слишком большой отступ может привести к тому, что последняя строка абзаца будет короче отступа следующей строки.
  8. Кавычки должны быть одинаковой формы во всей книге: в русском языке независимо от шрифта традиционно используются кавычки-елочки « », а в цитате второго уровня применяются кавычки-лапки “ ”.
  9. Цифры, обозначающие примечания, должны быть набраны тем же шрифтом, что и основной текст. После знака примечания в виде цифры или звездочки не ставится скобка — ни в тексте, ни тем более в примечании.
  10. Подстрочные примечания отделяются от основного текста пустой строкой или сплошной тонкой линейкой. 1. Пустое пространство выше и ниже этой линейки должно быть не меньше интерлиньяжа основного текста страницы.
  11. Умляуты Ä, Ö, Ü не должны обозначаться Ae, Oe, Ue.
  12. При наборе чисел запятая используется только в десятичных дробях. Разряды тысяч разделяются шпациями, а не запятыми или точками. 300,000 — не триста тысяч, а просто триста. Триста тысяч набирают так: 300 000.
  13. Для разделения разрядов тысяч точки не используются. В десятичных дробях используется запятая: 3,45 м; 420,500 кг. Но, обозначая время, набирают точку: 2.30 ч. В русском языке принято использовать двоеточие: 2:30 ч. При наборе телефонных номеров лучше разделять цифры шпациями или дефисами, разделяя цифры на группы по две или три цифры: 123-45-67 или 123 45 67.

Абзацные отступы

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

Набор без отступа затрудняет восприятие текста

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

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

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

Курсив, капитель и кавычки в наборе книг и научных журналов

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

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

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

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

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

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

Цитаты набирают обычным шрифтом в кавычках. Также в кавычки заключается прямая речь; это не обязательно, да и не очень красиво, но текст становится более понятным, чем без кавычек.

Есть несколько видов кавычек.

  • Немецкие гусиные лапки: „n“. Концевые кавычки — это перевернутые запятые (“), а не висящие хвостиками вниз (”), потому что это получается двойной апостроф.
  • Французские кавычки: «n». В Германии их набирают уголками к букве: »n«. В российском типографском жаргоне французские кавычки называются кавычки-елочки, они считаются основными и применяются уголками наружу: «n». Немецкие кавычки называются кавычки-лапки, они считаются дополнительными и применяются так: „n“. Если нужно набрать цитату внутри цитаты, некоторые набирают «— , ‘ — » (только не ,n’ — апостроф не кавычка!), другие « — „ “ — ».
  • Англичане различают single quotation marks (‘n’) и double quotation marks (“n”). Чтобы набрать цитату в цитате, в Великобритании принято использовать одинарные кавычки как основные, а двойные — как дополнительные, а в Америке наоборот: ‘такие “кавычки” в Англии’, а “такие ‘кавычки’ в Америке”.

В разных странах свои формы кавычек и правила их употребления. Например, в Финляндии, Греции и Турции одна и так же форма кавычек применяются и как открывающая, и как закрывающая: ”кавычки в Финляндии”.

Об интерлиньяже

Интерлиньяж — расстояние между строками.

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

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

Если интерлиньяж размером в кегль или больше кегля, можно набирать слова в строке немного «шире», чем при компактном наборе: иначе из-за большого расстояния между строками создается ощущение, что слова в строке слипаются, и это уменьшает удобочитаемость.

Интерлиньяж в книге зависит от размеров полей. Большой интерлиньяж предполагает широкие поля, тогда плоскость шрифта воспринимается гармонично.

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

Набор надстрочных цифр и примечаний

Теперь поговорим о том, что уродливо, а потому и неправильно.

В надстрочных цифрах сносок в тексте книги:

  1. Неподходящее начертание мелких надстрочных цифр. Форма надстрочных цифр должна соответствовать основному шрифту или хотя бы приближаться к нему.
  2. Лишняя скобка после надстрочной цифры. Скобка после цифры уместна в рукописи, а в книге она ни к чему.
  3. Отсутствие отбивки между словом и последующей надстрочной цифрой. При хорошем наборе обязательно нужно отбивать тонкой шпацией цифру ссылки, иначе цифра не выделяется. Она не должна приклеиваться к слову.

В примечаниях:

  1. Надстрочные цифры, потому что они слишком малы, часто не читаются и к тому же обычно бывают из других, совсем неподходящих шрифтовых гарнитур. Они должны быть ясно различимы, ведь ищут именно их. Поэтому номер сноски нужно набирать только нормальными цифрами того же кегля, что и текст, ни в коем случае не мелкими (в русскоязычном наборе цифра ставится на верхнюю линию шрифта с полукегельной отбивкой от текста примечания без точки).
  2. Отсутствие знака препинания после номера сноски. После порядкового номера примечания, набранного цифрой нормальной формы и размера, обязательно ставится точка. В первой строке сноски правильно будет сделать отступ в круглую шпацию (эта рекомендация не относится к русскоязычному набору, см. пункт 1).
  3. Ненужная и некрасивая тонкая линейка на формат 4 цицеро слева над примечанием. Чтобы отделить текст от сноски, достаточно уменьшить кегль в сноске. Если разделение с помощью тонкой линейки все же требуется, нужно сделать ее на формат полосы.
  4. Слишком маленький интерлиньяж в строках. Полоса получится гармоничной, если и текст и примечание имеют одинаковый интерлиньяж, независимо от размера кегля. Но можно набирать примечание с интерлиньяжем на 1 пункт меньше, чем расстояние между строками в тексте, это не будет ошибкой. Сильное различие в интерлиньяже делает примечание заметно темнее основного текста, что нехорошо.
    И в основном тексте книги между абзацами не должно быть отбивки, и между отдельными примечаниями на странице отбивка не нужна.
  5. Путаное построение примечания из-за отсутствия абзацных отступов в нем. Непрофессиональное разделение сносок с помощью интерлиньяжа в несколько пунктов, даже в 1 пункт, дает нечеткую картину набора. Это так же неприемлемо, как и набор простого текста без абзацного отступа.

В дополнение к вышесказанному:

  1. Если в книге только одна сноска или же примечания встречаются по одному на странице, лучше набирать звездочку (астериск) вместо цифры 1.
    В тексте звездочку не отбивают от предшествующего слова, но в примечании после звездочки должна быть отбивка в 2 пункта (в русскоязычном тексте звездочка отбивается от предшествующего слова на два пункта и не отбивается от закрывающих кавычек).
  2. Если примечание состоит из одного или немногих слов и стоит одно на странице, его можно выключить по центру; при общей выключке по центру это будет смотреться гармонично.
  3. Бывает так, что несколько коротких примечаний следуют подряд, и они нарушат равновесие разворота, если их набрать одно под другим. Такие примечания можно набирать друг за другом по горизонтали, разделяя их пробелами величиной в круглую. В конце ставится точка.
  4. Очень длинное примечание можно разделить, поставив одну половину на левую, а другую на правую часть разворота, но не нужно этот прием слишком часто использовать.
  5. Если формат полосы набора основного текста очень широкий и кегль шрифта равен цицеро или еще больше, можно попробовать набрать примечания в две колонки.
  6. Начинать сноски на каждой полосе с цифры 1 не стоит, лучше сквозная нумерация сносок для всей книги или хотя бы для отдельных глав.

Многоточие

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

Точки нужно набирать без шпаций, ни в коем случае не вразрядку, получаются дыры в ткани страницы. Перед многоточием, обозначающим слова, правильно ставить обычный для строки межсловный пробел: «Я думаю, что я очень … боялся бы». Если после многоточия стоит знак препинания, он отбивается от последней точки шпацией в 1 пункт (в русском языке запятая ни до, ни после многоточия не ставится).

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

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

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

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

Верстка полосных иллюстраций

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

Максимальная ширина иллюстрации равна ширине полосы набора; максимальная высота меньше высоты полосы набора на 7—11 миллиметров, оставленных для одной или двух строк подписи к иллюстрации, подпись входит в полосу набора (рис. 1).

Рис. 1

Иллюстрации горизонтального формата по размеру и расположению тоже должны соответствовать полосе набора (рис. 2).

Рис. 2

Если у книги очень широкие поля, высота иллюстрации (б) может равняться ширине полосы набора, а подпись печататься на полях. Но в других случаях, как правило, подпись должна стоять в пределах полосы набора и, соответственно, иллюстрация должна быть уменьшена (рис. 3).

Рис. 3

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

Рис. 4

Разворот книги должен составлять единую композицию, даже если иллюстрации очень разные (рис. 5).

Рис. 5

Вертикальная, длинная иллюстрация занимает всю полосу набора в высоту, и, естественно, ее нужно ставить по центру полосы набора (рис.6, слева). При этом меньшая иллюстрация (рис. 6, справа) располагается так, чтобы соотношение между расстояниями от иллюстрации до верхнего обреза и до нижнего обреза составляло 1:2 или 3:5.

Рис. 6

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

Рис. 7а. Поперечная иллюстрация рядом с текстовой полосой
Рис. 7б. Нормальная и поперечная иллюстрации
Рис. 7в. Поперечная иллюстрация слева и нормальная справа (хуже, чем 7б; этот вариант применяется только в исключительных случаях). Итак, верх иллюстрации должен быть обращен к переплету! Вариант 7в ни в коем случае не исключает варианта 7г
Рис. 7г. Две поперечные иллюстрации, обе нужно смотреть с правой стороны; перевернуть картинку на левой полосе было бы ошибкой, поскольку читателя раздражает, когда ему приходится дважды переворачивать книгу

Десять главных и самых частых ошибок при издании книги

  1. Неподходящий формат: слишком большие, широкие и тяжелые книги. Книги должны быть удобными.
  2. Неструктурированный, бесформенный набор как результат отсутствия абзацного отступа.
  3. Начальные полосы, никак не выделеные, стоящие на верху страницы, без отступа слева, которые выглядят случайными страницами текста.
  4. Бесформенность, возникающая из-за того, что ошибочно используют только один кегль шрифта.
  5. Белая и чересчур белая бумага. Очень неприятна для глаз и вредит здоровью. Легкая ненавязчивая тонировка (цвета слоновой кости или темнее, но не кремовых оттенков)почти всегда гораздо лучше.
  6. Белый переплет. Выглядит нелепо, как белый костюм, потому что такой же маркий.
  7. Прямой корешок переплета. Корешок переплетенной книги должен быть слегка закруглен, иначе после чтения она перекашивается, а тетради в середине блока «вылезают».
  8. Название книги крупным кеглем, набранное вдоль корешка, который достаточно широк для поперечного размещения надписей. Никто не читает название на корешке издалека.
  9. Корешок без названия книги и имени автора. Непростительно для книг шире трех миллиметров.
  10. Незнание или пренебрежение правилами набора капители, курсива и кавычек.

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

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

Процесс создания логотипа музыкального проекта JOOF

JOOF Live — новый музыкальный проект британского артиста Джона ’00’ Флеминга.

Джон Флеминг — пионер электронной музыки, диджей, продюсер, радиоведущий и владелец лейбла JOOF Recordings. За двадцатилетнюю карьеру Джон достиг немыслимых высот, его по праву называют двигателем прогресса и одним из самых уважаемых артистов андеграундной музыкальной сцены.

В проекте «JOOF Live» Джон делает акцент на живые выступления, которые позволят раскрыть его потенциал как музыканта и привнести новое звучание.

Логотип проекта «JOOF Live» должен отличаться от логотипа лейбла JOOF Recordings, чтобы фанаты не путали названия лейбла и музыканта. Поэтому перед началом работы смотрю на логотип лейбла:

Основное внимание берут на себя две центральные буквы ОО — они статичные и прямоугольные. Широкий шрифт делает логотип массивным, словно он под прессом. Всего этого в логотипе JOOF Live я буду избегать и двигаться от противоположного, а для большей уникальности добавлю лигатуру. Также клиент пожелал отразить в логотипе фантастичность, футуризм и сделать его «космическим».

Рисую наброски, уделяя внимание преимущественно слову «JOOF», «Live» оставлю на потом:

Выбираю самый удачный на мой взгляд вариант и отрисовываю:

Добавляю и меняю детали:

Но в итоге останавливаюсь на изначальном виде:

Сейчас прочитать слово JOOF тяжело, поэтому меняю букву «J» до узнаваемости:

Откладываю «JOOF» в сторону и приступаю к «Live». Чтобы подчеркнуть движение вперед, использую курсив:

Подрезаю буквы «J» и «F» по наклонной «Live»:

Показываю клиенту:

Этот медведь обитает в инстаграме Джона

Логотип и сама идея клиенту нравятся, но он просит повысить читабельность слова JOOF, а именно буквы «J».

Работаю:

Выбираю правый нижний вариант, правлю букву «V» в слове Live и показываю клиенту:

Что-то по-прежнему не дает покоя в данном варианте, поэтому клиент просит показать другой вариант логотипа — в две строки, разместив слово Live под JOOF.

Строим такой вариант:

Пересечение «J» и «L» мне не нравится, а цифры «00» получились слишком узкими. Работаю над пересечением:

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

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

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

Меняю букву «F»:

Сравниваю:

В таком виде лого теряет всю свою компактность и минималистичность в деталях. Откладываю в сторону этот вариант и приступаю к новому.

Задача остается неизменной — создать логотип JOOF Live, где слово JOOF будет отличаться от логотипа лейбла.

Пробую новый вариант лигатуры между «JO» и «OF»:

В таком виде лигатуры нам напомнили орнамент меандра:

Меняю соединение «OF» и дописываю слово Live:

Показываю клиенту:

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

Продолжаю работу. Беру одну из идей, которая появилась в начале:

Идея основана на главных чертах логотипа лейбла JOOF: вытянутые вверх буквы, загнутый вверх хвостик в горизонтальном штрихе «J» и развернутый вертикально средний штрих буквы «F». Если посмотреть на старый и новый лого лейбла, то всего этого в них нет:

Прикидываю варианты:

Отбрасываю угловатый лого (на картинке выше — средний) и работаю над двумя другими.

Строю вариант, основанный на кругах:

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

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

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

По просьбе клиента разрабатываю дополнительные варианты логотипа, где JOOF находится в рамке и с подписями «Live» и «A John 00 Fleming production».

Подбираю рамку:

Останавливаюсь на средней слева. Ищу расположение подписи Live:

Выбираю первые варианты и увеличиваю межбуквенное расстояние в «Live»:

Разрабатываю подпись «A John 00 Fleming production» в стиле логотипа:

Примеряю ее к логотипу в том же положении, что и «Live» для общей стилистики:

Клиент утверждает все варианты и принимает работу!

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

Как я сделала логотип музыкального лейбла JOOF Mantra

Mantra — новое подразделение лейбла звукозаписи JOOF Recordings, основанного в Брайтоне в 1998 году. Под новым брендом лейбл будет издавать прогрессивную электронную музыку в жанрах Progressive и Psytrance.

Стояла задача разработать логотип для JOOF Mantra, но при этом сохранить логотип JOOF Recordings, то есть слово «JOOF» должно остаться неизменным.

Логотип JOOF Recordings

Перед началом работы я посмотрела на результаты поиска по запросу «mantra logo».

Результаты поиска по запросу «mantra logo»

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

Поиски идеи начала с изучения алфавита хинди:

Тут я обнаружила схожесть буквы R с буквой र [ra] и приняла это за основу будущего логотипа.

Набросала эскизы:

Приступила к отрисовке.

В таком виде слово мне не понравилось. Работаю дальше — меняю конструкцию «A», пробую округлить концы букв, экспериментирую с «M», меняю высоту букв — получается куча вариантов:

Выбираю самый удачный вариант:

Параллельно работаю над другой идеей:

Тут я изобразила слово «Mantra» в виде звуковой волны.

Увеличила толщину линий, смотрю результат:

Примеряю оба варианта к основному логотипу JOOF:

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

Возвращаюсь к первому варианту и пробую менять буквы «M» и «N»:

Второе слово читаю как «тапка» :-) Решаю сделать букву «N» ближе к прописной, чтобы слово воспринималось как латинское, и рисую новую «N»:

Сравниваю варианты:

Однозначно, новая «N» выглядит лучше. Но теперь мне не нравится буква «A». Решаю сделать ее тоже прописной подстать остальным буквам. Рисую варианты:

Пробую:

Выбираю классическую округлую форму, но отказываюсь от засечки у конечной «A». Увеличиваю высоту буквы, чтобы визуально она не казалась меньше остальных букв:

Примеряю результат к логотипу JOOF Recordings:

В таком виде JOOF сильно доминирует. Выравниваю толщину букв:

Смотрю на результат:

Теперь смущает разная высота. Обрезаю ножки у мантры и укорачиваю засечку у «M»:

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

Результат мне нравится! Показываю клиенту:

Клиент в восторге — логотип очень нравится.

Готовлю руководство по использованию логотипа и передаю все материалы.

Третья версия сайта www.daniellesden.com

Задача
Освежить и улучшить все разделы сайта.
www.daniellesden.com

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

Первая версия
Вторая версия
Третья версия
Адаптивная версия

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

А еще верхнее меню на сайте теперь плавно скрывается при прокрутке страниц вниз, и также плавно появляется при прокрутке вверх. Кайф! Попробуйте сами.


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

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

Типографика и верстка книг. Часть 1

Ян Чихольд

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

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

Читайте продолжение во второй части.


Введение

Совершенная типографика — это скорее наука, чем искусство. Недостаточно полностью овладеть ремеслом, лишь постепенно можно дорасти до мастерства.

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

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

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

Продуманные пропорции страницы и полосы набора

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

Книга должна быть очень удобной или хотя бы достаточно удобной.

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

Существует множество пропорций страницы, то есть соотношений ее ширины и высоты. Каждый знает хотя бы понаслышке о пропорции «золотого сечения»: ровно 1:1,618. Пропорция 5:8 приближается к «золотому сечению». Чуть дальше от него стоит пропорция 2:3. Кроме пропорций 1:1,618, 5:8, 2:3, для книг чаще всего используют 1:1732 (1:√3) и 1:1,414 (1:√2). См. рис. 1.

Рис. 1. Сравнительная ширина различных прямоугольников: A 1:2,236 (1:√5), B 1:2 (1:√4), C 5:9, D 1:1,732 (1:√3), E 3:5, F 1:1,618 (21:34) — «золотое сечение», G 1:1,538 — см. рис. 2, H 2:3, I 1:1,414 (1:√2), K 3:4

На рис. 2 показан прекрасный, но не очень известный прямоугольник, построенный на основе пятиугольника; пропорция 1:1,538.

Рис. 2. Прямоугольник, выстроенный из пятиугольника. Пропорция 1:1,538 (иррациональная)

Геометрически определяемые иррациональные пропорции сторон 1:1,618 («золотое сечение»), 1:√2, 1:√3, 1:√5, 1:1538 (рис. 2) и простые рациональные пропорции 1:2, 2:3, 5:8, 5:9 или ясные, продуманные, определенные. Все остальное — произвольные, случайные соотношения. Разница между ясной и случайной пропорцией заметна, хотя часто незначительна. Хоть это и трудно объяснить, однако доказано, что человеку кажется приятней или красивей геометрически ясные, продуманные пропорции, а не произвольные, непродуманные соотношения.

Уродливый формат делает книгу уродливой.

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

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

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

Канон Рауля Розариво (1903—1966, агрентинский типограф, художник, иллюстратор). Размер и расположение полосы набора определяется с помощью деления диагонали страницы на девять частей (рис. 3).

Рис. 3. Деление высоты и ширины страницы на девять частей по принципу Розариво. Пропорция листа 2:3

Способ Иоганна ван де Граафа (голландский типограф). Простейший способ построения, геометрия заменяет расчет в миллиметрах (рис. 4).

Рис. 4. Деление на девять частей по принципу ван де Граафа, показанное на странице с пропорциями 2:3

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

Рис. 5. Чертеж Виллара. С помощью этого канона, показанного жирными линиями, можно без масштабной линейки делить отрезок на любое количество равных частей

На рис. 6 чертеж Виллара изображен сам по себе, без книжной страницы.

Рис. 6. Канон деления Виллара, вписанный в прямоугольник 2:3. Длинная сторона страницы разделена на части до двенадцатой доли

Итак, для примера рассмотрим книжные форматы с пропорциями 1:√3, 1:√2 и ин-кварто (3:4), используя девятичастное членение с использованием чертежа Виллара, так как он подходит для любого прямоугольника (рис. 7—9). Итак, для примера рассмотрим книжные форматы с пропорциями 1:√3, 1:√2 и ин-кварто (3:4), используя девятичастное членение с использованием чертежа Виллара, так как он подходит для любого прямоугольника (рис. 7—9).

Рис. 7. Пропорция страницы 1:√3 (1:1,732). Деление высоты и ширины страницы на девять частей
Рис. 8. Пропорция страницы 1:√2 (так называемый «нормальный» формат). Деление высоты и ширины страницы на девять частей
Рис. 9. Пропорция страниц 3:4 (ин-кварто). Деление высоты и ширины страницы на девять частей. И здесь полоса набора должна соответствовать пропорциям страницы

При помощи этого способа можно спроектировать гармоничные полосы набора даже для необычных форматов — квадратного (рис. 10) и горизонтального (рис. 11).

Рис. 10. Пропорция страницы 1:1. Деление высоты и ширины страницы на девять частей
Рис. 11. Пропорция страницы 4:3. Деление высоты и ширины страницы на девять частей

Деление страницы на девять частей не является единственно правильным. Если мы разделим страницу на двенадцать частей, то, как видно на рис. 12, полоса набора станет больше.

Рис. 12. Пропорция страницы 2:3. Деление высоты и ширины страницы на двенадцать частей при помощи чертежа Виллара (рис. 6)

На рис. 13 показано деление на шесть частей по высоте и ширине страницы с пропорцией 2:3.

Рис. 13. Пропорция страницы 2:3. Деление высоты и ширины страницы на шесть частей. Композиция маленького молитвенника, написанного в конце пятнадцатого века Маркесом Винчентинусом

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

Кегль шрифта и интерлиньяж

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

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

Колонцифра

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

Типографика традиционного титульного листа

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

Титул  — провозвестник текста

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

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

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

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

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

Рис. 3. Прекрасный французский титул эпохи Возрождения с большой издательской маркой. Париж, 1585
Для титула лучше всего подходит набор в форме кубка (рис. 4), если только это возможно.
Рис. 4. Титул набран в форме кубка

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

Строки прописных букв без разрядки или с недостаточной разрядкой всегда уродливы

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

Цифры в тексте титула («с 240 иллюстрациями») надо набирать прописью («с двумястами сорока иллюстрациями», «восемнадцатый век»); только годы — арабскими цифрами (1958).

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

Несколько сортов масла могут испортить кашу, а слишком много кеглей — титул

Рис. 5. Титул работы автора. В стиле немецкого рококо. 1957

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

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

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

Рис. 6. Титул работы автора. Набран гарнитурой Монотайп Белл. 1954

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

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

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


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

Создание сайта лейбла Digital Om Productions

Digital Om Production — музыкальный лейбл, расположенный в Индии и Непале. Лейбл выпускает современную электронную танцевальную музыку в стилях Progressive и Psychedelic Trance, а также работает как букинг-агентство для своих артистов.

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

Изучаем рынок, смотрим сайты других лейблов:

Сайты других лейблов

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

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

Схема сайта

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

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

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

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

Размышляем: «Так, сверху — большие и яркие кнопки, ссылки на магазины, где продаётся музыка. Но что если добавить на сайт альбом, который еще не вышел? Что будет вместо кнопок?».

Решаем сделать пунктирный контур с надписью «Forthcoming» (грядущий релиз). Эта надпись будет автоматически выводится, если дата выхода альбома будущее число, значит менеджеру сайта не придется менять её вручную.

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

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

Не забываем и про страницу ошибки 404 (это когда пользователь случайно попадает на несуществующую страницу, например, когда ошибается в написании адреса): чтобы зашедшему сюда пользователю не было скучно, размещаем небольшую историю о том, что такое «Ом».

Отдельные макеты делаем для мобильной версии сайта:

Собираем все макеты, готовим презентацию и показываем клиенту:

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

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

Сайт сделали за 4 недели. Поддерживается и наполняется сотрудниками лейбла.


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

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

Процесс работы над логотипом детского магазина «Тютюпки»

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

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

Мне пришла идея заложить в образ девочек знаменитых трех обезьянок «ничего не слышу, ничего не вижу, ничего не говорю». Только в нашем случае три девочки, которые делают все с точностью да наоборот — внимательно смотрят, все слышат и громко кричат. Ведь детки не любят сидеть тихо на месте :-)

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

Первые эскизы

Для наглядности отрисовала оба варианта и показала клиенту.

Девочки «обезьянки»
Дракоши-сестрички

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

Второй вариант трех девочек

Но первые девочки приглянулись больше.

Дополнила одежду и украсила буквы.

Было — стало

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

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

Итоговый вариант логотипа

Логотип и визитки Оза Минасова

Оз Минасов — архитектор и дизайнер интерьера из Израиля. Работы Оза по-настоящему лаконичны и современны. Сделала логотип, состоящий из инициалов клиента, и визитную карточку.

Читайте также о процессе создания логотипа.

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

Визитные карточки в жизни (фото студии печати Монобайт):

За счет склеивания белой и черной бумаги, срез получился полосатым

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

Ранее Ctrl + ↓