Курс UI/UX Дизайна: Проектирование Интерфейсов с Нуля

Что вы сможете после курса

• Собирать интерфейс в Figma, Axure и Photoshop — от фигур и стилей до прототипирования переходов
• Проводить UX-исследование: интервью, конкурентный анализ, количественные и качественные тесты, АБ-тестирование
• Строить карту пути покупателя (Customer Journey Map) и пользовательские истории по методу INVEST
• Проектировать информационную архитектуру сайта по восьми принципам и навигационные карты
• Ставить KPI, работать с Яндекс.Метрикой и Google Analytics, считать CTR, CPC, CPA, ДРР и ROAS
• Проводить юзабилити-тестирование, эвристическую оценку и аудит сайта по десяти критериям

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

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

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

• Практика идёт на двух сквозных проектах — интернет-магазине и сайте/приложении жилого комплекса — Учитесь сразу на живых макетах, а не на разрозненных упражнениях
• Разбор метода или программы предшествует практической сборке макета — Закрепляете каждую тему в проекте сразу после объяснения
• Каждая программа — Figma, Axure, Photoshop — разбирается отдельным уроком с конкретным результатом — Осваиваете инструмент по шагам, а не пытаетесь понять всё сразу
• Практические уроки заканчиваются собранным блоком макета — карточкой, баннером, прототипом — После каждого занятия остаётся законченный кусок проекта, а не черновик
• Последний блок курса посвящён трудоустройству — резюме, поиску заказов и портфолио — Доводите обучение до результата, который можно показать заказчику или работодателю

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

• Figma, Axure и Adobe Photoshop — основные программы для прототипирования и дизайна
• Adobe Illustrator, Adobe XD, Sketch, InVision и After Effects — для отдельных задач по ходу курса
• Аккаунты на Behance и фриланс-биржах — для публикации портфолио и поиска заказов

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

Дизайн интерфейса — это не только картинка: нужно параллельно разбираться в нескольких программах (Figma, Axure, Photoshop), которые редко изучают вместе и последовательно, поэтому легко закрепить в одной программе привычки, мешающие в другой.

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

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

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

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

1. Инструменты Осваиваете Figma, Axure и Photoshop на практике — фигуры, стили, слои, маски и простое прототипирование
2. UX-исследование и проектирование Собираете бриф, изучаете пользователей, строите карту пути покупателя, информационную архитектуру и вайрфреймы
3. Визуальный дизайн Переносите вайрфреймы в цветной макет сайта и мобильного приложения по гайдлайнам и типографике
4. Аналитика, тестирование и трудоустройство Настраиваете KPI и веб-аналитику, проверяете юзабилити и аудит сайта, оформляете резюме и портфолио на Behance

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

31 урок · 7 модулей · 11 часов 31 минута видео · с двумя сквозными проектами — интернет-магазином и сайтом жилого комплекса

• От установки программ до первого макета интернет-магазина 4 урока

  Раздел открывает курс установкой и разбором интерфейса Figma, Axure и Photoshop: фигуры, стили, слои, маски и простое прототипирование. Здесь же собирается первый проект — интерактивный прототип и цветной дизайн главной страницы интернет-магазина.

  • Основы программы Figma32:26

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

  • Основы Axure34:29

    Собираем интерактивный прототип главной страницы интернет-магазина в Axure: разметка направляющими, сборка шапки, каталога, баннера, карточек товара и футера из блоков библиотеки. В конце публикуем ссылку на готовый прототип.

  • Основы Photoshop57:08

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

  • Дизайн сайта58:50

    Отрисовываем визуальный дизайн главной страницы интернет-магазина в Figma поверх готового прототипа: сетка, шапка, баннер, карточки товаров, блок «о нас» и футер. Элементы оформляем цветом, тенями и градиентами.

• От брифа заказчика до списка функций сайта 3 урока

  Раздел разбирает составление дизайн-брифа, методы исследования пользователей — от аналитики и интервью до АБ-тестирования — и метод генерации идей через персонажей и барьеры, который превращает наблюдения в конкретный функционал сайта.

  • Создание брифа6:56

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

  • Исследование пользователей и данных в дизайне7:27

    Разбираем методы UX-исследования: аналитику, интервью с пользователями, конкурентный анализ, опросы, тестирование иерархии и АБ-тестирование. Показываем разницу между количественными и качественными исследованиями и когда какой метод уместен.

  • Генерация идей, матрица и функционал2:48

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

• Полный проект сайта — от вайрфрейма до кликабельного прототипа 9 уроков

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

  • Принципы юзабилити и программы9:23

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

  • Вдохновение и User story14:07

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

  • Customer Journey Map8:36

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

  • Информационная архитектура проекта20:49

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

  • Навигационные карты12:13

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

  • Создание дизайна сайта55:16

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

  • Создаем Wireframes для ключевых экранов36:39

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

  • Создаем дизайн всех Wireframes1:18:54

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

  • Интерактивный прототип11:53

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

