Вайрфрейми допомагають швидко фіксувати ідеї та тестувати їх. Хоч й простіше намалювати скетч на папері, цифрові вайрфрейми виглядають більш опрацьованими та презентабельними. Незалежно від того, де ви працюєте, у браузері або офлайн в десктопних додатках, якого розміру ваш проєкт і команда. У статті ви знайдете безліч безкоштовних інструментів для створення вайрфреймів. Кожен інструмент має свої переваги й підходить для вирішення певних завдань.
У більшості випадків буде достатньо безкоштовних програм. Однак у міру розширення проєкту вам, ймовірно, захочеться сплатити більш просунутий тариф, щоб отримати доступ до додаткових функцій або працювати над великою кількістю документів. Якщо вам складно вибрати один інструмент, спробуйте кілька, щоб зрозуміти, який найкраще підходить вам, вашій команді та відповідає цілям UX-проєкту.
Figma
Універсальний дизайн-інструмент.
Тип продукту: додаток для роботи в браузері.
Безкоштовна версія: 3 проєкти та 2 редактори.
Платна версія: від 12 доларів на місяць.
Figma – один із найпопулярніших дизайн-інструментів на ринку. Універсальна платформа дозволяє створювати все: від інтерактивних вайрфреймів до високодеталізованих прототипів. Крім того, вона має 30-денну історію версій та безлімітне хмарне сховище. Безкоштовно! Figma має як браузерну, так і десктопну версію. Ви також можете переглядати свої проєкти на мобільних пристроях у режимі реального часу.
Безкоштовний план передбачає можливість створення трьох проєктів та участь двох редакторів. Вартість плану “Professional” починається від 12 доларів за редактора на місяць. Крім того, ви маєте можливість створювати командні бібліотеки компонентів. Щоб працювати з дизайн-системами на рівні компанії та керувати плагінами, вам знадобиться план “Organization”, вартість якого починається від 45 доларів за редактора на місяць.
Miro
Дошка для спільної роботи.
Тип продукту: додаток для роботи в браузері.
Безкоштовна версія: 3 дошки.
Платна версія: від 8 доларів за учасника на місяць.
Раніше відома як RealtimeBoard, Miro це віртуальна дошка, де команди можуть працювати над проєктами спільно, в режимі реального часу. Тут ви знайдете реалістичні стікери та вбудовану бібліотеку вайрфреймів, а також функцію створення інтелект-карток.
Miro включає кілька вбудованих шаблонів, інтеграцій (наприклад, Slack, Dropbox, Creative Cloud, Trello та Zapier) і дозволяє безкоштовно використовувати до трьох дощок з необмеженою кількістю користувачів. Щоб створити більше дощок та отримати доступ до фреймворку Канбан (метод управління проєктами), вам необхідно буде заплатити за командний тариф, ціна якого становить від 8 доларів за учасника на місяць.
InVision
Універсальний дизайн-інструмент.
Тип продукту: десктопний додаток для Mac та Windows.
Безкоштовна версія: 3 документи, 10 користувачів.
Платна версія : від $7,95 за користувача на місяць.
InVision Studio — десктопна програма, яку можна використовувати для створення інтерфейсів та анімації. Спочатку компанія InVision була відома платформою для створення прототипів у браузері. Її десктопне застосування не таке популярне, як інші перераховані вище інструменти, частково тому, що воно з'явилося пізніше.
Використовуючи безкоштовну версію, ви можете створити 3 документи та працювати над ними спільно, при цьому в команді має бути не більше 10 осіб. Тариф Pro дозволяє додавати необмежену кількість документів, проте обмежує кількість активних користувачів до 15.
Frame Box
Базовий інструмент для створення вайрфреймів.
Тип продукту: додаток для роботи в браузері.
Frame Box — абсолютно безкоштовна програма, яка може стати ідеальною опцією для команд із сильно обмеженим бюджетом. Мінус у тому, що цей інструмент є базовим, тому, ймовірно, не підійде для розробки деталізованого вайрфрейму складного інтерфейсу. Однак, він стане ідеальним рішенням для невеликих простих проєктів. Навряд чи хтось буде використовувати Frame Box на постійній основі, але він може стати в пригоді, якщо вам необхідно швидко узятися до роботи, не витративши ні копійки.
Wireframe.cc
Інструмент для створення вайрфреймів.
Тип продукту: додаток для роботи в браузері.
Безкоштовна версія: підходить для створення односторінкових вайрфреймів, немає експорту або взаємодій.
Платна версія: від $16 за учасника на місяць.
Якщо вам подобаються ультра-мінімалістичні, елегантні інтерфейси, вам припаде до душі Wireframe.cc. За допомогою безкоштовної версії можна без облікового запису створювати односторінкові вайрфрейми. Щоб розробляти інтерактивні прототипи та експортувати їх у форматі PNG або PDF, потрібна преміум-підписка.
Її вартість складає від 16 до 99 доларів на місяць залежно від ваших потреб. Найдорожчий тариф дозволяє необмежену кількість користувачів працювати над необмеженою кількістю проєктів. В інтерфейсі цієї програми, на відміну від інших перерахованих тут платформ, ви спочатку не побачите звичних інструментів. Вони з'являються лише тоді, коли ви натискаєте на якийсь елемент або створюєте новий за допомогою курсора миші.
Cacoo
Інструмент для побудови діаграм.
Тип продукту: додаток для роботи в браузері.
Безкоштовна версія: 6 сторінок
Платна версія: від 5 доларів за учасника на місяць
Cacoo – додаток для побудови діаграм. Це одна з небагатьох платформ, де безкоштовний тариф дозволяє додавати необмежену кількість користувачів для взаємодії. Cacoo пропонує шаблони, у тому числі вайрфрейми, а також інтегрується з іншими програмами, наприклад, Google docs, Adobe Creative Cloud, AWS, Slack та Dropbox, і це лише деякі з них.
Однак, безкоштовно ви можете створити лише 6 сторінок та експортувати їх лише у форматі PNG. Тарифний план Pro за $5 на місяць надасть можливість створювати необмежену кількість сторінок, а також кілька варіантів експорту та збереження історії змін.
Jumpchart
Інструмент для планування вебсайтів та управління проєктами.
Тип продукту: додаток для роботи в браузері.
Безкоштовна версія: 1 проєкт, 10 сторінок, 2 користувачі та 10 Мб сховища.
Платна версія: від 5 на місяць.
Якщо ви плануєте, яким буде ваш сайт, за допомогою Jumpchart ви зможете створювати карти сайту, керувати контентом та проєктом. Одна з корисних функцій – експорт проєктів у WordPress, Drupal чи HTML.
Безкоштовний тариф дає можливість створити лише 1 проєкт (до 10 сторінок), додати 2 користувачів та надає 10 Мб сховища. Однак, Jumpchart пропонує один із найвигідніших преміум-планів: 5 проєктів (до 25 сторінок кожен), 5 користувачів та 1 Гб сховища всього за $5 на місяць.
MockFlow
Інструмент для створення вайрфреймів / UI-дизайнів.
Тип продукту: додаток для роботи в браузері (десктопний додаток для Mac і Windows доступний лише в платних тарифах).
Безкоштовна версія: 1 проєкт, 3 сторінки.
Платна версія: від 12 доларів за редактора на місяць.
MockFlow — платформа для спільної розробки інтерфейсів користувача. Безкоштовна версія передбачає створення лише 3 сторінок, тому підійде лише для роботи над одним невеликим проєктом. Найімовірніше, вам доведеться переходити на платний тариф, щоб скористатися всіма необхідними функціями.
Ціни починаються від $12 за редактора на місяць. Ви отримаєте доступ до UI-шаблонів, командних бібліотек компонентів та інтеграцій з бізнес-додатками.
Інші інструменти
Наш список не можна назвати вичерпним. Хоча ми впевнені, що ви знайдете відповідний інструмент серед перерахованих вище, ось ще кілька опцій, які можуть вам стати в пригоді:
- Draw.io – відкритий браузерний додаток для побудови діаграм. Включає велику бібліотеку форм та підтримує створення шарів. Ви можете зберігати файли у форматі XML на Google Диску, Dropbox, OneDrive або GitHub.
- Mydraft.cc — відкритий інструмент для створення вайрфреймів, який працює у браузері та не вимагає створення облікового запису. Файли доступні онлайн.Вам потрібно буде зберегти URL-адреси проєктів, щоб відкрити їх.
- Whimsical – браузерний додаток для проведення спільного мозкового штурму, створення вайрфреймів, інтелект-карток, шляхів користувача.
Можливо, ви помітили, що в цьому списку відсутні деякі популярні програми (наприклад, Balsamiq, Axure, Gliffy, UXPin, Moqups).
У статті ми розглянули 8 безкоштовних інструментів для створення вайрфреймів. Якщо ваш бюджет не обмежений, ви, звичайно ж, можете спробувати одну з платних програм. Кожна з них має безкоштовну пробну версію з обмеженим терміном дії, щоб ви могли оцінити продукт перед його покупкою.
💬 Дизайн-чат
