Веб-дизайнеры создают макеты для всего, что мы видим в интернете: сайтов, приложений, баннеров

Это востребованная профессия: можно работать в компании или брать заказы на фрилансе

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

Освоите веб-дизайн с нуля за 9 месяцев

Получите мощный набор навыков и инструментов

Это сейчас актуально и требуется почти во всех вакансиях.

Figma
Adobe Photoshop
Tilda
HTML
CSS
Типографика
Композиция
Генерация идей

Регулярно обновляем программу, чтобы вы осваивали только актуальное

Есть базовый и расширенный форматы — со вторым быстрее вырастете до уровня middle
4 темы・~8 часов
Бесплатно
Каково это — быть веб-дизайнером
Этот модуль бесплатный, чтобы вы побольше узнали о профессии, примерили на себя роль веб‑дизайнера и решили, хотите ли развиваться в этом направлении. А после бесплатной части выберете подходящий формат курса: базовый или расширенный.
  • Figma
  • Цвет
  • Типографика
  • Композиция
  • Исследования
  • Прототип
  • Базовый и расширенный курс
Введение в профессию
Чем занимается веб‑дизайнер. Необходимые навыки, рабочие задачи и инструменты веб‑дизайнера. Векторы развития в профессии.
Базовые навыки веб‑дизайнера
Работа с цветом. Подбор шрифтов. Построение композиции.
Знакомство с Figma
Что умеет графический редактор Figma. Основные функции Figma для веб‑дизайнера.
Как делать лендинги
Техническое задание. Исследования. Прототип. UI-кит.
Изучите основы 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

Получите сертификат о завершении курса

Очень много практики

Ещё 7 месяцев после курса бесплатно помогаем с поиском работы — для этого у нас целый карьерный центр

10 000+ пользователей Практикума уже нашли новую работу

90% трудоустроились в первые полгода

Это данные исследования ВШЭ — они основаны на опыте пользователей Яндекс Практикума на российском рынке труда

Как устроен курс

YandexGPT помогает проходить курс

Когда в теории что-то непонятно, нейросеть объяснит это другими словами. А в конце каждого модуля подготовит краткий пересказ о самом главном.

Попробуйте любой формат курса бесплатно — выбрать один-единственный можно позже

  •                                        

Что входит в любой формат

  • Ещё можно платить частями Практикуму столько месяцев, сколько идёт курс. Общая стоимость будет меньше, чем в рассрочку от банка
  • Вернём деньги в любой момент за остаток курса,
    если что-то не понравится. Подробности — в 7 пункте оферты

Отвечаем на вопросы

Подойдёт ли мне этот курс?
Для тех, кто сомневается, мы спроектировали бесплатную часть, которая поможет получить ответ на этот вопрос. Если вы убедитесь, что выбранный курс вам не подходит, — это тоже положительный результат.
Можно ли освоить все необходимые навыки за 9 месяцев?
Да, программа рассчитана на это. Но многое зависит и от вас — чтобы пройти курс до конца, нужно уделять ему достаточно времени: изучать теорию, практиковаться в тренажёре и делать проекты.
Каким требованиям нужно соответствовать?
Вам не понадобятся специальные навыки или опыт — будете проходить всё с нуля. Главное — иметь компьютер и достаточно времени. Выше можно посмотреть программу, чтобы оценить количество материала и свои возможности.
Кто будет помогать мне проходить курс?
Все наставники — практикующие специалисты: сотрудники Яндекса и других крупных компаний. Программу составляют опытные методисты, а ещё действующие специалисты Яндекса, Школы анализа данных и других лидеров технологической индустрии.
Как и когда я буду проходить курс?
Курс включает 3 составляющие: теория с закреплением в тренажёре, самостоятельные работы и проекты, онлайн-встречи с наставником. С тренажёром вы можете работать в любое удобное время, а выполнение практики привязано к двух- или трёхнедельному циклу.
Что делать, если я не справлюсь с нагрузкой?
В программе предусмотрен перерыв, во время которого можно отдохнуть или повторить сложные темы.

Если случилось непредвиденное или понадобилось больше времени на закрепление материала, напишите своему куратору. Он поможет перенести дедлайн сдачи проекта или перевестись в более позднюю когорту. На общую стоимость курса это не повлияет.
Смогу ли я найти работу после курса?
Гарантий нет, но мы верим, что сможете. Работодателям важно, чтобы вы справлялись с реальными задачами, а не просто обладали набором знаний. После курса вы сможете применять знания на практике, а также мы предлагаем помощь HR-специалистов из нашего карьерного центра. Но вам точно придётся приложить усилия, чтобы найти работу: активно откликаться на вакансии, проходить собеседования, показывать свои проекты и делать тестовые задания.

По данным исследования* Высшей школы экономики, 69% пользователей Яндекс Практикума среди тех, кто хотел сменить профессию, начинают новую карьеру после курса. Больше половины из них — во время курса и в первые 2 месяца после его окончания.

* Данные исследования ВШЭ основаны на опыте пользователей Яндекс Практикума на российском рынке труда.
А если я хочу работать в Яндексе?
Некоторые участники наших курсов работают в сервисах Яндекса, в том числе и в Практикуме. Но с нашей стороны было бы нечестно что‑либо гарантировать и завышать ваши ожидания.

Без опыта попасть в крупную IT-компанию возможно, хотя и сложно. Программа составлена так, чтобы вы могли начать карьеру после курса и набраться первого опыта. С ним вам будет значительно проще претендовать на позицию в крупных компаниях.
Хорошо, а вы можете помочь с поиском работы?
Да. Вы сможете выбрать:

• Карьерный трек, где участники курса составляют резюме, оформляют портфолио и пишут сопроводительные письма, а потом при поддержке HR-экспертов активно ищут работу.
• Или фриланс-трек — здесь вы тоже подготовите портфолио, а ещё узнаете, как искать заказчиков, формировать стоимость услуг и оформлять отношения с клиентами.

Важно помнить, что мы не ищем работу за вас, а помогаем её найти.
Если не понравится, я могу вернуть деньги?
Конечно. Если курс ещё не начался, вернём всю сумму. Если уже начался, придётся оплатить прошедшие дни со старта вашей первой когорты — но мы вернём деньги за остаток курса. Более подробно рассказываем об этом в 7 пункте оферты.
Получу ли я какой-то документ после курса?
Да, вы получите сертификат о завершении курса.
Как можно оплатить?
Банковской картой: внести всю сумму сразу или платить ежемесячно.

Ежемесячные платежи работают так: вы вносите первую оплату, и в этот момент привязывается карта. С этой карты автоматически будут списываться следующие платежи каждые 30 календарных дней. Например, оплатили 25 марта — следующий платёж пройдёт 24 апреля. Курс будет стоить меньше, если оплатить его сразу целиком.

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

Чтобы вам было проще сориентироваться, мы указываем примерную стоимость в долларах США, но списание будет в казахстанских тенге, а конвертация — по курсу вашего банка.

Давайте поможем

Мы работаем с 09:00 до 18:00 по минскому времени и связываемся в течение одного дня. Если оставите заявку сейчас, то перезвоним уже в рабочее время.