Каркас, прототип, макет: що це таке?

Ця стаття призначена для дизайнерів-початківців UX/UI.

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

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

• Він показує основні шматки контенту
• Він малює схему та структуру макета
• На ньому зображено найпростіший інтерфейс користувача

Існують різні способи створення каркасу. Один із способів - намалювати його в записнику таким чином:

Інший спосіб – використовувати інструменти каркасу, такі як UXpin, Balsamiq і т.д.

Існує безліч інструментів, які можна використовувати.

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

Макет – це візуальний спосіб представлення продукту. Каркас в основному представляє структуру продукту, макет показує, як виглядатиме продукт. Але макет не доступний для кліка (так само, як і каркас). На відміну від каркаса, макет є або середнім або високоточним відображенням дизайну.

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

На відміну від каркаса, ви не можете накидати макет. Можливо вам знадобиться використовувати макет, можете спробувати Marvel, InVision або Moqups.

Крім того, якщо ви хочете перевірити деякі відмінні макети, ви можете йти на dribbble.

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

Але ж це не кінцевий продукт!

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

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

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

Прототипи у дизайні

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

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

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

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

Паперовий прототип

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

Вайфрейм (Wireframe)

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

UI-прототип

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

Інтерактивний прототип

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

Як прототипувати ідею

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

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

Статті про прототипи

Швидкісне прототипування (2019)

Саша Окуньов показує та розповідає, як швидко збирати прототипи, чим вони корисні та коли їх використовувати

Чекліст для тестування прототипу (2023)

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

7 артефактів проектування, які покращать дизайн (2021)

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

До них належать: Дерево KPI, Стратегічний план, Поведінкова сегментація, Верхньорівневий прототип, Сценарії, Інформаційна архітектура, Детальний прототип

Чому вайфрейми старіють (2020)

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

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

Чим такі хороші клікабельні прототипи (2022)

Стаття Олега Удалова про те, які бувають анімовані прототипи та навіщо вони потрібні

Науковий підхід для ефективного UX-прототипування (2019)

Майкла Доджа, Principal Design Technologist в Alexa Voice Shopping в Amazon про те, чому «швидкого прототипування» недостатньо для критичного впливу на дизайн продукту

Вайфрейми, прототипи та мокапи – у чому різниця? (2014)

Це переклад статті Марчіна Тредера, CEO компанії UXpin, опублікованої в блозі Designmodo, яка пояснює різницю між вайфреймами, прототипами та мокапами, а також їх роль у процесі дизайну інтерфейсів

7 якостей конверсійного інтерфейсу (2022)

Гайд Юра Турівного про те, як прибрати перешкоди на шляху користувача інтерфейсу до продукту. Усередині реальний прототип, на прикладі якого Юра розбирає кожну якість інтерфейсу, що допомагає знизити його «опір» і покращити метрики продукту.

Adding conditional logic in Figma (2023)

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

The Best Handoff Is No Handoff (2023)

Віталій Фрідман розповідає, як згладити взаємодію між дизайнером та розробником за методом no-handoff, який передбачає відмову від суворого поділу процесу на дизайн та розробку. Він пропонує ітеративно та спільно створювати прототип, над яким одночасно працюватимуть і дизайнери, і розробники, і який у підсумку слугуватиме живою специфікацією проекту

A Designer's Guide to Documenting Accessibility & User Interactions (2022)

Велика пам'ятка документації макетів та прототипів для відповідності вимогам доступності. Усередині є рекомендації про те, як і що описувати, а також шаблони для Figma

An Introduction To Figma Interactive Components (2021)

Продуктовий дизайнер Еміліано Ціцерон розповідає та показує, як інтерактивні компоненти у Figma покращать процес розробки прототипів.

Лекції та відеоуроки на тему прототипування

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

Антон Григор'єв розповідає про свій підхід до прототипування, щоб швидко створювати прототипи та вносити правки

Прототипування як процес

Лекція «Школи мобільного дизайну» Яндекса про те, як оживити ідею чи створений на її основі макет та перевірити їхню працездатність без дорогої розробки

Курс по Figma: як створити свій перший клікабельний прототип

6 безкоштовних уроків про те, як створити прототип сайту та зробити його клікабельним, щоб замовник зміг наочно уявити майбутній продукт

Прототип та анімація у Figma

Створення сайту ретроспективи мотоциклів у Figma

Покроковий урок щодо використання відео в прототипах Figma

Функція доступна для користувачів із платними тарифами. Тестовий файл для ознайомлення

Відеоурок створення реалістичного анімованого прототипу в Figma за допомогою функції Smart Animate

Урок зі створення прототипів у Figma на прикладі картки товару у мобільному ecommerce додатку

Wireframes скетчінг (low-fi wireframes)

Урок, присвячений першому етапу роботи з вайрфреймами в UI/UX-дизайні - скетчингу на папері (або в даному уроці Photoshop)

