Курс "Веб-дизайн"

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

  • Свій викладач
  • 2-3 рази на тиждень
  • 2 - 4,5 місяці
laptop
blop

Варіанти навчання

Курси стартують кожного місяця
Ми підберемо Вам групу або індивідуального педагога під Ваш рівень та напрямок

Індивідуальний дорослий курс

  • Індивідуально 2-3 рази на тиждень
  • Доступ до матеріалів курсу назавжди
  • Від півтора до восьми місяців

від 26 000 грн/курс

Записатись на пробне
початковий

Індивідуальний дорослий курс

  • Індивідуально 2-3 рази на тиждень
  • Доступ до матеріалів курсу назавжди
  • От полутора до восьми месяцев

від 36 000 грн/курс

Записатись на пробне
середній

Індивідуальний дорослий курс

  • Індивідуально 2-3 рази на тиждень
  • Доступ до матеріалів курсу назавжди
  • Від півтора до восьми місяців

від 43 500 грн/курс

Записатись на пробне
поглиблений

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

Тема: 1
Знайомство з Figma+

  • Вивчення робочого інтерфейсу програми Digma
  • Створення проекту та організація сторінок
  • Вивчення базових інструментів (фігури, перо, текст, фрейми, сектора)
  • Робота з фігурами, масками, ефектами
  • Робота з типографікою (інструмент текст)
  • Вирівнювання, відступи в Figma
  • Налаштування сітки Figma
  • Вивчення функції constraints
  • Автоматизація дизайну за допомогою Autolayout
  • Компоненти в вігам і їх варіанти
  • Створення стилю шрифту, кольору, тіні. робота з бібліотекою
  • Прототипування та анімація
  • Робота з плагінами

Тема: 2
Підготовчий етап в розробці проекту+

  • Все, що можна використовувати для прототипування – від олівця до Axure.
  • Основні принципи юзабіліті
  • Евристичний аналіз
  • Чому ми дбаємо про дизайн та UX
  • Зручність використання: Usable vs Useful
  • Що таке конкурентний аналіз. Які його види, коли і для чого його використовувати.
  • Дошки настрою в роботі дизайнера
  • Робота з замовником
  • Складання та використання стандартних брифів
  • Формування технічного завдання на проект. Розподіл ролей.
  • Дошки настрою в роботі дизайнера
  • Як правильно провести інтерв'ю з замовником і отримати всю необхідну інформацію?
  • Оцінка термінів виконання завдань. Оцінка вартості

Тема: 3
Дизайн, процеси і основи роботи з інтерфейсами+

  • Як влаштовано взаємодія дизайнерів в компанії. Які є етапи і контрольні точки в роботі.
  • Чому важливо побудувати грамотний і зрозумілий всім учасникам робочий процес.
  • Постановка, виконання, ревю, тестування і закриття завдань.
  • Планові обговорення, Історія версій, систематизація файлів.
  • Поділ роботи на спринти. Дедлайни. Гілляччя. Грумінг.
  • Фреймворк Double Diamond
  • Типи дисплеїв. Розміри дисплеїв. Види пристроїв, під які розробляється дизайн.
  • Платформи в дизайні. Десктоп, мобайл, Андроїд, iOS, дашбоарди і віддалені рішення. Окремий випадок.
  • Продуктові ніші: Освіта, Фінтех, крипта, медицина, економіка і бухгалтерський облік, робота з даними, розваги і т. д.
  • Цікаві сітки в дизайні. Стандартні рішення для платформи десктоп і її мобайл адаптації. Проміжки мобільного, планетної і десктоп версій.
  • Методологія роботи адаптивного дизайну
  • Методологія роботи гумового дизайну
  • Стандартні рішення для сіток на платформах Андроїд і iOS
  • Горизонтальна орієнтація в інтерфейсах
  • Типові відмінності на платформах Андроїд і iOS

Тема: 4
З чого будується інтерфейс. Основи Ui+

  • Блокова структура сторінок
  • Дизайн система
  • Теорія близькості. Атомна та молекулярна конструкція
  • Візуальна ієрархія
  • Система версій. Гілляччя. Зберігання та обслуговування файлів
  • Соответствие десктопной и моВідповідність десктопної та мобільної адаптацій між собоюбильной адаптаций между собой
  • Основи типографіки та роботи зі шрифтами
  • Основи колористики
  • Система відступів. Крок сітки. Щільність пікселів. Дозвіл екрану
  • Система кнопок, інпутів, шрифтів і кольорів.
  • Система кнопок, інпутів, шрифтів і кольорів.
  • Компліментарні іконки в проекті. Стилі іконок
  • Скетчі, вайрфрейми, макети
  • Візуалізація даних

