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

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

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

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

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

Оглавление

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

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

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

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

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

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

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

Словарная история.
Сэм Винстон

Словарная история.
Сэм Винстон

Словарная история.
Сэм Винстон

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

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

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

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

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

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

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

Гардиан

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

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

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

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

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

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

Гардиан

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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