Курс веб-дизайна в Figma: от новичка до первого проекта в портфолио

Что вы будете уметь после курса

• Устанавливать и настраивать Figma, работать с фигурами, пером, текстом, слоями и компонентами
• Выстраивать композицию макета по правилам выравнивания, отступов и визуальной иерархии
• Собирать интерфейс методом атомарного дизайна — от простых неделимых элементов до готовых блоков сайта
• Настраивать адаптивность одного макета под десктоп, планшет и мобильный телефон через сетки и привязки Constraints
• Готовить дизайн к передаче верстальщику — собирать Style Guide со стилями цвета, шрифта и состояниями интерактивных элементов
• Оформлять и публиковать кейс проекта в портфолио на Behance

Кому подойдёт курс

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

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

• Практика построена вокруг одного сквозного проекта — лендинга по техническому заданию с условным бюджетом — Вместо набора несвязанных упражнений собирается цельный проект, который можно показать в портфолио
• Перед версткой макета разбираются подготовительные этапы работы с заказчиком: брифование, построение аватара целевой аудитории по шести вопросам, анализ сайтов-конкурентов — Понимание, как ставить задачу дизайну до начала самой отрисовки макета
• Отдельное занятие отведено под построчное копирование готового чужого макета — Наработка насмотренности через разбор решений опытного дизайнера — с прямым объяснением, что это тренировочное упражнение, а не шаблон для реальной работы
• Курс использует методику атомарного дизайна — от атома к молекуле, организму и шаблону — Понятный способ собирать интерфейс от простых неделимых элементов к готовым блокам сайта
• Один макет доводится до трёх адаптивных версий — десктоп, планшет, мобильный телефон — на основе единой системы сеток и привязок Constraints — Готовый принцип адаптации любого макета под разные размеры экрана

Что понадобится

• Figma — десктопное приложение или браузерная версия
• Плагины Figma для работы с фото, иконками и текстом-заполнителем — Unsplash, Content Reel, Iconify
• Техническое задание (бриф) на лендинг — как основа сквозного практического проекта

Почему самому обычно не выходит

Без системного разбора интерфейса Figma и правил веб-дизайна освоение программы превращается в набор разрозненных приёмов: расстановка объектов на глаз, случайный подбор шрифтов и картинок из первой выдачи поиска.

Отдельная сложность — перевести один макет в три адаптивные версии: без понимания системы сеток и привязок Constraints десктопный дизайн приходится пересобирать заново под планшет и телефон, вместо того чтобы перенести его по единому принципу.

Работа с заказчиком добавляет ещё один слой: без брифа, аватара целевой аудитории и анализа конкурентов дизайн получается оторванным от задачи, а без понимания этапов сдачи проекта и правил предоплаты фрилансер рискует финансово на каждом заказе.

Что изменится

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

1. Знакомство с Figma Установка программы, разбор интерфейса, инструментов, фигур, слоёв, компонентов и стилей на практических примерах.
2. Теория веб-дизайна и атомарный дизайн Разбор типографики, выравнивания, иерархии и подбора изображений, а также сборка интерфейса методом атомарного дизайна — от атома до готового блока.
3. Дизайн лендинга по техническому заданию Брифование, определение целевой аудитории, анализ конкурентов, прототип, визуальный концепт и адаптивный макет для десктопа, планшета и телефона, подготовленный к передаче верстальщику.
4. Оформление кейса и публикация в портфолио Сборка презентации проекта и публикация готового кейса на Behance, а также разбор организации работы фрилансера с заказчиком.

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

60 уроков · 8 модулей · 12 часов 1 минута видео · которые проведут от установки Figma до адаптивного макета лендинга, оформленного в кейс на Behance.

