Складчина: Профессия ux/ui дизайнер (2021) [Uprock] [Евгений Кузьмин] Станьте высокооплачиваемым веб‑дизайнером, получайте международные награды и трудоустраивайтесь в лучшие компании! Uprock – самая награждаемая школа на Behance! Кому подойдет: Как начинающим дизайнерам, чтобы разобраться в теме дизайна, так и опытным специалистам в этой сфере, чтобы систематизировать свои знания и повысить профессиональный уровень. Начинающим UX/UI дизайнерам Фронтендерам Менеджерам проектов Графическим дизайнерам Тем, кто меняет сферу деятельности Тем, кто хочет стать фрилансером Уникальная методика обучения: Вы пройдете все этапы создания дизайна сайта совместно с опытным куратором. 01 Онлайн‑стажировка под руководством арт‑директоров с видеоуроками и обратной связью. 02 Вы сделаете все типы сайтов: Лонгрид, Лендинг, Интернет‑магазин, Новостной сайт, Корпоративный сайт, Портфолио, Сайт агентства. 03 Подходит как начинающим, так и опытным дизайнерам, которые хотят улучшить свои навыки. Что вы получите: С нашей помощью вы сможете создавать проекты, которые отвечают высоким требованиям юзабилити (UX) и визуала (UI). Это помогает достигать высоких результатов как при трудоустройстве, так и при самостоятельном поиске клиентов. Видеолекции Курс разбит на последовательные и логические этапы реальной разработки проекта. Таким образом вы легко усвоите материал и научитесь систематизировать свои рабочие процессы. Практика, приближенная к стажировке в студии Курс на 80% состоит из практики, максимально приближенной к работе над реальным проектом в дизайн-студии. Это позволит вам быстро адаптироваться при трудоустройстве в компанию. Портфолио из 7 работ: Лонгрид Лендинг Интернет‑магазин Новостной сайт Корпоративный сайт Портфолио Сайт агентства Наши студенты трудоустраиваются в лучшие компании Качественные проекты и полученные в Uprock навыки помогают трудоустраиваться в ведущие компании, а также быть успешными фрилансерами. Setters Landau Creative people Zephyr lab Everest Сибирикс M-a-x 2gis Ozon Obys Uplab Wrike Сбер Clay Программа: Теория Задачи и навыки UX/UI дизайнера Психология в дизайне Психология пользователя Визуальный дизайн (UI) Работа с Figma (начало) Работа с UI Kit Базовый стиль Адаптив Визуальная логика Развитие насмотренности Веб-анимация Аналитика и логика (UX) Элементы интерфейса / Компоненты сайта Типы страниц Повествование в дизайне Структура лендинга / Функциональный прототип Логика интерфейса Принципы навигации Исследования Технологический процесс Брифинг клиента / Сбор информации Конкурентный анализ Прототипирование Визуальная концепция Передача макетов разработчикам Работа над портфолио Лендинг Интернет-магазин Корпоративный сайт Новостной сайт Сайт-портфолио Сайт агентства Дополнительные спринты Верстка на Webflow (первые шаги) Спойлер: Подробно Теория Задачи и навыки 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 Иерархия элементов сайта Панель навигатор Регистрация и создание проекта Публикация сайта Настройки проекта Добавление элементов Обзор основных элементов Цена 49900 руб. Скрытая ссылка
Похожие складчины Открыто - Профессия UX дизайнер [uprock] [Евгений Кузьмин] Доступно - UX/UI Дизайнер: старт (сайты) [UPROCK] [2021] [Евгений Кузьмин] Доступно - Продуктовый дизайн [Uprock] [Евгений Кузьмин] Доступно - Создание сайтов на Webflow [Uprock] [Евгений Кузьмин] Открыто - Анимации интерфейсов [uprock] [Евгений Кузьмин]