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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

УДК 655.262
ББК 85.15

Оглавление

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

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

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

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

УДК 655.262
ББК 85.15

Оглавление

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

Работы Сэма Вин­стона — искус­ство, но прак­ти­че­ская вёрстка тоже выхо­дит из прямоугольников:

Каталог «Арк анбаунд». Дизайнер Этель Стругалла

Работы Сэма Винстона — искусство, но практическая вёрстка тоже выходит из прямоугольников:

Каталог «Арк анбаунд». Дизайнер Этель Стругалла

Ушки над шапкой «Гардиана» хулиганят и флиртуют со строгими прямоугольниками ниже шапки.

Гардиан

Подписи к фотографиям еды «Фудпорно» огибают её контуры в традициях и духе географических карт.

Время выходить из прямоугольника.

Гайдлайны Андроида. Эксей Пантелеев

Ушки над шап­кой «Гар­ди­ана» хули­га­нят и флир­туют со стро­гими пря­мо­уголь­ни­ками ниже шапки.

Под­писи к фото­гра­фиям еды «Фуд­порно» оги­бают её кон­туры в тра­ди­циях и духе гео­гра­фи­че­ских карт.

Время выхо­дить из прямоугольника.

Гардиан

Гайдлайны Андроида. Эксей Пантелеев

Культурные традиции

Дизай­нер, осво­ив­ший прин­ципы и нюансы вёрстки, при­сту­пает к реаль­ной работе и создаёт про­дукт: стра­ницу, пла­кат, упа­ковку, сайт.

Важ­ность кон­струк­ции нельзя недо­оце­ни­вать. Сколько ни гово­рится кра­си­вых слов о том, что дизай­нер про­ек­ти­рует сце­на­рии, интер­фейс дол­жен быть неви­ди­мым, а «дизайн — это как про­дукт рабо­тает, а не выгля­дит», 99% резуль­та­тов нашей повсе­днев­ной работы — это макеты, экраны, стра­ницы и шаб­лоны. Если дизай­нер не может ском­по­но­вать макет, резуль­тат будет сла­бым и любительским.

Вслед за Полом Рэн­дом про­ци­ти­рую Людвига Миса ван дер Роэ: «Форма — это не цель, это резуль­тат нашей работы».

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

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

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

На что опе­реться рус­скому дизайнеру?

Культурные традиции

Дизайнер, освоивший принципы и нюансы вёрстки, приступает к реальной работе и создаёт продукт: страницу, плакат, упаковку, сайт.

Важность конструкции нельзя недооценивать. Сколько ни говорится красивых слов о том, что дизайнер проектирует сценарии, интерфейс должен быть невидимым, а «дизайн — это как продукт работает, а не выглядит», 99% результатов нашей повседневной работы — это макеты, экраны, страницы и шаблоны. Если дизайнер не может скомпоновать макет, результат будет слабым и любительским.

Вслед за Полом Рэндом процитирую Людвига Миса ван дер Роэ: «Форма — это не цель, это результат нашей работы».

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

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

Мода облегчает ответы на такие вопросы. Два года назад дизайнеры рисовали фоны из дерева и замши, год назад — градиенты от лилового к жёлтому, сегодня обратились к матовым полупрозрачностям. Но если следовать за ребятами на Бехансе и Дрибле, получится третьесортный результат. Ребята на Бехансе и на Дрибле следуют за трендсеттерами — крупнейшими дизайнерами и рекламистами, и выдают вторичный результат. А хочется думать самому и отличать хорошее от плохого.

На что опереться русскому дизайнеру?

Славянская кириллическая традиция красива, интересна для изучения и бесспорно наша.

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

В лучшем случае сегодня это выглядит так. Прямо скажем, узкоспециализированно.

Сла­вян­ская кирил­ли­че­ская тра­ди­ция кра­сива, инте­ресна для изу­че­ния и бес­спорно наша.

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

В луч­шем слу­чае сегодня это выгля­дит так. Прямо ска­жем, узкоспециализированно.

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

Американский сайт Макдональдса

Весело и вкусно, но обра­тите вни­ма­ние на типо­гра­фику: про­пис­ные буквы и «кир­пич­ное» вырав­ни­ва­ние тек­сто­вых строк:

Реклама британская, а бренд и типографика — американские

Бри­тан­ский Мак­до­нальдс тоже устроен по аме­ри­кан­ским принципам.

Это неслу­чайно, у аме­ри­кан­ской куль­туры срав­ни­тельно недол­гая, но усто­яв­ша­яся и раз­ви­ва­ю­ща­яся традиция.

Этикетка виски «Джек Дэниелс»

Этикетка виски «Джек Дэниелс»

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

Американский сайт Макдональдса

Весело и вкусно, но обратите внимание на типографику: прописные буквы и «кирпичное» выравнивание текстовых строк:

Реклама британская, а бренд и типографика — американские

Британский Макдональдс тоже устроен по американским принципам.

Это неслучайно, у американской культуры сравнительно недолгая, но устоявшаяся и развивающаяся традиция.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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