• Инструменты и интерфейс Figma 28 уроков

  Установка программы, работа с фигурами, пером, текстом, масками, компонентами, стилями, сетками и привязками Constraints — база для дальнейшей работы над макетами.

  • Установка и первые шаги в Figma 5 уроков

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

    • Скачать Figma и зарегистрироваться в программе2:29

      Урок показывает, как скачать и установить десктопный клиент Figma с официального сайта или пользоваться браузерной версией на Linux, зарегистрироваться через Google-аккаунт или почту и создать первый документ кнопкой New File.

    • Структура файлов11:25

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

    • Обзор интерфейса программы4:40

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

    • Сохранение и передача файла6:58

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

    • Горячие клавиши1:38

      Урок показывает, где в Figma открыть полный список горячих клавиш по сочетанию Ctrl+Shift+? или через меню помощи, и предлагает отдельный сокращённый список часто используемых комбинаций на русском языке.

  • Фигуры, заливки и текст 11 уроков

    Создание и настройка фигур — прямоугольников, овалов, полигонов и звёзд, работа с обводкой, эффектами, заливкой и градиентом, вставка изображений, построение масок, векторное рисование пером и настройка текстовых блоков.

    • Move tool, Scale tool1:51

      Урок сравнивает Move Tool и Scale Tool на примере формы с полями ввода: при изменении размера Move Tool деформирует внутренние элементы непропорционально, а Scale Tool масштабирует их пропорционально во всех направлениях.

    • Выравнивание объектов4:52

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

    • Прямоугольник + овал12:20

      Урок показывает создание прямоугольника и овала горячими клавишами R и O, пропорциональное построение с Shift и Alt, скругление углов через контрольные точки и векторное меню, а также ввод математических операций в панели координат и размеров.

    • Полигон + Звезда3:59

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

    • Обводка3:34

      Урок разбирает настройки обводки фигуры: положение линии (inside, center, outside), толщину и угол скругления её концов, параметры пунктира с капами, добавление стрелок и заливку обводки цветом или изображением.

    • Эффекты5:59

      Урок описывает четыре типа эффектов в инспекторе Figma — ниспадающую тень (Drop Shadow), внутреннюю тень (Inner Shadow), размытие слоя (Layer Blur) и размытие фона (Background Blur) — с настройками смещения, размытия, прозрачности и цвета, которые можно комбинировать на одной фигуре.

    • Заливка + градиент9:21

      Урок разбирает панель заливки: сплошной цвет с выбором в палитре, пипеткой или в форматах RGBA, HSL и HEX, а также линейный, радиальный, ангулярный и алмазный градиент с настройкой оси и контрольных точек.

    • Изображения11:44

      Урок показывает загрузку изображений в Figma перетаскиванием, через Place Image или вставкой из буфера обмена, а также режимы отображения фото в фигуре — Fill, Fit, Crop и Tile — и базовую цветокоррекцию, поскольку изображение технически является слоем заливки.

    • Маска5:20

      Урок объясняет создание маски из двух объектов, где нижний слой задаёт видимую область для верхнего, объединение нескольких масок и сборку составной карточки с отдельными слоями для заливки, изображения и обводки поверх результата маскирования (mask group).

    • Перо17:42

      Урок показывает построение векторных фигур инструментом «перо» с направляющими для плавных форм, редактирование точек и линий через векторное меню и Band Tool, заливку отдельных областей Paint Basket и правку готовых SVG-иконок на примере батареи и конверта.

    • Инструмент Текст15:39

      Урок разбирает три способа создания текста, поведение текстового блока в режимах resizing (фиксированный размер, автоширина, автовысота), типографические настройки шрифта и межстрочного расстояния, а также применение заливки, обводки, теней и градиента к тексту как к слою.

  • Группы, фреймы и стили 7 уроков

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

    • Группа9:46

      Урок объясняет назначение группы для порядка в панели слоёв, объединение и разгруппировку сочетаниями Ctrl+G и Ctrl+Shift+G, отличие обычного выравнивания от смарт-выравнивания вложенных объектов, а также разное поведение текста, обводки и фигур при масштабировании через Move Tool или Scale Tool.

    • Frame19:09

      Урок сравнивает фрейм с группой: фрейм создаётся под готовый размер устройства или растягиванием, имеет собственный фон и независимый от содержимого размер, поддерживает constraints и Layout Grid, а свойство ClipContent управляет видимостью содержимого за его границами.

    • Булевы группы4:38

      Урок показывает булевы операции над фигурами — Union объединяет слои, Subtract вырезает верхним слоем часть нижнего, Intersect оставляет область пересечения, Exclude делает её прозрачной — и операцию Flatten, которая превращает результат в отдельный векторный объект без доступа к исходным слоям.

    • Эффекты наложения4:30

      Урок разбирает режимы наложения слоёв в инспекторе и панели палитры Figma — Darken, Multiply, Color Burn, Lighten, Screen, Color Dodge, Overlay, Soft Light, Hard Light, Difference, Exclusion и группу Hue/Saturation/Color/Luminosity — и их влияние на сочетание цветов верхнего и нижнего слоя.

    • Экспорт4:01

      Урок объясняет способы поделиться работой из Figma: по ссылке через Share без права редактирования, сохранением файла в формате .fig и экспортом отдельного слоя или фрейма в PNG или SVG с выбором масштаба, суффикса и отдельного ID, а также выделением произвольной области инструментом Slice.

    • Плагины9:52

      Урок показывает раздел плагинов Figma — поиск, установку кнопкой Install и запуск через контекстное меню или главное меню программы — и на примерах плагинов Unsplash и Content Reel демонстрирует подстановку изображений из фотостока и случайных данных (имена, номера телефонов, аватарки) в макет.

    • Стили15:08

      Урок объясняет четыре типа стилей Figma — цвета, эффекта, текста и сетки (только для фреймов), — их создание из уже применённых настроек, именование через слэш для вложенных папок, автоматическое обновление всех элементов при правке стиля через Edit Style и публикацию набора стилей в библиотеку для других файлов.

  • Привязки, сетки и компоненты 5 уроков

    Настройка привязок Constraints и системы сеток для адаптации макета под изменение размеров фрейма, а также создание компонентов и работа с наследованием их свойств.

    • Constraints (Ограничения/привязки) Часть 118:49

      Урок объясняет привязку объектов к краям родительского фрейма через Constraints, которая работает только внутри фрейма, и показывает на примере шапки мобильного приложения настройку привязок по горизонтали для времени, иконок батареи, статус-бара и тулбара с проверкой на пресетах разных мобильных устройств.

    • Constraints (Ограничения/привязки) Часть 213:39

      Урок продолжает тему Constraints вертикальной привязкой объектов внутри карточки пользователя: подложке задаётся scale по обеим осям, фотографии — привязка вверх-вниз, а нижнему блоку — привязка по низу с растяжением; текст и фотография объединяются в общий фрейм и получают выключку по нижнему краю, чтобы корректно адаптироваться при изменении высоты.

    • Сетки. Часть 14:12

      Урок разбирает настройку сетки (layout grid) для фрейма: базовую сетку в клетку с заданным шагом и цветом, а также колоночную сетку с типами поведения при изменении ширины фрейма — Stretch (растяжение колонок с настройкой Margin и Gutter), Center, Left и Right с фиксированной шириной и отступом (Offset).

    • Сетки. Часть 2 + ДЗ13:47

      Урок показывает совместную работу привязок Constraints и системы колонок в адаптивном макете: при включённой сетке привязки вложенных элементов крепятся к краям колонок, а разным частям макета, например футеру, назначается собственная система колонок и отступов.

    • Компоненты и наследование свойств7:29

      Урок объясняет связь между мастер-компонентом и его копиями (инстансами): копии наследуют стили, текст и Layout Grid мастера, пока конкретное свойство не изменено вручную, размер копии можно менять независимо, а привязки Constraints и перемещение вложенных объектов доступны только в мастере; функция Detach Instance разрывает связь копии с мастером.

