Полный курс по веб и мобильному дизайну в 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. Карты сайта

   • Введение в карты сайта
   • Создание основной карты сайта
   • Подготовительные шаги перед началом разработки
   • Разработка карты сайта (Часть 1)
   • Разработка карты сайта (Часть 2)
   • Советы для начальных шагов

2. ИССЛЕДОВАНИЕ И ИТЕРАЦИИ – Создание каркасов, прототипов и получение отзывов

1. Каркасы

   • Определение каркаса
   • Этапы создания каркаса
   • Ускорение работы в 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 дней, без проблем и вопросов.