Курси Web Design / UI/UX

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

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

Введення в дизайн 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-компанії
• Індивідуальне навчання

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

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

Adobe Photoshop як інструмент дизайнера

• Введення в Adobe Photoshop: як створити, змінити та зберегти файл. Формати документів. Внесення змін до готового макета
• Відмінності між растровою та векторною графікою. Поняття векторної графіки й області її застосування
• Як визначити колірний режим документа. Відмінності між різними видами колірних моделей
• Як налаштувати інтерфейс програми
• Параметри зображення, створення і зміна зображення
• Що таке шар, як з ним працювати. Види шарів і способи їх створення
• Палітра Layers для роботи з шарами
• Багатошарові зображення
• Як трансформувати шар або його вміст, згрупувати, зв'язати або злити шари
• Стилі шару і їх застосування для створення візуальних ефектів
• Інструменти виділення і меню Select
• Налаштування параметрів виділення
• Форма виділення та операції з нею. Як доповнити область виділення, відняти від неї або виконати перетин двох областей
• Кордон виділення і розтушування
• М'який і жорсткий край виділеної області за допомогою інструмента "Уточнити край"
• Область виділення та операції з нею: поворот і масштабування, переміщення, спотворення, дублювання
• Інструменти та методи корекції. Як підготувати роботу до корекції
• Базові інструменти кольорокорекції - тонова, колірна, швидка корекція
• Швидке перетворення в чорно-біле зображення за допомогою коригувальних шарів
• Коригувальні шари та неруйнівна корекція
• Фоторетуш
• Ретуш портретних фотографій: етапи
• Інструменти Healing Brush, Clone Stamp, Spot Healing Brush для чищення шкіри й відновлення текстури
• Вибіркова корекція кольору - відтінок очей, волосся, відбілювання зубів. Інструменти зміни насиченості, затемнення й освітлення
• Домальовування зображення на прикладі волосся
• Корекція фігури й рис обличчя із застосуванням фільтра Liquify
• Інструмент History Brush і способи його застосування
• Інструменти для роботи з текстом і текстові шари
• Як створити й трансформувати напис. Текстові стилі й ефекти - лід, вода, вогонь за допомогою стилів шару
• Встановлення стилів тексту і зміна параметрів, імітація металевого напису
• Параграф. Відстань між рядками, відстань між буквами, вирівнювання тексту
• Що таке mock-up і як з ним працювати
• Що таке Smart Filters і області їх застосування
• Графіка для сайту і соцмереж
• Формат зображень
• Як зберегти дизайн для веб
• Інструменти анімації в Photoshop. Шкала часу

Adobe Illustrator як інструмент дизайнера

