Комплексний веб- та мобільний дизайнер у 2024: UI/UX, Figma + більше

Прийміть участь у курсі Zero To Mastery, де практичне навчання є на першому місці! Цей курс розроблений, щоб перевести вас з новачка до конкурентоспроможного кандидата на роботи або фріланс-замовлення у найкоротші терміни.

Що ви дізнаєтесь:

• Основи графічного дизайну та основні принципи
• Найефективніші методи веб- та мобільного дизайну
• Основні кращі практики дизайну користувацького інтерфейсу (UI) та досвіду користувача (UX)
• Як створювати вражаючі, професійні дизайни за допомогою новітніх інструментів та методів для 2024 року
• Інструменти для перетворення ваших дизайнів у функціональні вебсайти чи додатки з використанням HTML та CSS

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

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

Бонус: Отримайте негайний доступ до понад 100 ресурсів та преміальних дизайнерських шаблонів для покращення ваших майбутніх проектів.

Випускники Zero To Mastery зараз працюють у провідних компаніях, таких як Google, Tesla, Amazon, Apple, IBM, Uber, Facebook та Shopify (не вірите, подивіться онлайн!).

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

Ви можете стати наступним.

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

Активний. Підтримуючий. Захоплюючий. Дружній. Надихаючий. Необхідний.

Це лише кілька термінів, які наші студенти використовують для опису спільноти ZTM у Discord.

Ви будете навчатися у експертів з реальним досвідом роботи у провідних компаніях Торонто та Кремнієвої Долини.

Ось погляд на широке різноманіття тем, які охоплює цей Дизайнерський Курс

Ми дотримуємося своєї обіцянки бути найобширнішим курсом з дизайну, доступним онлайн. Давайте розглянемо все, що ви опануєте.

0. Принципи веб- та мобільного дизайну та відмінності між дизайном та веб-розробкою

1. ПОЧАТОК – ескізування, натхнення та структура

1. Ескізування

   • Вступ до ескізування
   • Ескізи UX-флоу
   • Поради для ескізування

2. Натхнення

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

3. Користувацькі флоу

   • Розуміння користувацьких флоу
   • Основні поради «так» та «ні»
   • Поліпшення робочого процесу за допомогою компонентів
   • Створення користувацьких флоу: Реєстрація (Частина 1)
   • Створення користувацьких флоу: Пошук (Частина 2)
   • Створення користувацьких флоу: Оформлення замовлення (Частина 3)

4. Sitemaps

   • Вступ до sitemaps
   • Створення базового sitemap
   • Підготовчі кроки перед початком
   • Розробка sitemap (Частина 1)
   • Розробка sitemap (Частина 2)
   • Поради для початкових кроків

2. ДОСЛІДЖЕННЯ ТА ІТЕРАЦІЯ – Wireframes, прототипування та зворотній зв'язок

1. Wireframes

   • Визначення wireframe
   • Кроки для створення wireframe
   • Прискорення завдань у Figma
   • Створення домашньої сторінки
   • Створення сторінки продукту
   • Створення сторінки оформлення замовлення

2. Прототипування у Figma

   • Основи прототипування: Пристрій + Тригери
   • Основи прототипування: Дії
   • Основи прототипування: Переповнення
   • Основи прототипування: Презентація + Співпраця
   • Зв'язування користувацького флоу у Figma
   • Створення невеликих інтеракцій з Figma

3. Отримання зворотного зв'язку про дизайн

   • Значення зворотного зв'язку
   • Отримання конструктивного зворотного зв'язку про дизайн

3. ВІЗУАЛЬНИЙ ДИЗАЙН – Теорія дизайну та доступність

1. Сітки + відстані

   • Основи відстані та сіток
   • Респонсивні сітки у Figma
   • Створення кастомної сітки у Figma
   • Принципи сіток

2. Типографіка

   • Основи типографіки (Частина 1)
   • Вибір шрифтів відповідно до епохи
   • Основи типографіки (Частина 2)
   • Вибір відповідних шрифтів
   • Основи типографіки (Частина 3)
   • Вибір шрифту
   • Чи підходить ваш шрифт для контексту?
   • Розширення існуючої системи шрифтів
   • Пошук шрифтів на Google Fonts
   • Уточнення вибору типографіки
   • Розробка системи шрифтів у Figma

3. Колір

   • Розуміння кольорових схем
   • Важливі питання перед вибором кольорів
   • Корисні поради щодо створення кольорової палітри
   • Створення монохромної кольорової палітри
   • Впровадження простої кольорової палітри
   • Розширення суворої кольорової палітри
   • Розробка власної кольорової палітри

