Сложность
Сложность
Начинающий
Тип обучения
Тип обучения
Курс
Формат обучения
Формат обучения
Записанные лекции
Сертификат
Сертификат
Да

Стоимость курса

2 890 ₽
нет рассрочки

Привет!

Меня зовут Дима. И я предлагаю вам изучить то, как создавать дизайн современных, адаптивных веб сайтов!

Этот курс для абсолютных новичков

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

Выбор цветов для проекта будет простым и понятным

Мы станем профи в подборе цвета, научимся сочетать на нашем сайте любую картинку с фоном и конечно же научимся подбирать красивые цвета для любых элементов на нашем сайте, как настоящие профи колористы!

Множество фишек по привлекательному дизайну внутри

Мы изучим множество трюков по работе с изображениями, такими как экстремальная обрезка,  мягкая обрезка, работа с контрастностью фото и тем какое изображение лучше выбрать для вашего сайта. И конечно узнаем много мест, где вы сможете найти идеальное фото, для вашей работы.

Мы научимся использовать пустое пространство в свою пользу, работать с контрастом, профессионально накладывать изображения друг на друга, изучим тонкости и правила в веб дизайне  и много многое другое!

Простая и понятная работа со шрифтами

Мы изучим все что необходимо знать о работе со шрифтами, начиная от мест где вы найдете лучшие шрифты до их установки! И конечно в конце курса, у вас исчезнет вопрос, какой же шрифт лучше подобрать для вашего сайта!

Разберемся в странных темах UX/UI

Этот курс направлен в первую очередь на развитие навыков User Interface дизайнера, но конечно, в курсе мы коснемся обеих сторон профессии как UX – User Experience так и UI - User Interface

Практика на протяжении всего курса

В этом курсе сделан большой акцент на практику. В каждом, небольшом уроке, без лишней болтовни, мы будем шаг за шагом создавать 2 красивых, уникальных проекта, которые, вы сможете использовать в своем портфолио – web дизайнера.

Необходимые навыки адаптивного дизайна

И конечно, мы узнаем как адаптировать сайты под разные устройства, как анимировать каждый элемент макета и даже научимся создавать красивые слайдеры и красивую анимацию счетчика прямо в figma!

Поговорим об общении с потенциальным заказчиком и о развитии в дизайне

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

База по Photoshop для уникальных макетов

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

Все о современных стилях в веб дизайне

Как создавать современные стили в Figma, такие как эффекты стекла, градиента и 3D.
Научитесь превращать любую стоковую иконку в 3D иконку или иконку с эффектом стекла.  Вы научитесь создавать изображения используя только фигуры и линии прямо в Figma.

Все о современных методах анимаций в Figma

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

Узнаете как создавать анимацию Parallax Effect, чтобы дизайн ваших сайтов был по настоящему уникальным.

Научитесь анимировать любые объекты, такие как гамбургеры, спиннеры, переключатели и даже анимировать темную и светлую тему.

Вы узнаете как создавать анимацию 360 градусов которую используют самые современные сайты.

Узнаете как создавать анимацию в Figma так как это делают в After Effect, сможете использовать видео и Gif анимации в ваших проектах.

И конечно, каждый уважающий себя  веб дизайнер должен знать, как создать анимацию макбука, так же как на сайте apple, прямо в Figma

Самые важные принципы пользовательского опыта с точки зрения "Юзабилити"

Поговорим о том что такое на самом деле дизайн, как пользователи используют наши сайты и как не ошибиться при выборе правильного места для главной кнопки сайта.

Гарантия возврата денег

И если у вас все еще остались сомнения, этот курс предоставляет возможность вернуть деньги потраченные на него если он вам не понравится в течении 30 дней.

