Що таке вайрфрейм (wireframe)?
Вайрфрейм — схематичне креслення екрана без кольору, шрифтів і картинок: сірі прямокутники на місці блоків і підписи, що там буде. Він показує структуру та пріоритети, а не зовнішній вигляд.
Сенс у швидкості та у фокусі обговорення. Поки екран виглядає як начерк, розмова йде про правильний порядок блоків і склад інформації. Щойно зʼявляються реальні кольори й фотографії, обговорення неминуче йде у відтінки кнопки.
Зазвичай послідовність така: вайрфрейм → прототип із клікабельними переходами → фінальний макет у кольорі. Помилку в логіці на першому кроці виправити коштує хвилини, на останньому — дні.
Повʼязані терміни
UX (User Experience) — це весь досвід людини під час використання продукту: наскільки зрозуміло, де міститься потрібне, скільки кроків займає задача, що відбувається при помилці й чи залишається відчуття, що ціль досягнута без зайвих зусиль.
UIUI (User Interface) — це візуальна частина продукту, через яку людина з ним взаємодіє: екрани, кнопки, поля, іконки, шрифти, кольори та відступи. UI-дизайнер відповідає за те, як продукт виглядає і як виглядають його стани.
FigmaFigma — онлайн-редактор для дизайну інтерфейсів. У ньому малюють макети сайтів і застосунків, збирають клікабельні прототипи та передають роботу розробникам, а кілька людей можуть правити один файл одночасно прямо у браузері.
Design SystemДизайн-система — єдиний набір правил і готових компонентів продукту: палітра, типографіка, відступи, кнопки, поля, картки, а також опис того, коли і як їх застосовувати. Вона існує одночасно в макетах і в коді.