Курс «UX/UI дизайнер. Сайты PRO»

Хотите удаленную высокооплачиваемую работу? Школа веб-дизайна Uprock предлагает пройти обучение веб-дизайнеров и научиться создавать дизайны сайтов.

Профессия UX/UI дизайнер имеет спрос на рынке труда и хорошо оплачивается. Освоить может фронтендер, графический дизайнер или интересующийся дизайном человек.

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

На курсе «UX/UI дизайнер. Сайты PRO»:

1. Создание семи типов сайта с нуля.
2. Исследования поведения пользователей.
3. Проектирование сайтов под удобство целевой аудитории.
4. Помощь в составлении резюме и портфолио.

После курса вы сможете выполнять проекты самостоятельно. Уже через 4 месяца после начала обучения сможете начать зарабатывать.

Задачи и навыки UX/UI дизайнера

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

• О профессии UX/UI дизайнера.
• Навыки UX/UI дизайнера.
• Какие задачи решает дизайн.
• Интерфейс и классификация сайтов.
• Психология в дизайне.

Психология пользователя

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

• Вступление.
• Составляющие психологии пользователей в рамках интерфейса.
• Психофизиология.
• Паттерны восприятия информации.
• Поведенческий паттерн.
• Проектирование интерфейса.
• Визуальный дизайн (UI).

Работа с Figma (Начало)

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

• Работа в Figma (начало).
• Интерфейс программы / Основы работы в Figma.
• Основные инструменты Figma и настройки.
• Дополнительные инструменты.
• Рисуем тестовый макет.

Работа с UI Kit

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

• Что такое UI Kit.
• Для чего нужен UI Kit.
• Состав UI Kit.
• Стили, компоненты, автолейауты и варианты Figma.
• Почему важно сразу создавать стили в Figma.

Базовый стиль

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

• О базовом стиле UPROCK.
• Когда подойдет базовый стиль UPROCK.
• Анатомия стиля (цвет, типографика, сетка).
• Наборы блоков.
• Как настроить стиль под себя.

Адаптив

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

• Историческая справка.
• Типы экранов и колонки.
• Десктопные устройства.
• Планшеты.
• Мобильные устройства.
• Резюме.
• Определение брейкпойнтов.
• Основные брейкпоинты.
• Резюме.

Визуальная логика

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

• Основные принципы визуальной логики.
• Гештальтпсихология.
• Декомпозиция.
• Иерархия.
• Дизайн-система.

Развитие насмотренности

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

• Где искать вдохновение?
• Как прокачивать насмотренность?
• Алгоритм ваших действий.
• База знаний визуальных решений.

Веб‑анимация

В этом уроке вы получите представление о том, что такое веб‑анимация, какие функции она выполняет в дизайне интерфейсов и в каких случаях используется. Вы узнаете, какие два основных типа анимаций используются на сайтах в реальной жизни. Отдельно поговорим о “фишках сайта” с помощью анимации и параллакс‑эффекте. Обсудим минусы креативной анимации. В заключение вы узнаете, какие еще существуют программы для создания анимации, кроме After Effects, и чем они могут быть полезны.

• Введение в веб‑анимацию.
• Теория.
• Установка программ.
• Интерфейс и настройка After Effects.
• Анимация появления.
• Аналитика и логика (UX).

Элементы интерфейса / Компоненты сайта

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

• Элементы интерфейса.
• Кнопка (функция, состояния, правила отрисовки).
• Ссылка (функция, состояния, правила отрисовки).
• Текстовое поле (состав, форма, функции, состояния, правила отрисовки).
• Пагинация.
• Функциональные блоки.
• Контентные блоки.
• Слайдер.
• Карточки.
• Список.
• Таблица.
• Карта.
• Контакты/Обратная связь.
• Формы.
• Фильтры/Сортировка.
• Видеоплеер.
• Поп-ап.
• Футер.

Типы страниц

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

• Основные типы страниц.
• Контентные страницы.
• Презентация.
• Статья.

Повествование в дизайне

Вы узнаете, что основная задача дизайнера заключается в том, чтобы правильно донести нужную информацию до пользователя. Разберем логические блоки сценария повествования. Вы поймете, в какой последовательности следует его выстраивать, чтобы подвести пользователей к совершению целевого действия. На примере проектирования лендинг‑пейджа вы увидите алгоритм создания сценария. Поговорим об основных ошибках, которые часто совершают дизайнеры. В заключение вы научитесь тому, как работать с текстом, что поможет вам в работе над своими проектами.

• Повествование в дизайне.
• Разработка повествования.
• UX копирайтинг.
• Конкретика формулировок.
• Основной заголовок.
• Подзаголовок.
• Основное предложение.
• Заголовки и подзаголовки блоков.
• Тезисы/Цифры.
• Отзывы.
• Названия кнопок.
• Призыв к действию.

Структура лендинга / Функциональный прототип

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

• Формирование повествования.
• Первый уровень: Общее повествование.
• Второй уровень: Состав блоков.
• Функциональный прототип.
• Вайрфреймы.
• Типовая структура лендинга.
• Первый экран.
• Хедер.
• Обложка.
• Выгода от продукта.
• Целевое действие.
• Дополнительные блоки.

Логика интерфейса

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

• Веб-интерфейс.
• Теория «информационного запаха»
• Навигация VS Поиск.

Принципы навигации

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