Присоединяйтесь ко мне и вместе, мы изучим то как создавать современные, адаптивные и анимированые макеты веб сайтов.

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

  • Изучите все инструменты Figma
  • Изучите современные техники и приемы дизайна
  • Научитесь азам работы в Photoshop
  • Узнаете больше про профессии UX UI дизайнер
  • Узнаете что такое web design на практике
  • Научитесь работать с изображениями в Figma
  • Научитесь подбирать правильные цвета для ваших сайтов
  • Научитесь подбирать правильные шрифты для ваших сайтов
  • Узнаете как работать с контрастом на веб страницах
  • Научитесь сочетать элементы на веб страницах
  • Узнаете что такое адаптивный дизайн
  • Научитесь адаптировать под любое мобильное устройство, любой сайт
  • Узнаете как анимировать макеты
  • Изучите места где можно черпать вдохновение для своих работ
  • Знаете где найти идеальное изображение, иконки и иллюстрации для ваших сайтов
  • Вы поймете как договариваться с потенциальным заказчиком
  • Вы узнаете как составлять бриф с потенциальным заказчиком
  • Изучите базу по работе в Photoshop
  • Изучите как создавать самые современные стили в Figma
  • Узнаете как создавать эффекты "стекла" на ваших сайтах
  • Узнаете как создать 3D из любой фигуры или элемента в Figma
  • Узнаете современные способы использования и анимации градиента
  • Узнаете все о создании анимаций в Figma
  • Научитесь создавать анимацию 360 градусов прямо в Figma
  • Сможете создавать анимацию как на сайте apple
  • Научитесь анимировать любые элементы страницы сайта, такие как кнопки, гамбургеры и т.д.
  • Научитесь использовать"Варианты" для создания впечатляющих анимаций
  • Узнаете про стоковые площадки где вы найдете современную графику для ваших работ
  • Научитесь использовать продвинутые плагины, которые позволят вам создавать собственные кастомные анимации
  • Изучите главные принципы пользовательского опыта с точки зрения "Юзабилити"
  • Узнаете как пользователи в действительности используют веб браузер
  • Изучите то как сделать ваш сайт простым и интуитивно понятным

Что вы получите после обучения

Приобретаемые навыки
1
UX/UI дизайн
2
Веб-дизайнер
4
Адаптивный дизайн
5
Прототипирование
7
Motion design
8
Анимации
9
Юзабилити
10
3D элементы
11
3D эффекты

Вас будут обучать

Создаю авторские онлайн курсы с 2016 года. Профессионально обучаю работе с графическими редакторами Adobe, преподаю дизайн и веб разработку.

Привет! Меня зовут Дима! Не хочу хвастаться, но придется) Обучил более 5000 студентов по всему миру на моих авторских онлайн курсах. Более 2000 реальных отзывов со средней оценкой 4,83 из 5.00! Я преподаю веб дизайн, веб разработку и необходимое ПО (Phhotoshop Illustrator, Figma). Мой опыт преподавания складывается из 5 лет репетиторства на фрилансе, а так- же преподавания через онлайн школы и курсы, на мировых площадках по дистанционному обучению. Студенты моих курсов, отмечают лучшие мои качества в том, как я подаю материал без зубрежки, весело и интересно.

Образовательная организация

Stepik — образовательная платформа и конструктор
онлайн-курсов. Мы разрабатываем алгоритмы адаптивного обучения, сотрудничаем с авторами MOOC, помогаем
в проведении олимпиад и программ переподготовки.
Наша цель — сделать образование открытым и удобным.

Помогаем учиться, а также создавать свои курсы и обучать


Первые учебные материалы были размещены на платформе в 2013 году. Сегодня среди охваченных курсами тем: программирование, информатика, математика, статистика
и анализ данных, биология и биоинформатика, инженерно-технические и естественные науки. Онлайн-курсы, размещенные на Stepik, неоднократно становились призерами конкурсов онлайн-курсов, а система автоматизированной проверки задач используется в ряде курсов на платформах Coursera и edX. Также Stepik активно развивает направление адаптивного обучения, где каждый сможет изучать материал, подобранный индивидуально под свой уровень знаний.

 

Stepik является также площадкой для проведения конкурсов и олимпиад — среди мероприятий — отборочный этап Олимпиады НТИ, онлайн-этап акции Тотальный диктант, международная олимпиада по биоинформатике.

 

Stepik — многофункциональная и гибкая платформа для создания образовательных материалов. Вы можете создавать онлайн курсы, интерактивные уроки с видео и различными типами заданий для учащихся, приватные курсы для ограниченной аудитории, проводить олимпиады и конкурсы, запускать программы профессиональной переподготовки и повышения квалификации, а также обучать своих сотрудников и клиентов.

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

