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

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

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

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

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

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

Хорошо

Плохо

Хорошо

Плохо

Хорошо

Плохо

К странице применяется правило якорных объектов — иллюстрации должны тяготеть к углам, сторонам или визуальному центру. Но при этом на хорошо сбалансированной странице иллюстрации распределены равномерно.

Ошибкой было бы собрать все иллюстрации в самом верху, далеко внизу или у одной из сторон.

Хорошо

Плохо

Хорошо

Плохо

Хорошо

Плохо

К стра­нице при­ме­ня­ется пра­вило якор­ных объ­ек­тов — иллю­стра­ции должны тяго­теть к углам, сто­ро­нам или визу­аль­ному цен­тру. Но при этом на хорошо сба­лан­си­ро­ван­ной стра­нице иллю­стра­ции рас­пре­де­лены равномерно.

Ошиб­кой было бы собрать все иллю­стра­ции в самом верху, далеко внизу или у одной из сторон.

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

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

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

Слои чере­ду­ются по визу­аль­ной ярко­сти, дина­мике, эмо­ци­о­наль­ному тону, пре­об­ла­да­нию иллю­стра­ций или тек­ста, раз­меру иллю­стра­ций, длине тек­ста и обя­за­тельно по ритму.

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

Слои чередуются по визуальной яркости, динамике, эмоциональному тону, преобладанию иллюстраций или текста, размеру иллюстраций, длине текста и обязательно по ритму.

Рас­смот­рим отдельно осо­бен­ный тип модуля с иллю­стра­ци­ями — «галерею»:

Плохо

Хорошо

Сайт «Мэри Трюфель»

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

Мы не под­дер­жи­ваем путь лени­вых веб‑дизай­не­ров — мёрт­вые одно­об­раз­ные мат­рицы из фото­гра­фий. Жизнь при­хо­дит с раз­но­об­ра­зием раз­ме­ров и формы.

Рассмотрим отдельно особенный тип модуля с иллюстрациями — «галерею»:

Плохо

Хорошо

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

Сайт «Мэри Трюфель»

Мы не поддерживаем путь ленивых веб‑дизайнеров — мёртвые однообразные матрицы из фотографий. Жизнь приходит с разнообразием размеров и формы.

Кирпично

Интересно

К гале­реям при­ме­нимо пра­вило модуль­но­сти — блоки из фото­гра­фий должны стре­миться к пря­мо­уголь­ной форме. Но «кир­пич» из иллю­стра­ций выгля­дит как… кирпич.

Скучно, душно и моно­тонно. Такой модуль выгля­дит тяже­ло­весно и с тру­дом встра­и­ва­ется в стра­ницу рядом с другими.

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

На при­мере с гори­зон­таль­ной фото­гра­фией у модуля появи­лось два набора полей — внеш­ний, вокруг боль­шой фото­гра­фии, и внут­рен­ний, вокруг вер­ти­каль­ной фото­гра­фии и подпи­си к ней.

Кирпично

К галереям применимо правило модульности — блоки из фотографий должны стремиться к прямоугольной форме. Но «кирпич» из иллюстраций выглядит как… кирпич.

Скучно, душно и монотонно. Такой модуль выглядит тяжеловесно и с трудом встраивается в страницу рядом с другими.

Интересно

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

На примере с горизонтальной фотографией у модуля появилось два набора полей — внешний, вокруг большой фотографии, и внутренний, вокруг вертикальной фотографии и подписи к ней.

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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