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

WEB DESIGN

Лекторка: Оля Варченко
створює нову реальність через вебсайти
читати далі
дата
28 вересня — 30 січня
тривалість
30 занять

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

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

 

Як результат — зробиш три кейси для свого портфоліо: дизайн landing page із залученням ШІ, редизайн наявного багатосторінкового сайту, а також е-commerce сторінку. У кінці курсу з кар'єрною консультанткою розберешся з портфоліо та CV, щоби після знайти роботу як в агенції, так і на фрилансі.

Для кого

  • світчери

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

  • вебдизайнери-початківці

    розкладеш свої знання на 360 градусів, підвищиш свій скіл до професійного та зможеш використовувати різні підходи до своїх концептів

  • графдизайнери, розробники, ілюстратори

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

Після курсу

  • • оформлюєш портфоліо з трьома кейсами, збираєш професійне CV та розумієш, як зацікавити клієнтів

  • • вмієш працювати з брифами та проводиш UI/UX-аналіз, щоб зрозуміти аудиторію та розв’язати задачу клієнта

  • • проводиш дизайн-сесії: працюєш з рефами, генеруєш ідеї, створюєш mind map та збираєш мудборд

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

  • • розбираєшся в UX-копірайтингу та застосовуєш AI для швидшої роботи

  • • розробляєш UI kit: від кнопок — до іконок та панелей; адаптуєш сайт під різні пристрої: desktop, mobile, tablet

Лекторка

ОЛЯ ВАРЧЕНКО

  • 7+ років у професії

  • Працювала у: League Design Agency — міжнародній агенції, яка реалізувала понад 260 проєктів у 36 країнах; ISD Group — топовій креативній агенції, яка отримала звання Agency of the Year 2020 та The Most Creative Agency 2020, а також бронзу на Cannes Lions

  • Знає, як зробити нетипову та цікаву структуру для сайтів, щоб клієнти та юзери були задоволені

  • Створює глибокі сенси для сайтів для будь-яких клієнтів: від e-commerce до хмарних технологій

