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

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

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

Освоите профессию с нуля за 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 выпускников уже нашли новую работу

Вот в каких компаниях они работают

Это подтверждено исследованием, которое мы провели вместе с Высшей школой экономики.

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

Как устроена учёба

YandexGPT помогает учиться

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

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

  •                                        

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

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

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

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

Дизайнер интерфейсов тоже работает с сайтами и сервисами, но иначе. Он продумывает путь пользователя с учётом технических ограничений и целей бизнеса. Его задача — сделать взаимодействие с сайтом или сервисом удобным и понятным для аудитории.
Я не умею рисовать и не очень творческий человек. Мне подойдёт профессия веб-дизайнера?
Веб-дизайнеру не обязательно уметь рисовать — это навык иллюстратора. Достаточно понять принципы дизайна и освоить дизайнерские программы. В этом вам поможет наш курс. Во время работы над проектами будет развиваться и креативное мышление.

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

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

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

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

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

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

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

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

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