Курс
Дизайн у цифровому середовищі

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

Лекції

Вступ

1

Основні етапи роботи над веб-проектом

Завдання та ідея

2

Дизайн-мислення

3

Емпатія

4

Майндмеп

5

Скетчбук

Дизайн-дослідження та фокусування

6

Види досліджень

7

Тренди веб-дизайну

8

Розвиток візуального смаку та отримання нового досвіду

9

Флэт-иллюстрация

Оcновы графического дизайна

10

Композиция

11

Цвет

12

Шрифт

13

Типографика

14

Модульные сетки

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

15

Психофизиология интерфейсов

16

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

Контент

17

Цифровой сторителлинг

Дизайн

18

Веб-друкарка та функціональні елементи статті

19

Функціональні елементи Landing Page

20

Як оформити портфоліо

Закладки

designspiration.net

booooooom.com

Курс

Профіль

Вийти

Посібник із використання прототипів у дизайні сайту

Що таке макет. Які вони бувають. Як малювати прототипи та робити це добре. Роль прототипу у спілкуванні із замовником

Микита Обухів

Засновник Tilda Publishing , креативний директор студії FunkyPunky

Повсюдна практика розробки прототипів виникла зовсім недавно. Деякі студії (у тому числі і FunkyPunky, ми малюємо з 2009 року) вже давно малюють прототипи, але стандарт – намалювати прототип перед тим, як переходиш у Photoshop – з'явився 2-3 роки тому.

Що таке прототип

Спочатку визначимося з термінологією. В англійській мові є слова wireframe і prototype. У російській мові - сітка, прототип та живий прототип. Через труднощі з перекладом постійно виникає плутанина. Wireframe перекладається як сітка. Але те, що ми називаємо сіткою – це grid. А те, що по-англійськи називається wireframe, ми називаємо прототипом. Те, що вони прототип, ми називаємо «живий прототип» (який можна назвати).

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

Добре складений прототип є повноцінним каркасом сайту, який потім легко «одягається» дизайн.

Чому дизайнери почали використовувати прототипи

У розробці сайту прототипування - це етап, який слідує за дослідженням, перед створенням дизайну.

У студії FunkyPunky ми почали використовувати прототипи, тому що зрозуміли, що всі коментарі замовника стосуються не того, що йому не подобається колір чи розмір елементів. Як правило, правки пов'язані з тим, що забули про якусь сутність: телефон, фільтр за каталогом, блок з новинами тощо. В основному коментарів стосувалися функціональності. Тому щоб не витрачати час на перемальовку, ми ввели проміжний етап — прототипування.

Ми почали переводити те, що почули від замовника, у блок-схему.

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

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

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

Два стилі прототипу

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

Навіщо потрібний прототип

Отримати від клієнта контент на початок роботи над дизайном
Лайфхак. Контент отримати завжди складно, тому що клієнт завжди зайнятий і хоче вам доручити цю роботу, щоб ви чарівним чином зробили все за вищим розрядом. І свій мозок відключає: так, я повинен надати текст, але це ми потім якось розберемося. Але насправді йому потрібно самому зрозуміти, що буде на сайті.

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

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

Зрозуміти яка інформація та в якому обсязі має бути на сайті
Прототип дає можливість зрозуміти, що буде всередині блоків. Якщо на головній сторінці будуть новини, то можна з'ясувати, як вони виглядатимуть і як часто оновлюватимуться. Наприклад, якщо раз на місяць, то не потрібно ставити дату, інакше вони виглядатимуть застарілими, хоча це може бути нормальна періодичність у їхній індустрії. Чи потрібні теги. Чи будуть фотографії. Чи щодня будуть новини? Як виводити - 4 в ряд або досить 2-х. На цьому етапі можна навіть визначитися зі стилем, наприклад, які будуть заголовки: з одного-двох слів чи дев'яти? І це два різні макети. З'ясувати такі речі на етапі прототипування корисно, щоби це не було несподіванок: ти вже загортав сайт і з'ясовується, що заголовки не вміщаються.

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

Раніше
було звичайною практикою надавати замовнику три варіанти головної сторінки, щоб він вибирав, що йому подобається, а що ні. Але скільки потрібно часу, щоб намалювати якісну сторінку? Багато! Якщо, звичайно, робити сумлінно, а не так, що одна нормальна і дві погані. Намалювавши три варіанти прототипу ви заощадите час у рази.

