Хорошие знания не должны лежать в архиве
Игорь, руководитель студии ONE PAGE
Когда-то «Проект Начало» был полноценным платным курсом ONE PAGE. Мы собрали в нём собственный опыт, рабочие процессы студии, практические приёмы и знания, которые помогают дизайнеру не просто создавать красивые макеты, а решать реальные коммерческие задачи.
Наши ученики давно завершили обучение, а сам проект мы закрыли в 2025 году. Но все материалы сохранились. Мы пересмотрели их свежим взглядом и поняли, что уроки по-прежнему актуальны.
За это время Figma заметно изменилась, появились новые инструменты и возможности, но фундаментальные принципы веб-дизайна остались прежними — композиция, типографика, сетки, цвет, визуальная иерархия и логика интерфейсов. Именно на этой базе построен курс.
Поэтому мы решили не оставлять накопленные знания в архиве и открыть весь курс для всех — бесплатно. Учитесь, забирайте полезное в работу и становитесь сильнее.
О курсе
«Проект Начало» — это полноценная программа погружения в коммерческий веб-дизайн: с практикой, реальными задачами студии, работой над проектами и опытом, который обычно приходит только при работе с настоящими заказчиками.
Веб-разработка и дизайн — одно из ключевых направлений ONE PAGE, поэтому мы хорошо понимаем, какой результат нужен клиенту и с какими задачами дизайнер сталкивается в реальной работе.
«Проект Начало» стал продолжением нашего многолетнего опыта в дизайне, разработке сайтов и взаимодействии с заказчиками — опыта, который мы продолжаем получать каждый день.
Программа курса
Программа состоит из 7 модулей и охватывает весь путь работы над коммерческим проектом — от базы до готового дизайна.
Если ты только начинаешь, проходи курс последовательно: от первого этапа к последнему. Если уже работаешь дизайнером — используй программу как библиотеку и переходи сразу к темам, которые хочешь подтянуть.
Проходи уроки в комфортном режиме
Смотри уроки тогда, когда удобно, возвращайся к нужным темам и сразу применяй знания в работе.
Короткие уроки — одна тема за раз
Без длинных лекций и лишней теории. Каждый урок посвящён конкретной теме, поэтому нужный материал легко найти и пересмотреть.
Программа:
Важный момент
Игорь, руководитель студии ONE PAGE
«Проект Начало» создавался несколько лет назад, поэтому интерфейсы некоторых сервисов и отдельные инструменты могли измениться. Но фундаментальные принципы дизайна, работа с задачей, композицией, структурой, концепцией и коммерческим проектом остаются актуальными. Поэтому в уроках много полезной и всегда актуальной информации.
Модуль 1. Освоение инструментов Фигма
Познакомишься с основными инструментами Figma и разберёшься, как использовать их для создания макетов сайтов. Научишься уверенно работать с базовыми функциями программы, организовывать макеты и выстраивать удобный рабочий процесс. Закрепишь знания на практических упражнениях, чтобы подготовиться к следующим этапам курса и работе над полноценным проектом.
Модуль 2. Типографика. Композиция. Коммерческий лендинг. Прототип
Изучишь основы типографики и композиции, разберёшься в работе с модульными сетками и сразу применишь эти знания на практике при создании прототипа сайта. Узнаешь, как устроен коммерческий лендинг, какие цели и задачи он решает. На этом этапе выберешь один из подготовленных нами проектов с готовой структурой и текстами. На его основе разработаешь прототип и продолжишь работать с этим проектом на следующих этапах курса.
Одностраничный сайт: особенности, структура и основные блоки
В уроке рассматриваем особенности Landing Page и основные принципы разработки одностраничного сайта. Разберём отличия лендинга от многостраничных ресурсов, задачи посадочной страницы, основные типы блоков и факторы, влияющие на её эффективность. Отдельно рассмотрим главный экран, преимущества, отзывы, кейсы, товары и услуги, Call to Action, FAQ, этапы работы, контакты и другие элементы структуры.
Прототип сайта: задачи, особенности и уровень детализации
В уроке рассматриваем роль визуального прототипа в разработке сайта. Разберём разницу между текстовым прототипом, визуальным прототипом и wireframe, определим, когда прототипирование необходимо для лендингов, многостраничных сайтов и сложных цифровых продуктов, а также выясним, какой уровень детализации нужен на разных проектах.
Модульная сетка: как выстроить структуру и порядок в макете
В уроке рассматриваем принципы работы с модульной сеткой в веб-дизайне. Разберём, как сетка помогает организовать контент, почему часто используется система из 12 колонок, как выстраивать крупные смысловые группы и внутренние элементы блоков. Отдельно рассмотрим работу с контейнером, средниками, центрированным контентом и изображениями, которые могут выходить за границы сетки.
Настройка 12-колоночной сетки и рабочего пространства в Figma
В уроке пошагово настраиваем модульную сетку для десктопного сайта во Frame 1920 × 1080 px. Рассмотрим 12-колоночную систему, контейнер шириной 1100–1200 px, работу со Stretch, Margin и фиксированной шириной колонок. Отдельно разберём, почему первый экран не стоит проектировать на всю высоту 1080 px и как учитывать реальную область отображения сайта в браузере.
Силовые линии: как выстраивать и выравнивать контент в макете
В уроке рассматриваем принцип силовых линий в веб-дизайне и его связь с выравниванием в типографике. Разберём вертикальные и горизонтальные направляющие, выравнивание по краю и по центру, локальные и глобальные линии, а также случаи, когда силовую линию можно осознанно изменить или нарушить для создания акцента.
Композиция: якорные объекты и управление вниманием пользователя
В уроке рассматриваем основные задачи композиции и способы управления вниманием пользователя. Разберём понятия якорного объекта и контрпространства, работу с визуальной доминантой, якорными точками и линиями. На примерах изучим принцип прямоугольной композиции и выясним, почему для гармоничного макета необязательно заполнять каждый свободный участок.
Практика создания прототипа в модульной сетке
В уроке на практике создаём прототип лендинга на основе готового текста копирайтера. Настраиваем десктопный фрейм и модульную сетку, переносим структуру сайта, распределяем контент по колонкам, схематично обозначаем карточки, формы, изображения и другие элементы. Главная задача этапа — научиться удерживать весь контент внутри модульной сетки и подготовить основу для дальнейшей работы над композицией и дизайном.
Домашнее задание: создание прототипа сайта в Figma
В домашнем задании необходимо выбрать один из предложенных проектов и подготовить для него основу будущего прототипа в Figma.
Типографика: основные параметры текста в веб-дизайне
В уроке знакомимся с базовыми понятиями типографики, которые необходимо понимать веб-дизайнеру. Разберём различия между гарнитурой и шрифтом, устройство базовой линии и выносных элементов, настройку межстрочного и межбуквенного расстояния, а также работу с относительными и абсолютными значениями в Figma.
Типографика: как подобрать межстрочное расстояние под длину текста
В уроке подробно рассматриваем работу с межстрочным интервалом в веб-дизайне. Разберём разницу между абсолютными и относительными значениями Line Height, выясним, как длина строки и объём текста влияют на необходимое количество воздуха, и рассмотрим ориентировочные значения интерлиньяжа для разных текстовых блоков.
Классы шрифтов: как выбирать и сочетать гарнитуры
В уроке рассматриваем основные классы шрифтов: антикву, гротеск, акцидентные, рукописные и моноширинные шрифты. Разберём, какие из них подходят для заголовков и наборного текста, как учитывать тематику проекта и по каким принципам сочетать разные гарнитуры в одной композиции. Дополнительно познакомимся с Google Fonts и вспомогательными плагинами для подбора шрифтовых пар.
Стили в Figma: как настраивать и управлять повторяющимися элементами
В уроке знакомимся со стилями в Figma и разбираем, как они помогают ускорить работу с повторяющимися элементами. Научимся создавать текстовые и цветовые стили, применять их к разным объектам, редактировать централизованно и отключать связь со стилем при необходимости.
Практика: выстраиваем систему типографических стилей в прототипе
В практическом уроке приводим в порядок текстовый прототип после первичного переноса контента. Выделяем основные категории текста, создаём стили для заголовков, подзаголовков, наборного текста, кнопок, меню и цитат, выбираем шрифтовую пару и сокращаем количество случайных размеров и начертаний. Такой подход делает структуру страницы более предсказуемой, аккуратной и удобной для дальнейшей работы над дизайном.
Домашнее задание: настройка текстовых стилей и типографики в прототипе
В домашнем задании необходимо начать систематизировать текст в прототипе: определить шрифтовую пару, выделить заголовки, подзаголовки, наборный текст и текст кнопок, настроить для них кегль, начертание и интерлиньяж, а затем сохранить эти параметры в виде стилей. Дополнительно можно потренироваться в создании цветовых стилей для фоновых блоков.
Читабельность текста: как сделать типографику понятной и удобной
В уроке разбираем, из каких правил складывается читабельная типографика на сайте. Рассмотрим, почему важно ограничивать количество гарнитур и начертаний, использовать гротески для наборного текста, следить за формой букв, длиной строки, межстрочным расстоянием, воздухом и контрастом. Отдельно разберём работу с длинными текстовыми блоками и использование капслока.
Иерархия и группировка: как структурировать контент на сайте
В уроке изучаем базовые правила организации контента на сайте. Разберём, как выстраивать внутренние и внешние отступы, объединять связанные элементы в смысловые группы, создавать понятную иерархию заголовков и использовать контраст для разделения информации по степени важности. На примерах рассмотрим, как эти принципы работают вместе и помогают сделать макет структурированным и легко считываемым.
Размеры заголовков: как выстроить типографическую систему
В уроке разбираем, как определить размеры заголовков и выстроить типографическую систему сайта. Рассмотрим уровни H1–H6, Body-текст, ориентировочные диапазоны кеглей и принцип масштабирования от базового размера. Дополнительно познакомимся с плагином Type Scale, который помогает автоматически сформировать набор согласованных размеров для проекта.
Выключка: как выравнивать текст и элементы на сайте
В уроке подробно рассматриваем выключку и основные варианты выравнивания текста в веб-дизайне. Разберём, почему чаще всего используется выключка по левому краю, когда допустимо центрирование и выравнивание вправо, почему стоит избегать выравнивания по ширине и как сохранять единую логику внутри карточек, блоков и повторяющихся элементов.
Как избавиться от висячих предлогов и сделать текст аккуратнее
В уроке разбираем висячие предлоги, союзы и отдельные слова в конце строк. Рассмотрим, почему ручные переносы через Enter и Shift + Enter не подходят для адаптивных макетов, как работает неразрывный пробел и как автоматизировать обработку текста с помощью типографического плагина. Дополнительно разберём правильную последовательность работы с текстом перед добавлением акцентов.
Как правильно оформлять тире, дефисы и кавычки
В уроке разбираем типографические знаки, которые помогают сделать текст аккуратнее и профессиональнее. Рассмотрим различия между дефисом, минусом, коротким и длинным тире, правила использования пробелов и русских кавычек «ёлочек». Дополнительно познакомимся с плагинами для поиска специальных символов и автоматической типографической обработки текста.
Наводим порядок в прототипе перед переходом к дизайну
В практическом уроке приводим прототип сайта в более чистое и структурированное состояние. Настраиваем хедер, уточняем типографические стили, выстраиваем внутренние и внешние отступы, работаем со смысловыми группами, кнопками и карточками, а также перестраиваем главный экран и следующие блоки. Основная задача этапа — подготовить понятную и аккуратную основу для дальнейшей работы над дизайном.
Продолжаем собирать чистый и структурированный прототип
В практическом уроке продолжаем приводить прототип сайта в порядок. Перестраиваем блок каталога, оформляем табы и карточки проектов, настраиваем внутренние и внешние отступы, работаем с формами заявки, видео, преимуществами и блоком реализованных объектов. По ходу работы проверяем иерархию, выключку, смысловые группы и повторяем уже созданную систему скруглений, кнопок и текстовых стилей.
Завершаем прототип и готовим основу для будущего дизайна
В заключительной части практики завершаем прототип лендинга и приводим в порядок оставшиеся блоки. Используем уже созданные композиционные решения, оформляем этапы работы, преимущества, CTA-блок, вопросы и ответы, контакты с картой и футер. В финале проверяем типографическую иерархию, отступы, силовые линии, повторяемость элементов и общую динамику страницы, чтобы получить чистую основу для дальнейшей работы над дизайном.
Домашнее задание: доводим прототип до чистого и законченного состояния
В домашнем задании необходимо полностью доработать прототип и привести его к аккуратному завершённому виду. Проверьте иерархию информации, типографику, внутренние и внешние отступы, расстояния между блоками, карточками и другими элементами. Весь контент должен находиться в пределах модульной сетки и соответствовать правилам композиции и типографики, изученным в предыдущих уроках. Готовую работу пока отправлять не нужно — после выполнения можно переходить к следующим урокам.
Разбираемся с Auto Layout на простых примерах
В уроке знакомимся с Auto Layout в Figma и разбираем его базовые настройки на простых фигурах. Научимся создавать автолэйаут, менять направление расположения элементов, управлять расстояниями и внутренними отступами, использовать Hug contents, Fill container и фиксированные размеры. Дополнительно рассмотрим вложенные автолэйауты, автоматическое распределение элементов, учёт обводки и выравнивание текста по базовой линии.
Учимся применять Auto Layout в реальном макете
В практическом уроке переносим знания об Auto Layout на реальный прототип сайта. Настраиваем автоматические расстояния в текстовых блоках, создаём адаптивные кнопки, работаем с меню и табами, используем Fill container, Hug contents, Packed, Space between и Clip content. Отдельно разбираем более сложную структуру карточки и выясняем, где Auto Layout действительно экономит время, а где излишняя вложенность только усложняет работу.
Модуль 3. Разработка мудборда. Практика
Разберёшься, что такое мудборд, зачем он нужен в работе над проектом и как с его помощью сформировать визуальное направление. Научишься искать и отбирать референсы, подбирать фотографии, цвета, иконки и другие визуальные элементы, а главное — понимать, на что обращать внимание при поиске. На практике соберёшь мудборд для проекта, выбранного на предыдущем этапе, определишь его визуальный характер и подготовишь основу для дальнейшей разработки дизайна.
Мудборд в веб-дизайне: что это такое, зачем он нужен, как собирать
В этом уроке разбираем мудборд как инструмент поиска и фиксации визуального направления проекта. Узнаем, какие задачи он решает, для кого создаётся и по каким принципам подбирать и объединять референсы в единую композицию.
Как находить визуальные идеи для мудборда через ассоциации
В этом уроке на практике разбираем метод ассоциаций и учимся составлять дерево ассоциаций для будущего мудборда. Определяем ключевые смыслы проекта, развиваем первоначальные идеи и формируем направления для поиска визуальных образов и референсов.
Домашнее задание: первый этап работы над визуальной концепцией проекта
В этом задании создаём основу будущего мудборда. Определяем ключевые смыслы проекта, формируем блок «О проекте», прописываем настроение, эмоции и ассоциации, а также подготавливаем поисковые запросы для дальнейшего подбора фотографий и визуальных референсов.
Подбор фотографий для сайта: фотостоки, поиск изображений и авторское право
В этом уроке разбираем, где и как искать фотографии для мудборда и дизайна сайта. Рассмотрим работу с фотостоками Pixabay, Pexels и Freepik, поиск по запросам и фильтрам, выбор подходящей композиции, ориентации и качества изображений. Отдельно поговорим об авторском праве, лицензиях и правилах использования фотографий в коммерческих проектах.
Подбор иллюстраций для дизайна. Где искать
В этом уроке изучаем работу с иллюстрациями в веб-дизайне: разбираем отличие векторной графики от растровых изображений, выбираем подходящие источники для поиска материалов и учимся использовать готовые иллюстрации в проектах.
Подбор фотографий для мудборда: поиск визуальных образов для проекта
В этом уроке на практике создаём визуальную основу будущего проекта. Разбираем, как искать фотографии для мудборда, выбирать подходящие изображения, использовать разные источники и формировать коллекцию визуальных образов.
Как подобрать иконки, которые поддерживают стиль проекта
В этом уроке изучаем работу с иконками в веб-дизайне. Разбираем основные виды иконок, их назначение и правила использования в интерфейсах. На практике рассмотрим, как выбирать стиль иконок под проект, соблюдать единообразие толщины линий, масштаба и визуального веса.
Цвет в дизайне: значения, ассоциации, влияние на восприятие на сайте
Цвет влияет на настроение проекта, восприятие информации и поведение пользователя. В уроке рассмотрены значения основных цветов, примеры их применения в веб-дизайне и принципы создания гармоничной палитры.
Как выбрать цветовую палитру для сайта
В уроке рассматриваем основные способы выбора цвета для проекта: от пожеланий заказчика и фирменной айдентики до анализа референсов и фотографий. Разбираем, где искать удачные цветовые решения, как формировать оттенки основного цвета и как использовать Coolors, Colormind и другие сервисы для создания палитры.
Как выстроить гармоничную цветовую палитру сайта
Урок посвящён практической работе с цветом при создании сайта. На примерах готовых интерфейсов разбираем роль нейтральных и акцентных оттенков, влияние фона на восприятие цвета, основные принципы цветовой гармонии и применение выбранной палитры в реальном макете.
Домашнее задание: второй этап работы над визуальной концепцией проекта
Продолжаем собирать мудборд. В домашнем задании необходимо подобрать визуальные образы проекта, найти несколько подходящих вариантов иконок и собрать цветовые палитры, которые соответствуют характеру и настроению будущего сайта.
Как находить сильные идеи для дизайна сайта
Урок посвящён системному поиску и анализу референсов в веб-дизайне. На примерах готовых сайтов разбираем, почему не стоит ограничиваться проектами одной тематики, как искать решения для отдельных блоков, анализировать композицию и стилистику и объединять идеи из нескольких источников в самостоятельную визуальную концепцию.
Где и как находить визуальные решения для сайта
В этом уроке разбираем мудборд как инструмент поиска и фиксации визуального направления проекта. Узнаем, какие задачи он решает, для кого создаётся и по каким принципам подбирать и объединять референсы в единую композицию.
Практика поиска референсов для дизайна сайта
Практический урок по работе с референсами перед началом дизайна. Разбираем поиск проектов на Behance и Made on Tilda, отбор подходящих примеров, сохранение отдельных блоков и анализ композиционных решений.
Домашнее задание: третий этап работы над визуальной концепцией проекта
В домашнем задании необходимо завершить разработку мудборда, подобрать рефернсы, которые соответствуют характеру и настроению будущего сайта и на которые будешь опираться при разработке дизайна.
Модуль 4. Дизайн лендинга #1. Практика
На этом этапе перейдёшь от прототипа к полноценному дизайну лендинга для услуги. Последовательно разберёшь каждый блок страницы, изучишь разные варианты его визуального решения и научишься выбирать подходящий под задачу проекта. На практике соберёшь цельный дизайн лендинга, применяя знания о композиции, типографике, цвете и работе с визуальными материалами.
Ищем идею, которая задаст характер всему сайту
В уроке разбираем, как искать визуальную идею для главного экрана и превращать её в основу всего дизайна. Рассмотрим разные подходы для товаров, услуг и сервисов, научимся искать подсказки в оффере и особенностях бизнеса, работать с ассоциациями и показывать не только сам продукт, но и процесс, результат или контекст его использования. На примерах разберём, как одна идея может продолжаться через фотографии, формы, цвета, графику и остальные блоки лендинга.
Учимся видеть визуальный вес и выравнивать элементы оптически
В уроке разбираем, почему элементы одинакового размера могут восприниматься по-разному и как это влияет на композицию. На примерах фигур и иконок рассмотрим визуальный вес, оптическую компенсацию по осям X и Y и способы уравновешивания элементов разной формы.
Компенсируем цвет и типографику без потери иерархии
В уроке разбираем, как один и тот же цвет воспринимается на светлом и тёмном фоне, почему иногда его нужно дополнительно компенсировать и как сохранить контраст. Также рассмотрим влияние начертания и капслока на визуальный вес текста и научимся корректировать размеры и жирность элементов, чтобы не нарушать иерархию.
Учимся сохранять читаемость текста на фотографиях
В уроке разбираем контраст текста по отношению к фону и способы работы с полноэкранными изображениями. Рассмотрим, как правильно располагать текст рядом с главным объектом фотографии, использовать затемнение, линейные и радиальные градиенты, режимы наложения и локальные подложки, а также как с помощью этих приёмов свободнее кадрировать изображения и сохранять читаемость.
Создаём ритм и сохраняем единую стилистику сайта
В уроке разбираем, как ритм помогает объединить все блоки лендинга в одну визуальную систему. Рассмотрим, какие элементы стоит повторять на протяжении сайта, как сохранять заданную в первых экранах стилистику и при этом избегать монотонности. На примерах разберём повторение цветов, плашек, линий, типографики, фотографий и других характерных элементов проекта.
Как правильно создавать понятные и гармоничные кнопки
В уроке подробно разбираем кнопку как один из ключевых UI-элементов сайта. Рассмотрим размер и начертание текста, расчёт внутренних отступов, работу с Auto Layout, варианты скруглений, оформление парных кнопок и систему размеров. Отдельно поговорим о том, почему кнопка должна оставаться узнаваемой и не конкурировать с основной иерархией страницы.
Начинаем дизайн и определяем стилистику главного экрана. Блок 1
В практическом уроке начинаем дизайн главного экрана и пробуем несколько направлений будущей концепции. Подбираем фотографию, работаем с модульной сеткой, кадрированием, градиентами, типографикой, цветовым акцентом, кнопками и контактами. Сравниваем светлый полноэкранный и тёмный варианты и выбираем стилистику, которую будем развивать в следующих блоках.
Выбор из двух категорий услуг. Блок 2
В практическом уроке продолжаем выбранную стилистику главного экрана и разрабатываем второй блок с карточками «Каркасные дома» и «Дома из бруса». Настраиваем систему расстояний, подбираем изображения, работаем с кадрированием, градиентами, направлением фотографии и визуальным весом кнопок, сохраняя заданные цвета, типографику и формы.
Информативный блок об услугах компании. Блок 3
В практическом уроке продолжаем дизайн в заданной стилистике и оформляем третий блок «Дома с гарантией». Пробуем разные варианты композиции, подбираем изображение, вырезаем дом с помощью маски, корректируем прозрачные участки, настраиваем типографику и расстояния. Дополнительно сравниваем иконки и разделители и выбираем решение, которое лучше поддерживает лёгкую стилистику проекта.
Типовые проекты в единой системе карточек. Блок 4
В практическом уроке разрабатываем блок с типовыми проектами и адаптируем его под выбранную стилистику сайта. Укрупняем карточки, создаём рубрикатор, настраиваем информацию о проекте, цену и кнопки, автоматизируем сетку через Auto Layout и Wrap. Отдельно разбираем работу с разными фотографиями, их кадрированием и цветокоррекцией, чтобы карточки гармонично смотрелись вместе.
Домашнее задание: разрабатываем дизайн первых трёх блоков сайта
В домашнем задании необходимо разработать дизайн первых трёх блоков по структуре текстового прототипа: главный экран, второй и третий блоки. При этом расположение элементов из прототипа не нужно повторять буквально — важно сохранить смысл, иерархию и разделение информации, а композиционное решение определить самостоятельно.
Форма с двумя сценариями заявки. Блок 5
В практическом уроке разрабатываем пятый блок с двумя разными сценариями заявки: консультацией по выбору дома и расчётом готового проекта. Продолжаем стилистику предыдущих экранов, настраиваем композицию, поля ввода, кнопки и расстояния, подбираем изображение и используем повторяющиеся скругления и линии, чтобы сохранить ритм всего лендинга.
Выразительный блок о компании. Блок 6
В практическом уроке перерабатываем шестой блок о компании, опираясь на референс из Moodboard. Объединяем факты, фотографию генерального директора, цитату и запуск проморолика в единую композицию, работаем с радиальной заливкой, цветом, расстояниями и визуальным весом элементов и сохраняем стилистику предыдущих экранов.
Оформление карточек выполненных проектов. Блок 7
В практическом уроке разрабатываем блок с выполненными проектами и сохраняем стилистику предыдущих экранов. Собираем вертикальные карточки, добавляем фотослайдер и видеоотзыв, выстраиваем данные об объекте, работаем с внутренними скруглениями, градиентами, расстояниями и разными фотографиями реальных проектов.
Этапы сотрудничества в понятной композиции. Блок 8
В практическом уроке разрабатываем блок с этапами сотрудничества и ищем наиболее удобную композицию для шести шагов. Пробуем вертикальное и горизонтальное расположение, добавляем нумерацию, настраиваем Auto Layout и Wrap, подбираем фотографию со строителями и соединяем её со светлым фоном с помощью градиентов. Отдельно разбираем направление чтения, расстояния и работу с зеркальным отображением элементов.
Карточки услуг с иконками и изображениями. Блок 9
В практическом уроке разрабатываем девятый блок с дополнительными услугами компании. Продолжаем тёмную стилистику предыдущих секций, собираем карточки с изображениями и иконками, настраиваем списки и расстояния, подбираем визуалы по смыслу и учимся приводить разные иконки к единой системе по толщине линий, размеру и визуальному весу.
Блок с тестом-калькулятором и бонусами. Блок 10
В практическом уроке разрабатываем блок с тестом-калькулятором, который помогает получить предварительный расчёт стоимости дома и дополнительные бонусы. Собираем композицию нового блока, используем знакомые формы, расстояния и терракотовые акценты, добавляем изображение подарка и выстраиваем текст так, чтобы блок привлекал внимание и при этом оставался частью общей стилистики лендинга.
Понятный блок вопросов и ответов. Блок 11
В практическом уроке разрабатываем блок вопросов и ответов и выбираем для него простую и понятную композицию. Отказываемся от отдельных плашек, используем линии-разделители, собираем элементы через Auto Layout и показываем открытые и закрытые состояния вопросов. Отдельно настраиваем иконки плюса и минуса, расстояния и визуальные акценты.
Завершающий блок с контактами компании, картой и футером. Блок 12
В практическом уроке разрабатываем финальный блок с адресами выставочных домов и картой, а затем оформляем футер. Работаем с карточками, фотографиями, контактной информацией, скруглениями и вырезанной формой для карты. В завершение проверяем весь лендинг, корректируем отдельные элементы и приводим фотографии к более единой цветовой стилистике.
Наводим порядок в макете и выстраиваем понятный нейминг
В уроке разбираем, как подготовить дизайн-макет к дальнейшей работе и передаче разработчику. Учимся сохранять крупные итерации, организовывать архив, очищать рабочее пространство от лишних и скрытых слоёв и последовательно переименовывать блоки и элементы. Отдельно рассматриваем базовый нейминг на латинице с использованием привычных терминов интерфейса и вёрстки.
Модуль 5. Дизайн лендинга #2. Дизайн лендинга #3. Практика
На этом этапе разработаешь дизайн ещё двух лендингов и усложнишь работу с коммерческими задачами. Научишься работать с брифом и техническим заданием, которые нужно будет самостоятельно проанализировать и использовать как основу для будущего дизайна. На практике научишься работать с исходными требованиями клиента, принимать самостоятельные дизайн-решения и собирать цельный лендинг под конкретный продукт и его задачи.
Автоматизируем работу в Figma с помощью стилей
В уроке разбираем один из основных способов автоматизации работы дизайнера в Figma — стили. Учимся создавать и систематизировать стили для цветов, текста, эффектов и модульных сеток, распределять их по категориям и применять к повторяющимся элементам. Отдельно рассматриваем, как централизованно вносить изменения и в каких случаях автоматизация действительно экономит время.
Разбираемся с компонентами и ускоряем работу Figma
В уроке подробно разбираем компоненты как инструмент автоматизации в Figma. Учимся создавать главный компонент и его экземпляры, централизованно менять повторяющиеся элементы, сбрасывать и переносить изменения, восстанавливать связь и настраивать Constraints. Отдельно рассматриваем работу с изображениями и вложенными компонентами для иконок, а также нейминг и организацию компонентов в больших проектах.
Учимся работать с изолированными изображениями
В уроке разбираем изолированный способ подачи визуала и сравниваем его с полноэкранным изображением. Рассматриваем разные варианты работы с фотографиями и обтравленными объектами, создание коллажей, использование нестандартных форм, наложений и нескольких визуальных планов. Отдельно изучаем приёмы, которые помогают связать изображение с текстом и сделать композицию более цельной.
Осваиваем три способа обтравки изображений
В практическом уроке рассматриваем несколько способов обтравки изображений и учимся выбирать подходящий в зависимости от сложности объекта. Удаляем фон автоматически через онлайн-сервис, вручную обводим объект инструментом Pen в Figma и создаём редактируемую маску, а также работаем с масками в Photopea. Отдельно разбираем вырезание внутренних областей объекта и способы сохранить возможность дальнейшего редактирования.
Учимся строить гармоничную композицию для коллажей
В уроке изучаем базовые принципы композиции, которые помогают создавать гармоничные коллажи и правильно кадрировать фотографии для веб-дизайна. Разбираем три уровня построения изображения: фокусный элемент, композиционную схему и баланс. Рассматриваем способы управления вниманием, правило третей, золотое сечение, пирамидальную композицию, симметрию и полный кадр, а также учимся уравновешивать элементы по размеру, контрасту и визуальному весу.
Разбираем коллажирование на примерах веб-проектов
В уроке разбираем коллажирование на примерах реальных веб-проектов. Рассматриваем, как объединять фотографии и графические элементы, выделять главный объект, создавать глубину с помощью масштаба, теней и расфокусировки и компенсировать пустые области композиции. Отдельно анализируем баланс между визуальной и текстовой частями и учимся использовать дополнительные объекты не случайно, а для усиления смысла и визуального образа.
Анализируем материалы заказчика перед началом дизайна
В уроке разбираем подготовительный этап перед началом нового проекта. Учимся анализировать ТЗ и текстовый прототип, определять характер компании, читать пожелания заказчика не буквально, а в контексте бизнеса, оценивать референсы и фирменные материалы. На примере производителя упаковки для косметики и парфюмерии формируем основные ориентиры будущего дизайна и определяем, какие визуальные решения будут соответствовать масштабу и позиционированию компании.
Разрабатываем главный экран и продуктовую композицию. Часть 1
В практическом уроке начинаем дизайн сайта производителя упаковки. Создаём рабочий Frame и модульную сетку, оформляем хедер, выстраиваем типографическую иерархию и собираем первый экран вокруг продукта. Отдельно работаем с мокапами упаковки через Photopea, корректируем свет и тени и создаём композицию в формате продуктового слайдера с фирменными формами и эффектом матового стекла.
Разрабатываем главный экран и продуктовую композицию. Часть 2
В практическом уроке завершаем главный экран сайта производителя упаковки. Подбираем изображения для продуктового слайдера, работаем с компонентами и Constraints, ищем баланс между текстом и визуалом и оформляем переключение между товарами. Затем дорабатываем хедер, добавляем в фон ненавязчивое изображение производства и приводим экран в порядок. В завершение создаём стили для цветов, текста и эффектов, настраиваем нейминг и подготавливаем систему для дальнейшей разработки лендинга.
Карточки сфер применения. Блок 2
В практическом уроке разрабатываем второй блок сайта производителя упаковки и продолжаем стилистику главного экрана. Собираем три карточки для косметических средств, декоративной косметики и парфюмерии, подбираем изображения, настраиваем типографику и внутренние расстояния. В процессе тестируем зелёные акценты и Glassmorphism, работаем с компонентами, списками и изображениями и приводим карточки к единой визуальной системе.
Каталог продукции и карточку с вариантами товаров. Блок 3
В практическом уроке разрабатываем третий блок сайта производителя упаковки — каталог продукции. Создаём четыре карточки для банок, флаконов, туб и роллонов, настраиваем характеристики, изображения и цветокоррекцию. Отдельно оформляем карточку с вариантами крышек, используем табы, навигацию и эффект матового стекла. В завершение выстраиваем баланс композиции и связываем новый блок со стилистикой предыдущих экранов.
Разрабатываем первые три блока по материалам и ТЗ заказчика - домашнее задание
В домашнем задании необходимо изучить текстовый прототип, техническое задание и материалы заказчика, включая логотип, варианты его использования и фирменный шрифт. На их основе разработайте дизайн первых трёх блоков сайта, соблюдая пожелания заказчика и поддерживая порядок в Figma: используйте понятный нейминг, удаляйте лишние материалы или переносите их на отдельную страницу «Архив». Moodboard и визуальный прототип создавать необязательно — их можно использовать только для собственной работы.
Образцы товара и коллаж из упаковки. Блок 4
В практическом уроке разрабатываем четвёртый блок лендинга с предложением заказать бесплатные образцы упаковки. Выстраиваем текст и визуал в шахматной композиции относительно предыдущих экранов, подбираем изображения пластиковой и стеклянной тары и собираем из нескольких объектов единый коллаж. Разбираем обтравку с помощью Pen и масок, работу с тенями и перспективой, а также повторяем графические элементы главного экрана, чтобы сохранить ритм и общую стилистику сайта.
Большой объём информации и выстраивание акцентов. Блок 5
В практическом уроке разрабатываем объёмный информационный блок о компании. Учимся работать с длинным заголовком, группировать преимущества и числовые показатели, настраивать Auto Layout и выстраивать понятную иерархию. Дополняем секцию изображением продукции и фотографией производства, а перегруженную часть с логотипами выносим в самостоятельный блок. Отдельно разбираем, как привести разные логотипы к общей визуальной системе и уменьшить количество визуального шума.
Этапы работы и мокап упаковки. Блок 6
В практическом уроке разрабатываем шестой блок лендинга о создании дизайна упаковки. Разбиваем большой объём текста на четыре последовательных шага, настраиваем Auto Layout, добавляем нумерацию и выстраиваем понятную композицию. Для визуальной части используем мокап упаковки: меняем цвет элементов, добавляем логотип через Smart Object и удаляем фон. В завершение дополняем композицию производственным изображением, стеклянными элементами и знакомыми графическими приёмами из предыдущих экранов.
Блок преимуществ с иконками. Блок 7
В уроке оформляем большой блок преимуществ и ищем компактную композицию для восьми тезисов. Создаём карточку на основе мастер-компонента, настраиваем типографику, иконки и Auto Layout, сравниваем несколько вариантов сетки и выбираем более удобный для восприятия. Отдельно разбираем работу с карточками разной наполненности, фиксированной высотой, Constraints и оптической компенсацией иконок.
Блок доставки и оплаты. Блок 8
В уроке оформляем блок доставки и оплаты и продолжаем стилистику предыдущих экранов. Разделяем информацию на две смысловые группы, настраиваем списки через Auto Layout, работаем с буллетами и флагами стран в SVG, выделяем важные условия и уравновешиваем композицию декоративными элементами.
Расширенная форма заявки. Блок 9
В уроке создаём расширенную форму заявки с дополнительными параметрами заказа. Разбираем выпадающие списки, радиокнопки, однострочные и многострочные поля, собираем элементы в компоненты и настраиваем их через Auto Layout. Отдельно работаем с адаптивным поведением формы, визуальной иерархией полей и композицией блока.
Завершаем лендинг и создаём форму заказа звонка. Блок 10
В уроке завершаем основной дизайн лендинга. Оформляем блок с контактами и картой, собираем футер, подготавливаем иконки и сохраняем общую стилистику страницы. Затем создаём отдельный экран для всплывающей формы заказа звонка, используем готовые компоненты формы и настраиваем затемнение фона, типографику и кнопку закрытия.
Завершаем дизайн лендинга и готовим макет к согласованию - домашнее задание
В домашнем задании необходимо завершить дизайн всех оставшихся блоков лендинга, продолжая стилистику согласованных первых трёх экранов. Если по текстовому прототипу предусмотрена всплывающая форма, её также нужно разработать. Приведите рабочий файл в порядок: настройте нейминг блоков, Frame, групп и Auto Layout, а мастер-компоненты соберите в отдельном Frame и задайте им понятные названия.
Модуль 6. Мобильная версия. Подготовка проекта к вёрстке
Разработаешь мобильную версию продуктового лендинга и адаптируешь дизайн под разные размеры экранов. Разберёшься, как подготовить макет к передаче в разработку: правильно организовать файлы, подготовить графику и необходимые материалы. Научишься составлять понятное техническое задание для верстальщика, чтобы дизайн был реализован максимально точно.
Модуль 7. Софт Скиллы. Работа с заказчиком
На завершающем этапе разберёшь навыки, которые помогают дизайнеру уверенно работать с заказчиками и презентовать себя как специалиста. Узнаешь, когда и как отправлять бриф, что писать в сопроводительных письмах, как презентовать дизайн, аргументировать свои решения и грамотно работать с правками и обратной связью. Также разберёшься, как оформить резюме и портфолио, подготовиться к общению с потенциальными клиентами или работодателями и выстроить профессиональную коммуникацию.