Вайрфрейми в UI/UX дизайні

В уроці – деталізація скетчів та створення з них вайфреймів, на основі яких роблять фінальні дизайн-макети

Інструменти для створення прототипів

Figma

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

ProtoPie

Просунутий сервіс для створення інтерактивних та анімованих прототипів. Дозволяє зберігати персональні, командні та публічні бібліотеки взаємодій, а також використовувати готові шаблони та анімації, експортувати дизайн із Figma та багато іншого. Є безкоштовна обмежена версія. Ціна - від 67 $ на місяць за користувача

Основи анімації інтерфейсів у ProtoPie. Добірка уроків з анімації, умов, змінних та інших корисних для прототипування речей

Плагін для імпорту з Figma

Framer

Сервіс дозволяє створювати просунуті анімовані прототипи сайтів та програм. Підтримує швидкий експорт із Sketch та Figma. Щоб перенести макет, достатньо вставити посилання на документ.

Фреймер-кейс №1: Безшовні переходи між екранами.Велика покрокова стаття Олександра Окунева, в якій він розглядає процес створення анімованого прототипу в Framer

Uizard

Браузерний ІІ-сервіс для створення інтерактивних прототипів сайтів та програм. Підтримує командну роботу, містить готові шаблони дизайну, а також дозволяє генерувати прототипи на основі нарисів та створювати дизайн за референсом. Наприклад, можна завантажити шот із інтерфейсом, і платформа сама підлаштує ваш дизайн під нього. Є безкоштовна обмежена версія. Ціна - від 12 $ на місяць при оплаті за рік

Top 10 Wireframe Kits and Tools

10 кращих інструментів та вайрфрейм китів для прототипування, вибраних хлопцями із Craftwork

Marvel

Інструмент для створення інтерактивних прототипів сайтів та програм

Stage 2.0

Платформа для створення інтерактивних прототипів мобільних програм на основі готових UI-китів. Готові прототипи можна протестувати або експортувати до Sketch. Усередині велика бібліотека продуманих компонентів із швидкою кастомізацією та можливістю перевикористання. Є можливість створювати власні компоненти та розрахований на багато користувачів режим. Відеопрезентація

Maze 2.0

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

UITrial

Сервіс для тестування Figma-прототипів. Показує докладну статистику, карту кліків та карти уваги. Можна використовувати як портфоліо

Justinmind

Інструмент для дизайну та прототипування інтерфейсів. Заточений під мобільні програми. Є підтримка жестів. Дозволяє створювати інтерактивні адаптивні прототипи, зберігати дизайн-системи, експортувати макети HTML, а також переглядати мобільні прототипи на пристроях.Містить безкоштовний набір компонентів інтерфейсу та багато іншого. Доступно у вигляді програм для macOS та Windows. Ціна платної версії без обмежень - від 9$ на місяць при оплаті за рік.

Overflow 2.0

Інструмент для прототипування, створення блок-схем та інтерактивних презентацій. Є хмарне зберігання проектів, необмежену історію версій, командну роботу та інші опції. Доступно на MacOS та Windows. Ціна - від 15 $ при оплаті за рік. Є Figma-плагін

Mockplus

Дизайн-комбайн родом із Китаю. В одній платформі розробники об'єднали майже весь процес дизайну цифрових продуктів: планування та документацію, завдання, userflow, інтерактивні прототипи, візуальний дизайн, дизайн-системи та передачу дизайну розробникам. Все це із спільною роботою, зрозуміло

Quant-UX

Браузерний сервіс для прототипування та дослідження дій користувача за допомогою теплових карток. Дозволяє працювати в розрахованому на багато користувачів режимі, створювати інтерактивні прототипи, записувати екран користувача, виконувати A/B-тестування і багато іншого.

Flinto

Програма для створення інтерактивних прототипів програм. Є для Мака, є веб-версія

Drama

Інструмент дизайну інтерфейсів, який включає малювання, прототипи та анімацію

Mockflow

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

Матеріали для цілей прототипування

Contra Wireframe Kit

Набір з 150+ компонентів, що настроюються для проектування стильних вайрфрейм-прототипів.

Relume Library

Набір з 750 компонентів для швидкого прототипування та створення вайрфреймів. Кіт повністю копіює блоки із платної бібліотеки для Webflow, але доступний безкоштовно

Wireframe Prototyping System

Набір елементів для створення карт сайту, флоучартів, вайрфрейм-прототипів програми та майндмепінгу. Доступно у форматах для Figma, Sketch та Adobe XD

Landing Page Kit

Набір компонентів для збирання інтерактивних прототипів лендингів у Framer

Lowdi

Набір компонентів у Figma для швидкого збирання чорнових прототипів

Root

Мінімалістичний набір з 200 компонентів для створення прототипів сайтів. Версії для Sketch та Figma продаються окремо. Ціна зі знижкою - 36 $ (без знижки 48 $)

