Переглянути вкладення 16877
Об'ємний онлайн-курс старшого дизайнера ibm про дизайн інтерфейсів для всіх учасників продуктової команди. Цей курс-гарантія успішної кар'єри в UX/ui-середовищі. Сформована культура цифрового споживання вимагає від бізнесу продуктів, в яких важлива простота і зручність в повсякденному використанні. Однак за цією простотою стоїть кропітка праця продуктових команд, які опрацьовують десятки рішень, враховуючи реальні процеси в бізнесі і свої технічні можливості.
Дизайнер в подібних командах є сполучною ланкою — створює візуальні артефакти, зрозумілі як бізнесу, так і іншим учасникам процесу виведення продукту на ринок. Саме тому зараз потрібні фахівці, які не відмахуються від технічних деталей у своїй роботі і здатні пояснити всім, як буде працювати інтерфейс.
В рамках трьох блоків курсу ми розглянемо основні етапи роботи дизайнера. ви пройдете шлях від створення глобальної інформаційної архітектури і проектування взаємодії до практичних рішень при роботі над інтерфейсом в макетах.
У графічну складову дизайну, яка важлива для промо-сайтів або лендінгів глибоко занурюватися ми не будемо, а сфокусуємося на функціональних інтерфейсах з опрацюванням практичних рішень в макетах і особливостях взаємодії.
Кому підійде курс
дизайнерам-новачкам, які тільки занурюються в професію, а також фахівцям, які хочуть систематизувати свої знання по створенню продуктів у веб-середовищі. менеджерам, аналітикам і всім учасникам продуктових команд, які хочуть розширити свої компетенції в створенні інтерфейсів або знайти спільну мову з дизайнерами.
чому ви навчитеся
- відкриєте для себе сучасні інструменти роботи і варіанти їх вибору в різних ролях: фрілансер, дизайнер в студії або продуктовий дизайнер в команді.
- пропрацюєте не тільки успішні сценарії взаємодії з інтерфейсом, але і не менш важливі варіанти: коли щось пішло не так з даними або з діями користувача.
- зможете відповісти на питання по функціональних модулів в макетах: як буде відбуватися виведення даних і робота з ними, сортування, як будуть оброблятися помилки і ін.
- навчіться застосовувати різні елементи інтерфейсу і пояснювати їх інтерактивну поведінку, не завжди очевидне колегам.
- прискорите роботу з використанням готових дизайн-систем і розберетеся з Фронтенд фреймворками bootstrap, foundation.
- почнете передавати в розробку макети, за які Вас будуть згадувати тільки приємними словами.
початок роботи
[ * ] прийняття поставленого завдання хто ставить завдання і як з цим жити. шаблон аналізу поставленого завдання: важливі питання, додаткові матеріали і критерії виконання і передачі результату, тимчасова оцінка. Синхронізація розуміння завдання сторонами.
[ * ] робота з технічними та бізнес-вимогами аналіз матеріалів і головні питання, перевірка на міцність. пошук рішень в складних прикладах з громіздкою бізнес-логікою або занадто жорсткими технічними обмеженнями.
[ * ] вибір робочого середовища короткий огляд сучасних інструментів проектування взаємодії, дизайну, анімації та комунікації в команді. їх вибір в залежності від процесів в компанії і етапів роботи над проектом. структура робочого простору для зберігання даних.
[ * ] огляд продуктів adobe photoshop, indesign, adobe xd. переваги та недоліки особистої та командної роботи в певному середовищі. прискорювачі роботи і плагіни. особливості передачі матеріалів в розробку, бізнесу або на тести.
[*]sketch
[*]figma
[*]axure
[*]invision, flinto
Інформаційна архітектура та взаємодія
[ * ] основи проектування підходи і стандарти в області людино-комп'ютерної взаємодії. критерії оцінки якості взаємодії та інтерфейсу.
[ * ] customer journey maps і user stories робота з глобальними сценаріями і кроками взаємодії, рекомендації щодо застосування, декомпозиція. опрацювання негативних сценаріїв взаємодії з інтерфейсом. інструмент.
[ * ] функціональне проектування від загального до приватного: Інформаційна архітектура, виділення основних компонентів, їх функцій і логіки роботи. приклади вплив контенту на архітектуру.
[ * ] прототипування цифрове та паперове прототипування: принципи, деталізація, інструменти. швидке тестування результатів і критерії оцінки.
[ * ] залучення користувача психологія уваги і сприйняття, гештальт. відкриті можливості або контроль користувача, формування звички та інформаційне перевантаження. гейміфікація і сторителлинг.
[ * ] розширення рамок методики генерації ідей, кількісний і якісний підходи. їх оцінка і критерії. доопрацювання прототипу.
практичні рішення
[ * ] принципи макета вибір основних параметрів фронтенда: робоча роздільна здатність екрану, адаптивність, сітка, модульність та ін особливості поведінки і реалізації web інтерфейсів і чому це все важливо дизайнеру.
[ * ] композиція і верстка основні принципи, згадуємо гештальт. звичні шаблони позиціонування інформації на сторінці (f, i, бургер та ін) і блочність.
[ * ] сітка і ритм принципи побудови сіток, модульність і ритм. особливості застосування в веб і готові рішення з фреймворків bootstrap, foundation.
[ * ] робота з текстом типографіка, особливості набору і верстки. робота з інформаційним посилом "call to action" і редактура.
[ * ] вебінар. атомарний дизайн методологія від простого до складного, особливості застосування.
[ * ] елементи інтерфейсу особливості застосування і верстки атомарних контролів і елементів веб інтерфейсу. поведінка і стандартні стани в веб.
[ * ] форми робота з введенням даних і контролем результату, валідація і обробка помилок. особливості застосування та верстки полів введення, випадаючих списків, перемикачів та ін.
[ * ] табличні дані аналіз даних, верстка таблиць. особливості проектування сортування та фільтрації, адаптивність.
[ * ] вебінар. дизайн системи і фреймворки
підходи до роботи над інтерфейсом: придумати своє, взяти готовий ui-kit або грати за правилами цілого фреймворку. використання звичних або унікальних елементів інтерфейсу.
[ * ] модульність створення складних ui-компонентів (модулів) і їх стандартизація для перевикористання в різних частинах проекту.
[ * ] адаптивність огляд підходів до адаптивності, технічні особливості в веб. підготовка макетів і робота з графічними ресурсами.
[ * ] ui-анімація основні принципи і сфери використання. види реалізації: шарами, нодами, кодом. огляд сучасних інструментів для створення анімації: які з них зручні і зрозумілі для розробників.
[ * ] вебінар: модулі в дизайн-системах як не плодити зайві сутності, але виділяти нові модулі і вносити доопрацювання в дизайн-систему. відповіді на питання.
[ * ] передача матеріалів підготовка макетів для розробки, експорт графічних ресурсів, опис функціоналу і комунікація з розробниками.
[ * ] масштабування і робота в команді синхронізація і оновлення макетів між декількома дизайнерами, Актуалізація дизайн-системи. огляд хмарних символів sketch, craft і контролю версій abstract.
[ * ] дизайн-кейс підготовка кейса в портфоліо, особливості та помилки. огляд майданчиків для публікації: behance. tilda і readymag.
Необхідні матеріали та інструменти
вибір робочого середовища залишається за вами. можете працювати в звичних продуктах adobe або відкрити для себе щось нове в sketch (mac) або figma (win/mac). Головне-мати нормально працюючий комп'ютер і доступ в інтернет.
[ * ] прийняття поставленого завдання хто ставить завдання і як з цим жити. шаблон аналізу поставленого завдання: важливі питання, додаткові матеріали і критерії виконання і передачі результату, тимчасова оцінка. Синхронізація розуміння завдання сторонами.
[ * ] робота з технічними та бізнес-вимогами аналіз матеріалів і головні питання, перевірка на міцність. пошук рішень в складних прикладах з громіздкою бізнес-логікою або занадто жорсткими технічними обмеженнями.
[ * ] вибір робочого середовища короткий огляд сучасних інструментів проектування взаємодії, дизайну, анімації та комунікації в команді. їх вибір в залежності від процесів в компанії і етапів роботи над проектом. структура робочого простору для зберігання даних.
[ * ] огляд продуктів adobe photoshop, indesign, adobe xd. переваги та недоліки особистої та командної роботи в певному середовищі. прискорювачі роботи і плагіни. особливості передачі матеріалів в розробку, бізнесу або на тести.
[*]sketch
[*]figma
[*]axure
[*]invision, flinto
Інформаційна архітектура та взаємодія
[ * ] основи проектування підходи і стандарти в області людино-комп'ютерної взаємодії. критерії оцінки якості взаємодії та інтерфейсу.
[ * ] customer journey maps і user stories робота з глобальними сценаріями і кроками взаємодії, рекомендації щодо застосування, декомпозиція. опрацювання негативних сценаріїв взаємодії з інтерфейсом. інструмент.
[ * ] функціональне проектування від загального до приватного: Інформаційна архітектура, виділення основних компонентів, їх функцій і логіки роботи. приклади вплив контенту на архітектуру.
[ * ] прототипування цифрове та паперове прототипування: принципи, деталізація, інструменти. швидке тестування результатів і критерії оцінки.
[ * ] залучення користувача психологія уваги і сприйняття, гештальт. відкриті можливості або контроль користувача, формування звички та інформаційне перевантаження. гейміфікація і сторителлинг.
[ * ] розширення рамок методики генерації ідей, кількісний і якісний підходи. їх оцінка і критерії. доопрацювання прототипу.
практичні рішення
[ * ] принципи макета вибір основних параметрів фронтенда: робоча роздільна здатність екрану, адаптивність, сітка, модульність та ін особливості поведінки і реалізації web інтерфейсів і чому це все важливо дизайнеру.
[ * ] композиція і верстка основні принципи, згадуємо гештальт. звичні шаблони позиціонування інформації на сторінці (f, i, бургер та ін) і блочність.
[ * ] сітка і ритм принципи побудови сіток, модульність і ритм. особливості застосування в веб і готові рішення з фреймворків bootstrap, foundation.
[ * ] робота з текстом типографіка, особливості набору і верстки. робота з інформаційним посилом "call to action" і редактура.
[ * ] вебінар. атомарний дизайн методологія від простого до складного, особливості застосування.
[ * ] елементи інтерфейсу особливості застосування і верстки атомарних контролів і елементів веб інтерфейсу. поведінка і стандартні стани в веб.
[ * ] форми робота з введенням даних і контролем результату, валідація і обробка помилок. особливості застосування та верстки полів введення, випадаючих списків, перемикачів та ін.
[ * ] табличні дані аналіз даних, верстка таблиць. особливості проектування сортування та фільтрації, адаптивність.
[ * ] вебінар. дизайн системи і фреймворки
підходи до роботи над інтерфейсом: придумати своє, взяти готовий ui-kit або грати за правилами цілого фреймворку. використання звичних або унікальних елементів інтерфейсу.
[ * ] модульність створення складних ui-компонентів (модулів) і їх стандартизація для перевикористання в різних частинах проекту.
[ * ] адаптивність огляд підходів до адаптивності, технічні особливості в веб. підготовка макетів і робота з графічними ресурсами.
[ * ] ui-анімація основні принципи і сфери використання. види реалізації: шарами, нодами, кодом. огляд сучасних інструментів для створення анімації: які з них зручні і зрозумілі для розробників.
[ * ] вебінар: модулі в дизайн-системах як не плодити зайві сутності, але виділяти нові модулі і вносити доопрацювання в дизайн-систему. відповіді на питання.
[ * ] передача матеріалів підготовка макетів для розробки, експорт графічних ресурсів, опис функціоналу і комунікація з розробниками.
[ * ] масштабування і робота в команді синхронізація і оновлення макетів між декількома дизайнерами, Актуалізація дизайн-системи. огляд хмарних символів sketch, craft і контролю версій abstract.
[ * ] дизайн-кейс підготовка кейса в портфоліо, особливості та помилки. огляд майданчиків для публікації: behance. tilda і readymag.
Необхідні матеріали та інструменти
вибір робочого середовища залишається за вами. можете працювати в звичних продуктах adobe або відкрити для себе щось нове в sketch (mac) або figma (win/mac). Головне-мати нормально працюючий комп'ютер і доступ в інтернет.
що в підсумку
ви систематизуєте свої знання і додасте якісний кейс в портфоліо, зробите якісне зростання і отримаєте в професійному середовищі перевагу думаючого і вникає в деталі сертифікованого фахівця.
початок роботи
[ * ] прийняття поставленого завдання хто ставить завдання і як з цим жити. шаблон аналізу поставленого завдання: важливі питання, додаткові матеріали і критерії виконання і передачі результату, тимчасова оцінка. Синхронізація розуміння завдання сторонами.
[ * ] робота з технічними та бізнес-вимогами аналіз матеріалів і головні питання, перевірка на міцність. пошук рішень в складних прикладах з громіздкою бізнес-логікою або занадто жорсткими технічними обмеженнями.
[ * ] вибір робочого середовища короткий огляд сучасних інструментів проектування взаємодії, дизайну, анімації та комунікації в команді. їх вибір в залежності від процесів в компанії і етапів роботи над проектом. структура робочого простору для зберігання даних.
[ * ] огляд продуктів adobe photoshop, indesign, adobe xd. переваги та недоліки особистої та командної роботи в певному середовищі. прискорювачі роботи і плагіни. особливості передачі матеріалів в розробку, бізнесу або на тести.
[*]sketch
[*]figma
[*]axure
[*]invision, flinto
Інформаційна архітектура та взаємодія
[ * ] основи проектування підходи і стандарти в області людино-комп'ютерної взаємодії. критерії оцінки якості взаємодії та інтерфейсу.
[ * ] customer journey maps і user stories робота з глобальними сценаріями і кроками взаємодії, рекомендації щодо застосування, декомпозиція. опрацювання негативних сценаріїв взаємодії з інтерфейсом. інструмент.
[ * ] функціональне проектування від загального до приватного: Інформаційна архітектура, виділення основних компонентів, їх функцій і логіки роботи. приклади вплив контенту на архітектуру.
[ * ] прийняття поставленого завдання хто ставить завдання і як з цим жити. шаблон аналізу поставленого завдання: важливі питання, додаткові матеріали і критерії виконання і передачі результату, тимчасова оцінка. Синхронізація розуміння завдання сторонами.
[ * ] робота з технічними та бізнес-вимогами аналіз матеріалів і головні питання, перевірка на міцність. пошук рішень в складних прикладах з громіздкою бізнес-логікою або занадто жорсткими технічними обмеженнями.
[ * ] вибір робочого середовища короткий огляд сучасних інструментів проектування взаємодії, дизайну, анімації та комунікації в команді. їх вибір в залежності від процесів в компанії і етапів роботи над проектом. структура робочого простору для зберігання даних.
[ * ] огляд продуктів adobe photoshop, indesign, adobe xd. переваги та недоліки особистої та командної роботи в певному середовищі. прискорювачі роботи і плагіни. особливості передачі матеріалів в розробку, бізнесу або на тести.
[*]sketch
[*]figma
[*]axure
[*]invision, flinto
Інформаційна архітектура та взаємодія
[ * ] основи проектування підходи і стандарти в області людино-комп'ютерної взаємодії. критерії оцінки якості взаємодії та інтерфейсу.
[ * ] customer journey maps і user stories робота з глобальними сценаріями і кроками взаємодії, рекомендації щодо застосування, декомпозиція. опрацювання негативних сценаріїв взаємодії з інтерфейсом. інструмент.
[ * ] функціональне проектування від загального до приватного: Інформаційна архітектура, виділення основних компонентів, їх функцій і логіки роботи. приклади вплив контенту на архітектуру.
https://privatelink.de/?https://bangbangeducation.ru/course/ux-ui-web-interface/