Курс із веб-дизайну в Figma: від новачка до першого проєкту в портфоліо

Що ви вмітимете після курсу

• Встановлювати і налаштовувати Figma, працювати з фігурами, пером, текстом, шарами і компонентами
• Вибудовувати композицію макета за правилами вирівнювання, відступів і візуальної ієрархії
• Збирати інтерфейс методом атомарного дизайну — від простих неподільних елементів до готових блоків сайту
• Налаштовувати адаптивність одного макета під десктоп, планшет і мобільний телефон через сітки і прив’язки Constraints
• Готувати дизайн до передачі верстальнику — збирати Style Guide зі стилями кольору, шрифту і станами інтерактивних елементів
• Оформлювати і публікувати кейс проєкту в портфоліо на Behance

Кому підійде курс

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

Як проходить навчання

• Практика побудована навколо одного наскрізного проєкту — лендингу за технічним завданням з умовним бюджетом — Замість набору незв’язаних вправ збирається цілісний проєкт, який можна показати в портфоліо
• Перед версткою макета розбираються підготовчі етапи роботи із замовником: брифування, побудова аватара цільової аудиторії за шістьма запитаннями, аналіз сайтів-конкурентів — Розуміння, як ставити задачу дизайну до початку самої відрисовки макета
• Окреме заняття відведено під порядкове копіювання готового чужого макета — Напрацювання насмотреності через розбір рішень досвідченого дизайнера — з прямим поясненням, що це тренувальна вправа, а не шаблон для реальної роботи
• Курс використовує методику атомарного дизайну — від атома до молекули, організму і шаблону — Зрозумілий спосіб збирати інтерфейс від простих неподільних елементів до готових блоків сайту
• Один макет доводиться до трьох адаптивних версій — десктоп, планшет, мобільний телефон — на основі єдиної системи сіток і прив’язок Constraints — Готовий принцип адаптації будь-якого макета під різні розміри екрана

Що знадобиться

• Figma — десктопний застосунок або браузерна версія
• Плагіни Figma для роботи з фото, іконками і текстом-заповнювачем — Unsplash, Content Reel, Iconify
• Технічне завдання (бриф) на лендинг — як основа наскрізного практичного проєкту

Чому самостійно зазвичай не виходить

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

Окрема складність — перевести один макет у три адаптивні версії: без розуміння системи сіток і прив’язок Constraints десктопний дизайн доводиться пересобирати заново під планшет і телефон, замість того щоб перенести його за єдиним принципом.

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

Що зміниться

Як влаштований шлях

1. Знайомство з Figma Встановлення програми, розбір інтерфейсу, інструментів, фігур, шарів, компонентів і стилів на практичних прикладах.
2. Теорія веб-дизайну і атомарний дизайн Розбір типографіки, вирівнювання, ієрархії і підбору зображень, а також збірка інтерфейсу методом атомарного дизайну — від атома до готового блока.
3. Дизайн лендингу за технічним завданням Брифування, визначення цільової аудиторії, аналіз конкурентів, прототип, візуальний концепт і адаптивний макет для десктопа, планшета і телефону, підготовлений до передачі верстальнику.
4. Оформлення кейса і публікація в портфоліо Збірка презентації проєкту і публікація готового кейса на Behance, а також розбір організації роботи фрилансера із замовником.

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

60 уроків · 8 модулів · 12 годин 1 хвилина відео · які проведуть від встановлення Figma до адаптивного макета лендингу, оформленого в кейс на Behance.

