Що таке прототип сайту
Design
Прототип сайту, він же каркас (англ. Wireframe (Website wireframe)) — це схематичне зображення однієї або декількох сторінок веб-сайту, на яких відображається структурне розташування елементів інтерфейсу.
Як правило, прототип для сайту містить наступні компоненти:
- Кнопки
- Лід-форми
- Меню сайту
- Слайдери
- Тизери
і т.д.
Навіщо потрібен прототип сайту
Прототипування веб-інтерфейсів дозволяє ще на ранньому етапі оцінити і проаналізувати поведінкові сценарії на ресурсі, поліпшити їх, а також уникнути глобальних доробок в подальшому. Крім цього, прототип допомагає заощадити час і гроші на розробку. Це пов'язано з тим, що вносити корективи в проект, нехай навіть структурні, — досить просте завдання на початковому етапі. Для цього не потрібні великі зусилля і часовитрати, адже внести коректив в схему легше і простіше, ніж робити це на готовому сайті.
Найчастіше розробка прототипу є частиною технічного завдання та договору на створення сайту. Більш того, при додаванні прототипів до ТЗ і договором ви дозволяєте розробнику більш точно і всебічно оцінити проект, що знизить вартість робіт в майбутньому.
Види прототипів сайту
Текстовий прототип
Текстовий прототип — найпростіший і найшвидший варіант розробки. Як правило, він включає в себе інформацію про розділи, заголовки і являє собою список з необхідними компонентів. Іноді такий список розділений на блоки, що допомагає краще структурувати інформацію, в результаті чого вона легше сприймається.
Однак гарантії того, що ви з розробником будете «на одній хвилі» ніхто не дасть, тому часто текстовий прототип є «попередником» основного прототипу, а не закінченим продуктом.
Переваги:
- Швидке створення
- Простота в розробці
- Базова оцінка об'єму робіт
- Не потребує спеціальних програм і навичок (можна писати прямо в блокноті)
Недоліки:
- Недостатня інформативність
- Неможливо опрацювати поведінкові сценарії
- Неможливо оцінити складність інтерфейсу
Скетч або прототипування на папері
Цей вид є найпростішим способом створення прототипу, який передбачає опрацювання поведінкових сценаріїв («шляхів клієнта») за рахунок чіткого розуміння розташування елементів інтерфейсу. У чистому вигляді це аркуш паперу, на якому від руки намальовані основні складові структури сайту.
Рекомендується використовувати листи в клітинку, що дозволить враховувати масштаб і зробить прототип більш точним.
Переваги:
- Швидке створення
- Масштабованість
- Легкість при внесенні змін
Недоліки:
- Необхідність малювати з 0 при внесенні правок в структуру
- Відсутність інтерактивності
- «Аматорський» вигляд
Графічний прототип з низькою деталізацією
Схожий на паперовий прототип, тільки в цифровому вигляді. Для його створення використовують спеціальні програми для прототипування.
Завдання такого прототипу показати загальну композицію, розташування і кількість елементів. Тому їх найчастіше виконують в чорно-білих тонах.
Графічний прототип з високою деталізацією
Прототип сайту з високою деталізацією — це одна з фінальних, а часто і фінальна стадія прототипуваня. Вона призначена, щоб показати абсолютно всі функціональні елементи майбутнього інтерфейсу, і включає в себе іконки, графіки, типографіки, іноді тіні і навіть деякі зображення.
Це дозволяє як замовнику при затвердженні, так і розробнику при оцінці роботи, максимально точно зрозуміти складність інтерфейсу і його особливості. Такий прототип вже виглядає як готова сторінка, але монохромна.
З недоліків варто виділити те, що розробка прототипу сайту з високою деталізацією вимагає досить багато часу, але користі від нього набагато більше.
Статичний і інтерактивний прототип
Статичний прототип — це звичайне зображення або ціла серія, яка демонструє розташування елементів, однак з ними ніяк не можна взаємодіяти.
Інтерактивний прототип — це набір сторінок, пов'язаних між собою посиланнями. Такі прототипи сайту вже мають реалізовані для користувача можливості базової взаємодії з інтерфейсом, наприклад, меню, що випадає, перемикання блоків, використання слайдерів, обробка певних даних.
Фактично, це виглядає як готовий функціонуючий ресурс.
Завдання інтерактивного прототипу полягає в тому, щоб вже на початковому етапі протестувати і оцінити зручність використання інтерфейсу, зрозуміти і виправити помилки.
Навіщо розробляти прототипи сайту перед його створенням?
Створення прототипу сайту дозволяє зменшити час на роботу програмістів і витрати на редагування, а також на ранній стадії уникнути подальших глобальних структурних змін за рахунок виявлення «підводних каменів» планованого інтерфейсу. Тому якщо ви не маєте в своєму розпорядженні нескінченних часових та грошових ресурсів, то вам точно знадобиться розробка прототипів сайту.
Додатки та програми для створення прототипу сайту
Зараз є безліч як платних, так і безкоштовних сервісів, які дозволяють намалювати прототип сайту онлайн.
Серед них варто виділити:
- Axure RP
- Figma
- Marvell app
- InVision
- Moqups
Та інші.