Создание Лендинга [Полный цикл] (Ник Скопич)

1. Этап 1. Создание проекта в TRELLO

1.1. 1 - Создание доски для ведения проекта лендинга

1.2. 2 - Создание колонки «Исходные данные»

1.2.1. Карточка с доступом к аккаунту Tilda

1.2.2. Карточка со ссылкой на документ с текстом лендинга

1.2.3. Карточка со ссылкой на фотографии спикеров/продуктов/другие изображения для лендинга

1.2.4. Карточка со ссылкой на фирменный стиль / брендбук компании клиента (если есть)

1.3. 3 - Создание колонки «В процессе»

1.3.1. Карточки с текущими задачами

1.4. 4 - Создание колонки «Готово»

1.4.1. Карточки с выполненными задачами (переносятся сюда, когда выполнены текущие)

2. Этап 2. Подготовка каркаса и текста лендинга

2.1. Вариант 1 - Клиент предоставляет текст и структуру в готовом виде

2.2. Вариант 2 - Создание самостоятельно или копирайтером-маркетологом

2.2.1. 1 - Маркетинговый анализ (ниша и продукт, конкуренты, спрос на рынке, запросы аудитории)

2.2.2. 2 - Определение групп целевой аудитории продукта

2.2.3. 3 - Формулирование предложения (оффера)

2.2.4. 4 - Подготовка структуры лендинга с блоками

2.2.5. 5 - Написание продающего текста в блоки лендинга

3. Этап 3. Создание визуального стиля лендинга

3.1. Вариант 1 - Клиент предоставляет (или вы имеете) готовый фирменный стиль компании

3.1.1. Создание дизайна лендинга по готовому фирменному стилю

3.2. Вариант 2 - Создаем стиль для дизайна лендинга самостоятельно

3.2.1. Поиск идей для стиля на ресурсах (концепция, цвета, элементы)

3.2.1.1. Лендинги конкурентов / в нише / в соседних нишах

3.2.1.2. Dribbble - Discover the World’s Top Designers & Creative Professionals Twitter iconFacebook iconPinterest icon

3.2.1.3. Примеры сайтов на Tilda Publishing

3.2.2. Подбор шрифтов

3.2.2.1. Вариант 1 - Выбираем из готовых встроенных в Tilda

3.2.2.2. Вариант 2 - Подбираем отдельно и загружаем в Tilda

3.2.2.2.1. Подключение из сервисов Adobe или Google Fonts

3.2.2.2.2. Покупка или скачивание шрифтов и загрузка в Tilda в формате WOFF

3.2.3. Подбор цветов

3.2.3.1. Обязательная сочетаемость по цветовому кругу

3.2.3.1.1. ColorScheme.Ru — Цветовой круг он-лайн: Подбор цветов и генерация цветовых схем

4. Этап 4. Реализация дизайна и верстки лендинга на Tilda

4.1. 1 - Создание нового проекта в Tilda

4.2. 2 - Предварительная настройка проекта

4.2.1. Название и описание проекта

4.2.2. Настройка шрифтов

4.2.3. Создание новой страницы для лендинга (пустая, не шаблон!)

4.3. 3 - Реализация верхних двух-трех экранов лендинга БЕЗ МОБ. ВЕРСИЙ (!)

4.3.1. Если требуется, чтобы предварительно посмотреть и утвердить с клиентом общий дизайн лендинга

4.4. 4 - Реализация всех блоков лендинга

4.4.1. 1 - Реализация всех блоков лендинга БЕЗ МОБ. ВЕРСИЙ (!)

4.4.2. 2 - Правки и утверждение всех блоков лендинга в десктопной версии

4.4.3. 3 - Верстка оставшихся мобильных версий лендинга

4.4.4. 4 - Настройки эффектов анимации и параллакс-эффектов

5. Этап 5. Настройки лендинга на Tilda

5.1. 1 - Настройки функционала лендинга

5.1.1. Простановка ссылок на кнопки и в меню

5.1.2. Настройки форм и приема заявок / подписки

5.1.3. Настройки оплаты и подключение платежных систем (если нужно)

5.1.4. Подключение дополнительных скриптов (если нужно)

5.2. 2 - Настройки SEO

5.2.1. Получение SLL-сертификата

5.2.2. Настройка переадресации с HTTP на HTTPS

5.2.3. Прописывание финального названия и описания страницы

5.2.4. Добавление ключевых слов в настройках страницы, в alt-текст изображений

5.2.5. Назначение в блоках лендинга заголовков H1, H2, H3

5.2.6. Создание и добавление бейджа в настройки страницы

5.2.7. Настройка канонического адреса страницы

5.3. 3 - Финальные настройки и тест лендинга

5.3.1. Создание и загрузка иконки Favicon

5.3.1.1. Бесплатный онлайн-генератор файлов favicon.ico (фавикон) на Favicon.by

5.3.2. Сжатие изображений на лендинге

5.3.2.1. Сжать изображение онлайн

5.3.3. Проверка скорости загрузки лендинга

5.3.3.1. PageSpeed Insights

5.3.4. Тест работы лендинга

5.3.4.1. Проверка кнопок и меню

5.3.4.2. Проверка работоспособности приема заявок / подписки и оплаты

5.3.4.3. Тест отображения в разных браузерах

5.3.4.4. Тест отображения на разных мобильных устройствах (Android, iOS)

5.3.4.5. Тест отображения шрифтов во встроенном браузере Facebook/Instagram с мобильных устройств Android

5.3.5. Подключение домена

5.4. 4 - Настройки для запуска рекламы

5.4.1. Вставка кода Facebook Pixel

5.4.2. Вставка кода Google Analytics

5.4.3. Вставка кода Yandex.Метрика (с включенной функцией вебзизора, карты кликов)