Хорошие знания не должны лежать в архиве
Игорь, руководитель студии 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. Практика
На этом этапе перейдёшь от прототипа к полноценному дизайну лендинга для услуги. Последовательно разберёшь каждый блок страницы, изучишь разные варианты его визуального решения и научишься выбирать подходящий под задачу проекта. На практике соберёшь цельный дизайн лендинга, применяя знания о композиции, типографике, цвете и работе с визуальными материалами.
Модуль 5. Дизайн лендинга #2. Дизайн лендинга #3. Практика
На этом этапе разработаешь дизайн ещё двух лендингов и усложнишь работу с коммерческими задачами. Научишься работать с брифом и техническим заданием, которые нужно будет самостоятельно проанализировать и использовать как основу для будущего дизайна. На практике научишься работать с исходными требованиями клиента, принимать самостоятельные дизайн-решения и собирать цельный лендинг под конкретный продукт и его задачи.
Модуль 6. Мобильная версия. Подготовка проекта к вёрстке
Разработаешь мобильную версию продуктового лендинга и адаптируешь дизайн под разные размеры экранов. Разберёшься, как подготовить макет к передаче в разработку: правильно организовать файлы, подготовить графику и необходимые материалы. Научишься составлять понятное техническое задание для верстальщика, чтобы дизайн был реализован максимально точно.
Модуль 7. Софт Скиллы. Работа с заказчиком
На завершающем этапе разберёшь навыки, которые помогают дизайнеру уверенно работать с заказчиками и презентовать себя как специалиста. Узнаешь, когда и как отправлять бриф, что писать в сопроводительных письмах, как презентовать дизайн, аргументировать свои решения и грамотно работать с правками и обратной связью. Также разберёшься, как оформить резюме и портфолио, подготовиться к общению с потенциальными клиентами или работодателями и выстроить профессиональную коммуникацию.
