Видеокурс "Веб - Дизайн UX/UI. Полное руководство"
-
Издательство
Автор
- Цена:
- 5970 ₽
Дата проверки - 09.02.2025МАТЕРИАЛ СНЯТ С ПРОДАЖ АВТОРОМ
Товар больше не доступны в связи с прекращение сотрудничества с автором. Выберите подходящий курс из похожих.
ПОДРОБНОЕ ОПИСАНИЕ
Автор(ы): Даниил Волосатов
В видеокурсе сделан упор специально на новичков и даны все необходимые знания для старта и успешной карьеры с полного нуля.
Опытные веб-дизайнеры получат не меньше пользы, чем новички: личные секреты успеха и построения работы Даниила Волосатова, знакомство с наиболее актуальными инструментами и технологиями.
Материалы курса направлены на то, чтобы показать, как на практике успешно начать работать и монетизировать полученные знания из видеокурса.
Сыслка на видео не найденаВеб-дизайн 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) -
06 августа 2019
