Прототипування. Огляд основних програм.

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

Саме поняття прототипування походить від давньо-грецького πρῶτος – перший та τύπος – першообраз; відбиток, відбиток. Тобто це ніби “чернетка” майбутньої сторінки або ж цілого сайту. Основною перевагою цього етапу є те, що, не застосовуючи істотних зусиль і не витрачаючи багато часу, можна побачити працюючу систему створюваного інтернет-ресурсу. Це дає можливість детально розглянути логіку структури сайту, і уникнути багатьох помилок у подальшій роботі.

Для чого потрібне прототипування?

• Перш за все, для того, щоб клієнт зміг побачити орієнтовний варіант сторінки або всього сайту, і внести правки ще до процесу програмування і створення дизайну.
• За допомогою даного етапу можна продумати логічне розташування потрібних блоків та інших необхідних елементів дизайну.
• Можливість одразу організувати інтуїтивно зрозумілу систему навігації.
• Детально продумати, як саме (за допомогою яких кнопок або інших елементів дизайну) зробити процес взаємодії відвідувача з сайтом – найбільш зручним.

Як відбувається процес прототипування?

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

Які основні вимоги до прототипів сайту?

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

Виходячи з цього, можна виокремити такі вимоги до прототипів інтернет-ресурсу:

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

Спеціальні програми для створення прототипів

• Balsamiq Mockups

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

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

Елементи, які є в Balsamiq Mockups:

• текстові блоки,
• вікна додатків,
• таблиці,
• прості фігури,
• кнопки,
• картинки,
• стрілки тощо.

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

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

• Axure Pro

Не менш популярна програма для створення прототипів. Вона проста, і також вельми зручна. Є можливість швидко створити прототип, змінювати розташування та властивості елементів. Крім того, у цій програмі можна частково протестувати юзабіліті майбутнього сайту чи мандрівки. А завдяки тому, що результат потім вивантажується зображенням або html-документом, прототип можна показувати всім учасникам проекту.

З особливостей хотілося б відзначити:

• Можна підключати до проєкту клієнта;
• Ефективний зворотний зв’язок;
• Можливість управління дискусією;
• Зручність у роботі з командою.

Завдяки тому, що можна змінювати всі налаштування кнопок, панелей, текстових полів та інших віджетів, прототипи максимально наближені до остаточного результату, і тому можна одразу протестувати майбутню сторінку чи сайт. Мінусом програми є те, що прототипи не можна експортувати в PDF, але є .docx-формат. І ще одним недоліком, на наш погляд, є висока ціна даної програми, у всякому разі, вища за ту саму Balsamiq.

• Mockingbird

Це інтернет-інструмент, за допомогою якого можна здійснити попередній перегляд прототипів не лише сайту, а й додатків. Дуже гарний інтерфейс – інтуїтивно зрозумілий, є можливість перетягування функцій, дуже багато різноманітних елементів, причому більшість із них справді використовуються в роботі. У програмі можна створювати необмежену кількість прототипів, експортувати які можна у форматах PNG та PDF.

• Notism

Це онлайн-програма, у якій можна створювати прототипи не лише для комп’ютерів, а й також і для мобільних телефонів. Це також платна програма, є кілька пакетів, які відрізняються функціональністю. Особливістю її є так звані “гарячі точки”, які ставляться на зображенні, і створюють зв’язки з іншими сторінками. Крім того, додатково команда, яка працює над проектом, має можливість спілкуватися за допомогою приміток і Sketeches. Експорт у таких форматах, як JPG, PNG і GIF.

• Froont

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