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

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

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

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

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

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

Дизайнер использует сетку и её нестандартные возможности, чтобы внедрять на страницу узнаваемые фирменные элементы, например «фактоиды» или цитаты на половину колонки.

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

Дизай­нер исполь­зует сетку и её нестан­дарт­ные воз­мож­но­сти, чтобы внед­рять на стра­ницу узна­ва­е­мые фир­мен­ные эле­менты, напри­мер «фак­то­иды» или цитаты на поло­вину колонки.

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

Приемлемо

Лучше

Скучно

Приемлемо

Плохо

Без иллюстраций

По традиции начнём с текста без иллюстраций. Простой способ собрать страницу — сделать «бутерброд», то есть расположить модули слоями друг под другом.

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

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

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

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

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

Если полностью игнорировать сетку и устроить вакханалию колонок, страница развалится.

Этим часто грешат промостраницы в интернете — так и атакуют нас рядами преимуществ и достоинств.

Без иллюстраций

По тра­ди­ции нач­нём с тек­ста без иллю­стра­ций. Про­стой спо­соб собрать стра­ницу — сде­лать «бутер­брод», то есть рас­по­ло­жить модули сло­ями друг под другом.

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

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

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

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

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

Если пол­но­стью игно­ри­ро­вать сетку и устро­ить вак­ха­на­лию коло­нок, стра­ница развалится.

Этим часто гре­шат про­мо­стра­ницы в интер­нете — так и ата­куют нас рядами пре­иму­ществ и достоинств.

Приемлемо

Лучше

Скучно

Приемлемо

Плохо

Вве­дём новый приём — плашку. Плашка помо­гает отде­лить модуль от сосед­него и объ­еди­нить его соб­ствен­ные части:

Плашка выде­ляет модуль на стра­нице. Поэтому из сосед­них бло­ков нужно ста­вить на плашку более важный.

Суще­ствует мил­лион раз­но­вид­но­стей сти­лей пла­шек и рамок от плос­ких мини­ма­ли­стич­ных до объ­ём­ных с гра­ди­ен­тами и тенями.

Оформ­ле­ние плашки — дань теку­щей моде или фир­мен­ному стилю, но её функ­ция оста­ётся одной и той же — объ­еди­нять и выделять.

Введём новый приём — плашку. Плашка помогает отделить модуль от соседнего и объединить его собственные части:

Плашка выделяет модуль на странице. Поэтому из соседних блоков нужно ставить на плашку более важный.

Существует миллион разновидностей стилей плашек и рамок от плоских минималистичных до объёмных с градиентами и тенями.

Оформление плашки — дань текущей моде или фирменному стилю, но её функция остаётся одной и той же — объединять и выделять.

Хорошая идея — одновременно сломать сетку важного модуля и поставить его на плашку. Плашка и особый ритм выделят блок среди других, при этом плашка «склеит» нестандартный модуль.

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

Хоро­шая идея — одно­вре­менно сло­мать сетку важ­ного модуля и поста­вить его на плашку. Плашка и осо­бый ритм выде­лят блок среди дру­гих, при этом плашка «склеит» нестан­дарт­ный модуль.

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

С иллюстрациями

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

Стра­ница выросла в раз­ме­рах, но не зря — с иллю­стра­ци­ями на неё при­хо­дит жизнь.

С иллюстрациями

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

Страница выросла в размерах, но не зря — с иллюстрациями на неё приходит жизнь.

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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