Видеокурс "Веб - Дизайн UX/UI. Полное руководство"
5970
737
0
737

Видеокурс "Веб - Дизайн UX/UI. Полное руководство"

  • Цена:
    5970

    ПОДРОБНОЕ ОПИСАНИЕ

    Автор(ы): Даниил Волосатов, Webformyself

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

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

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


    Веб-дизайн UX/UI. Полное руководство. (Даниил Волосатов - Webformyself)
  • Модуль 1. Основы Web UX/UI дизаина

    В данном модуле освещены вопросы, возникающие у начинающих веб-дизайнеров. Рассказано о возможных подводных камнях, которые могут всплыть при создании дизайна: какого размера делать макет, как работать с сеткой, как работать без сетки, как правильно выравнивать все элементы, какого размера делать текст и много-много других вопросов.

    • Урок 1. Этапы создания дизайна. От идеи до реализации

    В данном уроке поделимся опытом создания дизайна от А до Я. Мы разберем 12 этапов, которые помогут сделать создание дизайна более эффективным и быстрым.

    • Урок 2. Сетка, отступы и выравнивание

    В этом уроке мы поговорим о видах сеток: какие они бывают, зачем их применять и чем они полезны веб-дизайнеру. Также мы поговорим об отступах, почему они важны. Узнаем, как выравнивать все элементы правильно.

    • Урок 3. Формы, кнопки и скругления

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

    • Урок 4. Типографика

    В этом уроке мы разберем базовые принципы типографики, которые вы сразу же сможете применить на практике. Мы разберем типы шрифтов, а также сколько можно использовать шрифтов в одном дизайне. Как правильно подобрать шрифт для проекта. Где искать шрифты. Поговорим о контрасте цветов для шрифтов.

    • Урок 5. Цвета для сайта

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

    • Урок 6. Что такое UX/UI

    В данном уроке мы разберем что такое UX и UI.

    • Модуль 2. Сервисы для веб-дизаинера

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

    • Урок 1. Все о шрифтах. Где искать и качать

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

    • Урок 2. Всё о стоках, платных и бесплатных

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

    • Урок 3. Качественный бесплатный фотосток

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

    • Урок 4. Сервис иконок

    В этом уроке вы узнаете о полезном сайте с огромным количеством качественных, векторных иконок.

    • Урок 5. Сервис по подбору палитры цветов

    В этом уроке я расскажу о сервисе, который упрощает жизнь веб-дизайнеру. Он помогает подобрать палитру цветов для сайта.

    • Урок 6. Сервис по подбору пары для шрифта

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

    • Урок 7. Сообщества дизайнеров

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

    • Модуль 3. Photoshop для веб-дизаинера

    В Figma нет нескольких функций, которые есть в Фотошопе и которые необходимы для веб-дизайнера. В этом модуле мы их разберем.

    • Урок 1. Инструмент ластик

    В этом уроке я расскажу о том, как с помощью одного инструмента удалить фон у любого изображения.

    • Урок 2. Mockup

    В этом практическом уроке я расскажу о том, где искать мокапы, зачем они нужны и как с ними работать

    • Модуль 4. Figma от А до Я

    В этом модуле мы разберем детально, весь функционал Figma: как выглядит интерфейс, какие есть инструменты, какие есть настройки и функции.

    • Урок 1. Скачивание программы

    В этом уроке мы сделаем аккаунт в Figma и скачаем десктоп версию на компьютер.

    • Урок 2. Обзор интерфейса

    В этом уроке мы познакомимся с интерфейсом.

    • Урок 3. Frame

    Из этого урока вы узнаете о таком инструменте как Frame, о его свойствах и как с ним работать.

    • Урок 4. Move и Scale

    Из этого урока вы узнаете о таком инструментах как Move и Scale, о его свойствах и как с ним работать.

    • Урок 5. Инструмент формы

    В этом уроке мы разберем такой инструмент как формы и разберем их свойства.

    • Урок 6. Перо и карандаш

    Из этого урока вы узнаете о таком инструменте как Перо и карандаш, о его свойствах и как с ним работать.

    • Урок 7. Инструмент текст

    В этом уроке мы разберем инструмент Текст и его свойства.

    • Урок 8. Комментарии

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

    • Урок 9. Экспорт

    В этом уроке мы разберем экспорт, какие форматы экспорта бывают и другие его свойства.

    • Урок 10. Смарт выравнивание

    В этом уроке мы разберем очень полезную функцию выравнивая и как с помощью нее сделать работу более продуктивной.

    • Урок 11. Маска слоя

    В этом уроке мы разберем функцию маски слоя и узнаем, как ей пользоваться.

    • Урок 12. Share

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

    • Урок 13. Модульная сетка

    В этом уроке мы разберем функцию добавления сетки и ее свойства.

    • Урок 14. Режим смешивания

    В этом уроке мы разберем функцию режима смешивания, как ее применять и в каких случаях.

    • Урок 15. Стили для текста

    В этом уроке мы разберем очень полезную функцию создания стилей для текста.

    • Урок 16. Стили для цвета

    В этом уроке мы разберем очень полезную функцию создание библиотеки цветов.

    • Урок 17. Компоненты

    В этом уроке мы разберем компоненты, их виды и как их создавать.

    • Урок 18. Адаптивные элементы

    В этом уроке мы разберем функцию адаптивности элементов в дизайне.

    • Урок 19. Прототипирование

    В этом уроке мы разберем функцию прототипирования макета.

    • Урок 20. Плагины

    В этом уроке мы разберем раздел плагины, и вы узнаете, зачем они нужны.

    • Урок 21. Гифки в Figma

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

    • Модуль 5. Дизайн адаптивного лендинга

    В данном модуле мы будем создавать дизайн лендинга от А до Я. Мы поработаем с UX и UI. Сделаем дизайн по дизайн системе – с библиотеками цветов, шрифтов, сеток и компонентов. Сделаем адаптив под планшет и мобильные устройства. Плюс весь дизайн мы сделаем по технологии Pixel Perfect.

    Часть 1. Десктоп версия

    • Урок 1. Создаём фрейм и сетку

    В этом уроке мы создадим фрейм и сетку.

    • Урок 2. Идея, концепция и UX. Проектируем дизайн

    В этом уроке мы разберем ТЗ, набросаем концепцию и определим цель лендинга.

    • Урок 3. Первый экран

    В этом уроке мы соберем структуру первого экрана. Поработаем с инструментом текст, формами, создадим компоненты и проставим им адаптив.

    • Урок 4. Второй блок

    В этом уроке мы создадим три карточки на основе компонентов.

    • Урок 5. Третий блок

    В этом уроке мы создадим новый компонент и на его основе сделаем третий блок.

    • Урок 6. Четвёртый блок

    В этом уроке мы создадим на основе компонента блок с объяснением шагов.

    • Урок 7. Форма заявки и футер

    В этом уроке мы сделаем блок с формой подписки, поработаем с текстом, формами и компонентами, сделаем футер.

    • Урок 8. Добавляем иконки по дизайн-системе

    В этом уроке я покажу как быстро добавлять иконки по дизайн системе.

    • Урок 9. Работа с мокапами и доработка первого экрана

    В этом уроке мы найдем нужный нам мокап и с помощью фотошопа отредактируем его и добавим в наш дизайн.

    • Урок 10. Учимся подбирать графику

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

    • Урок 11. Работаем с градиентами и добавляем фон

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

    • Урок 12. Создаем библиотеку цветов для текста

    В этом уроке мы создадим свою библиотеку цветов.

    • Урок 13. Подбираем цвета для иконок и кнопок

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

    • Урок 14. Дорабатываем дизайн

    В этом уроке мы пройдемся по ошибкам и исправим их.

    • Урок 15. Плагин Logo Creator

    В этом уроке мы поработаем с плагином, который позволяет воспользоваться готовой библиотекой логотипов.

    • Урок 16. Выравниваем все элементы

    В этом уроке мы выровняем все элементы по системе Pixel Perfect.

    • Урок 17. Интерактивные элементы

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

    • Урок 18. Component Master Manager

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

    • Урок 19. Проставляем адаптив элементов

    В финале мы проставим адаптив для всех элементов, для того чтобы было более удобно создавать версию для планшета и телефона.

    Часть 2.  Версия для планшета

    • Урок 1. Создаем фрейм и сетку

    В этом уроке мы создадим фрейм под планшет и добавим ему свою сетку.

    • Урок 2. Первый блок

    В этом уроке мы перенесем первый блок из десктоп-версии и адаптируем его под планшет.

    • Урок 3. Второй блок

    В этом уроке мы перенесем второй блок из десктоп-версии и адаптируем его под планшет.

    • Урок 4. Третий блок

     В этом уроке мы перенесем третий блок из десктоп-версии и адаптируем его под планшет.

    • Урок 5. Четвёртый блок

    В этом уроке мы перенесем четвертый блок из десктоп-версии и адаптируем его под планшет.

    • Урок 6. Пятый блок

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

    • Урок 7. Переносим фон

    В этом уроке мы перенесем весь фон из десктоп-версии и адаптируем его под планшет.

    • Урок 8. Выравниваем по 8-пиксельнои сетке

    Так же, как и в версии для планшета, мы воспользуемся технологией Pixel Perfect и выровняем все элементы.

     Часть 3. Мобильная версия

    • Урок 1. Фрейм и сетка

    В этом уроке мы создадим фрейм под мобильную версию и добавим ему сетку с определенными свойствами.

    • Урок 2. Первый блок

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

    • Урок 3. Редактируем версию для планшета

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

    • Урок 4. Второй блок

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

    • Урок 5. Третий блок

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

    • Урок 6. Четвёртый блок

    В этом уроке мы перенесем четвертый блок из десктоп-версии и адаптируем его под мобильную версию.

    • Урок 7. Пятый блок

    В этом уроке мы перенесем пятый блок из десктоп-версии и адаптируем его под мобильную версию.

    • Урок 8. Шестой блок

    В этом уроке мы перенесем шестой блок из десктоп-версии и адаптируем его под мобильную версию.

    • Урок 9. Седьмой блок

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

    Часть 4. Финальные штрихи

    • Урок 1. Component Master Manager

    В этом уроке мы опять воспользуемся плагином Component Master Manager и снова перенесем новые созданные мастер компоненты на отдельную страницу.

    • Урок 2. Delete hidden layers

    В этом уроке мы в один клик удалим все лишние слои.

    • Урок 3. Подготавливаем макет для верстки

    В этом уроке мы подготовим макет для верстки.

    • Урок 4. Интерактивный прототип

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

    • Модуль 6. Интернет-магазин по дизайн-системе

    В данном модуле мы будем создавать полноценный дизайн интернет-магазина. Мы хорошо поработаем с UX. Также создадим UI-кит с библиотекой цветов, шрифтов, сеток и компонентов.

    Весь дизайн будет сделан по дизайн системе. В дизайне будет несколько страниц. Также мы все сделаем по системе Pixel Perfect. И по итогу сделаем интерактивный прототип.

    • Урок 1. Создаем фрейм и библиотеку сеток

    В этом уроке мы создадим фрейм для десктоп-версии и создадим библиотеку сеток.

    • Урок 2. Проектируем прототип

    В этом уроке мы спроектируем прототип будущего дизайна.

    • Урок 3. Меню

    В этом уроке мы создадим меню.

    • Урок 4. Лого, поиск, избранное, корзина и категории

    В этом уроке я покажу как уместить много информации в компактный блок.

    • Урок 5. Выгоды

    В этом уроке мы поработаем с компонентами и сделаем блок с выгодами.

    • Урок 6. Популярные разделы

    В этом уроке мы сделаем из одного компонента 18 карточек.

    • Урок 7. Спец. предложение

    В этом уроке мы сделаем блок со спец. предложением.

    • Урок 8. Бестселлер, новинки, популярное

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

    • Урок 9. Пять карточек товара

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

    • Урок 10. Популярная категория

    В этом уроке мы снова на основе компонентов соберем блок с популярной категорией товаров в интернет-магазине.

    • Урок 11. Последние товары

    В этом уроке мы создадим большую карточку с множеством скрытых элементов, используя компоненты.

    • Урок 12. Полезные статьи

    В этом уроке мы сделаем шаблон из компонентов для блока со статьями.

    • Урок 13. Блок инстаграм

    В этом блоке мы создадим шаблон блока для фотографий из инстаграма.

    • Урок 14. Три карточки

    В этом уроке мы сделаем 3 шаблона карточек на основе компонентов.

    • Урок 15 .Футер

    В этом уроке я покажу как грамотно структурировать и располагать информацию в футере.

    • Урок 16. Подготавливаем фрейм для новых страниц

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

    • Урок 17. Создаем страницу категории

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

    • Урок 18. Делаем попап

    В этом уроке я покажу как сделать попап, который будет выезжать справа.

    • Урок 19. Страница товара

    В этом уроке мы создадим новую страницу с подробным описанием товара.

    • Урок 20. Подготавливаем фрейм для страницы с корзиной

    В этом уроке мы создадим свой фрейм для страницы с корзиной.

    • Урок 21. Карточка товара

    В этом уроке мы создадим шаблон карточки товара для корзины.

    • Урок 22. Доделываем страницу корзины

    В этом уроке мы создадим фиксированный блок со всей информацией о корзине пользователя.

    • Урок 23. Grid-система выравнивания

    В этом уроке мы используем технологию Pixel Perfect и выровняем все элементы в дизайне.

    • Урок 24. Component Master Manager

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

    • Урок 25. Модульная сетка

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

    • Урок 25. Структурируем папки

    В этом уроке мы структурируем все созданные слои по папкам для более удобной работы с макетом.

    • Урок 26. Плагин Similayer

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

    • Урок 27. Добавляем иконки по дизаин-системе

    В этом уроке мы добавим все иконки в макет по дизайн системе.

    • Урок 28. Где взять качественную графику?

    В этом уроке я расскажу, где можно взять качественную графику.

    • Урок 29. Добавляем графику. 1 вариант

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

    • Урок 30. Плагин Avtocrop

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

    • Урок 31. Плагин Unsplash

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

    • Урок 32. Подбираем цвета для сайта + плагин Uigradients

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

    • Урок 33. Делаем более живой сайт

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

    • Урок 34. Дорабатываем блок полезные статьи

    В этом уроке мы доработаем блок с полезными статьями.

    • Урок 35. Сканер компонентов

    В этом уроке мы используем сканер макета, который позволит найти все косяки и разбитые компоненты.

    • Урок 36. Делаем интерактивный прототип

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

    • Урок 37. Плагин Delete Hidden Layers

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

    • Урок 38. Интерактивные элементы

    В этом уроке мы создадим все интерактивные элементы.

    • Модуль 7. Фриланс

    В данном модуле мы разберем вопросы связанные с фрилансом. Как начать, как наработать портфолио, как определить сроки, как работать с ТЗ и много-много других вопросов.

    • Урок 1. Как быстро наработать портфолио

    В этом уроке я расскажу о 4-х способах того, как быстро наработать портфолио.

    • Урок 2. Декомпозиция

    В этом уроке я расскажу о декомпозиции для дизайнера, мы по полочкам разложим, что такое 100 000 рублей в месяц для дизайнера.

    • Урок 3. Как определить сроки и уложиться в них

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

    • Урок 4. Как определить стоимость за дизайн и за час

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

    • Урок 5. Техническое задание и бриф

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

    • Урок 6. Где искать клиентов

    В этом уроке я расскажу о 9 источниках, где можно искать клиентов.

    • Урок 7. Предоплата

    В этом уроке я расскажу о предоплате, зачем она нужна, что будет если ее брать и если не брать.

    • Урок 8. Ошибки общения с клиентами

    В этом уроке я расскажу о 10 ошибках общения с клиентами, которые лучше не допускать.

    • Урок 9. Как из клиента сделать партнера

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

    • Урок 10. Дополнительный заработок

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

    • Модуль 8. Трудоустройство

    В этом модуле мы разберем две темы: как оформить портфолио для того, чтобы презентовать ее работодателю и то, как оформить резюме.

    • Урок 1. Оформляем портфолио Behance

    В этом уроке я расскажу о Behance, о том какую информацию стоит там указывать и как добавлять свои работы.

    • Урок 2. HH.ru: оформляем резюме и ищем работу

    В этом уроке мы познакомимся с сайтом hh.ru, создадим резюме, поймем какую заработную плату ставить.


  • Веб-дизайн UX/UI. Полное руководство. (Даниил Волосатов - Webformyself)

ПОХОЖИЕ ТОВАРЫ