4. Форми + елементи інтерфейсу користувача

   • Розуміння елементів інтерфейсу користувача
   • Найкращі практики: Форми Частина 1
   • Найкращі практики: Введення Частина 1
   • Найкращі практики: Введення Частина 2
   • Найкращі практики: Введення Частина 3
   • Найкращі практики: Введення Частина 4
   • Найкращі практики: Кнопки
   • Створення компонентів у Figma
   • Використання атомарних елементів у Figma
   • Робота з інстанціями у Figma
   • Редагування інстанцій для створення нових компонентів
   • Використання обмежень для адаптивних компонентів
   • Створення форми реєстрації у Figma

5. Зображення + Іконографія

   • Техніки створення видатних візуальних активів
   • Робота з зображеннями у Figma (Частина 1)
   • Робота з зображеннями у Figma (Частина 2)
   • Робота з ілюстраціями у Figma
   • Використання плагінів Figma для швидкого пошуку іконок
   • Створення власних кастомних іконок

6. Доступність

   • Розуміння доступності
   • Асистивні технології
   • Візуальні патерни для доступності (Частина 1)
   • Інструменти для підвищення доступності дизайну
   • Візуальні патерни для доступності (Частина 2)

4. ДОСЛІДЖЕННЯ ДИЗАЙНУ – Дизайн додатків та системи дизайну

1. Дизайнерські патерни

   • Визначення дизайнерських патернів
   • Важливість дизайнерських патернів
   • Як впроваджувати дизайнерські патерни
   • Спільний аналіз дизайнерських патернів
   • Спільний вибір дизайнерських патернів

2. Мобільний дизайн

   • Найкращі практики мобільного дизайну (Частина 1)
   • Найкращі практики мобільного дизайну (Частина 2)

3. Впровадження візуального дизайну

   • Фіделіті дизайну
   • Дослідження стилів (Навігація)
   • Дослідження стилів (Карти)
   • Дослідження стилів (Інтереси)
   • Дослідження стилів (Нові елементи)

4. Основи анімації (включаючи доступ до курсу анімації Даніеля)

   • Розуміння важливості анімації
   • Роль анімації у дизайні
   • Вступ до Figma Smart Animate
   • Демонстрація можливостей Figma Smart Animate

5. Мікроінтеракції

   • Що таке мікроінтеракції?
   • Чому мікроінтеракції мають значення
   • Створення мікроінтеракцій (Частина 1)
   • Створення мікроінтеракцій (Частина 2)
   • Використання Figmotion (Частина 1)
   • Використання Figmotion (Частина 2)

5. ІНТЕГРАЦІЯ ВСІХ ЕЛЕМЕНТІВ – Використання нашої системи дизайну та високофідельне прототипування у Figma

1. Системи дизайну

   • Розуміння систем дизайну
   • Фундаментальні елементи (Колір)
   • Фундаментальні елементи (Сітки та відстані)
   • Фундаментальні елементи (Типографіка)
   • Фундаментальні елементи (Іконографія)
   • Компоненти (Кнопки)
   • Компоненти (Введення)
   • Компоненти (Карти)
   • Рецепти (Макети карт)
   • Рецепти (Пошук)
   • Рецепти (Замовлення)

2. Фінальні композиції

   • Впровадження нашої системи дизайну (Пошук)
   • Впровадження нашої системи дизайну (Опис продукту)
   • Впровадження нашої системи дизайну (Кошик)
   • Впровадження нашої системи дизайну (Оформлення замовлення)

3. Співпраця з розробниками

   • Розуміння важливості передачі проекту
   • Спільна робота у Figma

6. ПЕРЕТВОРЕННЯ ДИЗАЙНІВ FIGMA НА ВЕБСАЙТИ (перетворюйте свій дизайн з Figma на активний сайт з використанням HTML та CSS)

7. HTML + HTML5

8. CSS + CSS3 - Основи CSS, CSS Grid, Flexbox та CSS анімації

9. ДЕПЛОЙМЕНТ ВАШОГО ВЕБСАЙТУ

До кінця цього курсу ви матимете все необхідне, щоб стати Дизайнером, здатним отримати роботу.

Що ви візьмете з цього курсу?

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

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

Ми кидаємо вам виклик перетворити себе з абсолютного новачка на першокласного дизайнера, готового до можливостей у провідних компаніях та здатного отримувати конкурентні ставки за свою роботу 💪!

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