• Визуальный дизайн по гайдлайнам и мобильное приложение 4 урока

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

  • IOS guidelines и их спецификации, цветовые схемы10:24

    Разбираем назначение iOS-гайдлайнов Apple и их спецификации: требования к иконкам, системному шрифту San Francisco, цветовой схеме и пиктограммам интерфейса. Показываем, как оформить квадратную иконку без скруглений и прозрачности, подобрать один-два основных цвета и настроить состояния пиктограмм нижней навигации.

  • Работа с типографикой14:54

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

  • Навигация сайта10:01

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

  • Создаем дизайн мобильного приложения30:03

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

• Веб-аналитика для дизайнера 5 уроков

  Раздел показывает, как раскладывать бизнес-цель на KPI, устроена digital-воронка продаж, чем отличаются Яндекс.Метрика и Google Analytics, как читать тепловые карты и WebVisor и считать метрики эффективности рекламы — CTR, CPC, CPA, ДРР и ROAS.

  • Формируем цели и KPI вашего продукта5:45

    Показываем, как раскладывать абстрактную бизнес-цель на три измеримых KPI — объём, цену и качество — на примерах интернет-магазина, рекламы в Google AdWords и Facebook. Разбираем, как расставлять приоритеты между показателями, если достичь их всех одновременно не получается.

  • Digital воронка6:39

    Разбираем структуру digital-воронки продаж — от знакомства с брендом в соцсетях до покупки — и инструменты для каждого из трёх этапов: рекламу и SMM, лендинг с лид-магнитом, email-рассылку и поисковые объявления. Отдельно говорим про видеомаркетинг и про то, как анализ воронки помогает находить слабые этапы и корректировать УТП.

  • Яндекс.Метрика и Google Analytics для дизайнера11:45

    Сравниваем Яндекс.Метрику и Google Analytics: разные условия подсчёта отказов и как их выровнять через Google Tag Manager, а также отличия в наборе функций — WebVisor, карты кликов и скроллинга у одного сервиса против многоканальных последовательностей, вычисляемых показателей и АБ-тестов у другого. Объясняем, зачем ставить оба счётчика одновременно и какие отчёты проверять регулярно.

  • Тепловые карты, вебвизор4:24

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

  • Анализ эффективности11:46

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

• Юзабилити-тестирование и аудит сайта 4 урока

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

  • Методы исследования юзабилити11:09

    Разбираем, как подготовить юзабилити-тестирование сайта: поставить цель и задачу, сформулировать гипотезу и описать сценарий поведения пользователя. Рассматриваем методы исследования — наблюдение, «мысли вслух», диалог с модератором, теневой метод, ретроспективу, АБ-тестирование и карты кликов — и когда какой из них применять.

  • Практика по экспертизе сайта15:21

    Проходим десять критериев базового аудита сайта: актуальность дизайна, понятность навигации и адаптация под мобильные устройства, robots.txt и карта сайта, протокол HTTPS, скорость загрузки, качество контента, битые ссылки и отсутствие дублей в метатегах title и description.

  • Эвристическая оценка10:34

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

  • Экспертиза компонентов и юзабилити-тестирование16:38

    Изучаем экспертизу компонентов сайта: составление портретов целевой аудитории, поведенческих сценариев и проверку каждого сценария на скорость взаимодействия, число ошибок и удовлетворённость пользователя. Рассматриваем проведение юзабилити-тестирования с фокус-группой и сервисы для него — Яндекс.Метрику с WebVisor, Usability Hub, Optimal Workshop, Crazy Egg и Usabilo.

• Резюме, портфолио и первые заказы 2 урока

  Раздел завершает курс подготовкой к трудоустройству: оформлением резюме на HeadHunter и профиля на фриланс-биржах, поиском вакансий и заказов и сборкой кейса с мокапами устройств для публикации на Behance.

  • Составление резюме и поиск работы55:59

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

  • Оформляем и создаём портфолио на Behance28:01

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

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

Об этом курсе

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

  Нет — курс открывается с установки и разбора базовых программ (Figma, Axure, Photoshop) и не опирается на предыдущие темы.

• Какие программы понадобятся для обучения?

  Основные — Figma, Axure и Adobe Photoshop; отдельные уроки также используют Illustrator, Adobe XD, Sketch, InVision и After Effects.

• Научит ли курс верстать сайты?

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

• Разбирается ли дизайн мобильных приложений?

  Да, отдельный раздел посвящён дизайну мобильного приложения — трём экранам со своим кликабельным прототипом; из мобильных гайдлайнов подробно разобраны только рекомендации Apple (iOS).

• Что попадёт в портфолио после курса?

  Интерактивный прототип и дизайн интернет-магазина, полный проект сайта недвижимости с кликабельным прототипом, дизайн мобильного приложения и опубликованный на Behance кейс с мокапами, превью, тегами и категориями.

• Учит ли курс искать заказы и работу?

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

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

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

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

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

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

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

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

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

  Бессрочно. Курс остаётся вашим навсегда, возвращаться к нему можно сколько угодно раз. Если через год или два ссылка вдруг перестанет открываться по техническим причинам — напишите на 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 тоже случается, но время ответа не обещаем.