Основи проектування цифрових продуктів
8. Основи візуальної складової дизайну (UI)
Принципи проектування
та збір інформації
Що розглянемо?
Visual research.
Основи композиції. Модульні сітки.
Шрифт та типографіка.
Робота з кольором у цифровому середовищі.
Особливості підготовки тексту для інтерфейсу (microcopy).
Visual research
Visual research
процес втронного дослідження з метою пошуку візуальних рішень по проєкту, що дозволяє краще зрозуміти контекст, вивчити найкращі вже існуючі варіанти та розширити візуальне бачення/сприйняття.
Visual research допомагає сформувати уявлення
про маловідомий домен чи сферу, розширити власні горизонти, краще генерувати ідеї та підтвержувати прийняті рішення, пришвидшує процес роботи на візуальним дизайном.
Спочатку варто вивчити контекст про ЦА та бізнес замовника та збираємо візуальний образ та контент,
що передає дух продукту, процеси тощо...
У більшості випадків нам потрібно буде передати відчуття реальних процесів у цифровому середовищі, враховуючі узгоджені принцити концепції.
Фото, відео, інший медіаматеріал на даному кроці буде дуже доречним)
Далі аналізуємо конкурентів...
Знаходимо сильні/слабкі сторони і "відбудовуємось"
на основі цих знань)
Аналіз готових дизайн-рішень...
Dribbble, Behance, Pinterest, mobbin.design...
Awwwards, Musli, Medium...
Але основним прийомом тут є не лише споглядання,
а процес пізнання "чому саме було спроєктоване те
чи інше рішення"
Також непогано себе зарекомендував метод проходження шляху користувача: виявляйте позитивні та негативні моменти та застосовуйте у своїх проєктах.
Щоб процес не тягнувся варто чітко визначитись
із метою та встановити deadline
Основи композиції. Модульні сітки
Основні закони композиції:
- єдність;
- супідрядність;
- рівновага.
Єдність
Єдність елементів проявляються в гармонії всіх учасників композиції зі всіма їхніми внутрішніми зв’язками.
Завдяки принципу єдності система будь-якої складності має вигляд узгодженого
та співпідпорядкованого між собою цілого.
Супідрядність (домінанта)
Домінанта - це центр композиції, що організовує всі інші елементи так, щоб користувач рухав погляд по заданій траєкторії.
Це смисловий чи формальний центр, головна точка композиційного простору, із якого починається основна дія, де зав’язуються внутрішні зв’язки макету.
Де б вона не була, домінанта завжди фокусує й утримує на собі погляд, повідомляючи, що вона - головна, центральна фігура в композиції.
Рівновага
це такий стан композиції при якому всі елементи збалансовані між собою в результаті рівності візуальної ваги (зорової маси) усіх складових.
Дотримання цього принципу необхідне, інакше
в глядача може виникнути дискомфорт і відчуття,
що візуальні об’єкти - випадкове хаотичне нагромадженням предметів.
Засоби композиції:
- контраст/ньюанс;
- симетрія/асиметрія;
- метр/ритм;
- подоба -відмінність;
- величина-масштабність;
- співвідношення-пропорції;
- консонанс-дисонанс.
Контраст/ньюанс
Симетрія/асиметрія (динаміка/статика)
Метр/ритм
...
Принципи композиції у дизайні:
1. Використовуй візуальний простір для відображення відносин в контенті
Принципи композиції у дизайні:
2. Використання білого простору
Принципи композиції у дизайні:
3. Вирівнювання
Принципи композиції у дизайні:
4. Контраст
Принципи композиції у дизайні:
5. Ієрархія
Модульнa сіткa
інструмент для упорадкування, мастабування
та організації елементів у макеті.
Переваги використання сітки:
- визначає єдиний стиль оформлення;
- прискорює роботу з макетом;
- знижує ймовірність помилок;
- макет виглядає більш естетично.
Побудова модульної сітки:
- проаналізувати структуру сторінки і сформувати її "чернетку";
- привести найпріоритетніші блоки до подібності;
- сформувати "чорнову сітку" під ваш дизайн;
- привести до сітки блоки, розташування яких
не принципово;
Побудова модульної сітки:
- обираємо крок базової сітки (враховуючи на типографіку - можна обмежиться лише підтримкою верт. ритму на осн. висоти рядка базового шрифту;
та розміри базових елементів: кнопок, полів введення, чекбоксів і т.д.);
- визначте кількість колонок залежно від структури контенту;
- виберіть к-ть точок переходу, які будете підтримувати;
Побудова модульної сітки:
- побудуйте колоночную сітку і спробуйте розташувати ключові елементи інтерфейсу.
Базова сітка
Визнаємо кількість колонок
Обираємо точки переходу
Розташовуємо ключові елементи інтерфейсу
Сітка не має диктувати, а навпаки допомагати
при дизайні макетів.
Тому, від сітки можна відступати!
Не потрібно беззаперечно все вирівнювати по сітці. Якщо якийсь блок ніяк не вміщується - його можна
й не підлаштовувати.
Microcopy
Microcopy
текс в інтерфейсах, що допомагає краще взаємодіяти
із продуктом/сервісом.
Тексти дуже важливі для якісного користувацького досвіду.
Тексти - це половина дизайну!
Чому?
Текст в інтерфейсах:
- СТА;
- навігація/меню;
- інструкції/підказки;
- повідомлення (помилки);
- ...
Тому що текст в інтерфейсі не менш важливий,
ніж дизайн.
Чим раніше він з'являється в макетах і прототипах,
тим вищі шанси проєкту на успіх у користувачів.
Як якісний текст може покращити продукт:
- допомагає швидше досягнути мети;
- зкеровує користувача всередині продукту,
забезпечує інструкційну складову та зворотний зв'язок;
- впливає на настрій користувача;
- передає корпоративні цінності.
Для того щоб тексти працювали слід поставити
такі питання:
- що потрібно користувачу?
- що потрібно нам (продукту)?
- в якому настрої перебуває користувач?
Отже головне в тексті - зміст!
Як покращити текст:
- виокремити функціонал;
- показати цінність;
- сформулювати привабливо/зрозуміло.
Наприклад, екран дозволу геолокації додатку доставки їжі потребує якісного тексту...
Функціонал:
додаток знаходить користувача за геолокацією телефону...
Цінність:
користувач не витрачає час на пошук/введення адреси...
Описуємо:
Дозвольте доступ до геолокації
І замовлення вже вчить саме до вас)
Дозволити
Пізніше
Базові правила написання текстів:
- зрозумілість;
- лаконічність;
- конкретика;
- людяність;
- подібність;
- логічність;
- доцільність...
Зрозумілість
Придумайте свій пароль, який може складатися із латинських чи кириличних літер та має містити не менше 6 символів та одну велику літеру та одну цифру
Ваш новий пароль:
6 літер
1 велика літера
1 цифра
Лаконічність
Додайте свій телефон, ми надішлемо на нього смс
із кодом підтвердження
Додайте телефон, ми надішлемо код підтвердження
Конкретика
Операцію здійснено успішно!
Ваше замовлення вже мчить до вас!
Людяність
6-ти значний код підтвердження вислано на електронну адресу marina34@gmail.com. Якщо лист не надійшов, то перевірте папку "Спам" чи вірність адреси.
Надіслали код на marina34@gmail.com
Подібність
Історія замовлень
Список платежів
Перелік операцій
Історія
Логічність
Ваше замовлення
вже мчить до вас!
Курєр прибуде за 15 хв,
ви завжди зможете звязатися із ним
Зв'язaтися
ОK
Доцільність
Ваше замовлення
вже мчить до вас😊😊😊
Дякую за увагу!
Copy of PD-8
By vs21
