Артём Гор­бу­нов

Типографика и вёрстка

🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру

Удобно листать не только прокруткой, но и клавишами‑стрелками:

 
между важными местами
Shift
между
разворотами

Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку

Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку

Артём Гор­бу­нов

Типографика и вёрстка

Изда­тель­ство Бюро Гор­бу­нова
2015
Артём Горбунов

Типографика и вёрстка

Издательство Бюро Горбунова
2015
удк 655.262
ббк 85.15
г67
Гор­бу­нов А. С.
г67
Типо­гра­фика и вёрстка. —
М.: Изд‑во Бюро Гор­бу­нова, 2015
ISBN 978‑5‑9907024‑0‑0

Пер­вая книга Изда­тель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по типо­гра­фике и вёрстке с акцен­том на маке­ти­ро­ва­нии для экрана. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров и разработчиков.

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

«Типо­гра­фика и вёрстка» после­до­ва­тельно отве­чает на вопрос как. Автор вво­дит прин­ципы модуль­но­сти и якор­ных объ­ек­тов, пра­вило внут­рен­него и внеш­него. Затем шаг за шагом наглядно объ­яс­няет, как добиться акку­рат­ной и плот­ной вёрстки сай­тов, сер­ви­сов и СМИ.

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑0‑0
© Изда­тель­ство
Бюро Гор­бу­нова, 2015

Оглавление

    Основы 4

    Базо­вые эле­менты 34

    Модули 74

    Стра­ницы 115

    Заклю­че­ние 155

удк 655.262
ббк 85.15
г67
г67
Горбунов А. С.
Типографика и вёрстка. —
М.: Изд‑во Бюро Горбунова, 2015
ISBN 978‑5‑9907024‑0‑0

Первая книга Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по типографике и вёрстке с акцентом на макетировании для экрана. Учебник предназначен для дизайнеров, редакторов и разработчиков.

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

«Типографика и вёрстка» последовательно отвечает на вопрос как. Автор вводит принципы модульности и якорных объектов, правило внутреннего и внешнего. Затем шаг за шагом наглядно объясняет, как добиться аккуратной и плотной вёрстки сайтов, сервисов и СМИ.

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑0‑0
© Издательство
Бюро Горбунова, 2015

Оглавление

    Основы 4

    Базовые элементы 34

    Модули 74

    Страницы 115

    Заключение 155

Скрыто 132 разворота

Иллюстрации

Отдельные внутритекстовые иллюстрации завёрстываются по левому краю или центру полосы набора.

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

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

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

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

Иллюстрации

Отдель­ные внут­ри­тек­сто­вые иллю­стра­ции завёр­сты­ва­ются по левому краю или цен­тру полосы набора.

После иллю­стра­ции (с под­пи­сью или без) остав­ляют уве­ли­чен­ное вер­ти­каль­ное расстояние.

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

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

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

Главная страница

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

Вме­сте с тем, дизайн глав­ной стра­ницы под­чи­ня­ется общим прин­ци­пам сборки стра­ниц, что мы рас­смот­рели ранее.

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

Главная страница

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

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

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

Лента

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

Тер­мин «лента» при­шёл из тра­ди­ци­он­ных инфор­ма­гентств, под­пис­чики кото­рых полу­чали ново­сти на бес­ко­неч­ную бумаж­ную ленту по теле­графу, теле­тайпу, телексу и, по мере про­гресса, по интернету.

Лента

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

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

В самом интер­нете ленты при­жи­лись не только на новост­ных сай­тах, но и в соци­аль­ных сетях:

Фейсбук

Твитер

Общий прин­цип устрой­ства их глав­ных стра­ниц — бес­ко­неч­ная сред­няя часть.

По прин­ципу ленты устро­ены мно­гие авто­ма­ти­че­ски обнов­ля­е­мые сайты, напри­мер «Советы» и Стековерфлоу.

В самом интернете ленты прижились не только на новостных сайтах, но и в социальных сетях:

Фейсбук

Общий принцип устройства их главных страниц — бесконечная средняя часть.

Твитер

По принципу ленты устроены многие автоматически обновляемые сайты, например «Советы» и Стековерфлоу.

Плитка

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

Плитка

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

Скрыто 34 разворота

Гор­бу­нов Артём Сергеевич

Типо­гра­фика и вёрстка

  • Aвтор и арт‑дирек­тор Артём Горбунов

  • Дизай­нер Алек­сандр Кан

  • Фото­граф Вла­ди­мир Колпаков

  • Кал­ли­граф Анна Данилова

  • Мет­ран­паж и соав­тор тестов
    Сер­гей Фролов

  • Раз­ра­бот­чики Рустам Кул­ма­тов,
    Васи­лий Полов­нёв
    и Андрей Ерес

  • Книга набрана шриф­тами
    «Бюро­се­риф» и «Бюросанс»

  • Дизайн‑бюро Артёма Гор­бу­нова
    Большая Новодмитровская улица,
    дом 36, стро­е­ние 2
    Москва, Рос­сия, 127015

  • bureau.ru

Горбунов Артём Сергеевич

Типографика и вёрстка

  • Aвтор и арт‑директор Артём Горбунов

  • Дизайнер Александр Кан

  • Фотограф Владимир Колпаков

  • Каллиграф Анна Данилова

  • Метранпаж и соавтор тестов
    Сергей Фролов

  • Разработчики Рустам Кулматов,
    Василий Половнёв
    и Андрей Ерес

  • Книга набрана шрифтами
    «Бюросериф» и «Бюросанс»

  • Дизайн‑бюро Артёма Горбунова
    Большая Новодмитровская улица,
    дом 36, строение 2
    Москва, Россия, 127015

  • bureau.ru

Закладки
Добавьте закладки
Ничего не нашлось