• Інструменти та інтерфейс Figma 28 уроків

  Встановлення програми, робота з фігурами, пером, текстом, масками, компонентами, стилями, сітками і прив’язками Constraints — база для подальшої роботи над макетами.

  • Встановлення і перші кроки у Figma 5 уроків

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

    • Завантаження Figma та реєстрація в програмі2:29

      Урок показує, як завантажити та встановити десктопний клієнт Figma з офіційного сайту або користуватися браузерною версією на Linux, зареєструватися через Google-акаунт або пошту та створити перший документ кнопкою New File.

    • Структура файлів11:25

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

    • Огляд інтерфейсу програми4:40

      Урок знайомить з робочою областю документа Figma: розташуванням інструментів і меню, панеллю шарів і панеллю компонентів, навігацією сторінками файлу та інспектором із вкладкою Design для параметрів виділеного шару.

    • Збереження та передавання файлу6:58

      Урок пояснює, що Figma зберігає зміни в хмарі автоматично, і показує два способи передати документ — експорт у формат .fig і посилання через Share з налаштуванням прав на перегляд або редагування, включно з копіюванням чужого макета до своїх чернеток.

    • Гарячі клавіші1:38

      Урок показує, де у Figma відкрити повний список гарячих клавіш поєднанням Ctrl+Shift+? або через меню допомоги, і пропонує окремий скорочений список часто вживаних комбінацій українською мовою.

  • Фігури, заливки і текст 11 уроків

    Створення і налаштування фігур — прямокутників, овалів, полігонів і зірок, робота з обводкою, ефектами, заливкою і градієнтом, вставка зображень, побудова масок, векторне малювання пером і налаштування текстових блоків.

    • Move tool, Scale tool1:51

      Урок порівнює Move Tool і Scale Tool на прикладі форми з полями введення: під час зміни розміру Move Tool деформує внутрішні елементи непропорційно, а Scale Tool масштабує їх пропорційно в усіх напрямках.

    • Вирівнювання об’єктів4:52

      Урок розбирає базові кнопки вирівнювання об’єктів за осями в інспекторі та розумне вирівнювання, яке розпізнає об’єкти як таблицю або лінію і розподіляє їх по рядах і колонках з керованою відстанню та перестановкою місць через контрольні точки.

    • Прямокутник + овал12:20

      Урок показує створення прямокутника та овала гарячими клавішами R і O, пропорційну побудову з Shift і Alt, заокруглення кутів через контрольні точки та векторне меню, а також введення математичних операцій у панелі координат і розмірів.

    • Полігон + Зірка3:59

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

    • Обведення3:34

      Урок розбирає налаштування обведення фігури: положення лінії (inside, center, outside), товщину та кут заокруглення її кінців, параметри пунктиру з капами, додавання стрілок і заливку обведення кольором або зображенням.

    • Ефекти5:59

      Урок описує чотири типи ефектів в інспекторі Figma — спадну тінь (Drop Shadow), внутрішню тінь (Inner Shadow), розмиття шару (Layer Blur) і розмиття фону (Background Blur) — з налаштуваннями зміщення, розмиття, прозорості та кольору, які можна комбінувати на одній фігурі.

    • Заливка + градієнт9:21

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

    • Зображення11:44

      Урок показує завантаження зображень у Figma перетягуванням, через Place Image або вставленням з буфера обміну, а також режими відображення фото у фігурі — Fill, Fit, Crop і Tile — та базову кольорокорекцію, оскільки зображення технічно є шаром заливки.

    • Маска5:20

      Урок пояснює створення маски з двох об’єктів, де нижній шар задає видиму область для верхнього, об’єднання кількох масок і збірку складеної картки з окремими шарами для заливки, зображення та обведення поверх результату маскування (mask group).

    • Перо17:42

      Урок показує побудову векторних фігур інструментом «перо» з напрямними для плавних форм, редагування точок і ліній через векторне меню та Band Tool, заливку окремих ділянок Paint Basket і правку готових SVG-іконок на прикладі батареї та конверта.

    • Інструмент Текст15:39

      Урок розбирає три способи створення тексту, поведінку текстового блока в режимах resizing (фіксований розмір, автоширина, автовисота), типографічні налаштування шрифту та міжрядкового інтервалу, а також застосування заливки, обведення, тіней і градієнта до тексту як до шару.

  • Групи, фрейми і стилі 7 уроків

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

    • Група9:46

      Урок пояснює призначення групи для порядку в панелі шарів, об’єднання та розгрупування поєднаннями Ctrl+G і Ctrl+Shift+G, відмінність звичайного вирівнювання від смарт-вирівнювання вкладених об’єктів, а також різну поведінку тексту, обведення та фігур під час масштабування через Move Tool або Scale Tool.

    • Frame19:09

      Урок порівнює фрейм із групою: фрейм створюється під готовий розмір пристрою або розтягуванням, має власний фон і незалежний від вмісту розмір, підтримує constraints і Layout Grid, а властивість ClipContent керує видимістю вмісту за його межами.

    • Булеві групи4:38

      Урок показує булеві операції над фігурами — Union об’єднує шари, Subtract вирізає верхнім шаром частину нижнього, Intersect залишає область перетину, Exclude робить її прозорою — і операцію Flatten, яка перетворює результат на окремий векторний об’єкт без доступу до вихідних шарів.

    • Ефекти накладання4:30

      Урок розбирає режими накладання шарів в інспекторі та панелі палітри Figma — Darken, Multiply, Color Burn, Lighten, Screen, Color Dodge, Overlay, Soft Light, Hard Light, Difference, Exclusion і групу Hue/Saturation/Color/Luminosity — та їхній вплив на поєднання кольорів верхнього і нижнього шару.

    • Експорт4:01

      Урок пояснює способи поділитися роботою з Figma: за посиланням через Share без права редагування, збереженням файлу у форматі .fig і експортом окремого шару або фрейму в PNG чи SVG з вибором масштабу, суфікса та окремого ID, а також виділенням довільної області інструментом Slice.

    • Плагіни9:52

      Урок показує розділ плагінів Figma — пошук, встановлення кнопкою Install і запуск через контекстне меню або головне меню програми — і на прикладах плагінів Unsplash і Content Reel демонструє підстановку зображень із фотостоку та випадкових даних (імена, номери телефонів, аватарки) у макет.

    • Стилі15:08

      Урок пояснює чотири типи стилів Figma — кольору, ефекту, тексту та сітки (тільки для фреймів), — їхнє створення з уже застосованих налаштувань, іменування через слеш для вкладених папок, автоматичне оновлення всіх елементів під час правки стилю через Edit Style та публікацію набору стилів у бібліотеку для інших файлів.

  • Прив’язки, сітки і компоненти 5 уроків

    Налаштування прив’язок Constraints і системи сіток для адаптації макета під зміну розмірів фрейму, а також створення компонентів і робота зі спадкуванням їхніх властивостей.

    • Constraints (Обмеження/прив’язки) Частина 118:49

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

    • Constraints (Обмеження/прив’язки) Частина 213:39

      Урок продовжує тему Constraints вертикальною прив’язкою об’єктів усередині картки користувача: підкладці задається scale за обома осями, фотографії — прив’язка вгору-вниз, а нижньому блоку — прив’язка по низу з розтягуванням; текст і фотографія об’єднуються в спільний фрейм і отримують вирівнювання по нижньому краю, щоб коректно адаптуватися під час зміни висоти.

    • Сітки. Частина 14:12

      Урок розбирає налаштування сітки (layout grid) для фрейму: базову сітку в клітинку із заданим кроком і кольором, а також колонкову сітку з типами поведінки під час зміни ширини фрейму — Stretch (розтягування колонок із налаштуванням Margin і Gutter), Center, Left і Right із фіксованою шириною та відступом (Offset).

    • Сітки. Частина 2 + ДЗ13:47

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

    • Компоненти та успадкування властивостей7:29

      Урок пояснює зв’язок між майстер-компонентом і його копіями (інстансами): копії успадковують стилі, текст і Layout Grid майстра, поки конкретну властивість не змінено вручну, розмір копії можна змінювати незалежно, а прив’язки Constraints і переміщення вкладених об’єктів доступні лише в майстрі; функція Detach Instance розриває зв’язок копії з майстром.