• Меню і головне вікно Adobe Illustrator. Палітри й налаштування робочої області
• Як створити, відкрити, зберегти документ. Відновлення документів. Вибір шаблону і налаштування параметрів нового документа
• Інструменти навігації й масштабування документа. Режим перегляду
• Як скасувати або повторити попередні дії в програмі
• Об'єкти та дії з ними - створення, трансформація, зміна розміру, поворот
• Прості фігури: створення кола, еліпса, зірки, прямокутника, багатокутної фігури, спіралі, сітки й дуги
• Як виділити об'єкт за допомогою панелі інструментів
• Трансформація і переходи. Налаштування переходу по траєкторії і його параметри
• Маніпулювання об'єктами - переміщення по монтажній області та між документами
• Сортування об'єктів по групах. Виділення, блокування і розблокування об'єктів
• Щоб скопіювати та вставити нові об'єкти, компонування і комбінування
• Як налаштувати видимість об'єкта, видалити об'єкт. Вирівнювання
• Підготовка графіки для розміщення на сайті
• Підготовка макета до верстки в Adobe Illustrator
• Додаткові інструменти Adobe Illustrator
• Інструменти малювання
• Інструменти вирівнювання. Лінійки, напрямні
• Налаштування шкали вимірювання
• Як створити, заблокувати, видалити напрямні
• Використання розумних напрямних, використання об'єкта як напрямної
• Контур: створення, редагування, виділення. Опорні точки і їх редагування. Редагування кривих Безьє
• Параметри контуру. Зменшення кількості опорних точок
• Малювання ліній за допомогою інструменту
• Шари та маски. Створення шарів. Блокування частини зображення із застосуванням шарів. Робота в палітрі Layers
• Маска і група маскування. Як створити й скасувати маску в палітрі Layers. Різні види масок. Редагування масок. Маска непрозорості
• Створення і редагування тексту в Adobe Illustrator. Атрибути шрифту. Палітри для роботи з написами та текстовими блоками
• Як зробити імпорт тексту в програму
• Трансформування тексту і його елементів
• Траєкторія розміщення тексту. Редагування траєкторії
• Текстові символи та перетворення тексту в криві
• Художні ефекти з текстом - світіння, тіні й неоновий ефект
• Застосування фільтрів в Adobe Illustrator
• Фільтри та ефекти. Растрові ефекти
• Як редагувати растрові зображення в Adobe Illustrator. Операції з зображенням. Як розмістити растрове зображення в програмі і які особливості потрібно знати для роботи з ним. Трансформація і спотворення
• Як перетворити растрову графіку на векторну. Як перетворити векторну графіку на растрову
• Особливості роботи в палітрі Links
• Як виконати кадрування растрової картинки або фото
• Як підготувати зображення для розміщення в мережі
• Експорт файлів в Adobe Illustrator і формати для збереження. Вікно Save for Web і його параметри
• Як підготувати макет для друку
• Що таке внутрішні відступи та вильоти. Як перевіряти кольори перед друком. Офсетний і цифровий друк. Композитний чорний
• Вимоги до файлу від друкарні. Як співпрацювати з друкарем
• Передача файлу. Як підготувати макет до відправлення

Професійна діяльність дизайнера

• Як побудувати кар'єру дизайнера: перші кроки
• Створення портфоліо
• Покращення швидкості і якості роботи
• Різні стилі дизайну
• Ресурси й корисні сайти для дизайнера
• Як працювати зі стоками й не порушувати авторські права

Програма Figma для дизайнера

• Головне вікно та елементи меню Figma
• Інструменти для створення графіки
• Шари, маски шару
• Створення, збереження, видалення документа в Figma
• Інструменти створення графіки
• Шари та маски
• Створення нового документа і налаштування параметрів, збереження, видалення
• Допоміжні інструменти й плагіни. Встановлення і застосування сторонніх плагінів

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

• Здійснювати фотокорекцію в Adobe Photoshop
• Впевнено використовувати дизайнерські програми Figma, Adobe Illustrator
• Готувати макети до верстки та друку

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

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

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

Характеристика професії

• Веб-дизайн - це
• Яку роль він відіграє у формуванні веб-сайту
• Специфіка командної роботи
• Специфіка фрілансу
• Які задачі встановлюють перед веб-дизайнерами
• Знайомство з сучасними течіями в дизайні
• Суть принципу mobile first
• Як відбувається аналіз аудиторії сайту
• Як відбувається аналіз конкуренції
• Введення в принципи аналізу
• Введення в принципи збору даних
• Знайомство з інформаційною схематизацією
• З чого складається структура сторінки
• Які бувають типи сайтів
• Прийоми побудови прототипів сторінок сайту
• Введення в методику прототипування
• Огляд стандартних елементів
• Практика

Характеристика візуального оформлення

• Введення в дизайнерські стилі
• Які бувають типи макетів
• Характеристика сіток дизайну
• Введення в сучасні дизайнерські принципи
• Суть застосування графічних та текстових даних
• Легальне їхнє застосування
• Типографіка
• Шрифтовий вибір
• Застосування іконок
• Застосування піктограм
• Застосування фонів
• Алгоритми побудови всіляких версій сторінки зі звертанням уваги на вимоги адаптивного дизайну
• Практика

Характеристики верстки макету

