Блог

Різниця між ескізом, макетом і прототипом

Автор: Сергій Хвашчук · · Коментарів немає

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

Ескізи

Більшість людей, коли вони навчаються в школі, вивчають структуру контуру. Є головна тема і потім змінні викладаються, щоб надати паперу форму та порядок. Насправді немає деталей, які б були представлені. Ви просто записуєте ідеї в логічному порядку, щоб змогти їх сформулювати пізніше. Вірфрейминги дуже схожі на контури. Це найпростіший каркас дизайну веб-сайту або додатку. Саме тут ви отримуєте макет і порядок уявлення. Зауважте, що це уявлення сторінки, а не конкретна форма сторінки. Можуть використовуватися прості прямокутники для графіки, заповнювачі для тексту та квадрати для навігації.

вірфрейми мобільного додатку

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

Макет

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

макет мобільного додатку
[Джерело]

Прототипування

Основна відмінність між макетом і прототипом полягає у взаємодії та досвіді користувача. Тоді як вірфрейм - це серія форм і деякий узагальнений текст, а макет - це детальна естетика, прототип є найближчим до дизайну, за винятком кількох налаштувань коду та макету. Він призначений для того, щоб клієнт міг відчути додаток. Тестування та повторне тестування сайту або додатку є ключовими для хорошого прототипу. Через змінну взаємодії цього кроку дизайнерам потрібно знати базові (і, залежно від складності проекту, іноді розширені) знання HTML, XHTML, CSS, Java та PHP.

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

дизайн прототипу додатку електронної комерції
[Джерело]

Клієнти повинні знати, що витрата часу на прототипування тривала порівняно з макетом або прототипом. На щастя, з KFG International ви можете отримати свій прототип готовим за 48 годин! Зміни в додатку або веб-дизайні прототипу не є «швидкими виправлень», але все одно потребують менше зусиль, ніж зміни в MVP продукті.

Інструменти для роботи

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

Вірфрейми, як найпростіший і найдешевший із трьох варіантів, можна створити за допомогою Balsamiq, Pencil and Paper або будь-якої програми комп'ютера, яка дозволяє використовувати базові форми та текст. Рекомендується використовувати щось трохи складніше стандартної програми Paint (краще програму з інструментами вирівнювання).

Макети вимагають, щоб у вас була можливість редагувати зображення, графіку, змінювати текст і створювати складні дизайни. Стандартна програма індустрії для цього - Sketch, Figma або продукти Adobe. З навчанням вам потрібно зрозуміти основи UI та UX, щоб мати найкращий запропонований макет.

Прототипування вимагає цілком іншого набору інструментів. Там, де вам потрібно мати Photoshop, Illustrator або більш просунуту візуальну програму, вам також знадобиться засіб кодування. Sketch, Axure, і InVision - це кілька програм, які ви можете використовувати. Існують і інші програми, і вас заохочують знайти те, що відповідає вашим потребам.

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

Підсумок

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