Приклади поганих прототипів

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

Ничего не понятно. Прототип есть, но что тут будет не известно. Не информативный. Не хватает детализации. Плюс страдает визуализация — выглядит он плохо.

Излишнее разукрашивание. Уже похоже на дизайн, но не дизайн. Логотип — что тогда мешает написать реальное название. Секция один, два, три — тоже ни о чем. Надо написать то, что будет. Эта схема не выполняет свою роль прототипа. Оформление излишнее. Он такой цветастенький, а информации-то и нет.

Приклади хороших прототипів

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

Через практику кожен сам собі знаходить зручний стиль. Ми малюємо все в Adobe Illustrator.

Приклади проектів студії FunkyPunky

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

Де дивитись прототипи

flickr.com/ilovewireframes

pinterest.com/wireframes

Також можна дивитися прототипи у портфоліо студій. Багато студій стали на своїх сайтах публікувати «кейси» - докладний опис роботи над проектом. До нього включено і прототипи, і дизайн. Ну і не забуваєте про Google - запит wireframes.

Вчимося малювати лінії

Лінія – основа малюнка. Через те, як намальована лінія складається загальне враження.

Для різних цілей використовують різні лінії. Але завжди вона має бути чіткою, без тремтіння. Початок та кінець мають бути акцентовані. Основна помилка - люди малюють лінії тьмяні на початку і загасають наприкінці. І не поєднують кути. Через це весь прототип розвалюється. Фігура має бути чіткою, зі зрозумілим контуром. Це надає малюнку переконливості. Нічого страшного, якщо лінії перетинаються, це краще, ніж довести. Тоді кути не виглядатимуть недоречно круглими.

Щоб навчитися малювати рівні, впевнені лінії можна робити таку вправу: візьміть великий аркуш паперу (мінімум А2), закріпіть його на стіні і заштрихуйте від краю до краю, не відриваючи руки. Коли рука звикне до великого формату, малювати рівні лінії А4 буде дуже просто.

Хто малює прототип?

Малювати прототип може дизайнер чи проект-менеджер.

Багато хто не здогадується, що можна доручити малювання прототипів проект-менеджеру. Але всі менеджери, які працювали у студії FunkyPunky, малювали прототипи. Тому що прототип це те, як ти мислиш. І абсолютно нормально, що людина, яка укладає договори, з'ясовує технічні вимоги, спілкується із замовником, малює прототипи. Звичайно, якщо вони не дуже складні.

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

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

Adobe Illustrator, InDesign, Sketch 3,

Веб-сервіси:
balsamiq.com
moqups.com
gomockingbird.com
UXPin

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

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

Намалювати макети в скетчбуку від руки . Скетчбук - зручна річ для нарисів, нотаток та прототипування. Потрібно завести скетчбук, щоб у ньому міркувати над варіантами.

Намалювати три варіанти головної сторінки в Illustrator.

Намалювати макети всіх основних сторінок.

Затвердити клієнта.

Кожен етап обговорюється із арт-директором. Структуру, нариси, головну сторінку – зробили частину, обговоріть із арт-директором.

Прототипи краще друкувати. На макеті потім зручно записувати ідеї та коментарі. Відразу готовий to-do-list, що треба виправити. Іноді лінії можуть не продруковуватись, тому товщину потрібно поставити трохи більше та контрастніше. Якщо сторінка дуже довга – роздрукувати на кількох аркушах та склеїти.

Сценарії застосування прототипів

Чи потрібно суворо дотримуватись затвердженого прототипу? Існує два варіанти.

Дизайнер «розмальовує» прототип , суворо дотримуючись того, що намальовано.

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

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

Зовнішній вигляд прототипу

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

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

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

Часто клієнт чинить опір обговоренню прототипу, запитує: коли вже все буде кольорове?

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

Деталізація та «стиліточність» прототипу. Не можна, щоб прототип був схожим на фінальний дизайн. Краще малювати трохи умовніше. Чи не стилізувати зайве. Прототип завжди має бути схемою та сприйматися як схема. Бажання зробити дуже акуратно може призвести до того, що прототип буде виглядати як готовий дизайн. У цьому випадку людина, яка приймає роботу, звертатиме увагу на стиль, а не на інформацію. Це його відволікатиме від суті.

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