• Як відбувається кодування макету
• Як кодуються типові елементи
• Представлення векторних даних
• Представлення растрових даних
• Специфіка представлення векторної графіки
• Специфіка застосування SVG-формату
• CSS-спрайти
• Прийоми їхнього застосування для оптимізації завантаження сторінки
• Практика

Покращення дизайну

• CSS-ефекти, що дадуть можливість оживити сторінку
• Сайт та відео
• Характерні ознаки його застосування
• Огляд варіацій відео
• Використання скриптів
• Застосування конструкторів
• Застосування движків
• Проблематика їхнього використання, що частіше за все постає перед веб-дизайнером
• Практика

Після курсу студенти зможуть:

• Грамотно підходити до задач побудови дизайну сайту
• Реалізовувати захист свого дизайну
• Застосовувати способи візуального оформлення
• Застосовувати ресурси без пошкодження прав автора
• Займатися адаптуванням дизайну, відносно мобільної техніки
• Використовувати в дизайні ефекти анімації
• Проводити побудову та кодування макету

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

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

Викладачі курсу

• Володимир - Програміст
• Ігор - Програміст
• Володимир - Програміст
• Дмитро - Веб-дизайнер

Після навчання ви не просто будете створювати ефектні графічні роботи, але проєктувати інтерфейс додатків, роблячи його по-справжньому зручним. UX або user experience означає "користувальницький досвід", тому UX-дизайн направлений на полегшення взаємодії програми та людини.

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

Теми:

• Дизайн користувальницького інтерфейсу: введення
• UX і UI - поняття, принципи та відмінності
• Визначення завдань в проєктуванні UX інтерфейсу
• Дослідження і пошук проблем в проектуванні
• Метод інтерв'ювання користувачів
• Аналіз отриманих даних
• Поняття customer development
• Принципи design thinking і застосування
• Навіщо потрібні customer journey maps і як застосовувати їх на практиці
• Пошук оптимальних рішень при проєктуванні інтерфейсу
• Додаткові інструменти UX - програми Figma, Miro
• Інформаційна архітектура: базові поняття
• Поняття HMW, PAINstorming
• Що таке mindmapping
• Принцип card sorting
• Етап скетчінга в проєктуванні
• Етап прототипування в проєктуванні
• Візуальна складова інтерфейсу
• Стиль material design
• Стандартизація інтерфейсу та Apple HIG
• Які бувають дизайн-системи
• Анімація в інтерфейсі
• Налаштування мікровзаємодій з користувачем
• Створення прототипів за допомогою Figma
• Створення прототипів за допомогою Principle та InVision
• UX-writing або текстове наповнення інтерфейсу
• Етап тестування
• Види тестування інтерфейсу: віддалене, A/B-тестування
• Тестування юзабіліті
• Як документувати результати тестування
• Форми опитування survey
• Як працювати в команді фахівців: емпатія, аргументація, фідбек
• Як відбувається комунікація всередині компанії
• Крос-функціональність і UX
• Методологія розробки Agile
• Методологія розробки Waterfall
• Дизайн-спринти на прикладі Google Design Sprints

Наші випускники можуть:

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

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

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

Студенти отримують навички користування найпопулярнішими інструментами роботи у сфері комп'ютерного дизайну - Adobe Photoshop, Illustrator, Figma. Опанують основи колористики, створення гармонійної палітри для оформлення сайту. По завершенню курсу кожен студент сформує власне портфоліо, в якому буде три роботи: сайт-візитка, лендінг та багатосторінковий сайт.

План курсу

Технічні навички

Adaptive

Проєктувати лендинги, додатки та інтерфейси з урахуванням останніх трендів у WEB-дизайні.

Concept

Працювати з векторною графікою в Illustrator. Створювати концепти, іконки та іконографіку для сайтів. Створювати привабливу анімацію на сайті та працювати з нею.

Composition

Застосовувати принципи UI дизайн. Працювати з редакторами: Figma, Adobe Photoshop. Розуміти принципи корекції кольору та її застосовувати в роботі.

Presentation

Упаковувати та презентувати свій проєкт замовнику, а також наповнити власне портфоліо у професійних мережах Dribbble, Behance.