Тема: 5
Основи Ux. Методи дослідження+

  • Карта проекту. Розподіл ролей у проекті
  • Пріоритезація завдань і процесів
  • Система версій. Гілляччя. Зберігання та обслуговування файлів
  • Складання карти сайту і додатки. Ієрархічні діаграми
  • Написання та перевірка юзер сторі з боку клієнта, замовника, співробітника і т. д.
  • Гіпотези, їх тестування та впровадження
  • Користувальницької шлях. Цільова дія. Метрика
  • Оптимізація юзерфлоу. Приклади сайтів і додатків
  • Високонавантажені інтерфейси
  • Користувальницькі інтерв'ю: як і для чого їх проводити. Як правильно обробляти отримані дані і перетворювати їх в дизайн-рішення.
  • Навіщо потрібні персони і чи можна їх просто придумати? Емпатія як важлива складова human centered design
  • Опитування,А \ Б тестування, фокус групи та інші методи аналізу інтерфейсів
  • Глибина проникнення. Час на сторінці. Теплові карти. Конверсія. Монетизація

Тема: 6
Знайомство з різними типами сайтів+

  • Аналіз існуючих на даний момент типів сайтів
  • Дослідження областей взаємодії з веб-дизайном
  • Основні типи поліграфії
  • Брендинг
  • Неймінг
  • Прототипування
  • Основні правила побудови сайту. Адаптивність. Основи композиції

Тема: 7
Нейминг+

  • Шрифт. Пошук і установка
  • Використання різних типів шрифтів
  • Композиційні прийоми зі шрифтами
  • Застосування шрифтів на сайті
  • Доопрацювання сайту-візитки, використовуючи вивчений матеріал
  • Основні правила побудови сайту. Бутстрап. Адаптивність. Основи композиції

Тема: 8
З чого будується інтерфейс. Основи Ui+

  • Блокова структура сторінок
  • Дизайн система
  • Теорія близькості. Атомна та молекулярна конструкція
  • Візуальна ієрархія
  • Система версій. Гілляччя. Зберігання та обслуговування файлів
  • Відповідність десктопної та мобільної адаптацій між собою
  • Основи типографіки та роботи зі шрифтами
  • Основи колористики
  • Айдентика, брендинг, дотримання брендбуків і корпоративних стандартів
  • Система відступів. Крок сітки. Щільність пікселів. Дозвіл екрану
  • Система кнопок, інпутів, шрифтів і кольорів.
  • Компліментарні іконки в проекті. Стилі іконок
  • Скетчі, вайрфрейми, макети
  • Візуалізація даних

Тема: 9
Дизайн система+

  • Що таке дизайн система. Ієрархія елементів
  • Компонента. Варіант. Властивість. Перенесення між файлами
  • Вкладені компоненти
  • Компоненти для іконок. Рекомендовані розміри. Стандартні стани
  • Компоненти для прототипування та анімації
  • Розділення компонентів між сторінками та платформами
  • Підключення системи. Публікація змін. Конфлікт. Оновлення компонентів
  • Система версій. Гілляччя. Зберігання та обслуговування файлів
  • Система шрифтів
  • Система квітів
  • Система стилів
  • Пагінація, скролл, хрестики, стрілочки, що випадають меню, чекбокси, радіокнопки, селектори, роздільники, фільтри, сортування і т. д.
  • Створення повної системи кнопок на проекти з десктоп і мобайл версіями
  • Створення системи інпутів на проекти з десктоп і мобайл версією
  • Стандартизація футера і хедера
  • Використання додаткових елементів і станів. Бічне меню. Модальні вікна
  • Структура і систематизація файлів в складних дизайн системах

Тема: 10
Блоги та їх розробка+

  • Теоретичні відомості про блогах
  • Построение простейшего блога по шаблону
  • Майданчики з шаблонними рішеннями, Тільда.
Вікс. Вордпресс. Опенкарт.
  • Побудова структури блогу
  • Монетизація блогів
  • Підключення метрик
  • Автоматизація і відкладений постинг

Тема: 11
Векторна графіка в веб-дизайні і додрукова підготовка+

  • Дослідження ролі векторної графіки в дизайні в цілий
  • Розгляд можливостей Програми для роботи з векторною графікою
  • Переддрукова підготовка поліграфії та векторних об'єкт
  • Аналіз існуючих майданчиків іконок і векторних об'єктів
  • Створення елементарних контурів і фігур за зразком і самостійно

Тема: 12
Лендінг, теоретичні відомості+

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

Тема: 13
Сайт візитка+

  • Аналіз існуючих прикладів сайту-візитки
  • Основні правила побудови сайту такого типу
  • Розробка прототипу портфоліо
  • Розробка сайту-візитки за зразком

Тема: 14
Розробка корпоративного стилю і сайту+

  • Загальні відомості про корпоративному стилі і його зв'язок з вже вивченим матеріалом
  • Аналіз структури корпоративного сайту
  • Розробка індивідуального логотипу та пакету реклами для бренду
  • Створення концепції корпоративного сайту
  • Реалізація головної сторінки сайту
  • Розробка додаткових сторінок корпоративного сайту
  • Аналіз відповідності стилістики

