Все нужные навыки: от анализа аудитории до разработки макета
Figma, Adobe Photoshop, Tilda и другие инструменты для работы
6 проектов для портфолио и обратная связь от экспертов
Учёба в удобное время — можно совмещать с работой
Сертификат о переподготовке
Помощь с поиском работы или первыми заказами на фрилансе
Если оплатите «Веб-дизайнер расширенный» до 31 июля, получите базу знаний для работы в IT
Туда входят модули из разных курсов, которые вместе стоят ~ 50 000 ₽
Освоите дополнительные навыки и станете ещё привлекательнее для работодателей
Сможете погрузиться интернет-маркетинг, SMM, продуктовый цикл и UX‑копирайтинг, научиться управлять проектами или изучить основы коммерческой иллюстрации
С нуля освоите востребованную профессию: от основ визуального языка и интерфейса рабочих инструментов до самостоятельного запуска сайта на Tilda
Тем, у кого уже есть опыт в дизайне
Систематизируете знания, усовершенствуете навыки, сделаете несколько новых проектов для портфолио и получите обратную связь от опытных веб-дизайнеров
Тем, кто работает в смежной сфере
Копирайтерам, маркетологам, менеджерам и другим специалистам — сможете уверенно пользоваться Figma, Adobe Photoshop и Tilda, а если захотите — начнёте развиваться как дизайнер
Главное о профессии
Инструменты и методы, которые нужно знать
Всё это вы освоите на нашем курсе — даже если вы не очень творческий человек и не умеете рисовать.
Figma
Adobe Photoshop
Tilda
HTML
CSS
Типографика
Композиция
Генерация идей
Чему вы научитесь за 9 месяцев на курсе
Понимать визуальный язык и следить за трендами в дизайне
Выстраивать композицию, работать с цветом и шрифтами
Создавать или подбирать для сайтов иконки и анимацию
Анализировать целевую аудиторию и конкурентов
Проектировать взаимодействие пользователей с интерфейсом
Разбираться в вёрстке сайтов и веб-приложений
Адаптировать дизайн под разные гаджеты
Взаимодействовать с заказчиками и командой
Аргументировать решения и оценивать свою работу
Как проходит обучение
Сначала вы изучаете теорию
Чтобы лучше запоминалось, материал даётся в виде текста с иллюстрациями и примерами из практики. Доступ к теории останется и после окончания онлайн-курса — сможете в любой момент повторить нужную тему.
Потом практикуетесь
Начинающему дизайнеру важно набить руку, поэтому вас ждут проекты в конце каждой темы. В рамках проектов вы будете выполнять задачи, с которыми сталкиваются специалисты по веб-дизайну в реальной жизни. Например, вам предстоит оформить лонгрид и с нуля собрать сайт на Tilda.
И получаете обратную связь
Каждый ваш проект разберут опытные веб-дизайнеры. Их комментарии помогут добиться качественного результата, который можно смело положить в портфолио.
YandexGPT помогает учиться
Когда в теории что-то непонятно, нейросеть объяснит это другими словами. А в конце каждого урока подготовит краткий пересказ о самом главном.
На всех этапах обучения вас поддержат опытные веб‑дизайнеры и специалисты Практикума
Менторы помогут освоить нужные навыки
Все они — практикующие дизайнеры, которые готовы делиться опытом. Менторы разберут интересные кейсы и ответят на вопросы по теории и практике.
Составили программу с учётом требований работодателей: будете учить только то, что нужно для решения настоящих задач веб-дизайнера
4 темы・~8 часов
Бесплатно
Каково это — быть веб-дизайнером
Этот модуль бесплатный, чтобы вы побольше узнали о профессии, примерили на себя роль веб‑дизайнера и решили, хотите ли развиваться в этом направлении. А после бесплатной части выберете подходящий формат курса: базовый или расширенный.
Figma
Цвет
Типографика
Композиция
Исследования
Прототип
Базовый и расширенный курс
Введение в профессию
Чем занимается веб‑дизайнер. Необходимые навыки, рабочие задачи и инструменты веб‑дизайнера. Векторы развития в профессии.
Базовые навыки веб‑дизайнера
Работа с цветом. Подбор шрифтов. Построение композиции.
Знакомство с Figma
Что умеет графический редактор Figma. Основные функции Figma для веб‑дизайнера.
Изучите основы Figma и окунётесь в типичный рабочий день веб‑дизайнера: спроектируете свой первый полноценный лендинг с нуля
10 тем・3 недели
Аудитория и визуальная коммуникация
Основы Figma
Визуальное сообщение
Целевая аудитория
Референсы
Мудборд
Основы Figma
Интерфейс, фреймы, навигация. Плагины в Figma.
Визуальная коммуникация
Простые сообщения: знаки и указатели. Как целевая аудитория влияет на коммуникацию. Декодирование. Что мешает передаче сообщения.
Целевая аудитория
Портрет и признаки целевой аудитории. Определяем аудиторию, уточняем портрет.
Насмотренность
Где искать вдохновение. Как прокачать насмотренность. Режим исследователя. Как анализировать чужие работы. Референсы.
Мудборд
Что такое мудборд и зачем он нужен. Как собирать мудборд.
Проанализируете целевую аудиторию и соберёте мудборд для приложения
9 тем・3 недели
Композиция и сетки
Сетки в Figma
Основы композиции
Визуальная иерархия
Модульная вёрстка
Аргументация решений
Композиция
Визуальная иерархия. Якорные объекты. Доминанта и композиционный центр. Как сделать объект доминантой. Целостность. Статика и динамика.
Сетки в дизайне
Модульная вёрстка. Модульные сетки. Из чего состоит сетка. Сетка как инструмент ритма. Базовая единица. Настройка колоночной сетки. Сетки в Figma. Алгоритм работы с сетками.
Аргументация решений
Как отстоять макет перед арт-директором, заказчиком, разработчиком.
Соберёте макет страницы из готовых блоков: поработаете с композицией, отступами и подачей информации в интерфейсе
11 тем・3 недели
Основы типографики и работа с текстом
Текст в Figma
Типографика
Вёрстка текста
Бриф
Техническое задание
Гарнитуры и шрифты
Текстовые и акцидентные шрифты. Шрифтовые пары. Откуда брать шрифты.
Как сверстать текст
Гигиена текста. Интерлиньяж и длина строки. Выравнивание. Базовые элементы и иерархия. Как упорядочить стили.
Работа с заказчиком
Техническое задание. Бриф. Что делать, если информации мало.
Сделаете редизайн: обновите визуал, переработаете структуру главной страницы сайта
9 тем・4 недели
Работа с цветом и изображениями
Изображения в Figma
Цветовые пространства
Цвет
Характеристики цвета. Цветовые пространства. Цветовой круг Иттена. Контрастность. Фон и акцент. Читаемость. Готовые палитры.
Работа с изображениями в Figma
Поиск и подготовка изображений. Цветокоррекция и работа с изображениями в Figma.
Составите техническое задание на основе брифа от заказчика и создадите лендинг
10 тем・3 недели
Введение в UX
Пользовательские сценарии
Качественные исследования
Количественные исследования
Гипотезы
Паттерны
Работа с командой
С кем взаимодействует веб-дизайнер. Как коммуницировать в дизайн-команде. Методы эффективной коммуникации.
Исследования
Исследования в работе дизайнера. Методы исследования: количественные и качественные. Дизайн-эмпатия. Гипотезы.
Пользовательские сценарии
Дизайнер как сценарист. Точка входа и призыв к действию. Типы сценариев. Экстренный сценарий. Длина сценария. Как продумать и записать сценарий. Сценарии в Figma. Блок-схемы.
UX и UI
Пользовательский интерфейс, пользовательский опыт. Виды интерфейсов. Паттерны в дизайне. Эвристики Нильсена. Юзабилити.
Вместе с командой проведёте исследование компании и создадите сценарий будущего сайта
15 тем・3 недели
Лендинги, вайрфреймы, сетки
Вайрфрейм
CTA
Юзабилити
Auto Layout
Лендинги и вайрфреймы
Типы лендингов. Структура лендингов. Зачем нужен вайрфрейм. Каким должен быть вайрфрейм.
Сетки 2.0
Фиксированные сетки. Адаптивные сетки. Вложенные сетки. Принципы работы с сетками в веб-дизайне.
Автолейауты
Возможности Auto Layout. Как добавить и настроить Auto Layout. Auto Layout в действии. Структурируем экран приложения.
Сделаете лендинг с нуля: от прототипа до дизайна
12 тем・4 недели
Растровая графика и типографика
Adobe Photoshop
Веб-типографика
UI-кит
Компоненты
Метафора
Дизайн-система
Растровая графика
Знакомство с Adobe Photoshop. Кадрирование изображения, обтравка изображения, цветокоррекция, стилизация изображений. Использование мокапов.
Типографика 2.0
Отличие типографики в печати и веб-дизайне. Композиция в типографике. Ресурсы для работы со шрифтами: Adobe Typekit, Google Fonts и Font Squirrel.
Иконки
Системные и коммуникационные иконки. Паки с иконками. Работа с иконками. Проектирование иконок: сетка. Оптическая компенсация и выравнивание. Как нарисовать иконку в Figma.
UI-кит
UI-кит и дизайн-система: в чём разница. UI-кит и атомарный дизайн. Что входит в UI-кит. Стили и компоненты.
Создадите лонгрид, к которому нарисуете иконки и полноценный UI-кит
12 тем・3 недели
Введение в Tilda
Tilda
User Flow
Tone of Voice
Как делать сайты
Виды сайтов. Отличие сайта от лендинга. Структура и принципы построения сайтов. Информационная архитектура. User flow.
Введение в Tilda
Начало работы в Tilda. Настройка проектов и базовых блоков. Работа с zero-блоками. Продвинутые инструменты Tilda.
UX-копирайтинг
Дизайнер, пользователь и текст для интерфейса. Tone of Voice. Виды отображения текста. Синтаксис. Сообщения. Плейсхолдеры. Пустые состояния. Работа с UX-редактором.
Создадите с нуля многостраничный сайт на Tilda
10 тем・3 недели
Адаптивный дизайн
Адаптивная вёрстка
Резиновая вёрстка
Mobile First
Адаптивы
Что такое адаптивный дизайн и зачем это нужно. Как дизайнеру выбрать тип вёрстки. Адаптивность и размеры устройств. Mobile First.
Работа с заказчиком
Как выглядит работа на фрилансе, в стартапе и большой компании. Презентация работы. Аргументация решений. Как работать с обратной связью. Дизайн-критика и портфолио-ревью.
Создадите дизайн сайта и мобильную версию к нему
12 тем・4 недели
Анимация
Переход
Скроллинг
Морфинг
Интерактивная анимация
HTML
CSS
JavaScript
Анимация
Задачи анимации в интерфейсе. Основные принципы анимации: переходы, скроллинг, морфинг. Как спланировать анимацию в макете. Как настроить анимацию в Tilda и Figma.
Основы HTML и CSS
Разница между фронтенд- и бэкенд-разработкой. Средства разработки. Позиционирование элементов. Принципы вёрстки.
Взаимодействие с разработкой
Отличие в вёрстке на конструкторе сайтов и с разработчиком. Как подготовить макет для передачи в разработку. Как аргументировать свои решения.
Разработаете макет сайта и анимируете прототип в Figma
Дополнительно・1 неделя
Бонусный модуль про новые технологии и нейросети в работе дизайнера
Узнаете, как новые технологии и нейросети (ChatGPT, Midjourney, DALL·E и другие) могут помочь дизайнеру оптимизировать рабочие процессы и распределять ресурсы эффективнее.
Самостоятельно・4 недели
Выпускной проект
Ближе к концу обучения вы поймёте, в какой роли видите себя в будущем и какие проекты вам ближе. Поэтому мы предложим несколько тем для итоговой работы на выбор. Каждая из них спроектирована так, чтобы вы показали свои навыки в полной мере и сделали актуальный проект — как для себя, так и для рынка.
Со спикером・Каждую неделю
Вебинары для поддержки студентов, разбора сложных тем, Q&A
По желанию
Фриланс-трек
Сможете выйти на рынок фриланса максимально конкурентоспособным и подготовленным. Научитесь вести коммуникацию с заказчиком, формировать стоимость первых работ, оформлять социальные сети, защищать себя от недобросовестных клиентов.
По желанию
Карьерный трек
Сначала составите презентабельное резюме, а потом начнёте активный поиск работы. На этом этапе HR-эксперты помогут подготовиться к собеседованиям и ответят на все вопросы.
+1 спринт・+1 проект・+1 месяц
Расширенный курс «Веб-дизайнер»
У этого курса есть расширенный формат: стоит дороже, но включает в себя больше тем и проектов, — чтобы усилить портфолио и повысить шансы на быстрое трудоустройство.
Дополнительные темы
Уникальный кейс в портфолио
Ещё 1 спринт
Чтобы спроектировать и разработать индивидуальный проект
Проект по вашей идее
С поддержкой ментора получите уникальный кейс для портфолио
Больше навыков, которые помогут найти работу и быстрее вырасти до middle
Поможем найти работу в компании или заказчиков на фрилансе
Если решите устроиться в компанию
Узнаете, как подготовить резюме, которое заметят рекрутеры. Составите портфолио, а опытные дизайнеры дадут по нему обратную связь. Когда начнёте активный поиск, поможем подготовиться к собеседованиям.
Если захотите стать фрилансером
Объясним, как оформить портфолио, сформировать стоимость своих услуг и выйти на рынок. Расскажем, где искать заказы и как общаться с клиентами. Поддержим и ответим на вопросы.
Более 10 000 выпускников уже нашли новую работу
Вот в каких компаниях они работают
Это подтверждено исследованием, которое мы провели вместе с Высшей школой экономики.
*Данные исследования ВШЭ основаны на опыте выпускников Яндекс Практикума на российском рынке труда
Что ещё важно
Сделаем перерыв в учёбе или перенесём дедлайн
Если случится непредвиденное, напишите куратору — он расскажет, как сделать паузу.
Обучение будет на русском языке
Теория, практические задания и вебинары, а ещё чаты с куратором, наставником и другими студентами.
Вернём деньги за оставшиеся дни учёбы, если передумаете
Нужно будет оплатить только время со старта вашего потока. Подробнее об условиях — в 7 пункте оферты.
Выдадим сертификат о переподготовке
Если пройдёте курс до конца и успешно выполните итоговую работу.
Отвечаем на вопросы
Чем задачи веб-дизайнера отличаются от задач дизайнера интерфейсов?
Веб-дизайнер занимается внешним видом сайтов и сервисов. Продумывает структуру и логику макета, подбирает шрифты и цвета. Его основная задача — создать привлекательный и удобный сайт, который запомнится пользователю и выделит компанию среди конкурентов. Подробнее о профессии веб-дизайнера вы можете узнать из нашей статьи.
Дизайнер интерфейсов тоже работает с сайтами и сервисами, но иначе. Он продумывает путь пользователя с учётом технических ограничений и целей бизнеса. Его задача — сделать взаимодействие с сайтом или сервисом удобным и понятным для аудитории.
Я не умею рисовать и не очень творческий человек. Мне подойдёт профессия веб-дизайнера?
Веб-дизайнеру не обязательно уметь рисовать — это навык иллюстратора. Достаточно понять принципы дизайна и освоить дизайнерские программы. В этом вам поможет наш курс. Во время работы над проектами будет развиваться и креативное мышление.
Чтобы познакомиться с задачами веб-дизайнера, пройдите бесплатную вводную часть курса. Если вы убедитесь, что выбранная профессия вам не подходит, — это тоже положительный результат.
Каким требованиям нужно соответствовать?
Вам не понадобятся специальные навыки или опыт — мы обучим всему с нуля. Главное — иметь компьютер и достаточно времени для занятий. Выше можно посмотреть программу, чтобы оценить количество учебного материала и свои возможности.
Смогу ли я найти работу после обучения?
Гарантий нет, но мы верим, что сможете. Работодателям важно, чтобы вы справлялись с реальными задачами, а не просто обладали набором знаний. Мы учим применять знания на практике, а также предлагаем помощь HR-специалистов из нашего карьерного центра. Но вам точно придётся приложить усилия, чтобы найти работу: активно откликаться на вакансии, проходить собеседования, показывать свои проекты и делать тестовые задания.
По данным исследования* Высшей школы экономики, 69% наших выпускников среди тех, кто хотел сменить профессию, начинают новую карьеру после обучения. Больше половины из них — во время учёбы и в первые 2 месяца после выпуска.
* Данные исследования ВШЭ основаны на опыте выпускников Яндекс Практикума на российском рынке труда.
А если я хочу работать в Яндексе?
Некоторые наши студенты работают в сервисах Яндекса, в том числе и в Практикуме. Но с нашей стороны было бы нечестно что-либо гарантировать и завышать ваши ожидания.
Без опыта попасть в крупную IT-компанию возможно, хотя и сложно. Программа составлена так, чтобы вы могли начать карьеру после выпуска и набраться первого опыта. С ним вам будет значительно проще претендовать на позицию в крупных компаниях.
Хорошо, а вы можете помочь с поиском работы?
Да. Вы сможете выбрать:
• Карьерный трек, где студенты составляют резюме, оформляют портфолио и пишут сопроводительные письма, а потом при поддержке HR-экспертов активно ищут работу.
• Или фриланс-трек — здесь вы тоже подготовите портфолио, а ещё узнаете, как искать заказчиков, формировать стоимость услуг и оформлять отношения с клиентами.
Важно помнить, что мы не ищем работу за вас, а помогаем её найти.
Что делать, если я не справлюсь с нагрузкой?
В программе предусмотрены каникулы, во время которых можно отдохнуть или повторить сложные темы.
Если вам понадобится сделать паузу в учёбе или уделить больше времени закреплению материала, напишите своему куратору.
Если не понравится, я могу вернуть деньги?
Да, причём в любой момент. Если обучение в потоке уже началось, придётся оплатить прошедшие дни — но мы вернём деньги за оставшееся время обучения. Более подробно рассказываем об этом в седьмом пункте оферты.
Получу ли я какой-то документ после курса?
Да, вы получите сертификат о переподготовке.
На каком языке проходит обучение?
Всё будет на русском: теория, практические задания и вебинары, а ещё чаты с куратором, наставником и другими студентами.
Давайте поможем
Мы работаем с 12:00 до 21:00 по Астане и связываемся в течение одного дня. Если оставите заявку сейчас, то перезвоним уже в рабочее время.