Як створити прототип сайту на папері, в програмі або онлайн. Для чого він вам потрібен?
Розробка сайтів починається зі створення прототипів. Це схематичні плани, в яких відображається розташування блоків і основних елементів. З їхньою допомогою замовникам простіше складати ТЗ і висловлювати свої думки, а вебмайстрам — оцінювати вартість роботи.
Іноді створюють докладні макети, на яких повністю демонструються майбутній дизайн і верстка. У статті розповімо докладно, що таке прототипування сайту, які існують різновиди, які завдання і функції воно виконує (для замовників і розробників). Додатково розглянемо цілі, способи та етапи створення макета вашого сайту.
Зміст:
1. Різновиди прототипів і завдання, які вони вирішують
2. Функції прототипів для замовників і розробників
3. Цілі і способи створення макетів сайту
4. Висновки
Різновиди прототипів і завдання, які вони вирішують
Що таке прототип сайту? Це макет, на якому показано розташування всіх елементів: блоки, функціональні кнопки тощо. Прототипи сайту дають змогу замовнику докладніше висловити свої побажання, внести правки ще на етапі обговорення. Макет сайту — це форма взаємодії з дизайнерами і вебпрограмістами. Прототипи розрізняються за складністю структури та рівнем візуалізації. Умовно їх поділяють на 2 категорії.
1. Low-fidelity.
Простий варіант, що оформляється у вигляді чорно-білих схем. Позначаються тільки елементи, на які потрібно звернути увагу.
Особливості:
- Створення прототипу сайту здійснюється вручну або за допомогою графічних редакторів.
- Замовник бачить загальний функціонал сайту, без візуалізації контенту.
- Плюс такого формату — у швидкості створення: навіть за великої кількості блоків на прототипування сайту йде кілька днів. Він потрібен насамперед для оцінки юзабіліті майбутніх сторінок.
Приклад макета сайту у вигляді скетчу:
- High-fidelity. Більш функціональні прототипи лендінгів або багатосторінкових сайтів. Дозволяють представити замовнику повну візуалізацію всіх сторінок. Схематичні квадрати замінюються на повноцінні блоки із зображеннями і орієнтовним контентом. Особливості:
- Для створення використовуються онлайн-сервіси або спеціалізоване ПЗ. Макет включає повну ієрархію сторінок, завдяки цьому можна реалізувати детальний прототип інтернет магазину або інформаційного блогу.
- Застосування таких макетів дозволяє оцінити обсяг роботи і визначитися зі структурою. Тому вони в першу чергу потрібні виконавцям.
- Розробка займає більше часу, в порівнянні з попереднім варіантом.
Приклад прототипу сайту High-fidelity, створеного в Figma:
Попри те, що створення макета сайту займає час (у середньому від 1 до 10 днів), воно прискорює процес розробки. Попередня візуалізація майбутнього проєкту дає змогу уникнути помилок і постійних правок з боку замовника. Це полегшує роботу back-end програмістів і дизайнерів.
Завдання, які розвʼязують прототипи
- Прискорюють створення сайтів, оскільки у розробників з’являється чіткий план дій.
- Полегшують взаємодію між замовником і виконавцем. Клієнту простіше висловлювати свої побажання, проджект-менеджерам — формувати завдання.
- Дають змогу реалізовувати складні та нетривіальні проєкти.
- Замовник одразу отримує підсумкову вартість проєкту (без подальших націнок) і терміни його реалізації.
Функції прототипів для замовників і розробників
Більшість клієнтів вебстудій не уявляють, яким має бути їхній сайт. Вони керуються виключно суб’єктивними моментами (колірна гама, приклад Landing Page конкурента тощо).
Функції створення макета сайту онлайн
- Візуалізація ідей замовника. Дає змогу подивитися на конкретному прикладі, як поєднуються кольори, який вигляд мають обрані зображення разом із логотипом тощо.
- Оцінка, який вигляд матиме сайт для цільової аудиторії бізнесу. За наявності “теплої” клієнтської бази замовник може запитати думку ЦА.
- Визначення вартості та термінів робіт. Поширена проблема, коли в процесі створення підвищується ціна проєкту (додаються нові елементи, функції, зміни front-end тощо). Створивши прототип сайту, розробники можуть визначитися з дедлайном і прайсом. Це запобігає ситуації, коли очікування клієнта не збігаються з його можливостями.
Наявність макета дає змогу замовнику оперативно вносити правки під час розробки проєкту. Для цього створюються інтерактивні прототипи: клієнт може відкрити макет і внести в нього коментарі. Така форма взаємодії спрощує співпрацю, оскільки замовнику не доводиться “пояснювати на пальцях”, чого він хоче. Прототип сайту — це свого роду візуалізація технічного завдання. З його допомогою замовнику легше висловлювати свої побажання.
Функції прототипів для розробників
Наявність макета полегшує процес ведення проєкту для команди розробників. Створивши прототип сайту, простіше делегувати і розподіляти завдання. Дизайнери, програмісти і верстальники чітко бачать кінцевий результат, їм стає простіше взаємодіяти між собою.
Прототипи сторінок виконують й інші функції:
- Можливість коригування локальних завдань. Наприклад, дизайнер може змінювати розташування блоків без необхідності створювати нове завдання back-end програмістам. Якщо використовується макет сайту онлайн, до нього є доступ у всіх розробників.
- Спрощує роботу із запереченнями клієнтів. Усні домовленості не мають цінності. Бувають ситуації, коли на фінальній стадії розробки замовник вимагає внести коригування, які не відповідають прийнятому ТЗ. Коли всі побажання занесені в макет, подібних ситуацій не трапляється.
- Підвищення довіри з боку замовників. Структурований макет підтверджує професіоналізм розробників.
- Можливість втілювати в життя нестандартні ідеї. Так, онлайн прототипи дають змогу дизайнерам і верстальникам спільно коригувати юзабіліті, відходячи від шаблонних структур.
Для керівників вебстудій і проджект-менеджерів прототипування сайтів — це інструмент, за допомогою якого простіше контролювати роботу співробітників. Дотримання макета — практично 100% гарантія відсутності правок на фінальних етапах розробки.
Цілі і способи створення макетів сайту
Перед тим як зробити макет сайту, потрібно визначитися, для яких цілей він створюється:
- Визначення розташування блоків на сторінці.
- Систематизація структури всього сайту, складання ієрархії сторінок.
- Візуалізація, тобто складання докладного плану, в якому зазначено розташування основних елементів.
Якщо завдання полягає у визначенні структури сторінок, підійдуть варіанти категорії Low-fidelity. Якщо ж потрібна візуалізація, раціональніше створити детальний макет у застосунку або через онлайн-сервіси. Розглянемо всі варіанти.
Від руки
Перш ніж створювати дизайн сайту, можна скласти план структури на папері. Для цього не потрібні навички верстальника або знання нарисної геометрії. Досить озброїтися ручкою, лінійкою і аркушем паперу. Деякі замовники так і роблять — перед зустріччю з виконавцями малюють від руки приблизний план проєкту. Для багатьох це простіше, ніж заповнювати десятки сторінок брифів або складати докладне ТЗ.
Як зробити прототип сайту на папері? Чітких вимог немає, головне, щоб схема була зрозуміла всім сторонам (клієнту, менеджеру проєкту і виконавцям). Якщо вам потрібен базовий прототип сайту, приклад можна зробити на аркуші формату А4 або ватмані (якщо йдеться про багатосторінковий сайт).
Недолік такого способу — у примітивності візуалізації. У паперові макети неможливо вносити правки, за необхідності серйозних коригувань доводиться переробляти креслення. Подібні схеми використовуються на етапах обговорення проєкту між замовником і менеджером. Для подальшого розроблення проєкту мають застосовуватися інші інструменти.
Програмне забезпечення
На етапах первинної розробки використовують програми для прототипування сайту. Вони мають великий функціонал, дають змогу опрацьовувати структуру майбутнього проєкту. Створювані макети легко верстати і переносити у фреймворк. Наведемо 3 популярні в країнах СНД додатки, якими користуються розробники.
Adobe Photoshop — функціональний графічний редактор. Попри появу інших програм, залишається незамінним інструментом для дизайнерів. Якщо ви складаєте прототипи сайтів, приклади у Фотошопі будуть досить детальними та ілюстративними.
Плюси:
- Для використання не потрібна наявність інтернету.
- Є безкоштовні версії (у т. ч. піратські).
- Підтримка всіх графічних форматів
Мінуси:
- Додаток споживає багато оперативної пам’яті (ОЗП), на офісних ПК або ноутбуках працює з перебоями.
- Щоб розібратися у функціоналі, знадобляться десятки годин.
Axure RP — професійна програма для прототипів додатків і сайтів. Можливостей для візуалізації мінімум, тому її застосовують при створенні Low-fidelity макетів.
Плюси:
- Розташування елементів змінюється шляхом перетягування, що економить час.
- Можна зробити клікабельний макет (так замовнику буде простіше оцінити юзабіліті).
- Створення інтерактивних макетів.
.
Мінуси:
- Мінімальний тариф — 25 доларів на місяць. Trial-версія надається всього на 30 днів.
- Відсутній вбудований графічний редактор, для створення візуалізації (банери, логотипи) доводиться використовувати інше ПЗ.
Figma — професійна програма для прототипування вебсайтів, які легко переносяться у фреймворк. Векторний редактор дає змогу експортувати створені файли практично в будь-які формати. Кількість графічних інструментів можна порівняти з Adobe Photoshop.
Плюси:
- Є безкоштовна версія, її достатньо для невеликих вебстудій. Платні тарифи дешевші порівняно з багатьма аналогами.
- Доступні сотні плагінів.
- Є онлайн-версія, тобто прототип сайту може бути інтерактивним.
Мінуси:
- В інтерфейсі відсутні словʼянські мови.
Онлайн-сервіси
Також є безліч сайтів, на яких можна зробити макет онлайн. За функціоналом їх можна порівняти з програмами, однак для роботи з ними потрібне інтернет-з’єднання. Розглянемо три популярні ресурси і наведемо плюси та мінуси кожного з них.
Draftium — сервіс для створення прототипів сайтів онлайн. Користувачам доступна база із сотень готових шаблонів, які можна редагувати за допомогою вбудованого конструктора. Доступ до повної версії обійдеться в 99 доларів за рік.
Плюси:
- Простий інтерфейс.
- Готові шаблони адаптовані під усі пристрої.
- Висока швидкість роботи (при інтернеті 100 Мб).
Мінуси:
- У безкоштовній версії всього 50 шаблонів.
- На сайті немає української мови.
Wireframe — онлайн-конструктор для створення Low-fidelity проєктів. Інтерфейс сервісу гранично простий — користувач малює блоки за допомогою стандартних інструментів (як у Paint).
Плюси:
- Щоб розібратися з інтерфейсом вистачить 10–15 хвилин.
- Сервіс не вимогливий до “заліза”, працює навіть за невеликого (2–3 Гб) розміру оперативної пам’яті.
Мінуси:
- У базовій версії мінімальний функціонал, платні тарифи починаються з 16 доларів на місяць.
- Немає можливостей для створення складних графічних елементів.
Marvel — функціональний онлайн-сервіс із десятками інструментів візуалізації. З його допомогою можна створювати масштабні проєкти, готові для перенесення у фреймворк.
Плюси:
- Користувачам платних тарифів доступні сотні готових шаблонів.
- Функціональний графічний редактор.
- Наявність безкоштовної версії з базовим функціоналом.
Мінуси:
- Відносно складний інтерфейс.
- Немає підтримки української мови.
Використання готових варіантів
В умовах дефіциту часу можна використовувати готові прототипи сайтів. Вони бувають двох типів:
- Особисті — розроблені для конкретного проєкту. На них міститься контактна інформація та інші відомості. Шаблони піддаються мінімальній редактурі, під час якої коригуються тільки контент і комерційна інформація (контакти, ціни, продукти, КП). Структура і стиль візуалізації залишаються незмінними. Цей прототип сайту підходить, якщо потрібно швидко і з мінімальними правками реалізувати проєкт.
- Готові — шаблони, на яких мінімум інформації. Їх можна назвати основою прототипу, оскільки для використання потрібна редактура. Підходять для невеликих вебстудій або дизайнерів-початківців, яким доводиться створювати багато однотипних Landing Page.
Висновки
- Прототипування в дизайні — один із найважливіших напрямів, від якого залежить успіх проєкту. Створення макетів можна порівняти зі зведенням фундаменту під час будівництва будинку.
- Прототипи розвʼязують низку завдань — від підвищення швидкості розробки до можливості реалізації складних проєктів.
- Наявність макета дає змогу замовнику оперативно вносити правки під час розроблення проєкту. Для цього створюються інтерактивні прототипи. Клієнт може відкрити макет і внести коментарі.
- Для команди розробників наявність макета полегшує процес ведення проєкту. Створивши макет сайту, простіше делегувати і розподіляти завдання. Дизайнери, програмісти і верстальники чітко бачать кінцевий результат, можуть взаємодіяти між собою.
- Серед цілей створення сайту виділяють розташування блоків на сторінці, систематизацію структури всього сайту, візуалізацію, тобто складання докладного плану. Існує 4 способи створення макета сайту: від руки, за допомогою програм, онлайн-сервісів або готових шаблонів.
Також читайте інші статті в блозі Webpromo:
- 7 рекомендацій щодо складання UTM-міток. Види, способи використання, корисні UTM-генератори;
- Як створити і використовувати воронки продажів в маркетингу? Відстежуємо в Google Analytics;
- Як створювати YouTube-рекламу: 5 рекомендацій для поліпшення стратегії від Бена Джонса
І підписуйтеся на наш Telegram-канал про маркетинг.
