Гарний макет ще не означає гарний сайт

Макет - це один стан на одній ширині. Сайт - це кожен стан на кожній ширині. Різниця між ними і є тим місцем, де проєкти втрачають час і бюджет, причому обидві сторони почуваються правими.

Чого зазвичай немає в макеті

• Проміжні ширини. Намальовано 1440 і 375, а екрани бувають 768, 1024 і 2560 - і рішення для них хтось усе одно ухвалить, питання лише хто.
• Довгий текст. Заголовок у макеті вміщується в два рядки, бо його написав дизайнер. Реальна назва послуги клієнта дає чотири.
• Порожні стани. Список кейсів без кейсів, кошик без товарів, пошук без результатів.
• Стани елементів: наведення, фокус із клавіатури, натиснуто, вимкнено, помилка у формі, стан завантаження.
• Найдовше і найкоротше з можливого: імена, ціни, номери, назви країн.

Коли цього немає, рішення ухвалює розробник під час верстки - швидко і без вас. Іноді вгадує. Іноді ви бачите результат на демо і просите переробити, і це вже друга оплачена ітерація за те, чого можна було уникнути одним екраном у Figma.

Що робить макет придатним до розробки

Не краса, а повторюваність. Якщо в макеті вісім відтінків сірого, чотири радіуси заокруглення і відступи 13, 15 і 18 пікселів поруч - це не стиль, це відсутність системи. У коді така сторінка перетворюється на набір винятків, кожен з яких треба памʼятати.

Придатний до розробки макет має обмежений набір рішень: шкала відступів, шкала розмірів тексту, кілька кольорів із ролями, компоненти замість копій. Тоді верстка стає складанням, а не перемальовуванням, і - головне - наступна сторінка коштує дешевше за попередню.

Дизайн-система потрібна не дизайнеру для порядку. Вона потрібна вам, щоб десята сторінка сайту не коштувала як перша.

Дві речі, які варто перевірити ще в Figma

Контраст тексту. Світло-сірий на білому виглядає у макеті делікатно, а на телефоні надворі не читається взагалі. Мінімум для звичайного тексту - 4.5:1, для великого - 3:1. Це перевіряється плагіном за секунду і потім не вимагає перефарбовування половини сайту.

Розмір того, у що треба влучити пальцем. Іконка 16 пікселів красива, але промахнутись по ній легко. Область натискання має бути помітно більшою за саму іконку - це не псує вигляд, бо збільшується прозора зона, а не малюнок.

Як ми це робимо

Ми беремо макет у роботу разом із розбором: що з нього однозначно, а що доведеться домовити. Спірні місця показуємо до початку верстки, а не після. Це не бюрократія - це найдешевший момент для змін, бо змінюється прямокутник у Figma, а не готовий компонент із логікою.

І окремо: якщо макета немає взагалі - це нормальна відправна точка. Гірше, коли є красивий макет, намальований без урахування того, що з нього робитимуть сайт.