Figma-плагіни для прототипування

18 Figma-плагінів для створення та налаштування прототипів, які дозволять створювати User Flows, скелетон-екрани, прототипи всіх рівнів, налаштовувати взаємодії між ними, конвертувати готовий проект назад у вайрфрейм, щоб зосередитись на взаємодіях та не відволікатися на візуальну складову.

Макет, прототип, серійний зразок – вчимо терміни

Макет (фр. maquette - масштабна модель, італ. macchietta, зменшувальне від macchia) - модель об'єкта в зменшеному масштабі або в натуральну величину, позбавлена, як правило, функціональності об'єкта, що представляється. Призначений для представлення об'єкта. Використовується в тих випадках, коли представлення оригінального об'єкта невиправдано дороге, неможливе або недоцільне.

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

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

Макет може бути зроблений із чого завгодно. Цей, наприклад, виготовлений із пластиліну (комп'ютерна миша Elta)

А це теж макет, але повнорозмірний. Потрібний для виставки, щоб показати, як виглядатиме даний пристрій. 3D-принтер ANISOPRINT

Зрозуміло, жорсткого поділу на макети та прототипи немає. Трапляються і компромісні варіанти. Ось надрукований на 3D-принтері макет рециркулятора повітря, в якому вдалося розмістити електроніку:

Прототип

Прототипування (англ. prototyping від др.-грец. πρῶτος - перший і τύπος - відбиток, відбиток; першообраз) - швидка «чорнова» реалізація базової функціональності майбутнього продукту/виробу, для аналізу роботи системи в цілому. На етапі прототипування малими зусиллями створюється працююча система (можливо, неефективно, з помилками і повною мірою). Під час прототипування видно більш детальну картину пристрою системи. Але воно не обов'язково виконується в рамках тих самих технологій, що й сама система.

Wikipedia

Прототип також проводиться за несерійними технологіями. Його завдання - бути максимально схожим на серійний виріб і (у міру можливості) повторити його фізичні характеристики. Ще раз: у міру можливості, тобто як вийде, тому що прототип може бути виготовлений тим самим 3D-друком.

Але іноді може й не печаткою.

Виняток із правил: прототип, виготовлений фрезеруванням ABS-пластика, відлежується у відрі з водою (і працює). Дозиметр-радіометр «Зяблік», IP67

Але зазвичай засовувати прототип у цебро з водою, щоб перевірити водонепроникність, не варто.

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

Досвідчений зразок

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

ДЕРЖСТАНДАРТ Р 53736-2009: Вироби електронної техніки

Наступна стадія - дослідний зразок. Він все ще виробляється за несерійними технологіями, але його завдання — бути схожим на серійний виріб. Досвідчений зразок повинен бути максимально близьким за фізичними та геометричними властивостями до серійного виробу. Мається на увазі, що він має ту ж вагу, ті ж габарити, той же колір, ті ж властивості на зразок радіопрозорості, що і пристрій із серії.

Тестова партія

Потім може бути виготовлена тестова партія (Або пробна партія). Вона також виробляється за несерійними технологіями, але за властивостями також стоїть максимально близько до серійних виробів,

Тестова партія - Це досвідчені зразки, які роблять невеликою серією.

Мікротермінал для введення результатів медичних досліджень (лічильник лейкоцитів). Тестова партія, тираж - 125 штук

Golden sample

Далі golden sample («Золотий зразок»). Це, умовно кажучи, перше покоління продукту, який виробляється за серійними технологіями, на «бойовій» прес-формі, але може мати недоліки, які виправити при серійному виробництві.

Блок керування охоронною сигналізацією «Приплив». Так званий golden sample

! Різниця між дослідним зразком та тестовою партією: якщо одиницю дослідного зразка можна зробити фрезеруванням, то для тестової партії це занадто дорого, тому, наприклад, застосовується лиття поліуретану у силіконові форми.

Висновок

— Отже, у нас може бути макет, який може бути зроблений з чого завгодно; прототип, виглядає як кінцевий виріб, що виготовляється за несерійними технологіями; є дослідний зразок, максимально, наскільки можливо, схожий на серійний виріб, у тому числі й усередині; тестова партія - Виробництво кількох десятків дослідних зразків і, нарешті, golden sample - Перший виріб, зроблений за серійними технологіями, але має недоліки, які потім будуть виправлені.

У відро з водою все можна пхати починаючи з дослідного зразка (якщо IP дозволяє).

Андрій Востриков,
керівник

ФОРМЛАБ, спеціалісти з корпусів

У таблиці різниця між макетами, прототипами, дослідними зразками та іншим представлена ​​наочно.

До речі, стабілізатор у корпусі від Формлаба нещодавно запускали майже в космос. І нічого, повернувся в цілості та безпеці:

Як завжди, готовий відповісти на запитання та допиляти статтю за підсумками.