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

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

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

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

 
между важными местами
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

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

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

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

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

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

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

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

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

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

Лента

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

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

Лента

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

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

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

Фейсбук

Твитер

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

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

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

Фейсбук

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

Твитер

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

Плитка

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

Плитка

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

Метрикдизайн

Пинтерес

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

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

Метрикдизайн

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

Пинтерес

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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