Титул книги

Книга Артема Горбунова — наиболее полный справочник для дизайнеров-верстальщиков. В ней все принципы доступно объяснены и снабжены примерами. Каждый дизайнер должен прочитать эту книгу и понимать написанное там.

У «Типографики и верстки» интересный формат, она представляет собой страницу в интернете. По-сути, вся книга — высокотехнологичный лонгрид с навигацией, закладками и интерактивом. Плюс такого формата — возможность показать вещи, которые сложно показать на бумаге. К сожалению, такую книгу можно читать только с компьютера или планшета с интернетом. Еще я пробовал читать с телефона. Текст мелковат, конечно, но при желании читать можно.

Пример интерактива с сайта книги:

Чтобы время от времени освежать память не перечитывая книгу и лучше усвоить информацию я написал конспект.

Стоит купить

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

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

А еще в книге больше 100 шаблонов, которые служат отличной шпаргалкой при верстке самых разных разворотов.

Указатель шаблонов верстки. Скриншот с сайта книги.

Основы верстки

Правило внутреннего и внешнего (или теория близости) — главное правило верстки. Его суть сводится к тому, что внутренние отступы должны быть меньше внешних.

Прямоугольник — наше всё: плакат, экран монитора, газета или любой другой носитель. Основной прямоугольник (формат) делится на меньшие прямоугольники (модули) и это помогает структурировать информацию. При этом не обязательно заполнять все модули. Пустота и контр­про­стран­ство тоже части верстки.

Якорные объекты — самые визуально яркие объекты. Их стоит размещать по углам, краям или в центре прямоугольника, тогда макет не развалится. Хорошая вёрст­ка исполь­зу­ет силу углов и сто­рон формата.

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

Точка, линия и прямоугольник — составляющие любой страницы.

• Точка привлекает внимание и не любит конкуренции. Роль точки может выполнять круг, одинокая цифра, обтравленное изображение и прочие объекты, не имеющие четкой прямоугольной формы.
• Линия — это, как правило, строка. Она спокойна и упорядочена, обычно ей находится место в любом макете.
• Прямоугольник я описывал выше. Он царь-формат.

Текст нужно выравнивать по нижней или верхней линии строчных букв. При этом выносные элементы, обычно, не учитываются.

Базовые элементы

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

Заголовок — якорный объект. Не стоит использовать внутри заголовка разные стили, хотя иногда он может быть составным. Заголовок принимает форму текстового модуля к которому относится и служит разделителем между модулями. В вертикальных модулях заголовок переносится на несколько строк. При этом плохо, когда становится слишком много строк. В таком случае лучше использовать составные заголовки.

Текст равномерно заполняет свой контейнер. Интер­ли­ньяж зависит от длины строки, чем строка длиннее по количеству слов, тем он больше.

Иллюстрация заметнее заголовка, она должна быть заметна и осмысленна. Хорошая практика — обрезать с иллюстрации все лишнее и акцентироваться на важном.

Элементы управления бывают точечными, линейными и прямоугольными. Точечные элементы плохо уживаются с себе подобными и хорошо смотрятся в «якорных» местах. Линейным элементам свойственно увеличиваться по горизонтали, но ужиматься по вертикали. Прямоугольные элементы очень заметны, как иллюстрации, нужно в первую очередь уделять внимание им.

Ссылка должна быть:

• понятна: выделена цветом, подчеркнута, располагаться на одной строке и вести туда, куда посетитель ожидает;
• удобна: достаточна велика, отзывчива при навдении и, по возможности, сгруппирована с другими ссылками.

Подпись помогает читателю «втянуться» в основной текст. Она не обязательна, если без нее все очевидно.

Выносные линии не выделены в отдельную главу, но про них сказано много важного. Часть из этого я не знал. Процитирую полностью:

Выносные линии должны быть тонкими: не более 20% чёрного на экране или 0,25 п. на бумаге. Они не должны пересекаться между собой и должны как можно меньше пересекать изображение. Выносные линии не должны втыкаться в указываемую деталь. Не должны совпадать или идти параллельно с ближайшими линиями самой иллюстрации. Выносные линии должны иметь достаточную длину, чтобы их было легко заметить.

Модули

Текст без иллюстрации

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

Лента

Список ссылок или чего-то подобного. Лента может быть горизонтальной, вертикальной и, даже, разбитой на колонки. У ссылок могут быть бирки и подписи. Если ссылок много нужно отделять их расстоянием или линейками. Сложные ленты могут быть разбиты подзаголовками.

Текст с иллюстрациями

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

Форма текста и прорядок чтения

Человек читает текст слева направо, сверху вниз. Из-за внезапной здоровой картинки читатель может подумать, что текст закончился. В матрице из текстовых блоков направление чтения не всегда очевидно. Положение иллюстрации относительно текста тоже задает направление. Случайное выравнивание по высоте и ширине может создать псевдомодуль, объединив разные по смыслу блоки. Модули не долж­ны пере­се­кать­ся меж­ду собой и вле­зать в про­стран­ство друг друга.

Доминирующие и вспомогательные иллюстрации

