Привіт! Вітаємо на третьому уроці з UI/UX дизайну.
Як гадаєш, про що думають дизайнери (окрім шостої кави на день, звісно), коли їхня робота завершена і протестована? Про її презентацію. Створити крутий дизайн — це лише частина роботи. Потрібно також вміти його ефективно презентувати. Тож в цьому уроці ми поговоримо про важливість презентації проєктів клієнтам, а також про те, як створити потужне дизайнерське портфоліо.
Що таке презентація дизайну?
Одним із найважливіших етапів роботи над проектом – є оформлення презентації. Від правильного пояснення візуальних рішень залежить левова частка успіху презентації та прийняття проекту командою чи замовником. Крім того, якісна презентація дозволяє зачепити нових потенційних замовників.
Наразі загальноприйнятою нормою в презентації проєктування інтерфейсів є демонстрація декількох варіантів відображення на різних пристроях. Найрозповсюдженішим є одночасне проєктування дизайну під смартфон та десктоп (екран комп’ютера чи ноутбука). Проте іноді виникає потреба створювати дизайн ще й для планшетів. Тож кожна сторінка сайту може мати три різні макети відповідного до пристроїв розміру, з окремим порядком відображення контенту та навігацією, адаптованою до різних розмірів екрана.
Важливо враховувати деякі базові принципи для презентації UI/UX дизайну:
- По-перше, не намагайся показати все на одному слайді. Працюй чисто і показуй мінімальну кількість необхідної інформації на одному зображенні. Краще створити додаткове презентаційне зображення, ніж перевантажити одне усіма варіантами поспіль.
- По-друге, презентуй як архітектор, а не як художник. Твої ідеї мають бути конструктивно пояснені, а рішення виправдані завданнями та їх вирішенням. Презентація ідеї з аргументом “Так виглядає гарно” недостатньо вичерпна в галузі дизайну.
- По-третє, уважно й обережно перевіряй, чи все чітко та вирівняно у твоїй презентації. Намагайся уникати орфографічних помилок та неточностей у дизайні елементів. Це створить враження високоякісного проєкту, виконаного з увагою до дрібниць. Натомість дрібні неточності та помилки залишать відчуття недостатньої уваги до проєкту замовника та непрофесійного підходу.
Як створити презентацію проєкту?
Наш проєкт ми готуватимемо до презентації у Figma. Ми створили для тебе детальне практичне завдання з покроковою інструкцією, як це зробити.Для кожної з презентацій (окрім візуальної ієрархії, яку ми розібрали минулого уроку) потрібно також підібрати кольорову гаму.
Важливою для нас буде колористика — наука про взаємозв'язок кольорів. У дизайні колористика відіграє важливу роль у створенні настрою й атмосфери в інтерфейсі, а також впливає на сприйняття користувачами контенту. У UI/UX дизайні колір використовують як засіб створення ідентичності бренду, диференціації елементів інтерфейсу та передачі настрою. У виборі кольору важливо враховувати психологічну реакцію людей на кольори, а також наскільки кольори поєднувані між собою.
Як обирати й поєднувати кольори в дизайні
Можливо, у тебе є природний хист до підбору та комбінації кольорів. Це чудово і на це теж можна спиратися. Однак якщо почуваєшся дещо невпевнено щодо поєднання кольорів чи бажаєш дізнатися принципи, за якими будуються колірні гами, ми розглянемо кілька корисних прийомів.
Ми використовуємо колірне коло RGB з його 12 колірними сегментами (які складаються з так званих первинних, вторинних і третинних кольорів).
RGB розшифровується як red, green, blue — червоний, зелений і синій, які є основними кольорами світла. У колірній моделі RGB кольори створюються шляхом поєднання різної кількості червоного, зеленого та синього світла. Змінюючи інтенсивність кожного з цих кольорів, можна створити широкий спектр.
У колірному колі RGB три основні кольори розташовані в трикутнику: червоний — у верхній частині трикутника, зелений — у нижній лівій частині, а синій — у нижній правій. Вторинні кольори утворюються шляхом змішування двох основних кольорів: жовтий є сумішшю червоного і зеленого, пурпуровий — червоного і синього, а ціан (зеленаво-блакитний) — зеленого і синього. Третинні кольори створюються шляхом змішування основного кольору із сусіднім вторинним кольором.
Розуміючи колірне коло RGB і його 12 колірних сегментів, UI/UX дизайнери можуть створювати вдалі кольорові палітри, які ефективно передають настрій і тон дизайну.
Те саме стосується і презентації — середовище, в якому ми демонструємо свої напрацювання, має гармоніювати з дизайном у наших макетах. Без узгодження наших робіт із тим, як ми їх розміщуємо, в нас не вийде потужного і вражаючого портфоліо.
Що, вже? Портфоліо?
Портфоліо UI/UX дизайнерів — це збірки їхніх найкращих робіт, які їхні демонструють дизайнерські навички, досвід та знання. Це важливий інструмент для всіх UI/UX дизайнерів незалежно від рівня, посади чи кількості років у галузі. Навіть якщо ти практикуєшся і лише починаєш робити свої проєкти, вчитися їх оформлювати для презентації ніколи не зарано.
Портфоліо — як вітрина дизайнерських навичок і досвіду фахівців, тож важливо, щоб іншим людям було зручно з ним ознайомлюватись. Воно має бути добре організованим, візуально привабливим і зручним для навігації. Радимо додавати до портфоліо короткий вступ, що узагальнює твій досвід і філософію твого дизайну, а також підкріпити найкращі проєкти чіткими описами та зображеннями.
Невже портфоліо справді таке важливе?
Авжеж. Ось кілька причин, чому UI/UX дизайнерам необхідне портфоліо:
- Портфоліо демонструє навички та досвід розробки користувацьких інтерфейсів, вміння створювати естетичні, функціональні та зручні для користувача вебсайти, мобільні додатки чи інші цифрові продукти.
- Портфоліо підкреслює дизайнерське мислення та навички вирішення проблем. Воно може показати, як дизайнери підходять до викликів, проводять дослідження користувачів, створює схеми та ітерації дизайну на основі зворотного зв'язку.
- Сильне портфоліо може стати ключем до отримання роботи. Воно може вразити потенційних роботодавців і допомогти дизайнерам виділитися на насиченому ринку праці. Портфоліо також можна використовувати для подання заявки на фриланс чи контрактну роботу.
- Портфоліо допомагає завоювати довіру та репутацію в дизайнерській спільноті. Поширення портфоліо в соціальних мережах або на сайтах, присвячених дизайну, може привернути увагу інших дизайнерів, потенційних клієнтів або роботодавців.
Портфоліо дизайнера подібне до книги з рецептами від шеф-кухаря. Дизайнери демонструють свої найкращі роботи, а шеф-кухарі — свої найсмачніші страви. Основна мета — показати свої вміння, креативність та досвід. Шеф-кухар може привернути нових клієнтів або вразити потенційних роботодавців вишуканими рецептами, а дизайнер — залучити нових клієнтів чи отримати нові цікаві проєкти. Як книга рецептів може показати унікальний стиль і підхід шеф-кухаря, портфоліо дизайнера може продемонструвати його дизайнерське мислення та навички вирішення проблем.
Ефективна розробка та презентація UI/UX проєктів, а також продумане портфоліо — це ключові складові успіху дизайнера. Час спробувати свої сили у презентації. Нумо практикуватися!
*Примітка: у цьому уроці практичні завдання двох рівнів складності, які напряму пов’язані з типовими завданнями UI/UX дизайнерів. Ми рекомендуємо тобі виконати принаймні завдання першого рівня, але якщо ти не боїшся труднощів, то сміливо берись за виконання завдання й поглибленого рівня.
В цьому уроці ми перейдемо до оформлення макета дизайну сайту для мобільних пристроїв, а також створимо його презентацію для портфоліо чи демонстрації клієнту. Наприкінці уроку ти матимеш три презентаційні слайди:
Технології, з якими працюватимеш в уроці, можуть бути для тебе зовсім нові — тому радимо тобі спершу переглянути відео, де завдання повністю виконує наш автор (із озвучкою від нашої чарівної редакторки Ніки). Можна подивитись увесь процес, а потім починати роботу, або ж відкрити відео та паралельно виконувати завдання власноруч.
То що, почнемо?
- Відкривай той самий макет, з яким ми працювали в минулому уроці (і копію якого ти зроби_ла у свій Figma-простір). Однак тепер тебе цікавитиме інша сторінка, що зветься "Presentation".
- Після цього переходь до фреймів "Урок 3. Покрокова практика першого рівня..." та починай йти крок за кроком для виконання твого завдання.
Бажаємо наснаги та успіхів :)
Для найбільш завзятих ми підготували завдання зі створення презентаційного слайду для портфоліо, що складатиметься з більшої кількості частин інтерфейсу, розміщених під нахилом.
Технології, з якими працюватимеш в уроці, можуть бути для тебе зовсім нові — тому радимо тобі спершу переглянути відео, де завдання повністю виконує наш автор (із озвучкою від нашої чарівної редакторки Ніки). Можна подивитись увесь процес, а потім починати роботу, або ж відкрити відео та паралельно виконувати завдання власноруч.
Починаємо виконувати завдання поглибленого рівня
Знайди на тій самій сторінці з минулого завдання (нагадаємо, назва сторінки: "Presentation") фрейм під назвою "Урок 3. Покрокова практика другого рівня" та починай виконувати всі кроки, що там описані.
Ось як він виглядає:
Все виконано? Усе, що залишилося, — це пройти тест і перевірити наскільки ти засвої_ла теорію, а потім перейти до останнього уроку з рекомендаціями щодо подальшого розвитку. Чекатимемо на тебе там!
