Оформление содержания сайта

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

Чтобы не сочинять этот список «из головы», я взял перечисление контентных элементов для одного из рабочих проектов.

Типовые элементы контента:

1. Заголовки

• H1 - он в названии страницы
• H2 - делит страницу на смысловые блоки
• H3 - дробит смысловые блоки
• H4 - чуть больше основного набора
• H5 - равный шрифту основного набора

2. Тексты

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

3. Списки

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

4. Ссылки

• обычные ссылки в тексте
  • обычное состояние
  • наведенная
  • посещенная
• второстепенные ссылки (например теги или хлебные крошки)
  • обычное состояние
  • наведенная
• псевдоссылки (открывает слой или данные без перезагрузки экрана)
  • обычное состояние
  • наведенная
• ссылка, которая открывает e-mail
• ссылка, которая открывает звонок Skype
• ссылка, которая откроется в новом окне
• ссылка, которая открывает ссылку на карту (Google, Yandex)

5. Псевдоактивность

• аккордеон (для примера на 3-4 пункта) обычное состояние, с одним развернутым пунктом, и на один из других пунктов наведен курсор
• табы (для примера 3-4 пункта) один пункт развернут и активен, один пункт спокойный/обычный, на один наведен курсор
• tooltip (подсказка) для аббривиатур, показано как выделяется текст, и всплывшая подсказка при наведении курсора (+ смена внешнего вида курсора)

6. Иллюстрации

• полосная иллюстрация, на всю ширину поля набора
• иллюстрация в нутри блока текста
• иллюстрация, которая при клике открывает бОльшую картинку (обычное состояние и с наведенным курсором)
• фотогаллерея, внутри текста
  • общий вид фотогаллереи, один элемент с наведенным курсором
  • открыта большая картинка
• видеоплеер внутри контента
  (если нет нужды разрабатывать свой плеер, а использовать готовый, то я рекомендую использовать Vimeo: он бесплатный, его легко социализировать, и он настраивается по внешнему виду и цветовой гамме, благодаря чему его можно вписать в дизайн)

7. Таблицы

• один стиль оформления простой таблицы
• второй стиль оформления более сложной таблицы

8. Формы

Простая форма, помещенная внутрь страницы (например «Обратная связь» или «Регистрация»)
содержит в себе:

• сам блок form
• поля строчного ввода (input), показано
  • обычное поле
  • недоступное поле
  • поле в которое сейчас происходит ввод
  • поле в котором ошибочные данные
• поле ввода текста (textarea)
• размещение названия поля
• показано как реализовать поля, обязательные для заполнения (*)
• подсказка к полю в каком формате нужно вводить данные.
• подсказку о сообщении того, что какое-то поле заполнено неправильно
• галочки checkbox, в двух состояниях (пустая и чекнутая)
• capcha, для проверки человечности
  • обычное состояние
  • сообщение, что капчу заполнили неверно
• состояния обычных кнопок:
  • обычное состояние
  • наведенная
  • недоступная
  • прогресс выполнения
• состояния кнопки по-умолчанию (более важной, например «Отправить» или «Добавить»)
  • обычное состояние
  • наведенная
  • прогресс выполнения
• сообщения
  • ОК, ваше сообщение отправлено
  • Ошибка, не удалось отправить сообщение

9. Компоновки

• (3) в одну колонку (основной набор)
• (1:1:1) в три равных колонки
• (2:1) в две колонки: большая и малая
• (1:2) в две колонки: малая и большая
• (1:1) в две равные колонки

Других дроблений внутри поля контента данный дизайн не предусматривает.

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

10. Файлы для скачивания

• Word (doc, docx, rtf)
• Excel
• PDF
• RAR
• ZIP
• любой другой формат (общая иконка)

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

Размышлял Павел Колодяжный, арт-директор в дизайн-бюро «make».