Важнейшее требование к макетам дизайна – наличие всех состояний элементов и блоков внутри макета.
Без выполнения этого пункта пользоваться сайтом будет очень тяжело! Проблемы проявятся на этапе демонстрации верстки и программирования, что испортит впечатление от сотрудничества и увеличит сроки реализации проекта.
Без дизайнера верстальщик не делает никаких выделений интерактивных элементов, кроме изменения курсора мыши (обозначение возможности кликнуть или ввести данные).
У всех интерактивных элементов (ссылки, поля ввода, кнопки и динамические блоки) в дизайне должны быть отображены все необходимые состояния:
- по умолчанию
- при наведении курсора мыши – hover
- активное (если необходимо) – active
- фокус (если есть) – focus
- отключенное (если необходимо) – disabled
- отмеченное (если есть) - checked
- для авторизованного пользователя (если необходимо) – authorized-user
- для пустого блока контейнера (если необходимо) – empty
- прочие состояния при необходимости
Через тире указан суффикс группы/слоя в фотошопе для понимания верстальщиком.
Суффиксы комбинируются для разных состояний!
Пример. Состояние блока "Мини-корзина" (в шапке сайта)
Как правило блок корзины - динамический (изменяется в время взаимодействия пользователя со страницей) и сложный (состоит из других блоков и/или элементов). Суффиксы разумно разместить для группы
- mini-cart – для вида без товаров по умолчанию
- mini-cart hover – для вида без товаров при наведенной мыши
- mini-cart not-empty – для вида с добавленными товарами по умолчанию
- mini-cart not-empty hover – для вида с добавленными товарами при наведенном курсоре мыши.