• Атомарный дизайн на практике 4 урока

  Сборка интерфейса методом атомарного дизайна — от атомов и молекул до организмов — на примере построчного копирования готового макета, а также разбор источников вдохновения для дизайнера.

  • Основа атомарного дизайна12:40

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

  • Создание атомов и молекул8:55

    Урок показывает сборку молекул — кнопки, формы ввода и чекбокса — из атомов текста, шейпа и иконки, а затем объединение этих молекул в организм — шаблон формы с полями ввода, чекбоксом согласия и кнопкой отправки.

  • Создание организмов1:02:14

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

  • Откуда черпать вдохновение7:03

    Урок разбирает источники вдохновения для веб-дизайнера: конкурсные сайты дизайнерских премий, площадки дизайнерских сообществ и торговые площадки готовых шаблонов для CMS — и особенности каждой группы.

• Типографика, изображения и композиция 7 уроков

  Базовые понятия типографики, источники и метод подбора изображений через таблицу ассоциаций, а также принципы выравнивания объектов, правило внутреннего и внешнего и построение визуальной иерархии на странице.

  • Типографика24:35

    Урок систематизирует базовые понятия типографики: группы шрифтов (с засечками, без засечек, рукописные, акцидентные), кегль, интерлиниаж, трекинг и выключку текста. Даются практические ориентиры по количеству шрифтов в проекте, диапазону кегля и способам различать текстовые блоки без смены гарнитуры.

  • Типографика практика + ДЗ9:06

    Практическое занятие по типографике на примере текстового блока из названия, автора и издательства: размером, начертанием, цветом и регистром выстраивается визуальная иерархия между элементами, показана подложка под текстом через операцию Subtract. Домашнее задание — оформить несколько текстовых блоков минимум в двух вариантах, используя только один шрифт.

  • Где брать картинки для веб-дизайна9:14

    Урок разбирает источники изображений для веб-дизайна: поиск в Google с фильтрами по размеру, цвету и правам использования, а также платные и бесплатные фотостоки на примере Shutterstock и Unsplash. Поясняется разница в лицензионных условиях между учебными и коммерческими проектами.

  • Как подбирать картинки для проектов8:02

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

  • Выравнивание объектов7:54

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

  • Правило внутреннего и внешнего7:08

    Урок формулирует правило внутреннего и внешнего: расстояние внутри объекта всегда меньше расстояния до соседних объектов, и это соблюдается на всех уровнях — от букв и слов до параграфов и карточек интерфейса. Показано, как плотный интерлиньяж и малая разрядка мешают читаемости текста.

  • Иерархия в веб дизайне7:42

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

