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

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

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

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

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

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

Фоторама

Доми­ни­ру­ю­щая фото­гра­фия в «фото­раме» зани­мает всю глав­ную стра­ницу или её важ­ную часть.

Фоторама

Доминирующая фотография в «фотораме» занимает всю главную страницу или её важную часть.

Орион‑арт

Ролекс

Листалка «фото­рамы» должна быть инфор­ма­тив­ной — с подпи­ся­ми или мини­а­тюр­ными картинками.

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

Орион‑арт

Листалка «фоторамы» должна быть информативной — с подписями или миниатюрными картинками.

Ролекс

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

Рубрикатор

Руб­ри­ка­тор напо­ми­нает япон­скую коро­бочку для ланча — в акку­рат­ных ячей­ках раз­ло­жены блюда из раз­де­лов сайта.

Боль­шин­ство глав­ных стра­ниц сай­тов пред­став­ляют собой рубрикатор.

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

Рубрикатор

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

Большинство главных страниц сайтов представляют собой рубрикатор.

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

Би‑би‑си

Сайт бюро

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

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

Би‑би‑си

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

Сайт бюро

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

Ушки, цитаты, фактоиды, врезки

Представим себе «бутерброд» из двух модулей.

Иллюстрация и заголовки служат мостиками к тексту. Но как расставить на странице дополнительные ловушки для читателя и сделать страницу интереснее?

Добавим цитату и фактоид.

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

Ушки, цитаты, фактоиды, врезки

Пред­ста­вим себе «бутер­брод» из двух модулей.

Иллю­стра­ция и заго­ловки слу­жат мости­ками к тек­сту. Но как рас­ста­вить на стра­нице допол­ни­тель­ные ловушки для чита­теля и сде­лать стра­ницу интереснее?

Доба­вим цитату и фактоид.

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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