• Атомарний дизайн на практиці 4 уроки

  Збірка інтерфейсу методом атомарного дизайну — від атомів і молекул до організмів — на прикладі порядкового копіювання готового макета, а також розбір джерел натхнення для дизайнера.

  • Основа атомарного дизайну12:40

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

  • Створення атомів і молекул8:55

    Урок показує складання молекул — кнопки, поля введення та чекбокса — з атомів тексту, шейпа та іконки, а потім об’єднання цих молекул в організм — шаблон форми з полями введення, чекбоксом згоди та кнопкою відправлення.

  • Створення організмів1:02:14

    Урок відтворює у Figma макет головного екрана туристичного сайту: робота із сіткою та пропорціями, іменованими стилями, фотографіями через плагін Unsplash, масками, іконками з плагінів і текстовими блоками заголовка.

  • Звідки черпати натхнення7:03

    Урок розбирає джерела натхнення для веб-дизайнера: конкурсні сайти дизайнерських премій, майданчики дизайнерських спільнот і торгові майданчики готових шаблонів для CMS — та особливості кожної групи.

• Типографіка, зображення і композиція 7 уроків

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

  • Типографіка24:35

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

  • Типографіка практика + ДЗ9:06

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

  • Де брати картинки для веб-дизайну9:14

    Урок розбирає джерела зображень для веб-дизайну: пошук у Google з фільтрами за розміром, кольором і правами використання, а також платні й безкоштовні фотостоки на прикладі Shutterstock та Unsplash. Пояснюється різниця в ліцензійних умовах між навчальними та комерційними проєктами.

  • Як підбирати картинки для проєктів8:02

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

  • Вирівнювання об’єктів7:54

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

  • Правило внутрішнього і зовнішнього7:08

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

  • Ієрархія у веб-дизайні7:42

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

