Привіт!

Давай перевіримо, чи можна віддавати твій дизайн у розробку

Перевір сітки

Колонки
Сітка може створити базову структуру, скелет дизайну.

Це пов'язує їх у загальну систему та раціонально підтримує композицію.

Колонки – це основні складові кожної сітки.

Відступи
Ніщо не є більш ефективним у поєднанні різних форм контенту, ніж послідовні лінії сітки.

У тому числі це стосується відступів між елементами. Можна вибрати будь-яку зручну систему – 5pt, 4pt, 8pt.

Але найчастіше дизайнери вибирають розміри кратні 4-м

16
Перевір типографіку

Вибраний шрифт відповідає “настрою” сайту

Іноді робота над інтерфейсом починається з роботи зі шрифтом.

70% середньо сайту – це текст. Фактично це найважливіша

візуальна частина сайту.

Потрібно, щоб шрифт точно передавав потрібну емоцію та

допомагав вирішити завдання сайту.

Не варто використовувати більше 2-3 шрифтів у дизайні.

А можна обмежитись і одним. Досягти виразності можна і за рахунок змін жирності та розмірів тексту. Але й тут краще
бути мінімалістом – краще не захаращувати дизайн зайвими накресленнями.

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

Текстові стилі у Figma

Працюй у Figma правильно - використовуй текстові стилі
Перевір колір, ефекти

та зображення
Мінімум кольорів для початку
Є випадки, коли є сенс вибрати багатобарвну палітру.

Але частіше набагато краще обмежиться одним або двома крім білого та чорного.

Кольори зображень
Кольори на фотографіях та ілюстраціях мають бути в гармонії з кольорами інтерфейсу.

Стилі кольорів Figma

Використовуй стилі. Це убереже від помилок, коли в макеті з'являється “п'ятдесят відтінків сірого”.
А ще пришвидшить роботу.

Стилі ефектів в Figma

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

Векторні іконки
Іконки завжди краще вставляти у векторі (можна скористатися плагінами або завантажити).
Якість краща, а вага менша.

Растрові зображення
Потрібно бути впевненим, що роздільна здатність фото буде достатньою, щоб фото не було розмитим.
Перевір контент та порядок у
загальній організації макета
Стан елементів
Необхідно показати розробнику, як виглядатиме кожен клікабельний елемент при наведенні.
Наприклад, як виглядає кнопка, якщо на неї навести мишкою.

Адаптація
Сайт повинен добре відображатись на різних пристроях.

Тому, крім версії для комп'ютера, часто роблять дизайн для планшета і телефону.

Називати групи
Розробнику буде зручніше, якщо основні блоки згруповані і мають зрозумілу назву. Крім того, у
файлі буде легше розібратися, якщо доведеться повернутись до нього через деякий час.

Auto layout
Варто перевірити, чи правильно зроблено кнопки.

Спливаючі вікна та сповіщення

Якщо передбачається, що при натисканні на кнопку має з'явитися, наприклад, модальне вікно - йому теж потрібно зробити макет.
Дякую!