Урок 1. С чего начать: насмотренность и визуальные ориентиры

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

Урок 2. Цвет и контрастность

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

Урок 3. Шрифты

• Основы работы со шрифтами: выбор шрифта, иерархия заголовков, выбор размеров и межстрочного расстояния.

Урок 4. Композиция и сетка

• Как выстроить композицию в блоке и между блоками. Что такое визуальный ритм, как работать с отступами и выравниванием.

Урок 5. Формы в дизайне

• Как формы влияют на настроение: скругления, острые углы, декоративные элементы.

Урок 1. Дизайн-процессы: этапы работы над лендингом

• Обзор всего процесса создания лендинга: от получения ТЗ до финальной подготовки макета. Как выстраивается логика шагов, на что опираться в работе.

Урок 2. Знакомство с Figma

• Учимся работать в Figma. Основные инструменты программы.

Урок 3. Брифинг клиента

• Что спрашивать, как уточнять, чтобы потом не переделывать.

Урок 4. Мудборд и сбор референсов

• Как собрать и оформить визуальные ориентиры под проект, как ими пользоваться.

Урок 5. Дизайн-концепция лендинга

• Выбор общей стилистики сайта на примере первых блоков, согласование с заказчиком.

Урок 6. Первый экран

• Что обязательно должно быть в первом экране. Структура, визуал, текст. Частые ошибки.

Урок 7. Прототипирование лендинга

• Когда нужен прототип, а когда можно обойтись без него.

Уроки 8–12. Дизайн ключевых блоков лендинга

• Рассматриваем основные блоки посадочной страницы, примеры их оформления.

Урок 13. Работа с изображениями

• Фото, иллюстрации, иконки.

Урок 14. Дизайн мобильной версии

• Как адаптировать дизайн под смартфон. Что упрощать, что скрывать, как проверять.

Урок 15. Подготовка макета к верстке

• Как правильно оформить макет, если вы его отдаете на верстку верстальщику: названия, группировка, UI-kit. Типичные ошибки дизайнеров.

Урок 1. Отличие от посадочной

• Чем отличаются лендинги на тёплую и холодную аудиторию.

Урок 2. Блок Тарифы

• Примеры блоков.

Урок 3. Блок Программа курса

• Варианты оформления блоков программы курса.

Урок 4. Блок Отзывы и кейсы

• Примеры блоков.

Урок 5. Вопросы и ответы (FAQ)

• Когда делать раскрывающиеся списки/аккордеон, а когда оформить иначе.
• Примеры блоков.

Урок 6. Проектная работа: создание дизайна продающего лендинга курса 

• Делаем дизайн проект продающего лендинга.

Урок 1. Варианты дизайна карточек товаров и оформление корзины

• Примеры карточек для магазина или распродажи.

Урок 2. Оформление статей

• Как оформлять большие тексты.

Уроки в записи или созвон в Zoom на котором расскажу, какими неросетями я пользуюсь в своей работе, как дизайнер.

Урок 1. Обзор конструктора GetCourse

• Краткий обзор основных блоков конструктора.

Урок 2. Основы HTML

• Структура HTML-документа, основные теги.

Урок 3. Введение в CSS и базовые селекторы

• Типы селекторов, наследование, каскадность. Как искать блоки конструктора в панели разработчика, как правильно к ним обращаться.

Урок 4. Работа со шрифтами

• Подключение нестандартных шрифтов. Работа с текстом.

Урок 5. Работа с фоном

• Теория и реальные примеры: цвет, изображения, позиционирование.

Урок 6. Отступы: margin и padding

• Теория и примеры: зачем нужны, как применять, частые ошибки.

Урок 1. Работа с изображениями

• Добавление стандартными методами GetCourse и нестандартными — через HTML. Когда и какие форматы использовать: PNG, JPEG, SVG.

Урок 2. Кнопки

• Стилизация кнопок: цвета, формы, поведение при наведении.

Урок 3. Таймеры на GetCourse

• Как стилизовать таймеры.

Урок 4. Формы

• Стилизация полей ввода и кнопок.

Урок 5. Кастомизация слайдера GetCourse

• Стилизация стандартных слайдеров GetCourse

Урок 6. Переменные в CSS

• Как задать переменные для цветов, шрифтов, бордеров — чтобы использовать блоки как шаблоны.

Урок 7. Адаптация лендинга под мобильные

Урок 8. Псевдоэлементы: :before и :after

• Теория и реальные примеры блоков с псевдоэлементами + практика.

Урок 1. Cвойства flex-контейнера

Урок 2. Cвойства flex-элементов

Урок 3 - 6. Практика применения flex при верстке блоков лендинга

Уроки 1–8. Практика: стилизация блоков конструктора

• Уроки с конкретными примерами: стилизация разных блоков лендинга.

Урок 9. Стилизация корзины 

Урок 10. Стилизация Блога с помощью CSS

Урок 1. Теория Grid

Урок 2. Практическое примениение Grid

• Верстка блока лендинга с применением Grid

Урок 1. HTML-блоки из практики

• Примеры блоков из моей практики, написанных вручную на HTML, когда не подошёл ни один блок конструктора.

Урок 2. Нестандартная сетка

• Как работать с дизайном, который не вписывается в сетку GetCourse.

Урок 1. Аккордеоны

• Примеры блоков с использованием JS.

Урок 2. Слайдеры из сторонних библиотек

• Установка слайдеров из сторонних библиотек: подключение, настройка, стилизация.

Урок 3. Анимации 

• Создание анимированных элементов и эффектов с помощью CSS

Как принять макет от дизайнера, что проверить, что учесть при оценке работы.

Какие макеты лучше не брать, а отправить на доработку.

Что обсудить с заказчиком до начала, чтобы избежать претензий к дизайну, а не к верстке.

Урок в кором я расскажу, как использую неросети для посмощи в верстке.

Расскажу, как выстраиваю коммуникацию, что спрашиваю на старте, как оформляю этапы и правки, договор, оплата.

Отвечаю на ваши вопросы по работе с клиентами.