• Дизайн-концепція сайту 2 уроки

  Розбір видів дизайн-концепції — від блокової моделі до сплит-скрина — і практична збірка власного концепту промо-сайту за референсом: підбір шрифту, кольорів, УТП і композиції.

  • Що таке дизайн-концепт6:49

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

  • Практика створення дизайн-концепту сайту36:16

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

• Дизайн лендингу за технічним завданням 15 уроків

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

  • Технічне завдання, аудиторія і конкуренти 4 уроки

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

    • Технічне завдання проекту6:43

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

    • Порядок виконання проекту8:49

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

    • Визначення цільової аудиторії6:20

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

    • Аналітика конкурентів8:58

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

  • Прототип і адаптивний дизайн 8 уроків

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

    • Створення прототипу сайту. Теорія2:53

      Прототип визначається як схематичний чорно-біло-сірий скелет інтерфейсу майбутнього сайту, що передує чистовому дизайну і фіксує розташування блоків та інформації. Названо інструменти прототипування — Figma, Axure та Marvel App.

    • Створення прототипу сайту. Практика31:41

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

    • Створення концепту сайту39:45

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

    • Створюємо блоки з інформацією24:37

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

    • Створюємо блок тарифів, форму зв’язку та футер20:49

      Збираються блок із трьома картками тарифів, включно з виділеним активним тарифом на темній підкладці, форма введення email і футер лендинга — так завершується підсумковий десктопний дизайн.

    • Робота з шарами. Доопрацювання дизайну13:01

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

    • Адаптив дизайну під планшет20:11

      Показано створення адаптивної версії лендинга під планшет на основі десктопного макета: перенесення блоків із сіткою Bootstrap, кілька способів адаптації першого екрана і налаштування Constraints для карток тарифів.

    • Створення мобільної версії дизайну18:12

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

  • Модальні вікна, Style Guide і здача проєкту 3 уроки

    Збірка десктопного і мобільного модальних вікон, підготовка Style Guide зі стилями кольору, шрифту і станами інтерактивних елементів, а також розбір етапів роботи фрилансера із замовником і правил передоплати.

    • Створення модальних вікон + ДЗ13:02

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

    • Готуємо роботу до верстки. Стайл Гайд + ДЗ5:22

      Розбирається складання Style Guide — окремого файлу зі стилями кольору і шрифту та станами інтерактивних елементів на кшталт кнопок, меню і форми зворотного зв’язку — і підготовка макета до передачі верстальнику окремо від робочого прототипу.

    • Етапи роботи над проектом на фрилансі5:12

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