English

Освоїмо технічну термінологію та базову IT-лексику, а також навчимося працювати у програмах з англійським інтерфейсом.

Соціальні навички

Впевненість

Сформуємо впевненість у собі та своїх здібностях, навчимося бути проактивним, не бояться робити помилки, а аналізувати їх та швидко приймати рішення.

Самостійність

Освоїмо інструменти самоорганізації. Навчимося самостійно ставити цілі, планувати та керувати своїм часом.

Емоційний інтелект

Навчимося керувати своїми емоціями. Логічно та послідовно вибудовувати свою мову та аналізувати поведінку інших людей, робити правильні дії.

Самопрезентація

Зможемо впевнено та вільно виступати на публіці. Завойовувати довіру, цікаво та лаконічно презентувати себе чи свій проєкт.

Працювати в команді

Комунікувати з усіма членами команди, брати на себе відповідальність за результат, знаходити компроміси та позитивно вирішувати конфлікти.

Креативність

Розвинемо вміння генерувати безліч ідей з нестандартним підходом, навчимося бачити проблеми під іншим кутом і вирішувати їх унікальним способом.

Бізнесові навички

Бізнес мислення

Зрозуміємо, що таке бізнес та як він влаштований в інтернеті. Дізнаємося як формується бюджет проєкту і з чого він складається: пошук ідеї, формування бізнес-моделі та складання свого бізнес-плану.

Управління фінансами

Розберемося, що таке гроші та як ними користуватися. Навчимося розрізняти, планувати, контролювати свої доходи та витрати. Чи зможемо ефективно розпоряджатися засобами та розвивати в собі навички управлінця.

Стратегічне планування

Глобалізація економіки та автоматизація виробництва сприяють створенню нових бізнес-моделей. Дізнаємося, які напрями та професії будуть затребувані у найближчі 10 років: стратегія блакитного океану, штучний інтелект, кібербезпека та Meta-всесвіт.

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

• Навчання через практику
• Щотижневі лабораторії Skills Lab
• Фіксація результату
• Онлайн-підтримка викладача
• Онлайн-консультації
• Можливість офлайн навчання
• Захист випускного проєкту
• Гейміфікація
• Особистий кабінет
• Бонуси за активність на курсі
• Домашні завдання
• Звітність для батьків
• Невеликі групи

Курс UI/UX design розрахований на junior UI/UX дизайнерів, яким важко перейти на рівень middle UI/UX designer. Ми допомагаємо молодим спеціалістам подолати перепони на карʼєрному шляху і зробити нові відкриття у професії.

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

Модуль 1. Дослідження та інтерв'ю

Вчимося проводити інтерв'ювання, користувальницькі інтерв'ю та робити аналіз конкурентів.

• Навіщо стартапу дизайнер?
• Інтерв'ювання бізнесу та збір даних
• Дослідження ринку, аналіз конкурентів
• Інформаційна архітектура
• User flow
• Дизайн-макети, варфрейми як частина досліджень
• UX Аудит, JTBD
• Користуальницькі дослідження
• Якісні та кількісні дослідження
• Корисні тулзи для дизайнерів
• Пошук роботи: Портфоліо, СV та співбесіди

Модуль 2. Дизайн додатків

Опановуємо дизайн-макети, навчаємось створювати веб- та мобільні додатки.

• Дизайн-мислення
• Дизайн мобільних додатків
• Пошук свого стилю, механіки утримування користувачі
• Дизайн веб-додатків, user ролі
• UX Writing

Модуль 3. Комунікація та менеджмент

Навчаємось ефективно працювати в команді, а також готуємось презентувати себе на співбесіді.

• Користувачі. User сторі, User ролі, дизайн персони
• Делівері. Комунікація із розробниками та клієнтами
• Менеджмент: Дизайн процес через системне мислення. Ефективна комунікація у команді та з клієнтами

Як все відбувається?

1. Купуєш курс
2. Реєструєшся в чат-боті
3. Отримуєш доступ до відеолекцій та додаткових матеріалів
4. Опановуєш нові скіли та починаєш свій шлях у IT

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