Типові елементи

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

Існує базовий набір стандартних елементів. Текст зображується прямими лініями, заголовок малюємо трохи товщі. Картинка - прямокутник з перекресленими лініями, елементи, що управляють, - як маленькі кнопочки. "Шапка" - смужка зверху. Ліворуч, наприклад, штрих товстіший - логотип, а праворуч п'ять штрихів - пункти меню.

Порада: не малюйте прототип занадто великим. Наприклад, на листі А4 ширина вікна має бути 5-6 см. Краще малювати компактно та схематично, а на полях написати коментарі.

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

Обкладинка Лінія товстіша - заголовок. Тонкі лінії – короткий опис. Короткі смужки зверху – меню.

Изображения обозначаются перечеркнутыми прямоугольниками. Текст — прямыми линиями.

Если картинка будет во весь экран, то так и нарисуйте — от края до края.

Текст в колонках. Жирные линии — подзаголовки.

Галерея изображений — перечеркнутый прямоугольник и управляющие элементы.

Видео традиционно обозначаем треугольником.

Ключевые особенности — схематичное изображение иконок и текст в колонках.

Відгук — фотографія та текст.

Кнопки та форми зображуються приблизно так, як вони виглядають.

Поради

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

Текстовий блок заповнюйте текстом, близьким за форматом до того, що буде на сайті , а не рибою. Ставте справжні тексти. Якщо їх немає – вигадуйте максимально близькі за змістом. Або візьміть із сайту конкурента. Робите сайт Samsung, використовуйте тексти Phillips. Головне, щоб не було lorem ipsum dolor.

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

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

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

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

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

Збирайте всі прототипи в PDF для затвердження та розташовуйте у потрібному порядку. З PDF найзручніше і друкувати.

Пишіть коментарі прямо на прототипі під час обговорення.

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

Тестування прототипу

Чим раніше ви протестуєте, тим краще.

У вас з'явиться шанс виявити свідомо неправильне рішення і не переносити його на дизайн макету або фінальний результат.

Інструменти тестування

1

invisionapp.com дозволяє перейти між екранами. Завантажуєте кілька картинок (.jpg або .png) та розставляєте області, які будуть клікабельними.

2

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

"Живі" прототипи

Щоб створити інтерактивний прототип, можна використовувати такі інструменти, як http://www.axure.com/ Він дозволяє зібрати сторінку з веб-компонентів, на які можна натискати. Є меню, що випадають.

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

Frameworks

Прототипування кодом. Найпопулярніший - Bootstrap . Замість малювання використовують готові компоненти, з яких швидко збирається сторінка: поля для введення, кнопки і т.д.

Класна штука. Добре працює для сервіс-дизайну. Коли запускаєш стартап, то за допомогою Bootstrap можна швидко збирати функціонал, не гаючи часу на дизайнера. Відмінно підходить для створення MVP (minimum value product), щоб перевірити гіпотезу. Якщо вона підтвердилася, то вже можна вкладати гроші, купувати дизайнера, який намалює хороший UI-kit.

Мобільні додатки

Малюється так само, в Illustrator. Існують спеціальні програми, які дозволяють робити клікабельні прототипи, які можна вже тестувати на телефоні. За таким же принципом, як і invisionapp - завантажуються картинки і проставляються клікабельні області. Можна переходити між екранами, причому можна навіть глибше прототипування робити, імітувати pop-ups. Мобільні інтерфейси має сенс робити «живими».

Карта сайту

Якщо сторінок дуже багато (25-40), то є сенс намалювати карту сайту — намалювати мініатюри сторінок, на яких лише умовно позначити зміст та розставити переходи між ними.

Це потрібно для того, щоб зрозуміти, де яка сторінка буде: текстова, список, галерея і не заплутатися у них.

Прототипування для лонгрідів (статей)

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

Також у цьому курсі

15

Психофізіологія інтерфейсів

Як управляти увагою користувача, використовуючи базові знання психофізіології.

Попередня

17

Цифровий сторітлінг

Про новий спосіб розповідати історії в Інтернеті.

Наступна

Зміст

Нова закладка

Назва закладки

© Обухів Н.В., 2015 Всі права захищені. Передрук та цитування матеріалів — лише з дозволу автора.

З усіх питань пишіть на [email-masked]

[ ] -

Оригінальний текст

Запропонувати кращий переклад