Прототип або прототипування сайту. Прототип сайту приклад!


Що таке прототип сайту та для чого він потрібен?

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

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

Прототипи необхідні для таких видів робіт:

  • Побудова логіки ієрархії сторінок та об’єктів
  • Промальовування дизайну згідно з прототипом
  • Написання технічної документації
  • Для створення мобільної версії сайту
  • Визначення розмірів блоків та відстаней між ними
  • Можливо, при створенні інтерактивного прототипу для тестування фокус групою та попереднього аналізу споживчої цінності проекту
  • Опрацювання UX дизайну, створення максимально зручної структури для користувачів
  • Побудова пріоритету реалізації функцій

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

 

Як зробити свій прототип сайту?

Створення прототипу, як і багато інших складних завдань, складаються з під задач (етапів), виконуючи які можна отримати якісний і продуманий прототип.

Перед створенням прототипу необхідно виконати певні дії. Для початку потрібно зібрати всю інформацію щодо проекту та заповнити спеціальний паспорт проекту. Паспорт проекту – це електронний табличний документ з вкладками з різною інформацією щодо проекту.

Паспорт проекту

У паспорті проекту мають бути такі розділи:

  1. План робіт – список розділів та сторінок сайту з їх реалізацією (заповнюється не відразу, а в процесі створення прототипу та затвердження структури сайту)
  2. Основні вступні дані – цілі проекту, цінності, вимоги до проекту, опис проекту, зауваження, унікальні особливості тощо.
  3. Опитувальник – тут збираються всі питання щодо сайту та відповіді на них. Опитувальник зазвичай необхідний для збору інформації від замовника. Але також можете його заповнити і для себе, щоб не втратити потрібну інформацію.
  4. Цільова аудиторія – опис головних користувачів сайту, для яких створюватиметься даний проект. ЦА – це збірний образ користувача для кращого розуміння та уявлення, як він буде використовувати ваш сайт, що для нього зрозуміло, а що ні.
  5. Конкуренти – список подібних сайтів конкурентів, непрямих чи прямих.
  6. Референси – список будь-яких сайтів що вам подобаються із зазначенням що саме подобається у цих сайтах і що хотілося б бачити у себе на сайті. Це пошук цікавих рішень для проекту.
  7. Технічна інформація – перелік технічних характеристик сайту. У ньому повинні бути такі характеристики:
  • Контактне ім’я клієнта та телефон (якщо проект робиться для замовника)
  • Доступи до хостингу та домену
  • Двигун сайту (CMS) – який використовуватиметься для керування сайтом
  • Кількість мов на сайті
  • Ширина сайту
  • Види валют на сайті
  • Технологічні вимоги
  • Список зовнішніх сервісів, які потрібно підключати до сайту
  • Доступ до різних облікових записів зовнішніх сервісів

8.Оплати за проектом (якщо робите для замовника)

Збір основної інформації для макету

Насамперед для початку необхідно зібрати всю інформацію, що може знадобитися для проекту, в описі паспорта проекту ми вже торкнулися частини інформації, що буде необхідна.

Необхідні такі дані для прототипу:

  1. Цілі проекту – потрібно визначити для чого взагалі створюється даний проект, які його основні цілі. Таких цілей зазвичай може бути 3-5.
  2. Аналіз конкурентів – зібрати приклади сайтів конкурентів та спробувати виявити у них сильні та слабкі сторони. Сильні сторони скопіювати для свого проекту, а слабкі сторони навпаки потрібно обійти і зробити краще, ніж конкуренти на своєму проекті.
  3. Створення образів цільової аудиторії – необхідно визначити свою цільову аудиторію. Спробуйте зрозуміти хто купуватиме товари чи замовлятиме послуги на вашому майбутньому сайті. Потрібно зібрати основні відомості про цільову аудиторію, вік, стать, фінансовий достаток, потреби, основні цілі та «болі» цільової аудиторії. Ці портрети допоможуть у майбутньому створити проект саме під них.
  4. Збір відповідей на запитання – необхідно створити опитувальник або знайти готове в інтернеті. Такі опитувальники використовують маркетологи для більш детального розуміння, що потрібно відобразити на проекті, а що потрібно не показувати.

У такому опитувальники можуть бути такі питання:

  • У чому особливість вашої компанії?
  • Який вид діяльності?
  • Які товари чи послуги виробляє компанія?
  • Які досягнення компанії, нагороди?
  • Чи є згадки у пресі?
  • Чи є вже діючий сайт?
  • Які мови використовуються у компанії?
  • Чи є брендбук компанії чи презентації?
  • Інформація про компанію: скільки років на ринку, співробітники, історія тощо.

Ви можете також створити список необхідних питань і зібрати на них відповіді.

  1. Збір прикладів сайтів та ідей – необхідно знайти приклади сайтів, що вам подобаються, або окремі розділи будь-яких сайтів. Потім зробити скріншоти таких розділів та заповнити документи з коментарями на такі приклади. Дані приклади можна буде використовувати під час створення прототипу.

Створення ієрархічної структури проекту

Коли є первинна інформація та розуміння яким має бути проект потрібно ще створити схему ієрархії у програмі XMind що дозволить зрозуміти які будуть розділи, сторінки, блоки та кнопки у проекті.