• Дизайн-концепция сайта 2 урока

  Разбор видов дизайн-концепции — от блочной модели до сплит-скрина — и практическая сборка собственного концепта промо-сайта по референсу: подбор шрифта, цветов, УТП и композиции.

  • Что такое дизайн концепт6:49

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

  • Практика создания дизайн концепта сайта36:16

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

• Дизайн лендинга по техническому заданию 15 уроков

  Полный цикл работы над сквозным проектом — от технического задания, брифа и анализа аудитории и конкурентов до прототипа, визуального концепта, адаптивных версий для десктопа, планшета и телефона, модальных окон и Style Guide, готового к передаче верстальщику.

  • Техническое задание, аудитория и конкуренты 4 урока

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

    • Техническое задание проекта6:43

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

    • Порядок выполнения проекта8:49

      Урок описывает путь сайта от идеи заказчика через анализ ниши, дизайн, копирайт и вёрстку до запуска и дальнейшей поддержки, показывая, на каких этапах участвует дизайнер. Разбирается роль копирайтера, верстальщика, специалиста по SEO и менеджера в общем процессе.

    • Определение целевой аудитории6:20

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

    • Аналитика конкурентов8:58

      Разбирается методика анализа сайтов конкурентов, найденных в Google по ключевому запросу: на примерах фиксируются сильные стороны дизайна, такие как чёткое УТП и заметная кнопка, и слабые, такие как неструктурированный текст и отсутствие иконок соцсетей, без копирования решений.

  • Прототип и адаптивный дизайн 8 уроков

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

    • Создание прототипа сайта. Теория2:53

      Прототип определяется как схематичный чёрно-бело-серый скелет интерфейса будущего сайта, предшествующий чистовому дизайну и фиксирующий расположение блоков и информации. Названы инструменты прототипирования — Figma, Axure и Marvel App.

    • Создание прототипа сайта. Практика31:41

      Показана сборка прототипа одностраничного лендинга в Figma по техническому заданию — от колоночной сетки и шапки до главного экрана, информационных блоков, карточек тарифов и формы подписки, с соблюдением иерархии заголовков и отступов.

    • Создание концепта сайта39:45

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

    • Создаем блоки с информацией24:37

      Оформляются два информационных блока лендинга — карточки с иконками и подписями и блок текст+иллюстрация с коллажем иконок соцсетей — с настройкой теней, цветовых стилей и точных отступов по правилу внутреннего и внешнего.

    • Создаем блок тарифов, форму связи и футер20:49

      Собираются блок с тремя карточками тарифов, включая выделенный активный тариф на тёмной подложке, форма ввода email и футер лендинга — так завершается итоговый десктопный дизайн.

    • Работа со слоями. Доработка дизайна13:01

      Разбирается наведение порядка в панели слоёв готового десктопного дизайна лендинга: логичное именование фреймов и групп на английском языке, объединение повторяющихся блоков в компоненты и мелкие визуальные правки перед переходом к адаптивным версиям.

    • Адаптив дизайна под планшет20:11

      Показано создание адаптивной версии лендинга под планшет на основе десктопного макета: перенос блоков с сеткой Bootstrap, несколько способов адаптации первого экрана и настройка Constraints для карточек тарифов.

    • Создание мобильной версии дизайна18:12

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

  • Модальные окна, Style Guide и сдача проекта 3 урока

    Сборка десктопного и мобильного модальных окон, подготовка Style Guide со стилями цвета, шрифта и состояниями интерактивных элементов, а также разбор этапов работы фрилансера с заказчиком и правил предоплаты.

    • Создание модальных окон + ДЗ13:02

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

    • Готовим работу к верстке. Стайл Гайд + ДЗ5:22

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

    • Этапы работы над проектом на фрилансе5:12

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

• Кейс проекта и портфолио 3 урока

  Разбор реальных кейсов на Behance, сборка презентации собственного проекта — палитра, типографика, мокапы мобильной версии — и публикация готового кейса в портфолио.

  • Обзор кейсов5:34

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

  • Оформление кейса по лендингу19:14

    Практическое построение презентации кейса по лендингу в Figma: фрейм с сеткой, вставка скриншота макета с тенью и подсветкой, блоки описания проекта, типографики и цвета на основе Style Guide. Показано, как оформить показ страниц лендинга и добавить мокапы мобильной версии, включая переход в изометрическое положение через плагин.

  • Презентация кейса5:30

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

• Дальнейшее развитие в профессии 1 урок

  Разбор способов дохода веб-дизайнера помимо заказов — ведение профиля в LinkedIn и продажа готовых макетов и UI-китов на специализированных площадках.

  • Неочевидные способы дохода для веб-дизайнера12:36

    Урок рассказывает о дополнительных источниках дохода для веб-дизайнера помимо поиска заказов: ведение профиля в LinkedIn и продажа готовых макетов и UI-китов на специализированных площадках. Публикация макета может привлечь предложения от разработчиков превратить его в тему для CMS или выкупить права на дизайн, а UI-киты и дизайн-системы продаются как более сложный вид продукта. Такие публикации также рассматриваются как способ получить предложения о сотрудничестве от зарубежных студий и разработчиков.

Частые вопросы

Об этом курсе

• Нужен ли опыт работы в других дизайнерских программах?

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

• Курс учит вёрстке макета в код?

  Нет, вёрстка рассматривается только как следующий этап после дизайнера в общей цепочке создания сайта; самой вёрстке курс не учит.

• Разбирается ли создание логотипа?

  Нет, создание логотипа с нуля — отдельная большая тема вне программы; в учебном проекте используется готовое изображение логотипа.

• Изучается ли анимация интерфейса?

  Анимация в курсе не изучается: After Effects и Principle упоминаются только как инструменты, которыми сделаны эффекты в чужих кейсах на Behance; для эффектов, не сделанных прототипированием в Figma, предлагается оставлять текстовые комментарии для верстальщика.

• Разбирается ли дизайн многостраничного сайта?

  Практика курса сосредоточена на одном одностраничном лендинге по техническому заданию; многостраничные сайты разбираются только в теории.

• Что остаётся на руках после курса, кроме макета?

  Адаптивный дизайн лендинга для десктопа, планшета и телефона, Style Guide для верстальщика, оформленный и опубликованный на Behance кейс проекта и личная библиотека стилей для дальнейшей работы.

Доступ и материалы

• Когда и как я получу доступ к курсу?

  Сразу после оплаты, в ту же секунду и автоматически. Ждать подтверждения не нужно. Доступ приходит двумя путями сразу. Первый: на почту, указанную при оформлении заказа, приходит письмо со ссылкой на материалы. Второй: та же ссылка появляется в вашем аккаунте на сайте, в разделе «Загрузки», и остаётся там постоянно.

• Где хранятся материалы курса?

  Все видео и дополнительные файлы лежат в облачном хранилище. Ссылка на него — в вашем аккаунте на сайте, раздел «Загрузки», и в письме, которое пришло после оплаты. Аккаунт здесь — не формальность, а способ доставки: курс остаётся в нём навсегда. Даже если письмо потерялось или вы вспомнили о покупке через год, ссылка будет на месте.

• Можно ли скачать материалы или только смотреть онлайн?

  Скачивать можно и нужно. Мы рекомендуем сохранить видео на компьютер и смотреть оттуда. Причина простая: облачное хранилище не рассчитано на просмотр видео. Иногда оно позволяет включить ролик прямо в браузере, но качество при этом заметно хуже исходного. На своём компьютере вы увидите курс таким, каким его записывали.

• Как долго действует доступ?

  Бессрочно. Курс остаётся вашим навсегда, возвращаться к нему можно сколько угодно раз. Если через год или два ссылка вдруг перестанет открываться по техническим причинам — напишите на info@siluette.com.ua, мы её восстановим.

