🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
Первая книга Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по типографике и вёрстке с акцентом на макетировании для экрана. Учебник предназначен для дизайнеров, редакторов и разработчиков.
К сожалению, из многочисленных книг о типографике и модульных сетках остаётся непонятно, как именно собрать выразительный макет с прочной конструкцией. В лучшем случае дизайнеру остаётся выуживать крупицы смысла и копировать удачные примеры.
«Типографика и вёрстка» последовательно отвечает на вопрос как. Автор вводит принципы модульности и якорных объектов, правило внутреннего и внешнего. Затем шаг за шагом наглядно объясняет, как добиться аккуратной и плотной вёрстки сайтов, сервисов и СМИ.
Основы 4
Базовые элементы 34
Модули 74
Страницы 115
Заключение 155
Первая книга Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по типографике и вёрстке с акцентом на макетировании для экрана. Учебник предназначен для дизайнеров, редакторов и разработчиков.
К сожалению, из многочисленных книг о типографике и модульных сетках остаётся непонятно, как именно собрать выразительный макет с прочной конструкцией. В лучшем случае дизайнеру остаётся выуживать крупицы смысла и копировать удачные примеры.
«Типографика и вёрстка» последовательно отвечает на вопрос как. Автор вводит принципы модульности и якорных объектов, правило внутреннего и внешнего. Затем шаг за шагом наглядно объясняет, как добиться аккуратной и плотной вёрстки сайтов, сервисов и СМИ.
Основы 4
Базовые элементы 34
Модули 74
Страницы 115
Заключение 155
Плохо
Хорошо
Иллюстрация — самый плотный элемент вёрстки и сильнее всего активирует контрпространство. Если неудачно скомпоновать иллюстрации разных размеров и пропорций, пространство между ними образует навязчивые углы, тупики и ступеньки.
Поэтому дополнительный воздух и подписи лучше «отжимать» к краям галереи.
Плохо
Иллюстрация — самый плотный элемент вёрстки и сильнее всего активирует контрпространство. Если неудачно скомпоновать иллюстрации разных размеров и пропорций, пространство между ними образует навязчивые углы, тупики и ступеньки.
Хорошо
Поэтому дополнительный воздух и подписи лучше «отжимать» к краям галереи.
Приведём рекомендации по вёрстке экранной текстовой страницы со статьёй, заметкой, книжной главой или текстом о компании.
В отличие от модульной страницы, состоящей из отдельных блоков‑атомов, текстовая страница представляет собой поток для последовательного чтения — например как этот разворот. Подобно длинной молекуле полимера, текстовая страница включает в себя разнообразные элементы в свободном порядке: подзаголовки, списки, таблицы и иллюстрации.
Модульная
Текстовая
Колонка основного текста занимает
Текст в основной колонке имеет длинные строки, и, как правило, выигрывает в читаемости при небольшом увеличении интерлиньяжа по сравнению со стандартным.
Текст, выровненный влево с рваным правым краем, должен «дышать» справа, то есть край формата или соседняя колонка не должны подходить к нему слишком близко.
Текст дробится на абзацы. В экранной вёрстке абзацы обычно отделяют вертикальными отступами, как в этой главе. В канонической швейцарской сетке, привязанной к базовым линиям, отступ между абзацами строго равен одной строке, поэтому его иногда называют «слепой строкой». На «бесконечной» экранной странице эта условность не имеет смысла, поэтому межабзацный отступ часто уменьшают до половины строки или даже сильнее.
Приведём рекомендации по вёрстке экранной текстовой страницы со статьёй, заметкой, книжной главой или текстом о компании.
В отличие от модульной страницы, состоящей из отдельных блоков‑атомов, текстовая страница представляет собой поток для последовательного чтения — например как этот разворот. Подобно длинной молекуле полимера, текстовая страница включает в себя разнообразные элементы в свободном порядке: подзаголовки, списки, таблицы и иллюстрации.
Модульная страница
Текстовая страница
Колонка основного текста занимает
Текст в основной колонке имеет длинные строки, и, как правило, выигрывает в читаемости при небольшом увеличении интерлиньяжа по сравнению со стандартным.
Текст, выровненный влево с рваным правым краем, должен «дышать» справа, то есть край формата или соседняя колонка не должны подходить к нему слишком близко.
Текст дробится на абзацы. В экранной вёрстке абзацы обычно отделяют вертикальными отступами, как в этой главе. В канонической швейцарской сетке, привязанной к базовым линиям, отступ между абзацами строго равен одной строке, поэтому его иногда называют «слепой строкой». На «бесконечной» экранной странице эта условность не имеет смысла, поэтому межабзацный отступ часто уменьшают до половины строки или даже сильнее.
Основной текст имеет один главный заголовок первого уровня и дробится на части с помощью подзаголовков.
Кегль заголовков второго уровня обычно увеличен по сравнению с основным текстом. Перед такими заголовками пропускают примерно две строки, после делают отступ, равный отступу швейцарского абзаца — как у надписи «Подзаголовки» на этом развороте.
Заголовки третьего уровня удобно набирать полужирным основного кегля и не отбивать от последующего текста, как над колонками текста на развороте брендбука Скайсканера.
Подобные «уплотнительные» меры визуально упрощают структуру страницы, помогают избежать путаницы в уровнях вложенности заголовков и частей текста.
Заголовки четвёртого уровня запрещены в любом уважающем себя издании, кроме специализированных словарей и справочников.
Подзаголовки в иерархии могут быть оформлены комбинацией разных стилей: кегля, полужирного начертания, капители, курсива и выделения цветом. Главные правила — чередование, то есть яркий контраст стиля заголовков на соседних уровнях вложенности, и чувство меры.
Основной текст имеет один главный заголовок первого уровня и дробится на части с помощью подзаголовков.
Кегль заголовков второго уровня обычно увеличен по сравнению с основным текстом. Перед такими заголовками пропускают примерно две строки, после делают отступ, равный отступу швейцарского абзаца — как у надписи «Подзаголовки» на этом развороте.
Заголовки третьего уровня удобно набирать полужирным основного кегля и не отбивать от последующего текста, как над колонками текста на развороте брендбука Скайсканера.
Подобные «уплотнительные» меры визуально упрощают структуру страницы, помогают избежать путаницы в уровнях вложенности заголовков и частей текста.
Заголовки четвёртого уровня запрещены в любом уважающем себя издании, кроме специализированных словарей и справочников.
Подзаголовки в иерархии могут быть оформлены комбинацией разных стилей: кегля, полужирного начертания, капители, курсива и выделения цветом. Главные правила — чередование, то есть яркий контраст стиля заголовков на соседних уровнях вложенности, и чувство меры.
Для успешной работы дизайнеру необходимо:
Понимать принципы дизайна.
Разбираться в типографике и вёрстке.
Знать основы дизайна пользовательского интерфейса.
Уметь управлять задачами и проектами.
Освоить инфостиль и основы редактуры.
Быть готовым к переговорам и работе с ожиданиями клиента.
Особенности Школы бюро:
1) дистанционное обучение;
2) беспощадная система отбора и отсева на всех ступенях;
3) бесплатные места для лучших студентов;
4) гарантия трудоустройства;
5) чистая радость познания.
Обратить внимание:
а) на правильность,
б) однородность,
в) целесообразность.
— Элементы списков обозначаются:
— арабскими цифрами с точкой;
— арабскими цифрами или русскими буквами со скобкой;
— графическими маркерами;
— втяжкой.
— Элементы списков обозначаются:
арабскими цифрами с точкой;
арабскими цифрами или русскими буквами со скобкой;
графическими маркерами;
втяжкой.
— Обратить внимание:
на правильность,
однородность,
целесообразность.
Список, или перечень, — это предложение с однородными членами, разбитыми для удобства чтения на отдельные строки, обозначенными графическими маркерами или наборными символами. Поэтому любой список предваряется обобщающим текстом (общей, неповторяющейся частью предложения) или заголовком в той же синтаксической роли.
Первый элемент перечня ставится ровно на следующую строку за обобщающим текстом без увеличения расстояния между строками, чтобы подчеркнуть, что это то же предложение. А дополнительное расстояние между элементами списка помогает визуально отделить их друг от друга.
В «Справочнике издателя и автора» Аркадия Мильчина приведены подробные рекомендации по оформлению разных видов списков. Ниже — самые употребительные варианты.
Арабскими цифрами с точкой обозначают элементы перечня, если каждый элемент является отдельным предложением, то есть начинается с прописной буквы и оканчивается точкой. Но даже в этом случае список представляет собой синтаксическую и смысловую единицу, требующую обобщающего текста или заголовка.
Арабские цифры или русские строчные буквы с закрывающей скобкой используются, если весь перечень представляет собой одно предложение, а его элементы разделены запятой или точкой с запятой.
Если элементы списка простые, то есть состоят из нескольких слов без знаков препинания внутри, допустимо ставить между элементами запятую. Если простые элементы не содержат ссылок, то можно не увеличивать расстояние между элементами.
Вместо цифр и букв в ненумерованных списках элементы часто обозначаются графическими маркерами или символами.
Если для чистоты вёрстки элементы списка не имеют специальных обозначений, рекомендуется использовать втяжку.
Список, или перечень, — это предложение с однородными членами, разбитыми для удобства чтения на отдельные строки, обозначенными графическими маркерами или наборными символами. Поэтому любой список предваряется обобщающим текстом (общей, неповторяющейся частью предложения) или заголовком в той же синтаксической роли.
Первый элемент перечня ставится ровно на следующую строку за обобщающим текстом без увеличения расстояния между строками, чтобы подчеркнуть, что это то же предложение. А дополнительное расстояние между элементами списка помогает визуально отделить их друг от друга.
В «Справочнике издателя и автора» Аркадия Мильчина приведены подробные рекомендации по оформлению разных видов списков. Ниже — самые употребительные варианты.
Арабскими цифрами с точкой обозначают элементы перечня, если каждый элемент является отдельным предложением, то есть начинается с прописной буквы и оканчивается точкой. Но даже в этом случае список представляет собой синтаксическую и смысловую единицу, требующую обобщающего текста или заголовка.
Арабские цифры или русские строчные буквы с закрывающей скобкой используются, если весь перечень представляет собой одно предложение, а его элементы разделены запятой или точкой с запятой.
Если элементы списка простые, то есть состоят из нескольких слов без знаков препинания внутри, допустимо ставить между элементами запятую. Если простые элементы не содержат ссылок, то можно не увеличивать расстояние между элементами.
Вместо цифр и букв в ненумерованных списках элементы часто обозначаются графическими маркерами или символами.
Если для чистоты вёрстки элементы списка не имеют специальных обозначений, рекомендуется использовать втяжку.
Для успешной работы дизайнеру необходимо:
Понимать принципы работоспособного дизайна.
Разбираться в типографике и иметь навыки вёрстки.
Знать основы проектирования пользовательского интерфейса и представления информации.
Уметь управлять задачами, проектами, исполнителями и собственным временем.
Освоить информационный стиль и основы редактуры.
Понимать юридическую сторону дизайна.
Быть готовым к переговорам и работе с ожиданиями клиента.
Особенности Школы бюро:
1) дистанционное обучение;
2) беспощадная система отбора и отсева на всех ступенях;
3) бесплатные места для лучших студентов;
4) гарантия трудоустройства;
5) чистая радость познания.
Обратить внимание:
а) на правильность,
б) однородность,
в) целесообразность.
Элементы списков обозначаются:
— арабскими цифрами с точкой;
— арабскими цифрами или русскими строчными буквами;
— с закрывающей скобкой;
— графическими маркерами или наборными знаками;
— втяжкой.
Элементы списков обозначаются:
арабскими цифрами с точкой;
арабскими цифрами или русскими строчными буквами;
с закрывающей скобкой;
графическими маркерами или наборными знаками;
втяжкой.
Обратить внимание:
на правильность,
однородность,
целесообразность.
Цель таблицы — упрощение поиска и сравнения данных. Избыточные повторы снижают её информативность и наглядность, усложняют поиск, так как делают таблицу менее лаконичной.
Повторяющиеся данные рекомендуется выносить в заголовки групп строк или колонок, в заголовок таблицы или в поясняющий текст к таблице.
Порядок строк должен также упрощать поиск и сравнение. Почти всегда можно найти более удачный способ сортировки, чем просто по алфавиту.
По умолчанию все значения в таблице выравниваются по верху и по левому краю. Если числовые значения сравнимы и измеряются в одной единице, они выравниваются по разрядам и затем по левому краю колонки самым длинным числом. Для упрощения технической реализации также допустимо выравнивать числа по правому краю колонки.
На примере оформление таблицы с заголовком и поясняющим текстом.
Показано количество выпитых чашек без учёта
Эспрессо | Капучино | Лате | Американо | Всего | |
---|---|---|---|---|---|
2013 | |||||
Сентябрь | 61 | 20 | 70 | 61 | 212 |
Октябрь | 68 | 29 | 56 | 60 | 213 |
Ноябрь | 70 | 21 | 13 | 17 | 121 |
2014 | |||||
Сентябрь | 54 | 65 | 28 | 35 | 182 |
Октябрь | 59 | 77 | 51 | 53 | 240 |
Цель таблицы — упрощение поиска и сравнения данных. Избыточные повторы снижают её информативность и наглядность, усложняют поиск, так как делают таблицу менее лаконичной.
Повторяющиеся данные рекомендуется выносить в заголовки групп строк или колонок, в заголовок таблицы или в поясняющий текст к таблице.
Порядок строк должен также упрощать поиск и сравнение. Почти всегда можно найти более удачный способ сортировки, чем просто по алфавиту.
По умолчанию все значения в таблице выравниваются по верху и по левому краю. Если числовые значения сравнимы и измеряются в одной единице, они выравниваются по разрядам и затем по левому краю колонки самым длинным числом. Для упрощения технической реализации также допустимо выравнивать числа по правому краю колонки.
На примере оформление таблицы с заголовком и поясняющим текстом.
Показано количество выпитых чашек без учёта
2013 | |
---|---|
Сен | |
Эсп. | 61 |
Капуч. | 20 |
Лате | 70 |
Америк. | 61 |
Всего | 142 |
Окт | |
Эсп. | 68 |
Капуч. | 29 |
Лате | 56 |
Америк. | 60 |
Всего | 157 |
Ноя | |
Эсп. | 70 |
Капуч. | 21 |
Лате | 13 |
Америк. | 17 |
Всего | 108 |
2014 | |
Сен | |
Эсп. | 54 |
Капуч. | 65 |
Лате | 28 |
Америк. | 35 |
Всего | 154 |
Окт | |
Эсп. | 59 |
Капуч. | 77 |
Лате | 51 |
Америк. | 53 |
Всего | 189 |
Горбунов Артём Сергеевич
Типографика и вёрстка
Aвтор и арт‑директор Артём Горбунов
Дизайнер Александр Кан
Фотограф Владимир Колпаков
Каллиграф Анна Данилова
Метранпаж и соавтор тестов
Сергей Фролов
Разработчики Рустам Кулматов,
Василий Половнёв
и Андрей Ерес
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»
Дизайн‑бюро Артёма Горбунова
дом 36, строение 2
Москва, Россия, 127015
Горбунов Артём Сергеевич
Типографика и вёрстка
Aвтор и арт‑директор Артём Горбунов
Дизайнер Александр Кан
Фотограф Владимир Колпаков
Каллиграф Анна Данилова
Метранпаж и соавтор тестов
Сергей Фролов
Разработчики Рустам Кулматов,
Василий Половнёв
и Андрей Ерес
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»
Дизайн‑бюро Артёма Горбунова
дом 36, строение 2
Москва, Россия, 127015