Курс UI Design

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

Програма курсу

Введення в дизайн UI

• Розробка продуктів: основні етапи
• У чому відмінність UI та UX. UI-дизайнер і його робота над проєктом
• Які інструменти використовує UI-дизайнер

Інструменти дизайнера: Figma і Sketch, Adobe Photoshop, Adobe Illustrator, Invision

• Введення в Figma і Sketch
• Інструмент для розробки макетів InVision
• Avocode - графічний редактор для роботи з файлами PSD і кодом
• Як сформувати бриф відповідно до вимог замовника
• Дослідження ринку, аналіз конкурентів
• Підбір референсів
• Мудборд - що таке, як його створити
• Презентація результатів

Базові відомості про дизайн

• Основи композиції, приклади рішень
• Статична і динамічна композиція
• Шрифти - класифікація, поєднання різних видів шрифтів
• Як вибрати шрифт для дизайну
• Основи типографіки для веб-дизайну
• Акцент і ритм в дизайні
• Теорія кольору - властивості кольорів і їх поєднання
• Створення палітри проєкту
• Психологія сприйняття кольору
• Колір з точки зору дизайнера
• Ресурси для дизайнера

Етапи роботи над дизайном

• Етап скетчінга
• Варфреймінг
• Етап інтерактивного прототипування
• Що таке мокап, віжуал

Побудова інтерфейсу: принципи та інструменти

• Модульна сітка в побудові інтерфейсу
• Функції модульної сітки
• Як створити й налаштувати модульну сітку
• Психологічні особливості сприйняття інформації на веб-сайтах
• Блоки інформації та візуальна ієрархія
• Як розставити пріоритети й акценти на різних елементах веб-сторінки
• Стани елементів інтерфейсу
• Форми та навігація на сайті
• Навіщо потрібні фавіконки
• Прелоадери, іконки та інші інформаційні елементи
• Як вибрати стиль іконок
• Графіка для сайту: технічні вимоги до формату
• Типи медіа та їх розміщення: ілюстрації, відео, фотографії
• Що таке responsive та adaptive design - особливості та відмінності
• Принципи mobile first і desktop first
• Що використовувати - адаптивний дизайн або мобільну версію сайту
• Як підготувати макет і зображення для дисплея Retina

Тестування дизайнерського продукту

• Як відбувається тестування під час створення
• Як поліпшити готовий дизайн
• Поняття design handoff

Як підготувати макет до верстки - інструменти

Графічні елементи сайту - підготовка до верстки.

Огляд трендів і історія веб-дизайну

• Історія web-дизайну і перші веб-сайти
• Сучасні стилі: fluent, flat, material design
• Популярні візуальні прийоми та останні тренди

Застосування анімації в дизайні інтерфейсу

• Як анімувати елементи інтерфейсу
• Анімація в ілюстраціях і іконках
• Сервіси для створення анімації

Презентація фінального проєкту

• Як презентувати проєкт
• Як аргументувати дизайнерські рішення

Що можуть випускники курсу:

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

Особливості курсу

• Викладачі практики
• Корпоративне навчання
• Можливість навчатись у вихідні
• Можливість влаштуватис у провідні IT-компанії
• Індивідуальне навчання