Продвинутый дизайн и Figma [Тариф Самостоятельный] [PurpleSchool] [Антон Ларичев, Елена Кострикова]

[ALL DAR Bot]

Автор: Антон Ларичев, Елена Кострикова
Название: Продвинутый дизайн и Figma [Тариф Самостоятельный] [PurpleSchool] [Антон Ларичев, Елена Кострикова]

Описание:
Складчина: Продвинутый дизайн и Figma [Тариф Самостоятельный] [PurpleSchool] [Антон Ларичев, Елена Кострикова]

Продвинутый курс по веб-дизайну и Figma: системный подход и проектирование интерфейсов

Этот курс — продолжение базового обучения веб-дизайну. Он подойдёт тем, кто уже умеет работать в Figma и хочет перейти от отдельных экранов к проектированию полноценных интерфейсов.

В курсе вы разберёте, как выстраивать структуру сайта, создавать дизайн на основе логики и задач продукта. Особое внимание уделяется тому, как мыслить интерфейсом как системой, а не набором разрозненных блоков.

Большое внимание уделяется продвинутой работе в Figma: компонентам, Variants, вложенным компонентам и Variables. Вы соберёте масштабируемый UI-кит и научитесь поддерживать интерфейс в порядке даже в больших проектах.

В процессе обучения вы спроектируете интернет-магазин: ключевые страницы, кликабельный прототип и адаптивные версии. Итог курса — цельный проект, готовый для портфолио и дальнейшего развития.

Чему вы научитесь?

• После прохождения курса вы сможете:
  
• Проектировать структуры и логики веб-сайтов
  
• Анализировать интерфейсы и дизайнерские решения
  
• Работать с компонентами в Figma
  
• Использовать Variants, вложенные компоненты и Variables
  
• Строить UI-систем и мини UI-киты
  
• Проектировать ключевые страницы сайта
  
• Создавать кликабельные прототипы
  
• Адаптировать интерфейсы под разные устройства
  
• Подготавливать проекты для портфолио

План курса

Курс построен таким образом, чтобы доносить материал от простого к сложному. Ниже вы можете ознакомиться с планом курса и посмотреть часть открытых лекций по кнопке проигрывателя.

1. Введение

• 1.1 О продвинутом веб-дизайне
  
• 1.2 Знакомство с преподавателем
  
• 1.3 Как устроен курс
  
• 1.4 Обзор проектов

2. Настройка окружения

• 2.1 Знакомство с Figma
  
• 2.2 Регистрация в Figma. Тарифы
  
• 2.3 Установка Figma - MacOS
  
• 2.4 Установка Figma - Windows
  
• 2.5 Установка шрифтов

3. Типы сайтов и структура веб-интерфейсов

• 3.1 Что такое веб-сайт. Классификация веб-сайтов
  
• 3.2 Типы веб-сайтов: особенности и отличия
  
• 3.3 Универсальные блоки и UI-паттерны. Часть 1
  
• 3.4 Универсальные блоки и UI-паттерны. Часть 2
  
• 3.5 Поведенческие паттерны пользователей
  
• 3.6 Структура страниц и логика пользовательских сценариев
  
• 3.7 Упражнение - Знакомство с ТЗ
  
• 3.8 Упражнение - Создание карты сайта
  
• 3.9 Упражнение - Создание чернового прототипа
  
• 3.10 Тест - Типы сайтов и структура веб-интерфейсов

4. Компоненты и варианты

• 4.1 Компоненты. Основные понятия
  
• 4.2 Компоненты. Как работать с иконками
  
• 4.3 Упражнение - Создание карточек с иконками
  
• 4.4 Варианты компонентов
  
• 4.5 Упражнение - Создание вариантов
  
• 4.6 Свойства компонентов
  
• 4.7 Упражнение - Настройка свойств компонента
  
• 4.8 Знакомство с переменными
  
• 4.9 Тест - Компоненты и варианты

5. Базовые UI-элементы

• 5.1 UI элементы: введение
  
• 5.2 Типы кнопок и их состояния
  
• 5.3 Упражнение - Создание кнопок для проекта
  
• 5.4 Поля ввода (Input) и формы
  
• 5.5 Упражнение - Создание инпутов для проекта
  
• 5.6 Радиокнопки, чекбоксы и тогглы
  
• 5.7 Упражнение - Создание радиокнопок и чекбоксов
  
• 5.8 Выпадающие списки в интерфейсе
  
• 5.9 Упражнение - Создание дропдаунов для проекта
  
• 5.10 Тест - Базовые UI-элементы

6. Блоки и страницы сайта

• 6.1 Карточка товара как основной UI-блок
  
• 6.2 Карточка товара (Сбор страницы) Часть 1
  
• 6.3 Карточка товара (Сбор страницы) Часть 2
  
• 6.4 Каталог товаров (фильтры, сортировка)
  
• 6.5 Упражнение Сбор страницы Каталог товаров
  
• 6.6 Упражнение - Сбор страницы Корзина
  
• 6.7 Упражнение - Сбор страницы Оформление заказа
  
• 6.8 Упражнение - Сбор главной страницы. Часть 1
  
• 6.9 Упражнение - Сбор главной страницы. Часть 2
  
• 6.10 Упражнение - Сбор UI кита
  
• 6.11 Тест - Блоки и страницы сайта

7. Адаптивный веб-дизайн

• 7.1 Принципы адаптивного веб-дизайна
  
• 7.2 Упражнение - создание адаптива для страницы каталога. Часть 1
  
• 7.3 Упражнение - создание адаптива для страницы каталога. Часть 2
  
• 7.4 Тест - Адаптивный веб-дизайн

8. Прототипирование

• 8.1 Основы прототипирования
  
• 8.2 Кликабельный прототип и анимация. Часть 1
  
• 8.3 Кликабельный прототип и анимация. Часть 2
  
• 8.4 Тест - Прототипирование

9. Куда дальше

• 9.3 Куда дальше?
  
• 9.4 Отзыв о курсе

Авторы курса:

Автор курса - Антон Ларичев

Основатель PurpleSchool

Основатель PurpleSchool и ex-CTO. Занимаюсь разработкой уже более 14 лет и имею большой опыт: JavaScript, TypeScript, Php, Go, C#, Swift и Python. Активно внедряю гибкие методологии разработки в компании и внутренние обучения для команд.

Автор курса - Елена Кострикова

Ведущий веб-дизайнер

Мой опыт в дизайне более 5 лет. Работала над проектами разного масштаба — от сайтов и лендингов до CRM-систем для бизнеса. Люблю создавать дизайн, в котором сочетаются удобство, красота и функциональность. Для меня важно, чтобы визуальные решения не только радовали глаз, но и помогали пользователям

Тариф Самостоятельный

Цена: 3999 руб.

Скрытая ссылка

Материал «Продвинутый дизайн и Figma [Тариф Самостоятельный] [PurpleSchool] [Антон Ларичев, Елена Кострикова]», возможно, скоро появится на All-DAR.

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