🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
Первая книга Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по типографике и вёрстке с акцентом на макетировании для экрана. Учебник предназначен для дизайнеров, редакторов и разработчиков.
К сожалению, из многочисленных книг о типографике и модульных сетках остаётся непонятно, как именно собрать выразительный макет с прочной конструкцией. В лучшем случае дизайнеру остаётся выуживать крупицы смысла и копировать удачные примеры.
«Типографика и вёрстка» последовательно отвечает на вопрос как. Автор вводит принципы модульности и якорных объектов, правило внутреннего и внешнего. Затем шаг за шагом наглядно объясняет, как добиться аккуратной и плотной вёрстки сайтов, сервисов и СМИ.
Основы 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 | 212142 |
| Октябрь | 68 | 29 | 56 | 60 | 213157 |
| Ноябрь | 70 | 21 | 13 | 17 | 121108 |
| 2014 | |||||
| Сентябрь | 54 | 65 | 28 | 35 | 182154 |
| Октябрь | 59 | 77 | 51 | 53 | 240189 |
Цель таблицы — упрощение поиска и сравнения данных. Избыточные повторы снижают её информативность и наглядность, усложняют поиск, так как делают таблицу менее лаконичной.
Повторяющиеся данные рекомендуется выносить в заголовки групп строк или колонок, в заголовок таблицы или в поясняющий текст к таблице.
Порядок строк должен также упрощать поиск и сравнение. Почти всегда можно найти более удачный способ сортировки, чем просто по алфавиту.
По умолчанию все значения в таблице выравниваются по верху и по левому краю. Если числовые значения сравнимы и измеряются в одной единице, они выравниваются по разрядам и затем по левому краю колонки самым длинным числом. Для упрощения технической реализации также допустимо выравнивать числа по правому краю колонки.
На примере оформление таблицы с заголовком и поясняющим текстом.
Показано количество выпитых чашек без учёта
| Эсп.рессо | Капуч.ино | Лате | Америк.ано | Всего | |
|---|---|---|---|---|---|
| 2013 | |||||
| Сентябрь | 61 | 20 | 70 | 61 | 212142 |
| Октябрь | 68 | 29 | 56 | 60 | 213157 |
| Ноябрь | 70 | 21 | 13 | 17 | 121108 |
| 2014 | |||||
| Сентябрь | 54 | 65 | 28 | 35 | 182154 |
| Октябрь | 59 | 77 | 51 | 53 | 240189 |
Ссылки в тексте должны быть синего цвета и подчёркнуты. При наведении ссылки подсвечиваются акцентным цветом, например красным. Для посещённых ссылок должен использоваться специальный цвет, как правило «выцветший» лиловый, за исключением ссылок в меню и специальных элементах управления.
Ссылки на файлы оформляются как обычные ссылки. Текст внутри ссылки и рядом с ней должен сообщать, что именно содержится в файле, какого он типа и размера. Размер должен указываться
Коллекция редких файлов конца двадцатого века ЗИП, 1,2 МБ
Макеты для печати ЕПС в архиве ЗИП, 52 КБ
Инструкция: manual.pdf 0,7 МБ
Ссылку на адрес электронной почты (mailto) рекомендуется использовать только вместе с адресом, указанным в явном виде: mail@artgorbunov.ru
Ссылки в тексте должны быть синего цвета и подчёркнуты. При наведении ссылки подсвечиваются акцентным цветом, например красным. Для посещённых ссылок должен использоваться специальный цвет, как правило «выцветший» лиловый, за исключением ссылок в меню и специальных элементах управления.
Ссылки на файлы оформляются как обычные ссылки. Текст внутри ссылки и рядом с ней должен сообщать, что именно содержится в файле, какого он типа и размера. Размер должен указываться
Коллекция редких файлов конца двадцатого века ЗИП, 1,2 МБ
Макеты для печати ЕПС в архиве ЗИП, 52 КБ
Инструкция: manual.pdf 0,7 МБ
Ссылку на адрес электронной почты (mailto) рекомендуется использовать только вместе с адресом, указанным в явном виде: mail@artgorbunov.ru
Отдельные внутритекстовые иллюстрации завёрстываются по левому краю или центру полосы набора.
После иллюстрации (с подписью или без) оставляют увеличенное вертикальное расстояние.
Не рекомендуется прерывать текст банерами и посторонними ссылками, особенно занимающими полную ширину полосы. Читатель может посчитать, что основной текст уже закончился, и закончить чтение.
Подписи выводятся шрифтом уменьшенного кегля. Точка в конце подписи не ставится
Наборы иллюстраций, предназначенных для сравнения или иллюстрирующих последовательность, могут быть свёрстаны в две или три колонки
Отдельные внутритекстовые иллюстрации завёрстываются по левому краю или центру полосы набора.
После иллюстрации (с подписью или без) оставляют увеличенное вертикальное расстояние.
Не рекомендуется прерывать текст банерами и посторонними ссылками, особенно занимающими полную ширину полосы. Читатель может посчитать, что основной текст уже закончился, и закончить чтение.
Подписи выводятся шрифтом уменьшенного кегля.
Точка в конце подписи не ставится
Наборы иллюстраций, предназначенных для сравнения или иллюстрирующих последовательность, могут быть свёрстаны в две или три колонки
Главная страница сайта — это его лицо, обложка, фирменный стиль, одёжка и квинтэссенция. Главная страница объясняет суть, знакомит с возможностями, определяет сценарий и задаёт тон. Главная страница — не просто функциональная точка входа. У главной страницы есть — должно быть — своё особое ощущение.
Вместе с тем, дизайн главной страницы подчиняется общим принципам сборки страниц, что мы рассмотрели ранее.
Структура главных страниц сайтов очень разнообразна. Но часто встречаются характерные виды: «лента», «плитка», «фоторама» и «рубрикатор». Иногда в чистом виде, иногда в комбинации.
Главная страница сайта — это его лицо, обложка, фирменный стиль, одёжка и квинтэссенция. Главная страница объясняет суть, знакомит с возможностями, определяет сценарий и задаёт тон. Главная страница — не просто функциональная точка входа. У главной страницы есть — должно быть — своё особое ощущение.
Вместе с тем, дизайн главной страницы подчиняется общим принципам сборки страниц, что мы рассмотрели ранее.
Структура главных страниц сайтов очень разнообразна. Но часто встречаются характерные виды: «лента», «плитка», «фоторама» и «рубрикатор». Иногда в чистом виде, иногда в комбинации.
Горбунов Артём Сергеевич
Типографика и вёрстка
Aвтор и арт‑директор Артём Горбунов
Дизайнер Александр Кан
Фотограф Владимир Колпаков
Каллиграф Анна Данилова
Метранпаж и соавтор тестов
Сергей Фролов
Разработчики Рустам Кулматов,
Василий Половнёв
и Андрей Ерес
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»
Дизайн‑бюро Артёма Горбунова
дом 36, строение 2
Москва, Россия, 127015
Горбунов Артём Сергеевич
Типографика и вёрстка
Aвтор и арт‑директор Артём Горбунов
Дизайнер Александр Кан
Фотограф Владимир Колпаков
Каллиграф Анна Данилова
Метранпаж и соавтор тестов
Сергей Фролов
Разработчики Рустам Кулматов,
Василий Половнёв
и Андрей Ерес
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»
Дизайн‑бюро Артёма Горбунова
дом 36, строение 2
Москва, Россия, 127015