Прототипування сайту: різновиди та реалізація – керівництво

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

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

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

Вступ

Будь-яка робота, пов’язана з творчістю, вимагає попереднього аналізу, продумування і створення схем, креслень, ескізів, яким є і прототип – це результат прототипирования – ескіз або начерк сторінок зі всіма елементами, які на них будуть:

  • меню та інші елементи навігації;
  • кнопки і форми;
  • посилання;
  • зображення, анімація та інші мультимедійний файли;
  • таблиці і т. д.

Мал. 1 – Готовий прототип сайту, виконаний в розробленій для цього програмою

На даному етапі немає місця красі, ні про яких елементах дизайну мова не йде. Головне завдання – зрозуміти:

  • що де буде знаходитися;
  • як користувач буде взаємодіяти з ресурсом;
  • як здійснюється зворотний зв’язок, взаємодія сторінки з користувачем, якщо вона динамічна.

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

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

Такі доопрацювання виливаються в затримки і додаткові фінансові витрати (або збиток).

Прототипування можна порівняти з планом майбутнього будинку: недогляд дрібного, але важливого елемента може дорого коштувати.

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

Мал. 2 – Основна відмінність прототипу (показаний зліва) від макета (праворуч)

правильний протопити

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

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

різновиди

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

Діляться прототипи на два види:

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

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

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

концепції реалізації

У загальному випадку при створенні прототипу можна піти чотирма шляхами:

  • олдскул – дешево і сердито – беремо олівець, листочки паперу, креслярські приналежності і акуратно, наскільки це можливо, креслимо / малюємо елементи сторінок;
  • графічний редактор;
  • Інтерактивна дошка;
  • спеціалізований інструмент.

паперова

Користується попитом при роботі над простими проектами, коли структура ресурсу нескладна.

позитив:

  • не вимагає освоєння графічних додатків;
  • швидкість створення і перероблення;
  • можливість редагування (якщо застосовувався олівець) і коментування;
  • легко сприймається;
  • низька собівартість.

негатив:

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

Мал. 3 – Найпростіший спосіб вирішення проблеми

До даної категорії слід віднести і прототипування на інтерактивній дошці. Воно дозволяє демонструвати схему широкої аудиторії і швидко вносити зміни в її.

Графічні редактори

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

Особливості (в залежності від обраного продукту):

  • багато програм вимагають наявності певних знань і кваліфікації, як наприклад, Photoshop;
  • можливість експорту в html;
  • не всякий формат файлів можна відкрити без додаткового ПЗ, якщо схема зберігається в притаманному додатком форматі, наприклад, psd для Photoshop;
  • далеко не весь софт безкоштовний;
  • неможливо зробити інтерактивну схему для переходу по сторінках єдиним кліком по елементах прототипу;
  • швидкість роботи помітно поступається варіанту з листком паперу і олівцем.

Мал. 4 – Приклад розробки в Photoshop

Плюси застосування програмного забезпечення:

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

Спеціальне програмне забезпечення

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

Частина з них доступна безкоштовно, за багато доведеться викласти невелику суму.

Коротко розглянемо найбільш популярні з них.

  • Axure RP Pro – платна і дорога. Професійний інструмент, що підтримує клікабельні прототипи і їх експорт в безліч форматів, в тому числі html, елементи проекту мають масу властивостей і відображаються в деревоподібної структурі.

Мал. 5 – Готовий проект, створений в Axure RP Pro

  • Візуальний редактор Dreamweaver – дозволяє робити складні проекти шляхом перетягування у вікно готових елементів і редагувати отриманий код вручну, підтримує інтерактивність.
  • Visio з пакету офісних програм від Microsoft – професійне середовище для роботи з макетами, схемами і діаграмами. Висока вартість перекривається можливістю спільної роботи над проектом, що відрізняє програму від усіх конкурентів.
  • Prototype Composer – один з небагатьох безкоштовних редакторів для Windows.
  • CogTool – просте додаток для роботи з макетами, що оцінює швидкість виконання операцій.

Мал. 6 – Функціонал Cog Tool

Платних програм набагато більше, ніж вільно розповсюджуваних, тому вивчати кожну не станемо. Вибирати інструмент слід, виходячи з масштабів його використання (невелика компанія навряд чи зможе купити дозволити собі ПО за $ 700), зручності, функціоналу, платформи і т. Д.

особливості:

  • дуже гнучкі;
  • естетичний вигляд кінцевого продукту;
  • можливість швидкого редагування;
  • створення інтерактивних прототипів (не у всіх програмах);
  • експорт в графічний формат або html;
  • проект доступний всій команді;
  • майже скрізь потрібні навички роботи з ПО або час на його освоєння;
  • багаторазове масштабування;
  • не дозволяють відкрити загальний доступ до файлу і працювати над ним з декількох комп’ютерів одночасно.

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

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

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

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

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

Ссылка на основную публикацию