Урок 9. Інформаційна архітектура сайтів
- Загальноприйняті інтерфейсні патерни
- Візуальна ієрархія
- Практичні вправи для тренування використання
Урок 10. Побудова User Flow
- Що таке User Flow та навіщо його робити
- Розробка User Flow для нашого кейсу
- Практичні вправи для тренування використання
Урок 11. Первинні Wireframes
- Початок роботи з прототипуванням сайту: первинні Wireframes
Урок 12. Патерни дизайну сайтів
- Де що має знаходитися на сайті, щоб дизайн сприймався інтуїтивно (чому логотип саме зліва в кутку, а корзина справа тощо)
Урок 13. Респонсивний Дизайн та Модульні сітки
- Responsiveness, Adaptivity, and Static – в чому різниця?
- Розміри екранів, тенденції, statcounter.co
- Що таке Mobile first і чи завжди він доречний
- Сітки на основі колонок
- Модульна сітка 8. грід
- Вертикальний ритм
- Практичні вправи для тренування використання
Урок 14. Композиція, Колір та Типографіка. Introduction
Головні принципи композиції, роботи з кольором та типографікою в розрізі роботи над сайтами.
Урок 15. Автолеяут, компоненти та властивості компонентів у Figma
Figma advanced: навички по роботі з:
- Auto-layout
- Сomponents
- Сomponent properties
- Практичні вправи для тренування використання
Урок 16. Atomic дизайн
- Переваги використання атомарного дизайну при проектуванні інтерфейсів
- Розбір етапів створення атомів та молекул
- Приклади використання атомарного дизайну в популярних інтерфейсах
- Практичні вправи для тренування використання
Урок 17. Робота з організмами та темплейтами
Прокачуємо свої знання щодо компоненів: вчимося працювати з організмами та теймплейтами.
Урок 18. Форми та навігація
Працюємо над компонентами Атомами створюємо їх у Фігмі з допомогою Автолейаута. Збираємо з атомів форму зворотнього звязку. Створюємо Компоненти Атоми і Молекули, з ни зстворюжмо навігацію і моливо кілька секцій Лендінгу чи eCommerce.
Урок 19. Композиція, Колір та Типографіка. Контент.
- На практиці використовуємо знання з уроку про композицію, колір та типографіку – працюємо над сайтом
Урок 20. Анімація. Створюємо інтерактивний прототип
- Мікро інтеракшен в середині компонентів та великі анімовані шматки
- Тогли та світчери
- Скроли в двох площинах
- Слайдери
- Ховер ефекти
- Зум та трансформ
- Динамічні акордиони
Урок 21. Usability дослідження
- Евристики Нільсена
- Модеровані юзабіліті тести: переваги та недоліки, як проводити
- Немодеровані юзабіліті тести: переваги та недоліки, як проводити