Чем занимаются веб-дизайнеры

Создают дизайн сайтов и сервисов

Сначала изучают аудиторию и прорабатывают логику веб-страниц. Потом подбирают шрифты, цвета и иллюстрации, создают макеты.

Эта профессия на стыке творчества и IT. Веб-дизайнер должен разбираться во всём, что касается создания сайтов: UX, UI, адаптивности, взаимодействии с командой разработки.

При этом можно работать в компании или на фрилансе, в офисе или удалённо из любой точки мира.

Главное о профессии

Инструменты и методы, которые нужно знать

Всё это вы освоите на нашем курсе — даже если вы не очень творческий человек и не умеете рисовать.

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

Чему вы научитесь за 9 месяцев на курсе

  • Понимать визуальный язык и следить за трендами в дизайне
  • Выстраивать композицию, работать с цветом и шрифтами
  • Создавать или подбирать для сайтов иконки и анимацию
  • Анализировать целевую аудиторию и конкурентов
  • Проектировать взаимодействие пользователей с интерфейсом
  • Разбираться в вёрстке сайтов и веб-приложений
  • Адаптировать дизайн под разные гаджеты
  • Взаимодействовать с заказчиками и командой
  • Аргументировать решения и оценивать свою работу

Как проходит обучение

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

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

Программа курса

Составили программу с учётом требований работодателей: будете учить только то, что нужно для решения настоящих задач веб-дизайнера
6 тем・~3 часа
Бесплатно
Кто такой веб-дизайнер
Это бесплатный модуль: узнаете, какие задачи решает веб-дизайнер и в каких направлениях он может развиваться, и поймёте, подходит ли вам эта профессия
  • Типы сайтов
  • Пользовательский интерфейс
  • Пользовательский опыт
  • Исследования
  • Сценарий
Введение в профессию
Поймёте, чем занимается веб-дизайнер, какие навыки и инструменты нужны ему в работе и как можно развиваться в этой профессии
Задачи веб-дизайнера
Узнаете про все этапы работы над сайтом: от исследования и прототипирования до разработки и запуска
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 недели
Выпускной проект
Ближе к концу обучения вы поймёте, в какой роли видите себя в будущем и какие проекты вам ближе. Поэтому мы предложим несколько тем для итоговой работы на выбор. Каждая из них спроектирована так, чтобы вы показали свои навыки в полной мере и сделали актуальный проект — как для себя, так и для рынка.
Карьерные продукты・3 месяца
Фриланс-трек
Цель программы — помочь студенту выйти на рынок фриланса максимально конкурентоспособным и подготовленным. Вы научитесь вести коммуникацию с заказчиком, формировать стоимость первых работ, оформлять социальные сети, защищать себя от недобросовестных клиентов.
Карьерные продукты・7 месяцев
Карьерный трек
Здесь наша команда HR-экспертов поможет подготовить всё необходимое для эффективного поиска работы. Вы научитесь составлять резюме, писать сопроводительные письма, а также проходить собеседования. Вам предстоит проделать весь путь: от поиска вакансий и первого тестового задания до интервью и приглашения на работу.
Со спикером・Каждую неделю
Вебинары для поддержки студентов, разбора сложных тем, Q&A

Более 10 000 выпускников уже нашли новую работу

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

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

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

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

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

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

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

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

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

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

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

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

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

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