Знакомая ситуация — мы получили все, вроде бы, макеты для сайта, но в процессе верстки оказалось, что ни на одном из 9 присланных макетов не изображены, скажем, таблицы! И верстальщик машет кулаками, мол: «Давай, дизайнер, дорисовывай мне все остальное! Не буду так верстать!»

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

Спасительное решение

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

Что мы должны там увидеть?

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

Итак, приступим.

Типографика

Блок, в котором содержится пример оформления текста на странице:

  • Заголовки от 1 до 6 уровня
  • Параграфы — размер текста и отступов, интерлиньяж.
  • Списки — нумерованный, маркированный и список определений. В случае маркированного списка возможно особое оформление маркера — тоже весьма важный момент.
  • Блок с цитатой, возможно, в двух вариантах — с левым и правым выравниванием.
  • Оформление ссылок — цвет, подчеркивание, все это — в четырех состояниях: обычном, при наведении, нажатии и для посещенной ссылки.

Код

Как будет оформлен вывод тега code? Возможно, необходимо использовать особую подсветку синтаксиса?

Нужно показать все эти тонкости.

Таблицы

Нужно вывести прайс-лист из 9000 позиций? Отличный выбор — таблица, но… погодите-ка, как ее оформить?

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

Формы

Почему-то именно о некоторых элементах форм очень часто забывают дизайнеры в своих макетах.

Зачастую они ограничиваются обычным полем ввода и какой-нибудь кнопкой. Причем не показывают, как будет выглядеть кнопка, когда пользователь наведет на нее курсор или нажмет, а в поле — начнет вводить текст.

Итак, кроме кнопок и полей ввода, нужно показывать:

  • элементы типа «чекбокс»
  • кнопки переключения (radio buttons)
  • элементы выбора (select)
  • элементы загрузки файлов (типа file)

Для каждого из этих элементов нужно показывать возможные состояния, для полей это может быть «фокус» или неактивное состояние, для кнопок — наведение, нажатие или то же неактивное состояние.

Также в дополнение к полям могут изображаться блоки:

  • сообщения об ошибке или об успешном (правильном) заполнении
  • поясняющие блоки с детальным описанием

Меню

Для всех меню необходимо показать:

  • как выделяется активный пункт, в котором находится посетитель
  • как выглядит пункт меню, когда в нем есть подменю
  • в конце концов, как выглядит пункт меню, когда на него наводят курсор

Изображения

Как будет выглядеть самая обычная картинка в тексте? А если захочется применить выравнивание по правому краю? В таком случае нужно показать отступы у картинки.

Как будет выглядеть картинка с подписью-комментарием?

Есть ли у нее рамка или любое другое украшательство? А если картинка одновременно ссылка — что будет происходить при наведении?

И в заключение