Ієрархічна схема – це свого роду “дерево” з гілками розділів проекту. Є центральна частина з назвою проекту від якої в сторони розходяться гілки з різними розділами, а далі вже від кожного розділу розходяться нові гілки з блоками, а від блоків гілочки з описом елементів даних блоків.

Наприклад, можуть бути такі розділи чи сторінки вашого проекту:

  • Головна – опис структури блоків головної сторінки
  • Каталог – каталог товарів чи послуг
  • Картка – товару чи послуги
  • Про компанію – розділ з інформацією про компанію
  • Контакти – розділ із основними контактними даними
  • Кошик – місце для товарів інтернет-магазину
  • Особистий кабінет – розділ особистого кабінету користувачів з описом, які є в ньому підрозділи
  • Оформлення замовлення – структура розділу, де клієнти оформлятимуть свої замовлення
  • Галерея – розділ із фотографіями
  • Новини – розділ з новинами компанії

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

Після того як ви створили ієрархію проекту, можна приступати до створення самого прототипу.

Розробка прототипу сайту

Створювати прототип можна у двох програмах: Axure RP чи Figma. Автор цієї статті воліє використовувати Axure RP, отже йтиметься далі про створення макета в даній програмі, але взагалі основні підходи при створенні макета можна використовувати на будь-якій програмі.

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

Ми починаємо створення макета із запуску програми та створення чистого файлу. Далі потрібно перенести всі сторінки/розділи з нашої ієрархічної схеми. Ми не будемо в цій статті розбирати саму програму Axure RP (до того ж їх багато версій, і вони різні), а розповімо лише про основні принципи створення макета.

 

Початок роботи над прототипом

Запускаємо программу…

Далі потрібно перенести всі сторінки/розділи з нашої ієрархічної схеми. Важливо зберегти логіку вкладеності та ієрархію. Так буде простіше розуміти, які сторінки до якого розділу відносяться. Якщо розділи дуже великі, можна створювати окремі папки.

Кожна така сторінка, створена у програмі, є порожнім листом, у якому створюються блоки. На таких аркушах створюється прототип.

Так само можна створити блоки, що повторюються, які єдині для всіх розділів майбутнього сайту. Такими блоками, що повторюються, можуть бути:

  • Хедер – верхня частина сайту (шапка), з меню, логотипом, контактами тощо.
  • Футер – нижня частина сайту (підвал), з будь-якими даними, які можуть знадобитися користувачеві, можна виводити більш розширені контакти, посилання на соц. Мережі, дублювання меню.
  • Лівий або правий сайт бар – це блок з вертикальним меню та кнопками навігації, зазвичай використовується для сайтів, у яких багато розділів або для особистих кабінетів користувачів.
  • Відкриті форми зворотного зв’язку – це блоки, де розміщуються поля для введення даних клієнта і потім відправляються з сайту на пошту. Такі блоки також можуть повторюватися на різних сторінках.

Створення розмітки

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

Найчастіше для розмітки використовують шаблон на 12 колонок, задаючи їх ширину, відступи між колонками і відстані від краю. Розмір розмітки повинен відповідати з розміром всього сайту, це може бути 1200 пікселів.

Сама розмітка виглядає так:

Далі ми створюватимемо блоки макета згідно розмітки, використовуючи ці 12 колонок і відступи між ними.

Робота над макетом

Після проведення всіх початкових робіт у макеті сайту, можна переходити безпосередньо до роботи над кожною сторінкою та блоками. Для початку можна зробити «грубий» варіант прототипу, просто розмістивши основні блоки та елементи у тих місцях, які вам підходять. Починати роботу можна з Головної сторінки.

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

Приклади:

Деталізований макет

Не деталізований макет

Приклади прототипів сайтів

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

Інтернет-магазин Prof1Group

Приклад прототипу сайту великої компанії, що торгує військовим одягом та спорядженням https://szxez4.axshare.com

Приклад макету для гастрономічного кафе

Невеликий, але добре продуманий макет сайту http://q25hoi.axshare.com

Макет сайту компанії з ремонту квартири

Детальний макет структури сайту тематики ремонту http://udxnr4.axshare.com

Макет сайту ательє пошиття одягу

Компанія займається пошиттям якісного одягу http://ujs48s.axshare.com

 

Чому замовити прототип краще у нас?

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

На нашому рахунку понад 100 прототипів різної складності та тематики, навичку створення прототипів ми оточили практично по максимуму. Без прототипу та всіх підготовчих етапів неможливо створити по-справжньому продуманий та якісний сайт, програму чи будь-який інший IT продукт.

Ви можете звернутися до нас за консультацією та за бажанням отримати детальну призентацію наших послуг. Контактний телефон +38 (050) 074-33-29 Павло, чи пишіть свої запитання нам на пошту: markweb112@gmail.com

Коментарі

Залишити відповідь

ВІДПРАВТЕ ЗАЯВКУ НА БЕЗКОШТОВНУ КОНСУЛЬТАЦІЮ
ВІДПРАВИТИ ЗАЯВКУ

Ми зв'яжемося з Вами найближчим часом!

Ми зв'яжемося з Вами найближчим часом!

Ми зв'яжемося з Вами найближчим часом!