Станьте высокооплачиваемым веб‑дизайнером, получайте международные награды и трудоустраивайтесь в лучшие компании
записаться на курс
"Увидела Женю на Youtube. Мне понравилась его энергетика, как шутил и рассказывал о дизайне. Я даже не стала смотреть другие курсы и решила учиться в UPROCK.
Запомнился путь обучения тем, что ты пришел без знаний и прошел все страдания. Сейчас работаю по специальности и мне нравится. Можно полноценно освоить профессию и работать как хочешь, на фрилансе или в студии. Если не останавливаться и развиваться в этой сфере, то большие перспективы могут быть абсолютно у каждого."
"На Youtube посмотрел видео Жени и узнал о существовании школы UPROCK. Мне понравился его подход к дизайну, который он показывал на личном примере. Все было просто и понятно. Появилось доверие к школе по сравнению с другими школами.
При обучении обратная связь была четкой и по делу, мне указывали на ошибки и полученные знания быстро применялись и понимались.
После обучения, сложилось полное понимание в подходе к работе, к решению задач.
Самое главное это индивидуальный подход к обучению, тебя ведут от малого к большому, все быстро укладывается в голове и складывается в единую картину."
“В плане роста всё было плавно. Из спринта в спринт я старался улучшать свой стиль и графические навыки, делать в стиле UPROCK. Особенно полезной была информация по типографике, сеткам, направляющим и в целом практика.
После школы я отобрал около 10 студий, которые меня интересовали, попросил Женю проверить письмо и разослал. Отозвались Uplab и примерно через три недели Creative People. Я прошёл оба интервью и в итоге меня взяли в Creative People.
Во время интервью я упомянул, что учился в UPROCK. Один из руководителей Creative People сказал, что знает Женю и связался с ним. Женя дал на меня отличные рекомендации вдобавок к тем, что уже были в письме.”
Помогаем в оформлении резюме и портфолио;
Консультируем при прохождении собеседования и выполнении тестового задания;
Консультируем и поддерживаем после найма на работу.
Мониторим и предлагаем вам лучшие вакансии;
Регулярно получаем заявки от компаний, которым требуются специалисты;
Подбираем наиболее подходящих кандидатов, исходя из требований работодателя.
Помогаем правильно построить карьеру;
Нанимаем на свои проекты.
Мы готовим профессионалов такого высокого уровня, что нанимаем их к себе на работу. 80% сотрудников UPROCK являются нашими выпускниками.
Вы можете воспользоваться беспроцентной рассрочкой без первого взноса с возможностью досрочного погашения от наших партнеров: Яндекс.Касса, Халва и Тинькофф Банк.
Оставьте заявку для получения более подробной информации.
Вы можете воспользоваться беспроцентной рассрочкой, без первого взноса с возможностью досрочного погашения, от наших партнеров: Яндекс.Касса, Халва и Тинькофф Банк.
Оставьте заявку для подробностей.
Последовательные и логические этапы реальной разработки проекта. Систематизация рабочих процессов.
Процесс подготовки на 80% состоит из практической работы, что позволяет максимально оттачивать навыки и наработать опыт.
По окончании вы будете обладать достаточным опытом и навыками, чтобы выполнить любой проект самостоятельно.
Вас ждут максимально подробные консультации от наших специалистов в формате видеоразборов на всех этапах работы над проектом, а также закрытые вебинары с разбором проектов, ответами на вопросы и консультацией по трудоустройству.
Наши специалисты обладают не только профессиональным опытом, но и способностью доходчиво доносить свою мысль. У нас есть уникальная механика контроля качества предоставления консультаций.
Курс разбит на последовательные и логические этапы реальной разработки проекта. Таким образом вы легко усвоите материал и научитесь систематизировать свои рабочие процессы.
Курс на 80% состоит из практики, максимально приближенной к работе над реальным проектом в дизайн-студии. Это позволит вам быстро адаптироваться при трудоустройстве в компанию.
Вас ждут видеоответы от куратора в течение суток, чат поддержки в Телеграм по общим вопросам, а также закрытые вебинары с разбором проектов и консультацией по трудоустройству.
1. Лендинг
2. Интернет‑магазин
3. Новостной сайт
4. Корпоративный сайт
5. Портфолио
6. Сайт агентства
Наша техподдержка отвечает в течение 5 минут по всем организационным вопросам.
Чтобы дополнительно мотивировать вас к достижению высоких результатов, у нас есть 2 вида сертификатов: стандартный и золотой.
Мы поможем вам успешно закончить курс, получить "Золотой сертификат" в качестве гарантии качества UPROCK и дадим вам нашу личную рекомендацию.
Помогаем в оформлении резюме и портфолио;
Консультируем при прохождении собеседования и выполнении тестового задания;
Консультируем и поддерживаем после найма на работу.
Вы можете оплатить полную сумму или воспользоваться беспроцентной рассрочкой без первого взноса с возможностью досрочного погашения от наших партнеров: Яндекс.Касса, Халва и Тинькофф Банк.
В этом уроке вы получите представление о том, в чем разница между UX и UI, а также почему они неразрывно связаны между собой. Вы поймете, какие навыки и личные качества вам предстоит развивать в процессе обучения. Мы обсудим, что такое интерфейс и затронем тему классификации дизайна и сайтов. В заключение вы узнаете, какими принципами и в каком порядке важно руководствоваться в процессе проектирования.
О профессии UX/UI дизайнера
Навыки UX/UI дизайнера
Какие задачи решает дизайн
Интерфейс и классификация сайтов
В этом уроке вы узнаете, что все люди обладают плюс-минус одинаковыми поведенческими паттернами восприятия информации. Вы получите представление о том, как пользователи обрабатывают данные, изучите приемы управления их вниманием и эмоциями. Применение этих знаний позволит вам создавать удобные и интуитивно понятные интерфейсы. В рамках курса все наши решения будут основываться на психологии пользователя, что поможет вам логично обосновывать ваш дизайн.
Вступление
Составляющие психологии пользователей в рамках интерфейса
Психофизиология
Паттерны восприятия информации
Поведенческий паттерн
Проектирование интерфейса
В этом уроке вы узнаете о том, что представляет собой графический редактор Figma, в котором вам предстоит проектировать, и какие у нее есть возможности. Мы изучим все аспекты работы в Figma, начиная от всех тонкостей регистрации и изучения ее интерфейса и заканчивая применением ее основных инструментов, которые позволят вам начать работу в редакторе. В заключение мы закрепим теорию на практике и нарисуем тестовый макет.
Работа в Figma (начало)
Интерфейс программы / Основы работы в Figma
Основные инструменты Figma и настройки
Дополнительные инструменты
Рисуем тестовый макет
В этом уроке вы узнаете, что такое UI Kit и для чего он нужен. Мы подробно разберем состав UI Kit и алгоритм его создания в Figma в процессе работы над проектом.
Что такое UI Kit
Для чего нужен UI Kit
Состав UI Kit
Стили, компоненты, автолейауты и варианты Figma
Почему важно сразу создавать стили в Figma
В этом уроке вы поймете, что из себя представляет базовый стиль Uprock и для каких случаев он подходит. Мы разберем его основные аспекты, такие как цвет, шрифтовая схема, интерактивные элементы и сетка. Также вы изучите основные компоненты сайта, в том числе на практических примерах. В заключение вы узнаете, как настроить базовый стиль Uprock под себя.
О базовом стиле UPROCK
Когда подойдет базовый стиль UPROCK
Анатомия стиля (цвет, типографика, сетка)
Наборы блоков
Как настроить стиль под себя
Вы получите знания о принципах адаптивности. Узнаете, почему возникла потребность в создании адаптивного дизайна. Разберетесь в типах экранов устройств и на практике закрепите навыки рисования дизайна во всех версиях. Изучите главные особенности дизайна для сенсорных экранов. В заключение вы узнаете, что такое брейкпоинты и изучите самые основные из них.
Историческая справка
Типы экранов и колонки
Десктопные устройства
Планшеты
Мобильные устройства
Резюме
Определение брейкпойнтов
Основные брейкпоинты
Резюме
Вы получите представление о том, что такое визуальная логика и почему она необходима при проектировании. Узнаете, что у человека есть рабочая память и что ее возможности весьма ограничены. Мы поговорим о том, как дизайнер с помощью выстраивания визуальной логики облегчает для пользователя сканирование контента и запоминание. Вы подробно изучите ее основные принципы: группировка, декомпозиция, иерархия, переиспользование, познакомитесь с понятием “Дизайн-система” и ее правилами. В заключение на практическом примере вы научитесь анализировать дизайн-системы проектов.
Основные принципы визуальной логики
Гештальтпсихология
Декомпозиция
Иерархия
Дизайн-система
Вы узнаете, на каких сайтах искать вдохновение, а также познакомитесь с алгоритмом поиска самых лучших референсов. Поймете, как развивать насмотренность с помощью простой поэтапной схемы анализа и систематизации визуальных решений. В заключение научитесь формировать и вести базу знаний.
Где искать вдохновение?
Как прокачивать насмотренность?
Алгоритм ваших действий
База знаний визуальных решений
В этом уроке вы получите представление о том, что такое веб‑анимация, какие функции она выполняет в дизайне интерфейсов и в каких случаях используется. Вы узнаете, какие два основных типа анимаций используются на сайтах в реальной жизни. Отдельно поговорим о “фишках сайта” с помощью анимации и параллакс‑эффекте. Обсудим минусы креативной анимации. В заключение вы узнаете, какие еще существуют программы для создания анимации, кроме After Effects, и чем они могут быть полезны.
Введение в веб‑анимацию
Теория
Установка программ
Интерфейс и настройка After Effects
Анимация появления
Вы узнаете, что такое элементы интерфейса и почему важно не нарушать их привычное поведение на сайте. Изучите такие ключевые элементы, как кнопка, ссылка, текстовое поле и пагинация; их функции и правила рисования. Мы разберемся в основных функциональных блоках сайта и их предназначении. В заключение вы будете знать все основные элементы сайта и закрепите свои знания на практике.
Элементы интерфейса
Кнопка (функция, состояния, правила отрисовки)
Ссылка (функция, состояния, правила отрисовки)
Текстовое поле (состав, форма, функции, состояния, правила отрисовки)
Пагинация
Функциональные блоки
Контентные блоки
Слайдер
Карточки
Список
Таблица
Карта
Контакты/Обратная связь
Формы
Фильтры/Сортировка
Видеоплеер
Поп-ап
Футер
В этом уроке вы изучите основные типы страниц сайта. Более подробно мы остановимся на контентных страницах, потому что они самые интересные для реализации творческих решений. Разберем типы контентных страниц и их принципиальные отличия. В результате вы поймете, что включает в себя контент, и узнаете, как правильно располагать его на сайте.
Основные типы страниц
Контентные страницы
Презентация
Статья
Вы узнаете, что основная задача дизайнера заключается в том, чтобы правильно донести нужную информацию до пользователя. Разберем логические блоки сценария повествования. Вы поймете, в какой последовательности следует его выстраивать, чтобы подвести пользователей к совершению целевого действия. На примере проектирования лендинг‑пейджа вы увидите алгоритм создания сценария. Поговорим об основных ошибках, которые часто совершают дизайнеры. В заключение вы научитесь тому, как работать с текстом, что поможет вам в работе над своими проектами.
Повествование в дизайне
Разработка повествования
UX копирайтинг
Конкретика формулировок
Основной заголовок
Подзаголовок
Основное предложение
Заголовки и подзаголовки блоков
Тезисы/Цифры
Отзывы
Названия кнопок
Призыв к действию
В этом уроке вы изучите структуру лендинга. Вы узнаете, в каком порядке следует располагать блоки сайта, а затем изучите информационное наполнение каждого из них. Вы получите представление о том, что такое функциональный прототип и для каких целей он нужен. В итоге вы сможете самостоятельно создать прототип своего лендинга.
Формирование повествования
Первый уровень: Общее повествование
Второй уровень: Состав блоков
Функциональный прототип
Вайрфреймы
Типовая структура лендинга
Первый экран
Хедер
Обложка
Выгода от продукта
Целевое действие
Дополнительные блоки
Вы познакомитесь с понятием «информационный запах» и узнаете, как он определяет принципы работы навигации. Изучите общие закономерности использования поиска по сайту и навигации пользователями. В результате вы будете понимать, насколько важно продумать навигацию, чтобы человек мог быстро сориентироваться в интерфейсе и найти то, что ему нужно.
Веб-интерфейс
Теория «информационного запаха»
Навигация VS Поиск
Вы узнаете основные принципы создания качественной навигации и поймете, что в ее основе лежат паттерны поведения пользователей на сайте. Вы познакомитесь с классическими примерами навигации. В заключение вы научитесь создавать интуитивно понятную навигацию, будете разбираться в том, когда уместно использовать стандартную навигацию, а когда можно добавить к ней креативные решения.
Горизонтальное меню
Открытое меню
Оптимальное количество
пунктов в меню
Резюме
Логотип – слева, пункты меню – справа
Логотип – по центру, пункты меню – слева и справа
Слева логотип + двухуровневое меню
Меню, спрятанное в гамбургер
Вертикальное меню
В этом уроке вы получите понимание важности исследований в дизайне. Вы изучите их основные типы и будете знать алгоритм работы с ними. Поймете, где искать и как анализировать клиентские и открытые данные, где брать информацию о продукте и что именно нужно выяснить в отношении него. Далее вы научитесь анализировать аудиторию. В итоге вы сможете самостоятельно проводить исследования во время работы над проектом.
Важность исследований в веб‑дизайне
Типы исследований и аналитика
Анализ аудитории
Характеристика и оценка аудитории
Подробно разберем последовательность создания дизайна. Вы изучите основные этапы проектирования сайтов, а также поймете, насколько важен UX в дизайне. Вы узнаете, что такое тайминг проекта, зачем его вести и наглядно увидите, что из себя представляет этот документ. В итоге вы скачаете таблицу тайминга. Ее заполнение позволит вам собирать статистику времени, которое вы тратите на работу над проектом, видеть полную картину его реализации и проблемные этапы.
Общий алгоритм
Тайминг проекта
Зачем нужно вести тайминг
Бесконечные проекты
Проблемные точки
Сбор статистики
Прогнозирование
В этом уроке вы изучите алгоритм действий на этапе брифинга. Вы узнаете основные нюансы его проведения. Подробно разберем все разделы брифа. Отдельно остановимся на его завершающем этапе. Вы научитесь деловой переписке и правильному общению с клиентом. В итоге вы сможете самостоятельно брифовать и максимально детально собирать всю необходимую для проекта информацию.
Алгоритм действий
Важные нюансы
Первая страница
Контактная информация
О компании
Пользователь
Сайт
Вы поймете, как правильно искать конкурентов. Получите сводную таблицу, в которую будете вносить критерии оценки конкурентов, данные о них и о продукте клиента, а также выводы из анализа. На реальном примере вы проведете конкурентный анализ. В итоге вы сможете погрузиться в индустрию клиента и разобраться в особенностях продукта, который продает он и его конкуренты.
Для чего нужен конкурентный анализ
Как искать конкурентов клиента
По каким параметрам проводить аналитику
Выводы из конкурентного анализа
В этом уроке вы узнаете, как выстраивать структуру лендинга и разрабатывать прототип будущего сайта. В итоге вы сами создадите реальный прототип на базе вашего проекта.
На основании чего строится прототип
Создаем прототип для своего проекта
В итоге вы получите
будущую структуру сайта
Мы разберем, как проводить визуальный анализ индустрии, к которой относится проект. Вы узнаете, как выбирать объекты для анализа, как его проводить, и то, какие задачи в итоге он решает. На реальном примере вы увидите, как следует работать с референсами. Мы рассмотрим, как правильно расставить приоритеты при создании концепции. В заключение вы узнаете все нюансы презентации своей концепции клиенту, чтобы она ему понравилась и он с ней согласился.
Что определяет стиль?
Анализ индустрии
Работа с референсами
Поиск визуальной концепции
Система оценки дизайна
Презентация визуальной концепции
Мы подробно разберем, как и какие элементы UI Kit необходимо описать для целей передачи макета в верстку. Вы узнаете, почему важно группировать и чистить слои. Мы подробно расскажем вам, как создавать комментарии и что в них писать, чтобы у разработчика не осталось никаких вопросов. Вы получите представление о том, как экспортировать фотографии и векторные объекты, а также поймете алгоритм передачи файла разработчику. Мы остановимся на том, что такое авторский контроль и почему он нужен. В заключение вы научитесь готовить макеты для передачи в разработку таким образом, чтобы после верстки получить идеальный цифровой продукт.
Общее, определение и состав UI Kit
Пример UI Kit
Подготовка макета к разработке
Мы разберем, что такое лендинг и чем он отличается от других типов сайтов. Вы нарисуете его по алгоритмам, которые мы применяем у себя в студии. На практике вы узнаете: как проводить брифинг, собирать информацию для сайта, для чего нужен конкурентный анализ, как разработать прототип. Мы расскажем про свой подход в выборе визуальной концепции. В итоге вы нарисуете десктопные и адаптивные версии лендинга.
Технологический процесс
Первый этап: Брифинг/ Сбор информации
Второй этап: Конкурентный анализ
Третий этап: Прототипирование
Четвертый этап: Визуальная концепция
Пятый этап: Передача макетов разработчикам
Вы узнаете, какие бывают виды интернет-магазинов: бутик, масс-маркет, маркетплейс. Поймете, что такое сущности, спроектируете и нарисуете набор страниц, необходимый для любого интернет-магазина: главная, каталог, карточка товара, корзина, контакты, процесс покупки, доставка, возврат. Помимо десктопных версий, вы создадите адаптивные и оформите кейс на Behance.
Технологический процесс
Первый этап: Брифинг/ Сбор информации
Второй этап: Конкурентный анализ
Третий этап: Прототипирование
Четвертый этап: Визуальная концепция
Пятый этап: Передача макетов разработчикам
Вы изучите особенности одного из самых распространенных типов сайтов — корпоративный. Поймете, какие задачи он решает. Научитесь составлять структуру и логику корпоративного сайта. Узнаете порядок отрисовки страниц. По итогу вы создадите свой проект, нарисуете адаптивы и упакуете его в кейс на Behance.
Технологический процесс
Первый этап: Брифинг/ Сбор информации
Второй этап: Конкурентный анализ
Третий этап: Прототипирование
Четвертый этап: Визуальная концепция
Пятый этап: Передача макетов разработчикам
На реальном примере подробно разберем структуру новостных сайтов, изучим набор обязательных типов страниц и набор блоков, из которых он состоит. В результате вы создадите собственный новостной сайт и опубликуете его на Behance.
Технологический процесс
Первый этап: Брифинг/ Сбор информации
Второй этап: Конкурентный анализ
Третий этап: Прототипирование
Четвертый этап: Визуальная концепция
Пятый этап: Передача макетов разработчикам
Узнаете, для чего нужен сайт портфолио и как он может помочь в построении карьеры и на фрилансе. Изучите необходимые типы страниц и то, какие задачи они решают. Мы разберем обязательный набор блоков для каждой страницы. Вы нарисуете десктопные и адаптивные версии, а также оформите их в кейс на Behance.
Технологический процесс
Первый этап: Брифинг/ Сбор информации
Второй этап: Конкурентный анализ
Третий этап: Прототипирование
Четвертый этап: Визуальная концепция
Пятый этап: Передача макетов разработчикам
Самый интересный и творческий тип сайтов. Вы узнаете, для чего агентствам сайты, какие цели и задачи они решают. Поймете, какую ценность получает клиент при посещении сайта агентства. Мы рассмотрим порядок проектирования и отрисовки страниц для таких типов сайтов. В результате у вас будет свой проект, который вы выложите на Behance.
Технологический процесс
Первый этап: Брифинг/ Сбор информации
Второй этап: Конкурентный анализ
Третий этап: Прототипирование
Четвертый этап: Визуальная концепция
Пятый этап: Передача макетов разработчикам
Познакомитесь с возможностями и назначениями бесплатного и платных тарифов Webflow. Вы узнаете, как построить работу над проектом от анализа до запуска.
Как создавать полноценные, адаптированные под разные устройства сайты с эффектной анимацией без знания кода. Как спланировать и систематизировать весь процесс разработки от подготовки до запуска проекта. Как создавать плавные последовательные анимации.
Планы и тарифы
Обзор и Анализ макета
Чек-лист приемки макета
План работы
Подготовка макета к верстке
Экспорт и оптимизация изображений
Подготовка других файлов
Блочная верстка и основы HTML и CSS
Иерархия элементов сайта
Панель Навигатор
Регистрация и создание проекта
Публикация сайта
Настройки проекта
Добавление элементов
Обзор основных элементов
Поможем найти работу мечты и подготовить резюме и портфолио.
Поиск вакансий
Составление резюме
Фриланс биржи
Стратегия развития
Вы можете воспользоваться беспроцентной рассрочкой, без первого взноса с возможностью досрочного погашения, от наших партнеров: Яндекс.Касса, Халва и Тинькофф Банк.
Оставьте заявку для подробностей.
Вы можете воспользоваться беспроцентной рассрочкой без первого взноса с возможностью досрочного погашения от наших партнеров: Яндекс.Касса, Халва и Тинькофф Банк.
Оставьте заявку для получения более подробной информации.
В договоре есть сложный пункт про основную и дополнительную услугу и базовую цену. Основная услуга — это доступ к платформе со всеми видео. Дополнительная услуга — это обратная связь от дизайнеров студии. В стоимость консультации, т.е. в Базовую цену, входит всё вместе, доплачивать не нужно. Просто внутренние пропорции Базовой цены изменяются в зависимости от количества видео, просмотренных клиентом, и полученных видеоразборов от дизайнеров студии.
Такая разбивка была придумана для возможности возврата средств, если клиент выразит такое пожелание. Суть этих пунктов в том, что я смогу вернуть 70% оплаченных средств в первые две недели после покупки, если покупатель вдруг захочет расторгнуть договор после просмотра вводной консультации. 30% вернуть не сможем в любом случае, т.к. они удерживаются с нас нашими финансовыми партнерами, налогами, платформой и т.п. После просмотра дальнейших консультаций и получения разборов от ведущих дизайнеров услуга уже считается оказанной в полном объёме, и деньги вернуть мы не сможем. Так мы хотели предусмотреть возможность хотя бы частичного возврата средств.
Вы можете оплатить полную сумму или воспользоваться беспроцентной рассрочкой без первого взноса с возможностью досрочного погашения от наших партнеров: Яндекс.Касса, Халва и Тинькофф Банк.
Да, делаем верстку на таких конструкторах, как Webflow/Readymag/Tilda.
Да, мы рисуем проекты в Figma. Это наиболее удобный на сегодняшний день инструмент, который используют большинство студий.
У нас существует внутренняя 10-балльная методика оценки. Чтобы пройти задание нужно набрать минимум 8 баллов. Золотой сертификат получают все, кто сделал три проекта с оценкой выше 9 баллов. Мы приложим все усилия, чтобы ваши работы достигли максимальных оценок.
Помогаем правильно составить резюме и оформить портфолио. Консультируем при прохождении собеседования и выполнении тестового задания. Регулярно получаем заявки от работодателей и напрямую трудоустраиваем в компании. Также предлагаем проекты на фриланс и берем на работу в UPROCK.
Консультация проходит в онлайн‑режиме в удобное для вас время. Вы изучаете видеоразборы, вносите правки и отправляете проекты на проверку. Ваш консультант проверяет задание в течение 24 часов и дает вам обратную связь в видеоформате.
Опыт необязателен. Наши услуги рассчитаны на любой уровень и будут полезны как начинающим, так и опытным дизайнерам.
Вы сделаете 7 типов сайтов. Дополнительно можно сделать свой проект и получить рекомендации по нему.
