Що таке прототип сайту

Прототип сайту, він же каркас (англ. Wireframe (Website wireframe)) — це схематичне зображення однієї або декількох сторінок веб-сайту, на яких відображається структурне розташування елементів інтерфейсу.

Як правило, прототип для сайту містить наступні компоненти:

• Кнопки
• Лід-форми
• Меню сайту
• Слайдери
• Тизери

і т.д.

Навіщо потрібен прототип сайту

Прототипування веб-інтерфейсів дозволяє ще на ранньому етапі оцінити і проаналізувати поведінкові сценарії на ресурсі, поліпшити їх, а також уникнути глобальних доробок в подальшому. Крім цього, прототип допомагає заощадити час і гроші на розробку. Це пов'язано з тим, що вносити корективи в проект, нехай навіть структурні, — досить просте завдання на початковому етапі. Для цього не потрібні великі зусилля і часовитрати, адже внести коректив в схему легше і простіше, ніж робити це на готовому сайті.

Найчастіше розробка прототипу є частиною технічного завдання та договору на створення сайту. Більш того, при додаванні прототипів до ТЗ і договором ви дозволяєте розробнику більш точно і всебічно оцінити проект, що знизить вартість робіт в майбутньому.

Види прототипів сайту

Текстовий прототип

Текстовий прототип — найпростіший і найшвидший варіант розробки. Як правило, він включає в себе інформацію про розділи, заголовки і являє собою список з необхідними компонентів. Іноді такий список розділений на блоки, що допомагає краще структурувати інформацію, в результаті чого вона легше сприймається.

Однак гарантії того, що ви з розробником будете «на одній хвилі» ніхто не дасть, тому часто текстовий прототип є «попередником» основного прототипу, а не закінченим продуктом.

Переваги:

• Швидке створення
• Простота в розробці
• Базова оцінка об'єму робіт
• Не потребує спеціальних програм і навичок (можна писати прямо в блокноті)

Недоліки:

• Недостатня інформативність
• Неможливо опрацювати поведінкові сценарії
• Неможливо оцінити складність інтерфейсу

Скетч або прототипування на папері

Цей вид є найпростішим способом створення прототипу, який передбачає опрацювання поведінкових сценаріїв («шляхів клієнта») за рахунок чіткого розуміння розташування елементів інтерфейсу. У чистому вигляді це аркуш паперу, на якому від руки намальовані основні складові структури сайту.

Рекомендується використовувати листи в клітинку, що дозволить враховувати масштаб і зробить прототип більш точним.

Переваги:

• Швидке створення
• Масштабованість
• Легкість при внесенні змін

Недоліки:

• Необхідність малювати з 0 при внесенні правок в структуру
• Відсутність інтерактивності
• «Аматорський» вигляд

Графічний прототип з низькою деталізацією

Схожий на паперовий прототип, тільки в цифровому вигляді. Для його створення використовують спеціальні програми для прототипування.

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

Графічний прототип з високою деталізацією

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

Це дозволяє як замовнику при затвердженні, так і розробнику при оцінці роботи, максимально точно зрозуміти складність інтерфейсу і його особливості. Такий прототип вже виглядає як готова сторінка, але монохромна.

З недоліків варто виділити те, що розробка прототипу сайту з високою деталізацією вимагає досить багато часу, але користі від нього набагато більше.

Статичний і інтерактивний прототип

Статичний прототип — це звичайне зображення або ціла серія, яка демонструє розташування елементів, однак з ними ніяк не можна взаємодіяти.

Інтерактивний прототип — це набір сторінок, пов'язаних між собою посиланнями. Такі прототипи сайту вже мають реалізовані для користувача можливості базової взаємодії з інтерфейсом, наприклад, меню, що випадає, перемикання блоків, використання слайдерів, обробка певних даних.

Фактично, це виглядає як готовий функціонуючий ресурс.

Завдання інтерактивного прототипу полягає в тому, щоб вже на початковому етапі протестувати і оцінити зручність використання інтерфейсу, зрозуміти і виправити помилки.

Навіщо розробляти прототипи сайту перед його створенням?

Створення прототипу сайту дозволяє зменшити час на роботу програмістів і витрати на редагування, а також на ранній стадії уникнути подальших глобальних структурних змін за рахунок виявлення «підводних каменів» планованого інтерфейсу. Тому якщо ви не маєте в своєму розпорядженні нескінченних часових та грошових ресурсів, то вам точно знадобиться розробка прототипів сайту.

Додатки та програми для створення прототипу сайту

Зараз є безліч як платних, так і безкоштовних сервісів, які дозволяють намалювати прототип сайту онлайн.

Серед них варто виділити:

• Axure RP
• Figma
• Marvell app
• InVision
• Moqups
  Та інші.