Урок 1.1: Обзор курса: чему вы научитесь и что создадите
Здравствуйте! Меня зовут Сергей Михеев.
Я работаю в сфере разработки и дизайна сайтов с 2011 года. За это время я запустил большое количество проектов как в России, так и за рубежом.
За годы практики я заметил, что начинающим дизайнерам чаще всего не хватает системы. Много разрозненных уроков, непонятные термины, нет четкого понимания: «Что учить дальше?» и «Где взять реальный проект для портфолио?».
Этот курс — системное введение в профессию. Мы последовательно разберем цвет, типографику, композицию, UX-методологию, работу в Figma, создание прототипов, дизайн-систем и мобильных версий.
Итогом станет полноценный проект для портфолио. Курс рассчитан на 12 недель, но при регулярных занятиях (3–5 часов в неделю) вы завершите его гораздо быстрее.
Кому подходит этот курс
Этот курс для вас, если вы хотите получить системные знания, а не хаотичные уроки из YouTube.
Прежде чем продолжить, давайте честно разберемся, для кого я создавал этот курс. Это поможет вам понять, подходит ли он именно вам.
Этот курс для вас, если:
Вы совсем новичок в веб-дизайне. Вы никогда не открывали Figma, не знаете, что такое UX и UI, но очень хотите научиться создавать сайты. Вас не пугает слово «с нуля» — наоборот, вы ищете понятный маршрут, который проведет вас за руку от первого шага до готового проекта.
Вы переходите в веб-дизайн из смежной сферы. Возможно, вы графический или промышленный дизайнер, маркетолог, верстальщик или просто человек, который давно работает с компьютером. У вас уже есть насмотренность, чувство вкуса или техническое мышление, но нет системы именно в веб-дизайне. Этот курс поможет структурировать то, что вы уже знаете, и добавить недостающее.
Вы уже пробовали учиться по отдельным видео на YouTube. Вы посмотрели десятки роликов, но чувствуете, что в голове каша. Вы знаете, как нарисовать кнопку в Figma, но не понимаете, с чего начать проект и как довести его до конца. Здесь вы получите цельную картину, а не разрозненные фрагменты.
Вы хотите собрать портфолио, чтобы начать карьеру или брать заказы на фрилансе. Вам нужен не просто сертификат, а реальный проект, который можно показать заказчику или работодателю. К концу курса у вас будет именно такой проект.
Вы предпочитаете структурированный подход. Вам нравится, когда сначала дают теорию, потом закрепляют практикой, а в конце получается готовый результат. Вы готовы идти по модулям последовательно, не перескакивая с темы на тему.
Этот курс не для вас, если:
Вы уже работаете Middle+ дизайнером с опытом от трех лет. Вам будет слишком просто. Большая часть материала покажется базовой, и вы вряд ли найдете для себя новую информацию.
Вы ищете курс только по анимации, 3D или моушн-дизайну. Здесь этого нет. Этот курс — про проектирование интерфейсов, а не про motion-графику.
Вы не готовы выполнять практические задания и хотите просто посмотреть видео. Курс построен на практике. Теория без закрепления не дает навыка. Если вы не будете делать задания, результат не придет. Я предупреждаю об этом честно.
Если вы узнали себя в первом списке — вы попали по адресу.
Давайте теперь посмотрим, что именно вы создадите к концу курса.
Чему вы научитесь
К концу курса вы будете не просто «знать теорию» — вы будете уметь делать реальные вещи.
Вот конкретные навыки, которые вы получите за 11 модулей.
Проектировать интерфейсы, а не просто рисовать
Вы научитесь начинать проект не с Figma, а с понимания задачи. Вы сможете проанализировать аудиторию, составить карту пути клиента, спроектировать информационную архитектуру сайта. Другими словами — вы будете знать, зачем вы делаете ту или иную кнопку в том или ином месте.
Сознательно работать с цветом и шрифтами
Вы перестанете подбирать цвета «на глаз» и шрифты «по наитию». Вы будете понимать, как цветовой круг, сочетания и психология цвета работают на ваш проект. Вы научитесь подбирать шрифтовые пары, выстраивать иерархию текста и делать интерфейсы удобными для чтения.
Уверенно работать в Figma
Вы освоите Figma с нуля до уровня, достаточного для создания полноценных проектов. Фреймы, сетки, компоненты, авто-лейаут, стили, прототипирование — вы будете пользоваться этими инструментами осознанно, а не методом тыка.
Собирать стайл-гайды и дизайн-системы
Вы узнаете, что отличает любительский макет от профессионального — системность. Вы научитесь собирать цвета, шрифты, отступы и компоненты в единую дизайн-систему, чтобы ваш проект был цельным и легко масштабировался.
Создавать прототипы и вайрфреймы
Вы перестанете прыгать сразу в красивый дизайн. Сначала вы будете делать черно-белые вайрфреймы — схемы будущего сайта. А затем собирать интерактивные прототипы, по которым можно кликать и тестировать логику до того, как нарисованы все картинки.
Проектировать мобильные версии
Вы поймете, как дизайн ломается на маленьких экранах и как его чинить. Вы научитесь адаптировать десктопные макеты под мобильные устройства, проектировать удобную навигацию для пальцев, а не для мышки.
Собирать портфолио и презентовать свои работы
В конце курса вы не просто получите файл в Figma. Вы упакуете свой проект в портфолио, выложите на Dribbble или Behance, научитесь рассказывать о своих решениях на собеседовании и перед заказчиком.
Если перечислить коротко: К концу курса вы сможете самостоятельно спроектировать и отрисовать адаптивный сайт под ключ, от брифа и исследования до готового макета и презентации.
Именно такие навыки нужны начинающему дизайнеру, чтобы получить первый заказ или найти работу в студии.
Маршрут: 11 модулей
Курс построен так, чтобы вы двигались от простого к сложному, не перескакивая с темы на тему.
Каждый модуль закрывает свою задачу и готовит вас к следующему шагу. Вы не просто смотрите видео — вы последовательно собираете свой проект, обрастая новыми знаниями как снежный ком.
Вот что вас ждет.
Модуль 1: Введение
Вы узнаете, чем веб-дизайн отличается от графического, что такое UX и UI, какие программы нужны для работы. Зарегистрируетесь в Figma и сделаете первые шаги в программе. А главное — выберете тему своего будущего проекта.
Модуль 2. Основы цвета
Вы разберетесь с цветовым кругом, узнаете, как сочетать цвета, что означают разные оттенки с точки зрения психологии, и как подобрать палитру для своего проекта. В конце модуля вы создадите цветовую схему для своего сайта.
Модуль 3. Основы типографики
Вы изучите анатомию шрифта, научитесь работать с текстом в интерфейсах, выстраивать иерархию заголовков и подзаголовков, подбирать шрифтовые пары. К концу модуля у вас будет готовая шрифтовая система для проекта.
Модуль 4: Визуальный контент
Вы узнаете, где брать качественные изображения, как выбирать иллюстрации в едином стиле, какие бывают иконки и как их правильно использовать. Вы подберете визуальное наполнение для своего сайта.
Модуль 5: Основы композиции и первый макет
Вы познакомитесь с анатомией сайта, изучите законы композиции и визуальной иерархии, разберетесь в типах сайтов. А главное — вы соберете первый макет в Figma. Это ваша первая победа: вы увидите, как теория превращается в реальную картинку.
Модуль 6. UX-мышление: логика и удобство
Вы поймете, что такое UX на практике, научитесь создавать портрет пользователя и карту его пути (CJM), проектировать информационную архитектуру сайта, избегать типичных ошибок юзабилити. Вы посмотрите на свой проект глазами пользователя.
Модуль 7. Основы прототипирования и wireframe
Вы узнаете, для чего нужны прототипы и вайрфреймы, научитесь работать с техническим заданием. Вы создадите вайрфреймы главной и внутренних страниц своего сайта — черно-белую схему, которая показывает структуру без отвлечения на дизайн.
Модуль 8: Дизайн-системы и стайл-гайды
Вы разберетесь, что такое дизайн-системы, из чего они состоят, и посмотрите на реальные примеры крупных компаний. Вы соберете стайл-гайд для своего проекта: цвета, шрифты, отступы, компоненты. Это то, что отличает профессионала от любителя.
Модуль 9: Разработка пользовательского интерфейса (UI)
Самый большой модуль курса. Вы перенесете вайрфреймы в полноценный дизайн: отрисуете шапку, обложку, секции, подвал, внутренние страницы. Добавите микро-анимацию, чтобы интерфейс ожил. К концу модуля у вас будет полностью готовая десктопная версия сайта.
Модуль 10: Мобильные интерфейсы
Вы узнаете об особенностях мобильных интерфейсов, дизайне мобильной навигации. Вы адаптируете свою главную страницу под экран смартфона и сделаете мобильные версии внутренних страниц.
Модуль 11. Подготовка к карьере
Вы узнаете, как собрать портфолио начинающему дизайнеру, выложите проект на Dribbble или Behance, подготовите резюме и научитесь проходить собеседования. Мы поговорим о работе в штате и на фрилансе, а также о том, куда развиваться дальше.
Как видите, путь продуман от начала до конца.
Вы не просто учитесь рисовать красивые картинки. Вы учитесь проектировать интерфейсы, которые решают задачи пользователей и бизнеса.
Давайте теперь разберемся, как именно устроен курс и в каком формате проходят уроки.
Как устроен курс
Теория и практика разделены. И у каждого формата своя роль.
Я спроектировал этот курс так, чтобы вам было удобно учиться. Вы не запутаетесь, где что искать, и сможете легко возвращаться к пройденному материалу.
Вот как это работает.
Теоретическая часть: текстовые уроки с визуальными вставками
Вся теория представлена в виде текстовых уроков. Это сделано специально.
Когда информация дается текстом, вы читаете в своем темпе. Можете остановиться, перечитать сложное место, сделать заметки. Вы не зависите от скорости речи лектора и не перематываете видео назад в поисках нужной минуты.
Кроме того, текстовый формат удобен для возврата. Забыли, что такое цветовой круг или как сочетать шрифты? Открываете соответствующий урок и находите ответ за минуту. С видео это было бы сложнее.
Чтобы текст не был скучным и лучше запоминался, теория разбавлена инфографикой, схемами, таблицами и короткими видео-примерами. Там, где нужно показать процесс или динамику, вы увидите ролик на 30–60 секунд. Но основная теория остается в тексте — для структуры и удобства навигации.
Практическая часть: подробные видео-уроки
Практика — это совсем другая история. Когда мы работаем в Figma, настраиваем шрифты, собираем сетки или создаем компоненты, текстовое описание не подходит. Здесь важна скорость и наглядность.
Поэтому все практические уроки — это подробные видео с моим экраном. Я показываю каждый клик, каждое действие, комментирую, почему делаю именно так, а не иначе. Вы просто повторяете за мной на своем компьютере.
Вы можете поставить видео на паузу, сделать шаг, потом продолжить. Можете пересмотреть сложный момент несколько раз. Это удобно и эффективно.
Как они сочетаются внутри курса
Каждый модуль устроен одинаково:
- Сначала вы читаете текстовые уроки с теорией. Знакомитесь с понятиями, изучаете принципы, смотрите примеры и инфографику.
- В конце модуля вас ждет практическое задание, которое выполняется по видео-уроку. Вы сразу применяете выученную теорию на практике.
Например, в модуле по цвету вы сначала читаете про цветовой круг, сочетания и психологию цвета. А затем в видео берете Figma и создаете цветовую палитру для своего проекта.
Доступ к курсу
У вас будет доступ ко всем материалам в течение 12 месяцев с момента оплаты. Этого достаточно, чтобы пройти курс в комфортном темпе, даже если заниматься всего 3–5 часов в неделю.
Все уроки (и текстовые, и видео) находятся в одном месте — в онлайн-учебнике. Вам не нужно хранить файлы на компьютере или помнить, какое видео на какой платформе вы смотрели. Заходите в учебник и продолжаете с того места, где остановились.
Бонус: онлайн-учебник по UX/UI в подарок
Для более полного погружения в теорию вместе с курсом вы получаете доступ к нашему онлайн-учебнику по UX/UI на 12 месяцев.
В нем те же темы раскрыты гораздо глубже: больше примеров, схем, кейсов и детальных разборов. Это не просто «конспект курса», а полноценный справочник, который останется с вами на весь год.
Учебник удобно устроен: вы можете быстро найти нужную тему по оглавлению, вернуться к сложному разделу, повторить материал перед собеседованием или рабочим проектом.
По сути, вы получаете два продукта по цене одного: видеокурс с практикой и текстовый учебник для глубокого изучения теории.
Теперь, когда вы знаете, как устроен курс, давайте подготовимся к старту.
Что нужно для старта
Всё необходимое для прохождения курса — бесплатное и доступное.
Вам не нужно покупать дорогое оборудование или программы. Достаточно того, что уже есть у большинства людей за компьютером. А то, чего нет, мы установим бесплатно.
Вот полный список того, что вам понадобится.
Компьютер
Подойдет любой современный компьютер — Windows или Mac. Figma и браузер работают на обеих системах одинаково хорошо.
Единственное требование: стабильный доступ в интернет. Все материалы курса находятся в онлайн-учебнике, а Figma работает прямо в браузере (хотя есть и десктопная версия).
Figma
Главный инструмент веб-дизайнера. В нем мы будем создавать все макеты, прототипы и стайл-гайды.
Figma полностью бесплатна для начинающих. Вы можете зарегистрироваться по электронной почте, и у вас будет доступ ко всем функциям, которые нужны для курса.
В уроке 1.5 я покажу, как зарегистрироваться, создать первый файл и настроить рабочее пространство. Вы справитесь за пять минут.
Браузер
Подойдет любой современный браузер: Google Chrome, Яндекс Браузер, Mozilla Firefox, Safari или Edge.
Главное — чтобы он был обновлен до последней версии. Figma и онлайн-учебник работают через браузер, так что это ваш основной инструмент.
Блокнот или заметки
Этот пункт часто недооценивают, зря.
Во время прохождения курса у вас будут возникать идеи для вашего проекта, вопросы, которые вы захотите себе запомнить, или важные моменты из теории.
Заведите для этого блокнот (бумажный или цифровой — в заметках на телефоне, в Notion, в Google Docs). Главное, чтобы вы могли быстро записать мысль, не отвлекаясь от учебы.
Ваше время
Самый ценный ресурс.
Курс рассчитан на 12 месяцев, но при регулярных занятиях вы пройдете его гораздо быстрее. Оптимальный ритм — 3–5 часов в неделю.
Не старайтесь пройти всё за выходные. Информация усваивается лучше, когда есть время на осмысление и практику. Двигайтесь в своем темпе, делайте перерывы, возвращайтесь к сложным темам.
Всё перечисленное уже готово? Отлично.