Penpot для початківців: безкоштовний інструмент для UI-дизайну

Крок 1

Зареєструйтеся й створіть перший файл

Penpot працює в браузері: зареєструйтеся на penpot.app і створіть новий файл. Хмарний тариф Professional коштує $0, і Penpot описує його як повнофункціональний, без обмежень на інструменти (до 10 ГБ сховища й до 8 учасників команди); платні тарифи відрізняються обсягом сховища, тривалістю історії версій і функціями для команд. Penpot має відкритий код, тому його також можна розгорнути на власному сервері, але для навчання це не потрібно.

• •оберіть навчальну задачу: екран входу, картка товару чи головний екран застосунку для нотаток;
• •збережіть 2–3 референси, але не копіюйте їх, а випишіть, що в них працює;
• •підготуйте реальний текст: кнопки, заголовки, повідомлення про помилки.

Крок 2

Дошки, шари й базові інструменти

Основа файлу в Penpot — дошки (boards): це ваші екрани, наприклад розміром під телефон. На дошці розміщуються фігури, текст, зображення й інші дошки. Ліворуч — шари, праворуч — панель властивостей. Якщо ви працювали в іншому дизайн-редакторі, інтерфейс буде знайомим; якщо ні — почніть з одного екрана й простих фігур.

• •назвіть дошки за сенсом: «Login», «Login — error», а не «Board 3»;
• •групуйте шари логічно: шапка, форма, кнопка;
• •заведіть кольори й текстові стилі на початку, щоб не підбирати їх щоразу.

Крок 3

Flex Layout і Grid Layout

Тут Penpot особливо корисний для навчання. Flex Layout побудований на стандарті CSS Flexbox і має ті самі властивості: напрямок, вирівнювання, justify, gap, padding і розміри. Додати його можна до будь-якого шару, групи чи дошки через панель Design або комбінацією клавіш Shift + A. Для двовимірних сіток є Grid Layout з рядами, колонками й областями. Опановуючи інструмент, ви водночас розумієте, як працює верстка.

• •зробіть кнопку на Flex Layout: текст і іконка в ряд, gap між ними, padding навколо;
• •зберіть форму входу як вертикальний Flex Layout з однаковим gap між полями;
• •розтягніть дошку й подивіться, як поводиться макет: якщо щось «ламається», шукайте фіксований розмір.

💡 Порівняйте свій макет із CSS у режимі Inspect: властивості Flex Layout мають ті самі назви, що й у коді. Детальніше — у гайді HTML і CSS для дизайнера.

Крок 4

Компоненти й прототип

Повторювані елементи — кнопки, поля, картки — робіть компонентами: зміна в основному компоненті оновлює всі копії. Схожі компоненти можна об'єднати у варіанти, наприклад кнопку в станах default, hover і disabled. Коли екрани готові, пов'яжіть їх у прототип: натискання на кнопку веде на наступний екран.

• •почніть з однієї кнопки в трьох станах і одного поля введення зі станом помилки;
• •зберіть 2–3 екрани сценарію: вхід, помилка, успіх;
• •запустіть прототип і пройдіть його так, ніби бачите вперше.

Крок 5

Inspect, експорт і фідбек

Відкрийте вкладку Inspect у правій панелі: тут видно відстані між шарами, властивості кожного елемента й вкладку з кодом — розмітку (SVG і HTML) та стилі CSS. Це найшвидший спосіб побачити, як ваш дизайн виглядатиме для розробника. Потім поділіться файлом або прототипом і попросіть фідбек.

• •перевірте контраст тексту: для звичайного тексту WCAG вимагає щонайменше 4.5:1;
• •подивіться в Inspect, чи немає дивних відступів на кшталт 13 або 17 px — вони видають розміщення «на око»;
• •ставте конкретне питання: «чи зрозуміло, що робити на цьому екрані?» дає кращий фідбек, ніж «як вам?».

💡 У Penpot є безкоштовний відеокурс Penpot UI Design Course: теорія UI-дизайну, практичні демо й необов'язкові завдання. Виконуйте завдання й показуйте результат у спільноті.