• Кейс проєкту і портфоліо 3 уроки

  Розбір реальних кейсів на Behance, збірка презентації власного проєкту — палітра, типографіка, мокапи мобільної версії — і публікація готового кейса в портфоліо.

  • Огляд кейсів5:34

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

  • Оформлення кейса лендінгу19:14

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

  • Презентація кейса5:30

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

• Подальший розвиток у професії 1 урок

  Розбір способів доходу веб-дизайнера окрім замовлень — ведення профілю в LinkedIn і продаж готових макетів та UI-кітів на спеціалізованих майданчиках.

  • Неочевидні способи доходу для веб-дизайнера12:36

    Урок розповідає про додаткові джерела доходу для веб-дизайнера, окрім пошуку замовлень: ведення профілю в LinkedIn і продаж готових макетів та UI-кітів на спеціалізованих майданчиках. Публікація макета може привернути пропозиції від розробників перетворити його на тему для CMS або викупити права на дизайн, а UI-кіти й дизайн-системи продаються як складніший вид продукту. Такі публікації також розглядаються як спосіб отримати пропозиції про співпрацю від закордонних студій і розробників.

Часті запитання

Про цей курс

• Чи потрібен досвід роботи в інших дизайнерських програмах?

  Ні, навчання починається зі встановлення Figma, реєстрації в програмі та розбору інтерфейсу — попередній досвід не передбачається.

• Чи вчить курс верстці макета в код?

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

• Чи розбирається створення логотипу?

  Ні, створення логотипу з нуля — окрема велика тема поза програмою; у навчальному проєкті використовується готове зображення логотипу.

• Чи вивчається анімація інтерфейсу?

  Анімація в курсі не вивчається: After Effects і Principle згадуються лише як інструменти, якими зроблено ефекти в чужих кейсах на Behance; для ефектів, не зроблених прототипуванням у Figma, пропонується залишати текстові коментарі для верстальника.

• Чи розбирається дизайн багатосторінкового сайту?

  Практика курсу зосереджена на одному односторінковому лендингу за технічним завданням; багатосторінкові сайти розбираються тільки в теорії.

• Що залишається на руках після курсу, крім макета?

  Адаптивний дизайн лендингу для десктопа, планшета і телефону, Style Guide для верстальника, оформлений і опублікований на Behance кейс проєкту та особиста бібліотека стилів для подальшої роботи.

Доступ і матеріали

• Коли і як я отримаю доступ до курсу?

  Одразу після оплати, тієї ж секунди й автоматично. Чекати на підтвердження не потрібно. Доступ надходить двома шляхами водночас. Перший: на пошту, вказану при оформленні замовлення, приходить лист із посиланням на матеріали. Другий: те саме посилання з’являється у вашому акаунті на сайті, у розділі «Завантаження», і залишається там назавжди.

• Де зберігаються матеріали курсу?

  Усі відео та додаткові файли лежать у хмарному сховищі. Посилання на нього — у вашому акаунті на сайті, розділ «Завантаження», і в листі, який надійшов після оплати. Акаунт тут не формальність, а спосіб доставки: курс залишається в ньому назавжди. Навіть якщо лист загубився або ви згадали про купівлю через рік, посилання буде на місці.

• Чи можна завантажити матеріали, чи тільки дивитися онлайн?

  Завантажувати можна і варто. Радимо зберегти відео на комп’ютер і дивитися звідти. Причина проста: хмарне сховище не розраховане на перегляд відео. Іноді воно дозволяє увімкнути ролик просто у браузері, але якість при цьому помітно гірша за вихідну. На своєму комп’ютері ви побачите курс таким, яким його записували.

• Як довго діє доступ?

  Безстроково. Курс залишається вашим назавжди, повертатися до нього можна скільки завгодно разів. Якщо через рік чи два посилання раптом перестане відкриватися з технічних причин — напишіть на info@siluette.com.ua, ми його відновимо.