Тема: 15
Розробка інтернет-магазину+

  • Теоретичні відомості і правила створення інтернет-магазинів
  • Аналіз і вивчення особливостей побудова макета інтернет магазину
  • Прототипування сайту за існуючими прикладами
  • Розробка головної сторінки та логотипу
  • Розробка фірмового стилю і супутніх матеріал
  • Карусель товарів
  • Сторінки товару. Опис. Відкликання. Рейтинг
  • Фільтр. Вкладеність. Стан
  • Айдентика в інтернет-магазинах
  • Розробка додаткових сторінок інтернет-магазину самостійно
  • Впровадження сторінки 404 та кошика
  • Адаптація мобільної версії

Тема: 16
Розробка фірмового сайту на запропоновану тему+

  • Побудова власного макета сайту на запропоновану тему, самостійно
  • Аналіз відповідності макета сучасним вимогам

Тема: 17
Мобільні додатки. Дизайн і проектування+

  • Теоретичні відомості про розробку дизайну мобільних додатків
  • Створення прототипу соціальної мережі та мобільного додатку за допомогою редакторів
  • Основні принципи побудови архітектури мобільного докладання
  • Практика побудови карти додатки
  • Розробка програми з акціями та знижками
  • Додаток продажу рослин
  • Продаж авіаквитків
  • Додаток пошуку роботи
  • Розробка інтерфейсів та прогнозування поведінки користувач
  • Спрощення структури додатки
  • Реклама та монетизація програми
  • Взаємозв'язок програмування та дизайну в Мобільних додатках

Тема: 18
Знайомство з онлайн портфоліо бехансе і дрибл+

  • Теоретичні відомості про майданчики-портфоліо в Інтернеті
  • Створення власних портфоліо і завантаження перших робіт

Тема: 19
Просування власного дизайну+

  • Формування та ведення власного портфоліо
  • Взаємодія з іншими користувачами
  • Методи розкрутки своїх акаунтів
  • Відомі і набирають популярність майданчики
  • Зарубіжні майданчики і біржі
  • Фріланс. Біржа. Замовлення. Проблеми та їх вирішення
  • Формування власного бренду
  • Оцінка вартості та тривалості проектів
  • Робота з підрядниками, програмістами
  • Соблюдение качества верстки
  • Мобільна адаптація. Проблеми та рішення.
  • Просування власного продукту та моделі монетизації
  • Оціночний дохід

Як записатись на курси

Обираємо напрямок

Онлайн або стаціонар

Навчаємося і практикуємося

Оформлюємо портфоліо

Отримуємо сертифікат

Шукаємо вакансії серед партнерів

1

Вибір напрямку

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

2

Старанно вчимося і практикуємося

Проходимо всі практики та теорію, оформлюємо портфоліо робіт

3

Пошук роботи

Формуємо резюме, готуємо портфоліо до перевірок, використовуємо всі доступні платформи та пропозиції від наших партнерів

Сертифікат Мій Комп'ютер

Підтвердить, що ви пройшли курс, а також стане додатковим аргументом при влаштуванні на роботу

Сертифікат Мій Комп'ютер — зразок 1
Сертифікат Мій Комп'ютер — зразок 2

Популярні питання до IT школи

- Які у вас є форми навчання? +

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

- Скільки тривають курси? +

Кожен курс має різну тривалість. Курси для дітей займають 1,3–1,5 року. Дорослі напрямки, зазвичай, займають від 2 до 6 місяців, зі своїм викладачем. Деякі складні дисципліни вимагають освоєння двох курсів, наприклад Fullstack програмування.

- Як дізнатись вартість навчання за кожним курсом? +

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

- Які у вас є варіанти і способи оплати? +

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

- Чи допомагаєте ви з працевлаштуванням? +

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

Статті

Веб-дизайн чи UI/UX дизайн: у чому різниця?

20 липня 2026 р.

10:03

Веб-дизайн чи UI/UX дизайн: у чому різниця?

Веб-дизайн і UI/UX дизайн частково перетинаються — обидва починаються з Figma. Розповідаємо, чим курси відрізняються насправді і кому яке навчання підійде.

Читати
Студенти Академії Мій Комп'ютер за навчанням

Про академію Мій Комп'ютер

Працювати треба не 12 годин, а головою. — Стів Джобс

Запрошуємо на комп'ютерні курси дітей та дорослих. Ми маємо великий перелік напрямків та розгалужену мережу відділень.

Можемо запропонувати навчання за напрямками:

  • Веб-дизайн
  • Растрова графіка, векторна графіка та анімація
  • Програмування для дітей
  • UI/UX дизайн
  • Python
  • Frontend
  • Backend
  • JavaScript
  • 3ds Max + Corona + AutoCAD
  • SEO + SMM

Написати нам

Контакти

Зв'яжіться з нами зручним способом або замовте дзвінок від нашого менеджера:

Телефони:

Пошта:

Слідкуйте за нами: