Веб-дизайнер с нуля [Бруноям]

Складчина: Веб-дизайнер с нуля [Бруноям]

2026-01-15_010715.jpg

Кто такой веб-дизайнер и как им стать
Веб-дизайнер — это специалист, который создает дизайн сайтов и приложений, которыми будет удобно пользоваться. Чтобы начать карьеру в профессии, нужно знать, что такое UX/UI-дизайн, освоить все функции Figma и понимать веб-аналитику.
Это востребованная профессия в IT и digital — компаниям постоянно нужны макеты сайтов и приложений. Освоить веб-дизайн онлайн с нуля можно на нашем курсе

Сколько зарабатывает веб-дизайнер
Зарплата веб-дизайнера зависит от опыта, региона, формата работы и индустрии. Средняя зарплата специалиста в России — 106 000 рублей. На старте в профессии доход начинается от 50 000 рублей. Вакансий много, фриланс и удалёнка — обычная практика. Веб-дизайнеры востребованы и находят проекты независимо от опыта.

Для кого этот курс
Для начинающих веб-дизайнеров
Освоите навыки, которые нужны работодателям в 2025 году: Figma, UX-исследования, анимация, прототипы и другие инструменты веб‑дизайна
Для дизайнеров других направлений
Попробуете себя в новой сфере, научитесь искать визуальные решения в работе над сайтами и приложениями, попрактикуетесь на реальных проектах​
Чему вы научитесь на курсе

  • Прототипирование и дизайн лендингов в Figma и Tilda
  • Сборка и настройка сайтов на Tilda
  • Подготовка графики для веба в Photoshop
  • Поиск и оформление референсов, создание мудбордов
  • Проведение конкурентного анализа и разработка дизайн-концепций
  • Тестирование сайтов
  • Подготовка макетов к передаче в разработку

Программа курса
Бонусный курс Бесплатный курс «Учись учиться»
1 модуль. Введение в UX/UI-дизайн
2 модуль. Погружение в UX
3 модуль. Интерфейс Figma и основные инструменты
4 модуль. Особенности работы с графическими элементами в Figma
5 модуль. Профессиональные инструменты Figma
6 модуль. Дополнительные инструменты Figma
7 модуль. Композиция
8 модуль. Колористика
9 модуль. Типографика
10 модуль. Работа с изображениями
11 модуль. Аналитика, референсы, ТЗ
12 модуль. Прототипирование и дизайн
13 модуль. Адаптивный дизайн, анимация и передача проекта в разработку
14 модуль. Введение в Tilda
15 модуль. Дальнейший путь
Дополнительный курс — Adobe Photoshop для веб-дизайнеров
Подарочный модуль. Карьерный трек для выхода на рынок труда

Спойлер: Подробная программа Бонусный курс Бесплатный курс «Учись учиться»
Это короткий, интерактивный и супер-полезный курс, в котором вы узнаете, как ставить четкие цели, вырабатывать ту самую мотивацию, а главное — учиться системно. Материалы помогут не только в обучении, но и в работе

1 модуль. Введение в UX/UI-дизайн

  • Что такое дизайн и кто такой дизайнер?
  • Основные задачи и навыки UX/UI-дизайнера
  • Различия между UX и UI
  • Типы сайтов и их элементы
  • Этапы работы над проектом
  • Роли в команде

В этом модуле вы познакомитесь с основами профессии UX/UI-дизайнера, узнаете, чем отличаются UX и UI, и разберёте ключевые этапы работы над цифровыми продуктами. Поймёте, из каких элементов состоит сайт и какие типы интерфейсов бывают. Узнаете, как строится процесс разработки проекта и кто участвует в команде

2 модуль. Погружение в UX

  • Основные понятия: UX, UI, Usability
  • Конкурентный анализ
  • Работа с целевой аудиторией
  • Концепция Jobs to Be Done и составление пользовательских историй
  • Пользовательский сценарий (User Flow)
  • Customer Journey Map
  • Принципы и законы UX

В этом модуле вы познакомитесь с ключевыми понятиями UX, UI и Usability, научитесь проводить конкурентный анализ и сегментировать целевую аудиторию. Освоите методы JTBD и User Story для понимания потребностей пользователей. Научитесь проектировать User Flow и CJM, чтобы визуализировать взаимодействие с продуктом. Изучите основные законы UX и принципы создания удобных интерфейсов, включая эвристики Нильсена и работу с UI-китами

3 модуль. Интерфейс Figma и основные инструменты

  • Знакомство с программой Figma
  • Основные инструменты Figma
  • Работа с Frame
  • Создание и настройка простых фигур
  • Инструменты Pen и Pencil для сложных фигур
  • Булевы операции

В этом модуле вы познакомитесь с интерфейсом Figma, научитесь работать с основными инструментами, создавать и настраивать фреймы, а также освоите создание как простых, так и сложных фигур с помощью векторных инструментов. Узнаете, как экспортировать готовые работы и применять булевы операции для профессионального дизайна

4 модуль. Особенности работы с графическими элементами в Figma

  • Работа с изображениями
  • Основы работы со шрифтами
  • Настройка сетки для макета

В этом модуле вы научитесь профессионально работать с графическими элементами в Figma: добавлять и редактировать изображения, применять маски и эффекты, настраивать шрифты и создавать структурированные макеты с помощью сеток

5 модуль. Профессиональные инструменты Figma

  • Работа со стилями и создание UI-kit
  • Основы Auto Layout
  • Компоненты и их варианты

В этом модуле вы научитесь систематизировать дизайн-проекты с помощью UI-kit, освоите Auto Layout для создания динамичных интерфейсов и изучите работу с компонентами и их вариантами для быстрого внесения изменений в проекты

6 модуль. Дополнительные инструменты Figma

  • Работа с FigJam
  • Инструменты прототипирования, анимации и Figma Mirror
  • Плагины Figma: обзор и применение

В этом модуле вы познакомитесь с дополнительными инструментами Figma, которые расширят ваши возможности в дизайне. Научитесь работать с FigJam для командной работы, освоите прототипирование и анимацию интерфейсов, а также узнаете, как использовать плагины для ускорения и автоматизации задач

7 модуль. Композиция

  • Основы композиции
  • Правила золотого сечения и третей
  • Композиционный центр
  • Баланс и композиционный вес
  • Инструменты управления внимание
  • Принципы гештальта в дизайне
  • Улучшение восприятия через группировку и выравнивание элементов

В этом модуле вы поймете, как создавать гармоничные и сбалансированные дизайны, используя законы композиции. Научитесь управлять вниманием пользователя с помощью правил золотого сечения, третей и принципов гештальта. Узнаете, как применять контраст, баланс и группировку для улучшения восприятия ваших работ

8 модуль. Колористика

  • Теория цвета и её свойства
  • Цветовой круг и цветовые схемы
  • Психология восприятия цвета
  • Подготовка цветовой палитры для проекта

В этом модуле вы познакомитесь с основами теории цвета и научитесь работать с цветовыми моделями (RGB, CMYK, HSB). Узнаете, как использовать цветовой круг Иттена и создавать гармоничные цветовые схемы. Поймёте, как цвет влияет на эмоции и восприятие, и научитесь учитывать психологические и культурные аспекты при выборе палитры. Освоите практические навыки подготовки цветовой палитры для реальных проектов

9 модуль. Типографика

  • Введение в типографику
  • Основные определения и классификация
  • Практические советы по типографике
  • Сервисы, лицензии и плагины для работы со шрифтами

В этом модуле вы познакомитесь с основами типографики и её ролью в дизайне. Узнаете ключевые термины: шрифт, гарнитура, кернинг и интерлиньяж. Научитесь настраивать параметры текста для лучшей читаемости. Разберёте классификацию шрифтов и правила их сочетания. Освоите инструменты для работы с типографикой, включая Figma-плагины и сервисы подбора шрифтов

10 модуль. Работа с изображениями

  • Важность изображений на сайте и их влияние на восприятие контента
  • Как правильно подобрать изображение
  • Бесплатные и платные ресурсы для поиска фото и иллюстраций
  • Роль иконок в интерфейсе и их функции

В этом модуле вы научитесь подбирать изображения, соответствующие стилистике проекта и целевой аудитории. Узнаете, где искать качественный визуальный контент с соблюдением авторских прав. Освоите работу с иконками и иллюстрациями, включая их интеграцию в Figma

11 модуль. Аналитика, референсы, ТЗ

  • Брифинг и работа с техническим заданием (ТЗ)
  • Сбор референсов и создание мудбордов
  • Аналитика и исследование конкурентов и целевой аудитории

В этом модуле вы научитесь проводить брифинг с клиентом и составлять ТЗ для проекта. Освоите методы работы с референсами и мудбордами для вдохновения и визуализации идей. Проведёте аналитику: изучите конкурентов, целевую аудиторию и спроектируете CJM для улучшения пользовательского опыта

12 модуль. Прототипирование и дизайн

  • Прототипирование и его цели
  • Виды прототипов
  • Инструменты для разработки прототипов
  • Разработка дизайн-концепции
  • Этапы создания макета сайта
  • Подбор контента и ресурсов (изображения, иллюстрации, иконки)

В этом модуле вы узнаете, как создавать прототипы разного уровня детализации и выбирать подходящие инструменты. Научитесь разрабатывать дизайн-концепцию, подбирать цветовую гамму, шрифты и контент для сайта. Освоите этапы проектирования макета и адаптации под мобильные устройства

13 модуль. Адаптивный дизайн, анимация и передача проекта в разработку

  • Анимация в Figma
  • Подготовка проекта к передаче разработчикам

В этом модуле вы разберётесь в принципах адаптивного дизайна и научитесь проектировать интерфейсы для разных устройств. Освоите создание анимаций в Figma, чтобы оживлять интерфейсы и улучшать пользовательский опыт. Узнаете, как правильно готовить и передавать макеты разработчикам, чтобы избежать ошибок при реализации

14 модуль. Введение в Tilda

  • Знакомство с Tilda: интерфейс, возможности и примеры сайтов
  • Быстрый старт: работа с шаблонами и стандартными блоками
  • Zero Block: создание уникальных дизайнов и сложных структур
  • Адаптивность: настройка под разные устройства и импорт из Figma
  • Публикация сайта: SEO, аналитика, формы и передача клиенту

В этом модуле вы познакомитесь с платформой Tilda, научитесь создавать сайты с нуля — от выбора шаблона до кастомизации в Zero Block. Узнаете, как адаптировать дизайн под мобильные устройства, настраивать SEO и аналитику, а также правильно передавать проект заказчику

15 модуль. Дальнейший путь

  • Работа с клиентом: коммуникация, формирование ожиданий, оплата, презентация проектов
  • Карьера дизайнера: создание и оформление портфолио, поиск работы
  • Развитие дизайнера: пути роста, практика, рекомендации

В этом модуле вы научитесь выстраивать профессиональное взаимодействие с клиентами: от коммуникации до презентации готовых проектов. Узнаете, как создать сильное портфолио и где искать работу в дизайне. Разберетесь, как развиваться в профессии, практиковаться и находить вдохновение

Дополнительный курс — Adobe Photoshop для веб-дизайнеров
Познакомитесь с основными инструментами Photoshop, необходимыми для веб-дизайна. Научитесь работать со слоями, масками, стилями и подготавливать макеты к печати.

  • Введение Adobe Photoshop
  • Основы интерфейса и работа с файлами
  • Работа со слоями, масками и стилями
  • Цветокоррекция и ретушь фотографий
  • Создание векторной графики и типографики
  • Подготовка макетов для печати и автоматизация процессов
  • Создание GIF-анимации

Подарочный модуль. Карьерный трек для выхода на рынок труда

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

Поймёте возможности рынка и выберете варианты на основе интересов и опыта. Узнаете, как описать свои достижения с учётом всех нюансов. Научитесь интересно рассказывать о себе и своём опыте

Тариф: Базовый
Цена: 39 900 ₽