• Горизонтальное меню.
• Открытое меню.
• Оптимальное количество пунктов в меню.
• Резюме.
• Логотип – слева, пункты меню – справа.
• Логотип – по центру, пункты меню – слева и справа.
• Слева логотип + двухуровневое меню.
• Меню, спрятанное в гамбургер.
• Вертикальное меню.

Исследования

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

• Важность исследований в веб‑дизайне.
• Типы исследований и аналитика.
• Анализ аудитории.
• Характеристика и оценка аудитории.

Технологический процесс

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

• Общий алгоритм.
• Тайминг проекта.
• Зачем нужно вести тайминг.
• Бесконечные проекты.
• Проблемные точки.
• Сбор статистики.
• Прогнозирование.

Брифинг клиента / Сбор информации

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

• Алгоритм действий.
• Важные нюансы.
• Первая страница.
• Контактная информация.
• О компании.
• Пользователь.
• Сайт.

Конкурентный анализ

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

• Для чего нужен конкурентный анализ.
• Как искать конкурентов клиента.
• По каким параметрам проводить аналитику.
• Выводы из конкурентного анализа.

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

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

• На основании чего строится прототип.
• Создаем прототип для своего проекта.
• В итоге вы получите будущую структуру сайта.

Визуальная концепция

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

• Что определяет стиль?
• Анализ индустрии.
• Работа с референсами.
• Поиск визуальной концепции.
• Система оценки дизайна.
• Презентация визуальной концепции.

Передача макетов разработчикам

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

• Общее, определение и состав UI Kit.
• Пример UI Kit.
• Подготовка макета к разработке.
• Работа над портфолио.

Лендинг

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

• Технологический процесс.
• Первый этап: Брифинг/ Сбор информации.
• Второй этап: Конкурентный анализ.
• Третий этап: Прототипирование.
• Четвертый этап: Визуальная концепция.
• Пятый этап: Передача макетов разработчикам.

Интернет-магазин

Вы узнаете, какие бывают виды интернет-магазинов: бутик, масс-маркет, маркетплейс. Поймете, что такое сущности, спроектируете и нарисуете набор страниц, необходимый для любого интернет-магазина: главная, каталог, карточка товара, корзина, контакты, процесс покупки, доставка, возврат. Помимо десктопных версий, вы создадите адаптивные и оформите кейс на Behance.

• Технологический процесс.
• Первый этап: Брифинг/ Сбор информации.
• Второй этап: Конкурентный анализ.
• Третий этап: Прототипирование.
• Четвертый этап: Визуальная концепция.
• Пятый этап: Передача макетов разработчикам.

Корпоративный сайт

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

• Технологический процесс.
• Первый этап: Брифинг/ Сбор информации.
• Второй этап: Конкурентный анализ.
• Третий этап: Прототипирование.
• Четвертый этап: Визуальная концепция.
• Пятый этап: Передача макетов разработчикам.

Новостной сайт

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

• Технологический процесс.
• Первый этап: Брифинг/ Сбор информации.
• Второй этап: Конкурентный анализ.
• Третий этап: Прототипирование.
• Четвертый этап: Визуальная концепция.
• Пятый этап: Передача макетов разработчикам.

Сайт-портфолио

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

• Технологический процесс.
• Первый этап: Брифинг/ Сбор информации.
• Второй этап: Конкурентный анализ.
• Третий этап: Прототипирование.
• Четвертый этап: Визуальная концепция.
• Пятый этап: Передача макетов разработчикам.

Сайт агентства

Самый интересный и творческий тип сайтов. Вы узнаете, для чего агентствам сайты, какие цели и задачи они решают. Поймете, какую ценность получает клиент при посещении сайта агентства. Мы рассмотрим порядок проектирования и отрисовки страниц для таких типов сайтов. В результате у вас будет свой проект, который вы выложите на Behance.

• Технологический процесс.
• Первый этап: Брифинг/ Сбор информации.
• Второй этап: Конкурентный анализ.
• Третий этап: Прототипирование.
• Четвертый этап: Визуальная концепция.
• Пятый этап: Передача макетов разработчикам.

Верстка на Webflow (первые шаги)

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

• Планы и тарифы.
• Обзор и Анализ макета.
• Чек-лист приемки макета.
• План работы.
• Подготовка макета к верстке.
• Экспорт и оптимизация изображений.
• Подготовка других файлов.
• Блочная верстка и основы HTML и CSS.
• Иерархия элементов сайта.
• Панель Навигатор.
• Регистрация и создание проекта.
• Публикация сайта.
• Настройки проекта.
• Добавление элементов.
• Обзор основных элементов.
• Трудоустройство.

• Формат
  Самостоятельно с наставником
  Живые вебинары / Видеоуроки / Консультации
  Обучение в ЛК на сайте автора
• Демодоступ
• Продолжительность
  4 месяца
• Уровень сложности
  Для новичков
• Когда вы будете учиться
  В любой день в любое время
• Домашние задания
  ЕстьС проверкой
• Документ об обучении
  Сертификат Освоение программы курса
• Сопровождение
  Куратором
• Общение с группой
  Форум или чат внутри ЛК
• Техническая поддержка
  В рабочее времяЧат в ВКЧат в мессенджере
• Перспективы после обучения
  Трудоустройство
• Срок доступа к материалам
  Бессрочный
• Безопасная покупка
  14 дней с момента оплаты
• Бонусы
  Для всех учеников