Иллюстрации должны подчиняться иерархии. Главная иллюстрация «мощнее» второстепенных, у второстепенных тоже есть иерархия. Вспомогательной иллюстрации очень хорошо живется в (правой!) подмышке.

Вертикальные иллюстрации

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

Скриншот из главы «Форма текста и порядок чтения»

Страницы

С модульной сеткой

Страница без сетки может выглядеть хорошо, но с сеткой лучше. Сетка помогает унифицировать страницы (экранные, бумажные — не важно) и ускорить работу над ними.

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

Чтобы страница не была скучной нужно использовать ритм: располагать модули по колонкам, делать их разного размера. Можно даже чуть-чуть испортить сетку, но не переусердствовать. Чтобы выделить главное стоит использовать плашку.

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

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

Текстовая страница

• Основной текст занимает 60-70% ширины (на больших экранах — еще меньше) и делиться на абзацы, разделенные «пустой строкой» (это только про веб).
• Подзаголовки должны быть, чем глубже уровень — тем невзрачней подзаголовок, использование четвертого уровня подзаголовков считается моветоном.
• Перед списком всегда есть обобщающий текст или заголовок, но нет дополнительного отступа сверху.
• В таблицах должно быть минимум повторов, порядок строк должен упрощать поиск, числовые значения выравниваются по разрядам и пол левому краю.
• Ссылки — подчеркнутые и синие, при наведении цвет меняется, а посещенные ссылки «выцветают». Если это файл, то рядом нужно указать размер.
• Иллюстрации верстают слева или по центру.

Главная страница

Дизайн главной страницы подчиняется вышеописанным принципам. Самые частые виды страниц — «лента», «плитка», «фоторама», «рубрикатор».

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

Цепляют взгляды и делают страницу интереснее.

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

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

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

В погоне за формой нельзя опираться только на Дрибл. Автор предлагает опираться на культуру и на европейские и швейцарские традиции верстки.

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

Мой результат теста после главы «Страницы»

Ссылки

На протяжении всей книги есть ссылки на разные книги и статьи. Я выписал некоторые:

• Артемий Лебедев. Теория близости
• Артем Горбунов об общей теории близости
• Хайно Энгель. Параметры и конструкция японского дома
• Йозеф Мюллер-Брокман. Модульные системы в графическом дизайне
• Сергей Серов. Швейцарский абзац
• Артемий Лебедев. Секреты хорошего гипертекста
• Артем Горбунов О расстановке ссылок в новостях
• Армин Хофманн. Руководство по графи­ческому дизайну: принципы и практика
• Руководство по фирменному стилю НАСА
• Брендбук Скайсканера

Я деплою сайт на хостинг через гит, потому что это удобно. Таскать каждый раз кучу файлов по ФТП — прошлый век. В моем случае это Бегет, но у других хостеров ситуация схожая.

Шаг 1

Создаем FTP-юзера с доступом к корневой директории сайта (на уровень ниже от public_html) и включаем для него SSH. Сразу же запишем куда-нибудь доступы. Мы храним их в таком формате:

Логин FTP-юзера: username
Пароль: ************
Репозиторий: username@server-ip:project.git

Шаг 2

В корневой сайте создаем папку. ssh, а в ней файл authorized_keys. Туда запишем ssh-ключи людей, которые будут работать с этим проектом. Можно это сделать через ФТП, но мне привычней через SSH.

ssh username@server-ip
mkdir .ssh
cd .ssh
touch authorized_keys
nano authorized_keys

О том как сгенерировать SSH-ключ есть отличная инструкция на Гитхабе.

Шаг 3

В папке public_html инициализируем новый репозиторий и добавим файлы под контроль версий.

cd ~/public_html
git init
git add -A
git commit -m 'Init'

Шаг 4

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

cd ../
git clone --bare public_html project.git
cd public_html
git remote add hub ../project.git
git remote show hub

Последняя команда не обязательна. Она нужна, чтобы удостоверится, что все ок.

Шаг 5

В /public_html/.git/hooks/ создаем файл post-commit и ставим ему права 700.

cd ~/public_html/.git/hooks
touch post-commit
chmod 700 post-commit
nano post-commit

Внутрь помещаем следующее:

#!/bin/sh
echo
echo «Пушим изменения...»
echo
git push hub

Шаг 6

В /project.git/hooks/ создаем файл post-update и ставим ему права 700.

cd ~/project.git/hooks
touch post-update
chmod 700 post-update
nano post-update

Внутрь помещаем следующее:

#!/bin/sh
echo
echo «Вытягиваем изменения...»
echo
cd ~/public_html/ || exit
unset GIT_DIR
git pull hub master
exec git update-server-info

Безопасность

Стоит закрыть доступ к основновном Git-репозеторию через .htaccess

cd ~/public_html/
nano .htaccess

Вставляем следующее:

# deny access to the top-level git repository:
RewriteEngine On
RewriteRule \.git - [F,L]

Успех!

Это все, после этого можно клонировать репозиторий и работать:

git clone username@server-ip:project.git

или так

git remote add origin username@server-ip:project.git
git push -u origin master

Однажды я нашел в Википедии эту статью:

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

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