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

Смотите доклад «Технолог — тоже дизайнер» Артёма Поликарпова.

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

Этому и посвящена книга Артёма Горбунова «Типографика и вёрстка». Доступ к книге стоит денег, но её можно читать бесплатно прямо на сайте Бюро. Дело в том, что Артём публиковал главы этой книги по частям в «Советах», а уже потом упаковал их в интерактивную книгу. Вы можете бесплатно прочитать книгу целиком по ссылкам ниже.

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

1. Правило внутреннего и внешнего. Вёрстка смотрится гармонично, когда внутреннее пространство не больше внешнего. К примеру, если строки стоят к краям блока ближе, чем друг к другу, кажется, что тексту тесно.
2. Модульность. Страницы состоят из прямоугольных блоков. Эти блоки не должны пересекаться. Прямоугольники должны согласовываться по ширине и высоте, чтобы образовывать более крупные прямоугольники.
3. Правило якорных объектов. Его было трудно понять с первого раза :) Крупные и яркие объекты должны располагаться ближе к углам своего прямоугольника, или наоборот в центре. Выглядит нелепо, когда отдельный, но более лёгкий объект сдвигает якорный объект из центра. Совет про вёрстку плаката хорошо иллюстрирует это правило.
4. Формат и поля. Формат — это внешняя граница блока (border box). Поля — это паддинги. Пропорции полей влияют на ощущение вёрстки. Совет о полях рассказывает о связи между полями и межстрочным расстоянием, и заодно иллюстрирует правило внутреннего и внешнего.
5. Точка, линия и прямоугольник. Про основные формы в вёрстке. Точка (круг) очень активная и тянет на себя внимание. Много кругов — атас. Впихнуть невпихуемое можно в строку, ей всегда найдётся место.
6. Совет о выравнивании на примере текста в инпутах. Когда и как выравнивать. Выравнивание зависит от масштаба текста.

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

1. Заголовок
2. Текст
3. Иллюстрация
4. Элемент управления
5. Ссылка
6. Подпись

Модули

1. Текст без иллюстраций
2. Лента
3. Текст с илююстрациями
4. Форма текста и порядок чтения
5. Доминирующие и вспомогательные иллюстрации, вертикальные иллюстрации

Страницы

1. С модульной сеткой
2. Без иллюстраций
3. С иллюстрациями
4. Текстовая страница
5. Главная страница
6. Ушки, цитаты, фактоиды, врезки

Заключение

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

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

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

А если вы дизайнер, купили книгу и прочитали её, и хотите поделиться какой-то конкретной главой, можете просто дать ссылку на соответствующий совет.