Роботи лекторки

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

  • 00

    Знайомство: хто є хто?

    • Що таке вебдизайн і чому він потрібен?

  • Блок 1. Софт. Працюємо з Figma

  • 01

    Усе починається з Figma

    • вивчаємо основні функції програми
    • фрейми, фігури, заливка та обкладинки
    • текст всьому голова: вивчаємо читабельні шрифти
    • основи векторної графіки
    • як прикладати маски та використовувати ефекти без крінжа
    • що таке Mirror App та Контроль версій
    • ком'юніті як потужний допоміжний інструмент
    • плагіни та FigJam
  • 02

    Верстка лайк е про

    • розбираємося з модульними сітками
    • як Auto Layout полегшує життя вебдизам
    • створюємо «гумовий» макет
  • 03

    Стилі, компоненти та бібліотеки

    • як правильно називати стилі, щоб не створювати mess
    • компоненти та їхня варіативність

    Д/З №1. Перемалювати landing page.

  • 04

    Прототип та анімація

    • прототипи у Figma: що, куди і як
    • як користуватися інтерактивними компонентами
    • модальне вікно та автоматична анімація
    • клікабельний прототип скролу

  • Блок 2: Вивчаємо вебдизайн без книжок

  • 05

    Design та Digital Marketing. Чому Design Thinking стосується всього

    • який буває дизайн: чим вебдизайнер відрізняється від дизайнера інтер’єру/додатків/анімації/бренду
    • вебдизайн та види вебсайтів:landing page, corporate website, e-commerce
    • сайт потрібен усім: вебдизайн у бізнесі та маркетингу
    • як створювати проєкт за допомогою Design Thinking: виявляємо проблеми, досліджуємо ринок та ЦА, формуємо ідеї, прототипуємо та обираємо найкраще рішення
    • що таке wireframes та як їх будувати

  • Photoshop. Додаткове заняття

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

    Д/З №2. Підготувати фрейм landing page до роботи зі стилем.

  • 06

    Воркшоп з основ композиції, колористики, типографіки. Працюємо з базовим сітками та референсами без плагіату

    • композиція: основи і робота на прикладах
    • вчимося підбирати колір за сенсом і значенням
    • робота з текстом, шрифтами та сітками
    • що таке референси, де шукати і як використовувати

  • Illustrator. Додаткове заняття

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

    Додаткові матеріали: composition, how to use type + colors, grids + tips & tricks

    Д/З №3. Підібрати референси, базуючись на тематиці бізнесу та структурі з попереднього ДЗ для власного ленда.

  • 07

    Бренд-дизайнер та гостьова лекторка Катя Іщенко — про графіку, іконки, лого, постер та мокап

  • Illustrator. Додаткове заняття

    • панель pathfinder, розділення об’єктів
    • вирівнювання
    • створення масок
    • імпорт зображень
    • трасування зображень
    • деформація тексту
    • ефект Трансформація

    Д/З №4. Створити постер на основі технічного завдання, для якого додатково розробити:

    • логотип
    • пак іконок

  • 08

    Створення концепту без паніки

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

    Д/З №5. Розробити логотип та побудувати концепт на основі:

    • референсів
    • елементів дизайну (типографіка, кольори, сітка, композиція)

  • 09

    Backend дизайну: розбираємо необхідні інструменти

    • складаємо ui kit (частина воркшопу)
    • стандартизація стилей
    • адаптуємо під мобайл
    • що таке pixel perfect

    ДЗ №6.Закріпити backend: виправити неточності в пікселях, зібрати UI kit, адаптувати макет під mobile.

  • 10

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

    • tips & tricks презентації дизайну
    • сторітелінг: як утримати фокус клієнта і довести до головного
    • як використовувати референси для презентацій без плагіату
    • викладаємо матеріал на слайд, щоб не сіпалось око
    • технічні знання про створення презентації
    • всьому свій час: встановлюємо таймінг
    • захищаємо свої дизайн рішення без стресу і з прогресом
    • readymag: збираємо презентацію і додаємо свої фішки

    ДЗ №7.Створити презентацію для власного лендингу та презентувати готовий проєкт на наступному занятті.

  • 11

    Presentation check. Презентація власного проєкту із залученням ШІ в роботу

  • 12

    Фідбек-сесія від лекторки

  • Блок 3: Занурюємось у вебдизайн з головою

  • 13

    Брифінг та робота з клієнтом

    • які бувають клієнти та як з ними комунікувати без стресу
    • що таке бриф та як працювати з ним крок за кроком
    • додаткові питання: готуємо, залежно від контексту бізнесу
    • проводимо робочий мітинг: нотатки, запис зустрічі, невербаліка, структура діалогу та ролі
    • презентація та q&a по брифу з лекторкою

    ДЗ №8.Проаналізувати бриф для подальшої роботи з ним та сформувати додаткові запитання.

  • 14

    Гостьова лекторка та стратег Юлія Лисенко про бренд, Market Research та Brand Model

  • 15

    Що таке UX Design, UX Research та Sitemap

    • UX Design — аналіз, аналіз та ще раз аналіз
    • рісьорч ux design конкурентів та ux бест практіс
    • структура багатосторінкового сайту
    • воркшоп з Sitemap

    Д/З №10. Зібрати презентацію з:

    • аналізу конкурентів у розрізі UX
    • побудованого сайтмепу

  • 16

    Воркшоп — Wireframing, UX writings, Navigation

    • створюємо wireframe для головної сторінки
    • navigation tools: хедер, форми, футер, слайдер і інші невідомі слова

    Додаткові матеріали: UX copy

    Д/З №10. Створити вайрфрейми на всі сторінки.

  • 17

    Фідбек-сесія

  • 18

    Воркшоп з UI-дизайну. Вивчаємо Visual Research та Visual Audit

    • що таке UI-дизайн і чому він має йти після UX
    • аналіз UI design конкурентів та ui бест практис
    • аналіз існуючого дизайну

    Додаткові матеріали: UX copy

    Д/З №12.

    • провести Visual Audit наявного сайту
    • проаналізувати ринок у розрізі UI
    • оформити у презентацію

  • 19

    Воркшоп з Юлією Замятіною. Ideas Generation та Visual trick

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

    Д/З №13. Доробити практику так, щоб:

    • вийшло відібрати 3 робочі метафори
    • був графічний прийом до кожної ідеї
    • мудборд розкривав ідею через віжуали
    Оформити все у презентацію.

  • 20

    Навіщо вебдизайнеру Design Approach. Дотримуємося дизайн-айдентики

    • що таке айдентика і для чого тобі в роботі
    • айдентика — гайд, вебсайт — носій
    • збираємо design approach
    • прокачуємо скіли по сіткам, роботі з текстом, кольорами, композицією

    Д/З №14. Створити 3 варіанти approach для сайту:

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

  • 21

    Backend дизайну та адаптація

    • збираємо ui kit для багатосторінкових сайтів
    • implementation 2.0
    • адаптація під мобайл, арсенал патернів

    Д/З №15. Фіналізувати редизайн сайту: виправити неточності, зібрати UI kit, імплементувати на 6 сторінок, адаптувати головну сторінку під mobile.

  • 22

    Concept advanced

    • ще складніші та цікавіші прийоми
    • як збирати концепт

    Д/З №16.

    • створити концепт першої сторінки на основі wireframe + design approach
    • розробити логотип
    • зібрати презентацію та презентувати на наступному занятті

  • 23

    Presentation check

  • 24

    Фідбек-сесія

  • Блок 4: E-commerce. Працюємо з товарними сайтами

  • 25

    UX E-commerce сайтів, navigation tools та аналітика

    • UX e-commerce сайту. Все, що треба знати: структура та патерни
    • navigation tools для e-commerce сайту: фільтр, сортування, каталог, чекаут, хедер
    • аналітика — овервью

    Д/З №17. Створити айтеми для наступних сторінок: home, catalog, product page, check-out, особистий кабінет.

  • 26

    UI e-commerce сайтів

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

    Д/З №18. Імплементувати e-commerce сторінки за розробленим UI design.

  • 27

    Presentation check

  • 28

    Фідбек-сесія

  • 29

    Гостьова лекторка та HR Настя Слободянюк: про важливість портфоліо та резюме, вплив соціальних мереж та співбесіди. Куди рости та який тип зайнятості підійде саме тобі

  • 30

    Фінальна презентація

Записатися

Наші курси недоступні громадянам росії та білорусі

Обов’язкове поле
Обов’язкове поле
Обов’язкове поле
Реєструючись і натискаючи кнопку “Зареєструватися”, ви погоджуєтеся з умовами договору-оферти і політикою конфіденційності