Рассмотрим обычную ситуацию, дизайнер сделал чудесный, отличный, красивый, замечательный дизайн, который заказчик не смог не принять. Каждая страница смотрится прекрасно, никаких нареканий нет. Счастливый заказчик обращается к верстальщику/программисту и в итоге получает тот самый сайт с классным дизайном. Вроде бы история закончена, но нет…

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

Контент, как правило, заполняется редакторами WYSIWYG (What You See Is What You Get), или по-другому: что видишь, то получишь. Очень часто на сайтах, где регулярно обновляется контент, нужно публиковать статьи, в которых есть и цитаты, и таблицы, и нумерации, и какие то особенные выноски. Но так как в дизайне не было указано оформление всех этих элементов, то контент менеджер делает эти элементы как хочет. Более того, на уровне верстки ничего подобного не было предусмотрено верстальщиком. Таким образом, дизайн разваливается по мере того, как страницы наполняются все новым контентом.

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


Динамический контент — информация, которая будет меняться через админку. В макете на место динамического контента часто ставят Lorem Ipsum, что лучше не делать, потому что визуально макет становится более шаблонным. К слову о статичном контенте, лучше его сообщать дизайнеру заранее, так в будущем будет удобнее и программисту и заказчику.

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

1. Цитаты

Оформление цитаты

Очень классный элемент оформления для текста. Отлично справляется с визуальным разнообразием текста и также способен завлечь читателя.

2. Нумерованные и маркированные списки.

Списки: маркированный и нумерованный

Сложно найти более менее нормальный сайт где нет списков. Наверняка на сайте они пригодятся.

3. Таблицы.

Пример таблицы

Может у таблицы и не будет названия (не всегда оно нужно и уместно), но шапку и строки показать следует.

4. Изображения и видео.

Пример нестандартного оформления изображений

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

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

5. Ссылки.

3 состояния: обычное, активное, посещенное. Так как практически все создаваемые сайты имеют под собой коммерческую основу, то не вижу ничего страшного, если ссылки будут в стандартных цветах: синие, красные, фиолетовые соответственно. К таким цветам люди уже привыкли и им не нужно объяснять что синенькое это ссылка.

*6. Код.

Оформление для тега code

Если сайт технической направленности то нужно показать оформление для тега <code>. Функция этого тега в демонстрировании того, как выглядит код. Если вы делаете сайт про какую то косметику, цветы, ресурс про собачек и т. д., то тег код вам показывать не нужно.

*7. Специальное выделение текста.

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

Пункты 6 и 7 со звездочкой, так как они зависят от специфики сайта и не всегда их нужно делать.


Где же показать все эти элементы? Есть 2 подхода:

  1. На типовой странице.
  2. В отдельном файле руководства для верстальщика.
Тут кому как удобнее. Для меня цитаты, текст, изображения и таблицы проще размещать на типовой странице (все должно смотреться как единое целое и ничего не должно выбиваться из стиля). Ссылки, все заголовки и интерлиньяж удобнее показать в файле руководства для верстальщика.

О руководстве для верстальщика будет в следующих статьях. Текущий пост будет полезен и дизайнерам и заказчикам. Дизайнеры будут знать, что от них требуется сделать не только n страниц, но и кое-что еще. Заказчики будут знать что им можно и нужно требовать от дизайнера.