Гарний макет ще не гарантує точного результату після верстки. Розробнику потрібні не лише екрани для комп’ютера й телефона, а й правила поведінки інтерфейсу: що стається після натискання, як виглядає помилка, що робити з довгим текстом і як блоки перебудовуються на різних ширинах. Перед передачею макета корисно звірити його з практикою команди, що виконує створення сайтів.
Які стани кнопок і форм потрібно показати
Для кнопок позначте звичайний стан, наведення, фокус із клавіатури, натискання та недоступність. Для полів форми потрібні підказка, заповнене значення, помилка, успішне надсилання й процес очікування. Якщо форма багатокрокова, покажіть прогрес і спосіб повернення без втрати даних.
Не забудьте про порожні списки, відсутні результати пошуку, помилки сервера та повідомлення про обмеження файлів. Саме ці екрани найчастіше доводиться імпровізувати розробнику, якщо дизайнер їх не передав.
Як описати поведінку блоків на різних екранах
Поясніть, які елементи залишаються фіксованими, які переносяться нижче, а які приховуються. Для таблиць, слайдерів і довгих меню вкажіть спосіб прокручування. Перевірте макет із реальними заголовками, цінами та перекладами, а не лише з коротким демонстраційним текстом.
Особливої уваги потребує багатомовність. У матеріалі «Дизайн багатомовного сайту: що перевірити при зміні довжини тексту» описані типові проблеми, які варто врахувати ще до верстки.
Що включити у завдання на дизайн сайту
До передачі додайте карту сторінок, компоненти, сітку, шрифти, кольори, іконки, правила відступів і посилання на вихідні файли. Позначте повторювані компоненти та їхні варіанти. Окремо опишіть анімації, доступність, вимоги до швидкості й поведінку контенту, який редагуватиметься в CMS.
Перед фінальним погодженням пройдіть чекліст замовника зі статті «Як приймати дизайн сайту у підрядника». Добре підготовлений пакет скорочує кількість запитань, зменшує ризик розбіжностей і дозволяє оцінювати реалізацію за погодженими правилами.