17

4.2018

Що таке вайрфрейм (wireframe) та для чого він потрібен у процесі розробки сайту чи додатку.

Вайрфрейм – в деталях показують, яка інформація і елементи управління повинні виводитися на кожній сторінці системи. А також розставляють акценти – які з елементів сторінки більш, а які – менш важливі. Він чітко повинен показувати:

  • Основні групи вмісту. Що?
  • Інформаційну структуру. Де?
  • Опис взаємодії користувача з інтерфейсом і його приблизну візуалізацію. Як?

Вайрфрейм – це скелет вашого дизайну, у вайрфреймі повинні бути представлені всі важливі елементи кінцевого продукту. Варто пам’ятати, що схеми сторінок – це не кінцевий дизайн системи і всі розміри в ньому відносні.

Призначення:

  • Постановка завдання дизайнеру. При відображенні макетів сторінок дизайнер повинен не забути всі зазначені в wireframes елементи і враховувати розставлені акценти.
  • Постановка завдання розробникам. Команда розробки повинна керуватися wireframes при створенні функціонального прототипу системи (вже працює система, до якої ще не «прикручений» дизайн).
  • Демонстрація інвесторам і потенційним користувачам. Система може бути показана зацікавленим особам вже через кілька тижнів після початку робіт.

У вайрфреймі ви описуєте фронт робіт по проекту для всіх задіяних осіб: розробників, дизайнерів, копірайтерів, менеджерів, замовників – всім їм потрібен добре продуманий, детальний вайрфрейм.

Чорно-сіро-білий – типова палітра вайрфрейму (ви можете додати синій, щоб позначити посилання).