• Відеозаписи лекцій
• Кар'єрний буст
• Додаткові матеріали
• Навчання в чат-боті
• Підтримка та поради
• Доступ до матеріалів назавжди

Викладачі курсу

Елізабет Гилюк - Chief Design Officer

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

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

Основи композиції

• Вступ до курсу
• Основи композиції
• Типи композиції
• Засоби гармонізації композиції
• Принципи гештальту

Основи кольорознавства

• Історія теорії кольору
• Ключові поняття кольорознавства
• Колірні моделі
• Колірні контрасти

Основи типографії

• Коротка історія письма
• Класифікація шрифтів
• Анатомія шрифту
• Підбір шрифтів та шрифтових пар

Основи стилістики та дизайн процесу

• Стиль
• Мода
• Тенденції
• Дизайн-дослідження
• Дизайн-процес

Після проходження курсу ви зможете:

• Розрізняти різні типи композиції
• Застосовувати засоби гармонізації композиції
• Розрізняти базові колірні моделі
• Використовувати дієві методи поєднання кольорів
• Гармонійно добирати та поєднувати шрифти
• Більш системно будувати дизайн-процес

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

• Почни будь-коли і навчайся у власному темпі
• Система балів за навчання
• Підтримка спільноти студентів
• Служба підтримки CASES
• Надаються додаткові матеріали
• Цифровий сертифікат після проходження курсу

Автори курсу та команда

• Анатолій Попель - Автор проєкту Креативна Практика, керівник CASES
• Артем Морозов - Співавтор проєкту Креативна Практика, дизайн директор CASES
• Настя Дев'ятова - Моушн-дизайнер
• Кирило Нікітенко - Голос креативної практики
• Сергій Аністратенко - Технічне забезпечення
• Валерія Яковенко - Директор з комунікації

В цьому курсі професіонали галузі діляться своїми думками та досвідом по створенню кейсів.

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

Теми:

• Кращі практики створення кейсів про вебсайти
• Огляд процесу створення кейсів в Cosmos Studio
• Як кейси створюють в Lazarev.agency
• Що мають містити кейси про комунікаційні кампанії
• Кращі практики створення кейсів в Kyiv Signals

Що ви дізнаєтеся на курсі:

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

Лектори курсу

• Ілля Кульбачний - Засновник та творчий директор Cosmos Studio
• Андрій Гадай - Керівник відділу дизайну Lazarev.agency
• Вікторія Левчук - Контент-менеджер Lazarev.agency
• Максим Якубович - Генеральний директор Goodface
• Богдан Жук - UI/UX Designer в Goodface
• Ярослав Ведмідь - Засновник і генеральний директор Postmen
• Андрій Маноха - Співзасновник та креативний директор Kyiv Signals

Опануйте роботу з текстовими інструментами у Figma та навчіться робити дизайн більш збалансованим.

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

Основи роботи з текстом

• Вступ
• Важливість тексту у дизайні
• Текстові кадри
• Форматування тексту
• Ключові поняття типографії
• Робота зі шрифтами

Основи верстки

• Значення верстки
• Основні принципи верстки тексту
• Види верстки
• Ієрархія текстів
• Правило внутрішнього та зовнішнього
• Поля та стилі

Додаткові елементи верстки

• Колонкова сітка
• Верстка простого тексту
• Оформлення цитат

Після проходження курсу ти зможеш

• Розумітися на ключових поняттях типографії
• Ефективно використовувати інструмент "Текст"
• Редагувати та форматувати текст у макеті
• Працювати зі шрифтами у Figma
• Коректно оформлювати текстові композиції у Figma
• Працювати з принципами верстки у Figma

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

• Отримання сертифіката
• Практика
• Підтримка від спільноти студентів
• Додаткові матеріали
• Служба підтримки Cases
• Перевірка домашніх робіт

Викладачі курсу

Марія Ланова - Графічна дизайнерка та ілюстраторка Креативної Практики