1. Веб дизайн в Figma с нуля до результата! Основы UX/UI Web Design

Введение
1. Вступление 
2. Скачиваем Figma и материалы для прохождения курса 
3. Оставайтесь со мной на связи 
Основы Figma
1. Создаем первый макет и работаем с размерами 
2. Что такое grid система. Работа с направляющими
3. Немного про Wireframe
4. Основы работы с изображениями
5. Основы работы с текстом
6. Иерархия элементов
7. Привет из будущего! Несколько проблем которые могут возникнуть.
8. Что такое UX и UI
Работа с цветом
1. Как заимствовать цвет из изображений
2. Практика: как подбирать цвет из изображений
3. Углубленная работа с цветом + HSB
4. Дополнительные ресурсы работы с цветом
5. Как использовать градиент
6. Где искать вдохновение и как заимствовать цвета у других дизайне
Работа с изображениями
1. Как увеличить контрастность фото
2. Как на практике тонировать и затемнять фото
3. Техника экстремальной обрезки изображений
4. Техника мягкой обрезки изображений
5. Практика по мягкой обрезке
6. Удаляйте лишний фон
7. Подбирайте классные фото
8. Как работать с иконками
9. Как создать собственную иконку
10. Создаем кнопку и работаем с эффектами
11. Разбираемся с форматами изображений
Работа с текстом
1. Углубленная работа с текстом
2. Почему шрифты это важно
3. Главные типы шрифтов
4. Где искать шрифты - 1
5. Где искать шрифты - 2
6. Рыбный текст + установка плагинов
7. Практика по поиску шрифтов
8. Как использовать в дизайне настройку шрифтов
9. Создаем лист со стилями сайта
10. ТЕХНИЧЕСКОЕ ВИДЕО: Продолжаем создавать макет
Маски / Линии / Перо и Карандаш
1. Как работать с масками слоя
2. Как работать с линиями
3. Практика по работе с пером
4. Доделываем сайт портфолио
Дизайнерские трюки
1. Трюки с наложением элементов друг на друга
2. Одинаковые элементы на странице
3. Трюки с повторениями
4. Трюки с контрастом
5. Трюки с пустым пространством
6. Как развиваться в дизайне
Новый проект - Подготовка
1. Пара слов и продолжаем!
2. Бриф с заказчиком
3. Создаем Mood Board
4. Как делиться проектом
5. Что такое Figma Jam
6. Обновления Figma Jam
7. Создаем Wireframe нового проекта ч.1
8. Создаем Wireframe нового проекта ч.2
9. Создаем Wireframe нового проекта ч.3
10. Создайте wireframe
Введение в адаптивный дизайн
1. Введение в constraints
2. Constraints + grid
3. Различие между фреймами и группами
4. Применяем Constraints к макету портфолио
5. Практика: Constraints на макете портфолио
Дополнительные возможности Figma
1. Как работать с компонентами
2. Как работать с Auto lay out
3. Обновление Auto Lay out 05.2022 
Стилизуем макет
1. Предисловие к блоку
2. Стилизуем макет ч.1
3. Стилизуем макет ч.2
4. Подбираем шрифты
5. Стилизуем макет ч.3
6. Стилизуем макет ч.4
7. Практика: Стилизуем оставшиеся 2 страницы сайта
Адаптивный дизайн
1. Теория адаптивного дизайна
2. Адаптивный дизайн под планшет ч.1
3. Адаптивный дизайн блога ч.2
Ускорение рабочих процессов
1. Горячие клавиши
2. Как создать компоненты с помощью плагинов
3. Быстрый адаптив
4. Полезные плагины
5. Практика: Ускоряемся в создании мобильной версии сайта
Прототипирование
1. Основы прототипирования
2. Углубленные настройки прототипирования
3. Анимируем подсказку
4. Анимируем мобильную версию меню
5. Анимируем кнопки
6. Анимируем ручной слайдер
7. Анимируем автоматический слайдер
8. Анимируем красивый счетчик с помощью "смарт анимации"
9. Как взаимодействуют прототипы с компонентами
10. Variants в компонентах
Библиотеки
1. Разница между платной и бесплатной версией программы Figma
2. Как работать с Библиотеками
Экспорт
1. Экспорт файлов из Figma
2. Передача в разработку
Работа в Photoshop
1. Рекламная пауза
2. Подготовка программы
3. Работа со слоями в Photoshop
4. Расширяем границы изображений
5. Удаляем ненужное из фото
6. Как вырезать человека из одного фото и вставить его в другое
7. Как работают маски в фотошоп
8. Экспорт файлов из фотошоп
9. Что дальше?
Что дальше?
1. До свидания!
Получите ваш сертификат
1. Тест для получения сертификата об окончании курса
Обновления
1. Обновление от 05.2022

