Решение различных проблем форматирования текста документа, полезные советы и рекомендации

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

1. Составьте список текстовых стилей для всех элементов

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

• как меняются кегль, начертание и интерлиньяж;
• какие текстовые стили пропадают.

2. Разбейте заголовки, подзаголовки, абзацы и списки на отдельные слои.

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

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

-Хорошо: каждый текстовый элемент — отдельный слой. Не приходится делать лишних телодвижений, чтобы узнать параметры текстов. Легко измерить отступы.

3. Сгруппируйте списки

Группируем списки так:

• маркер и строка;
• общий список;
• заголовок, абзац и список.

- Плохо: каждый столбик — один слой. Трудно выставить отступы между строками и выровнять маркеры.

Если такой подход удобнее, отбивайте строки не проставлением Enter, а параметром «параграф» на панели текстовых стилей.

- Хорошо: все строки разбиты по слоям и каждая сгруппирована с маркером. Понятно, как маркер выравнивается относительно строки. Легко измерить расстояние между строками и столбцами.

Продумайте позиционирование и отступы

90% сайтов мы делаем с резиновой вёрсткой. При плохом позиционировании элементов трудно предугадать их поведение на вёрстке. Без привязки к сетке элементы могут гулять на 2-3 пикселя в любую сторону. Это вызывает головную боль у верстальщика. Если от верстальщика требуют чёткого следования макету (даже если в нём ошибки), он изнасилует дизайнера тубусом с распечатанными макетами.

1. Привязывайте все элементы к сетке или внутренним отступам блоков

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

- Плохо: текстовые блоки не привязаны к колонкам. Фото и имена ведущих расположены в случайном порядке.

- Хорошо: текстовые блоки привязаны к колонкам. Информация о ведущих приведена к одному виду и упакована в сейф-зону: так удобнее измерять отступы.

2. Привязывайте выровненный по центру текст к колонкам или модулям

Будет понятно, как текст ведёт себя на резиновой вёрстке. Текст с auto-шириной может центрироваться с погрешностями в несколько пикселей.

- Плохо: заголовок не привязан к колонкам. Непонятно, как он ведёт себя при уменьшении окна браузера: будет ли он одной строкой до победного или когда-то появится перенос.

- Хорошо: стало понятно, что заголовок выравнивается по абзацу. Он не может быть шире абзаца.

Привяжите тексты и иллюстрации к модулям: карточкам, слайдерам, кнопкам. Например, если ширина кнопки не зависит от ширины текста, привяжите текст ко внутренним отступам кнопки:

• Если ширина кнопки зависит от ширины текста, задайте тексту auto-ширину и сделайте у кнопки одинаковые отступы:

3. Задавайте иконкам и иллюстрациям сейф-зоны

Внутри одного списка размеры сэйф-зон должны совпадать.

- Плохо: из-за разных размеров иконок каждую приходится выравнивать индивидуально.

- Хорошо: благодаря одинаковым сэйф-зонам иконки выровняются на вёрстке автоматически.

4. Покажите горизонтальные отступы

Например, карточки и иконки хорошо привязываются к колонкам:

• В горизонтальных списках, которые не привязаны к сетке, установите одинаковые отступы:

- Хорошо: благодаря одинаковым сэйф-зонам иконки выровняются на вёрстке автоматически

- Плохо: горизонтальные отступы между пунктами меню различаются, потому что ширина пробела не даёт целых значений пикселей

-Хорошо: каждый пункт меню – отдельный слой. Между слоями легко установить одинаковые отступы.

5. Тестируйте страницы на дурацкий контент

Проверьте, как встают очень длинные тексты, очень короткие тексты, несуразные пропорции изображений и плохо обработанные фотографии. Если что-то выглядит адово – заново продумайте дизайн. Не все клиенты защитили докторскую по дизайнерскому искусству, поэтому при наполнении сайта они не заморачиваются.

Наведите порядок в слоях

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

1. Удалите скрытые слои

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

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

- Хорошо: если в макете нет скрытых слоев, поля группы совпадают с границами вложенных объектов

2. Сгруппируйте слои как матрёшки

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

Хорошая структура помогает ориентироваться в макете

3. Дайте понятные имена слоям и группам

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

Выстраивайте группы в том порядке, в каком модули размещены в макете. Например: хедер первый в списке групп, а футер последний.

- Плохо: по структуре не понять, что где находится

- Хорошо: имена групп совпадают с видимой структурой лендинга. Названия групп помогают понять поведение интерфейса

4. Сгруппируйте одинаковые элементы по одному шаблону

Хороший пример – карточки.

У карточек с одинаковой структурой легче понять поведение в разных состояниях.