• Письмо с доступом не пришло — что делать?

  Прежде всего: доступ у вас есть в любом случае. Войдите на сайт и откройте раздел «Загрузки» — ссылка на курс уже там, независимо от того, дошло письмо или нет. Чаще всего письмо теряется из-за опечатки в адресе при оформлении заказа. Ещё стоит заглянуть в папку «Спам». Не разбирается — не тратьте время: напишите на info@siluette.com.ua или в чат в правом нижнем углу сайта, мы поможем.

• На каких устройствах смотреть курс?

  Лучше всего на компьютере или ноутбуке: скачайте видео и откройте любым привычным плеером. Понадобятся установленные видеокодеки — на большинстве компьютеров они уже есть. Скачать курс можно на сколько угодно устройств. А вот телефон мы не советуем, и по двум причинам. На маленьком экране плохо видно детали, особенно если в уроке показывают интерфейс программы. И на телефонах часто нет кодеков для форматов, в которых записаны видео.

Оплата и возврат

• Какими способами можно оплатить?

  Банковской картой Visa, MasterCard или Prostir, через Google Pay, Apple Pay, Masterpass, Visa Checkout, платёжный QR-код, Botpay в Telegram или Privat24. Есть и оплата частями: Монобанк (3 или 4 платежа), А-Банк (2, 3 или 4 платежа и рассрочка), Банк Глобус (8 платежей), «Скибочка» от OTP Bank (3 платежа), мгновенная рассрочка и оплата частями от ПриватБанка.

• Примут ли карту, выпущенную не в Украине?

  Да. Платёжная система принимает карты из Евросоюза и любых других стран. Одна деталь, о которой часто забывают: банк может попросить подтвердить платёж — в мобильном приложении или кодом из СМС. Если оплата не проходит, проверьте приложение банка и сообщения.

• Как работает скидка 20% при покупке нескольких курсов?

  Добавьте в корзину два курса или больше — скидка применится автоматически ко всем товарам в корзине. Два курса: минус 20% на оба. Пять курсов: минус 20% на все пять. Скидка сочетается с любыми акционными ценами и действует на весь каталог без исключений.

• Можно ли вернуть курс или деньги?

  Цифровые товары возврату и обмену не подлежат. Это общее правило для всех электронных товаров в Украине — постановление Кабинета Министров № 172 от 19 марта 1994 года. При этом мы всегда на связи. Если доступ не открывается, ссылка перестала работать или файлы повреждены — напишите на info@siluette.com.ua, укажите дату и номер заказа. Восстановим. Если что-то непонятно в самом курсе, тоже пишите — подскажем.

• Можно ли оплатить от организации по счёту?

  Пока нет. Мы работаем только с частными покупателями — безналичной оплаты по счёту от юридических лиц сейчас нет.

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

• Есть ли обратная связь с преподавателем и проверка заданий?

  Нет. Все курсы — это записи уроков для самостоятельного изучения: преподаватель не отвечает на вопросы и не проверяет домашние задания. Именно поэтому курсы стоят намного дешевле обучения с куратором. Вы получаете тот же материал, но занимаетесь сами и в своём темпе.

• Выдаётся ли сертификат?

  Да, цифровой сертификат — по запросу и бесплатно. Напишите на info@siluette.com.ua, укажите имя и фамилию ровно в том виде, в каком хотите видеть их в сертификате, и мы пришлём его в течение суток.

• Нужен ли опыт, чтобы начать?

  Для большинства курсов — нет. Они рассчитаны на начальный уровень и объясняют с азов. Если курс требует подготовки, это сказано в его описании.

• Есть ли сроки прохождения курса?

  Нет. Ни дедлайнов, ни расписания, ни сгорающего доступа. Скачали — смотрите когда удобно, с любыми перерывами.

• Можно ли поделиться курсом с другим человеком?

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

Поддержка

• Куда писать, если что-то не работает?

  Лучше всего на info@siluette.com.ua. Есть и чат в правом нижнем углу сайта, но почта надёжнее: там можно всё описать подробно и приложить скриншоты. Просьба: опишите, что именно вы делали и что пошло не так, и приложите снимок экрана с ошибкой. Так мы решим вопрос сразу, а не будем полдня выяснять, что произошло.

• Как быстро отвечает поддержка?

  В рабочее время, с 9:00 до 19:00, на почту обычно отвечаем в течение часа, в чате — за пару минут. После 19:00 тоже случается, но время ответа не обещаем.