Статьи Артёма Горбунова про типографику и вёрстку

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

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

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

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

  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. Культурные традиции

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

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

Поделиться
Отправить