2. Веб дизайн в Figma. Анимации и Главные правила "Юзабилити".

Подготовка
1. О чем этот курс
2. Скачиваем материалы для курса
3. Оставайтесь со мной на связи
Motion design
1. О чем этот блок
2. Создаем первую анимацию
3. Как работают анимации в Figma
4. Что такое кривые Безье
5. Анимируем мобильное приложение "Фото-сток"
6. Практика. Создайте собственную анимацию в проекте "Фото-сток".
7. Пример преподавателя. Создаем анимацию в проекте "Фото-сток".
8. Как создать Parallax Effect
9. Создаем анимацию гамбургера
10. Создаем анимацию загрузки страницы
11. Как работают Flows в прототипах. Организация страниц в проекте.
12. Как создать анимацию "темной" и "светлой" темы через кнопку
13. Как создать обложку проекту
14. Практика. Создайте свой Parallax Effect
Использование "вариантов" в анимациях
1. О чем этот блок
2. Что такое "Варианты в figma"
3. Как использовать "варианты" в анимациях
4. Кнопка быстрого доступа к "вариантам"
5. Как тестировать ваш макет на мобильном девайсе
6. Как работает spinner. Анимируем текст
7. Как создать анимацию как на сайте apple
8. Как запустить видео файл в figma
9. Как использовать GIF в своих проектах. Сток анимированных иконок
10. Практика. Создайте анимацию "360 градусов"
11. Пример преподавателя. Как создать анимацию "360 градусов "
Создание анимаций через плагин Motion Plugin
1. Как работает плагин Motion Plugin
2. Используем плагин вместе с масками
3. Экспорт анимации из плагина
Современные стили. Градиент / Стекло / 3D
1. Как создать анимацию градиента
2. Как работают режимы наложения
3. Создаем эффект "Paper Cut" с градиентом
4. Как создать эффект "стекла"
5. Как сделать эффект "стекла" более объемным
6. Как создавать собственные стеклянные иконки
7. Как превратить обычную иконку в стеклянную
8. Практика. Создайте собственный эффект стекла
9. Как создавать эффект 3D из обычных элементов
10. Как создать иконку в стиле 3D
11. Создаем 3D элементы на стартовой странице сайта
12. Плагин по 3D и 3D стоки
Главные правила UX - пользовательского опыта
1. О чем этот блок
2. Что такое дизайн
3. Главное правило. Не заставляйте людей думать
4. Как люди на самом деле используют браузер
5. Привычки пользователей и как извлекать из них выгоду
6. Выбор без размышлений
7. Сокращайте текст
8. Практика. Сделайте простым и удобным
9. Пример преподавателя. Сделайте простым и удобным
10. Используйте навигацию на сайте
11. Все мы разные
12. Проводите тестирование
13. Заключение. Постулаты хорошего веб дизайна
Что дальше?
1. До новых встреч!
Получите ваш сертификат
1. Тест для получения сертификата об окончании курса

 

Рейтинг курса

3.6
рейтинг
0
0
0
0
0

Может быть интересно

обновлено 04.09.2023 17:18
Профессия UX/UI дизайнер.Пакет из 2-х курсов-веб дизайн в Figma

Профессия UX/UI дизайнер.Пакет из 2-х курсов-веб дизайн в Figma

Оставить отзыв
Поделиться курсом с друзьями