• Лист із доступом не надійшов — що робити?

  Насамперед: доступ у вас є в будь-якому разі. Увійдіть на сайт і відкрийте розділ «Завантаження» — посилання на курс уже там, незалежно від того, дійшов лист чи ні. Найчастіше лист губиться через одруківку в адресі під час оформлення замовлення. Ще варто заглянути до теки «Спам». Не виходить розібратися — не витрачайте час: напишіть на info@siluette.com.ua або в чат у правому нижньому куті сайту, ми допоможемо.

• На яких пристроях дивитися курс?

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

Оплата та повернення

• Якими способами можна оплатити?

  Банківською карткою Visa, MasterCard або «Простір», через Google Pay, Apple Pay, Masterpass, Visa Checkout, платіжний QR-код, Botpay у Telegram чи Privat24. Є й оплата частинами: Монобанк (3 або 4 платежі), А-Банк (2, 3 або 4 платежі та розстрочка), Банк Глобус (8 платежів), «Скибочка» від OTP Bank (3 платежі), миттєва розстрочка та оплата частинами від ПриватБанку.

• Чи приймається картка, випущена не в Україні?

  Так. Платіжна система приймає картки з Євросоюзу та будь-яких інших країн. Одна деталь, про яку часто забувають: банк може попросити підтвердити платіж — у мобільному застосунку або кодом із СМС. Якщо оплата не проходить, перевірте застосунок банку та повідомлення.

• Як працює знижка 20% при купівлі кількох курсів?

  Додайте до кошика два курси або більше — знижка застосується автоматично до всіх товарів у кошику. Два курси: мінус 20% на обидва. П’ять курсів: мінус 20% на всі п’ять. Знижка поєднується з будь-якими акційними цінами й діє на весь каталог без винятків.

• Чи можна повернути курс або гроші?

  Цифрові товари поверненню та обміну не підлягають. Це загальне правило для всіх електронних товарів в Україні — постанова Кабінету Міністрів № 172 від 19 березня 1994 року. При цьому ми завжди на зв’язку. Якщо доступ не відкривається, посилання перестало працювати або файли пошкоджені — напишіть на info@siluette.com.ua, вкажіть дату та номер замовлення. Відновимо. Якщо щось незрозуміло в самому курсі, теж пишіть — підкажемо.

• Чи можна оплатити від організації за рахунком?

  Поки що ні. Ми працюємо лише з приватними покупцями — безготівкової оплати за рахунком від юридичних осіб зараз немає.

Як проходить навчання

• Чи є зворотний зв’язок із викладачем і перевірка завдань?

  Ні. Усі курси — це записи уроків для самостійного вивчення: викладач не відповідає на запитання і не перевіряє домашні завдання. Саме тому курси коштують значно дешевше за навчання з куратором. Ви отримуєте той самий матеріал, але займаєтеся самі та у своєму темпі.

• Чи видається сертифікат?

  Так, цифровий сертифікат — на запит і безкоштовно. Напишіть на info@siluette.com.ua, вкажіть ім’я та прізвище саме в тому вигляді, в якому хочете бачити їх у сертифікаті, і ми надішлемо його протягом доби.

• Чи потрібен досвід, щоб почати?

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

• Чи є терміни проходження курсу?

  Ні. Ані дедлайнів, ані розкладу, ані доступу, що згорає. Завантажили — дивіться коли зручно, з будь-якими перервами.

• Чи можна поділитися курсом з іншою людиною?

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

Підтримка

• Куди писати, якщо щось не працює?

  Найкраще на info@siluette.com.ua. Є й чат у правому нижньому куті сайту, але пошта надійніша: там можна все описати докладно та додати знімки екрана. Прохання: опишіть, що саме ви робили і що пішло не так, та додайте знімок екрана з помилкою. Так ми вирішимо питання одразу, а не з’ясовуватимемо півдня, що сталося.

• Як швидко відповідає підтримка?

  У робочий час, з 9:00 до 19:00, на пошту зазвичай відповідаємо протягом години, у чаті — за кілька хвилин. Після 19:00 теж буває, але час відповіді не обіцяємо.