18+
45 дней сериалов
и фильмов по промокоду:
VC45
Активировать
Личный опыт
IT4Startup

Как мы в IT4Startup разрабатываем лендинги на Тильде для быстрой проверки гипотез

Агентство IT4Startup помогает быстро запускать стартапы, оказывая комплексную IT-поддержку от идеи до первых продаж.

Для получения первых клиентов в большинстве случаев не требуется долгая и дорогая разработка, достаточно страницы приземления, созданной в конструкторе Tilda.

Сегодня мы расскажем о процессе создания, сроках и стоимости разработки на примере собственного лендинга.

Первый экран лендинга

Обсуждение проекта

Мы не заставляем заполнять брифы и составлять технические задания. Клиенты приходят с общей идеей проекта, и в процессе обсуждения появляются все тонкости и нюансы, а так же понимание того, что должен представлять собой будущий landing page.

Текстовая структура

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

Структура зависит от того, что в общем с помощью лендинга мы хотим донести до посетителя сайта. Так как мы предлагаем комплекс услуг, то в данном случае идея заключалась показать все этапы работы с клиентом.

Составляем основной заголовок и подзаколовок для первого экрана. Они должны максимально отражать смысл того, что мы хотим донести. Далее расписываем.

Структура landing page

Далее начинаем составлять информацию для каждого блока. Такой текстовый файл и без всякого оформления уже дает понять суть предложения.

Структура с информацией для каждого экрана лендинга

Согласовываем текстовую часть с клиентом и приступаем к работе уже непосредственно в конструкторе Tilda.

Дизайн и верстка лендинга

Мы практически никогда не делаем дизайн-макеты для последующей верстки в Тильде, сразу начинаем работать в конструкторе, и параллельно делаем элементы оформления в Фотошопе — это значительно снижает стоимость лендинга и время на его разработку.

Идем за вдохновением на dribbble.com, сразу прикидываем, что хотим сделать оформление первого экрана в синих тонах под космос, ну и иллюстрацию какую-нибудь с ракетой добавим.

Дизайн лендингов на dribbble.com

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

Скопированные лендинги в фотошопе

Теперь в Тильде создаем новую страницу, настраиваем шрифт и добавляем новый блок (мы почти всегда используем Zero блоки)

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

Теперь оформим первый экран нашего лендинга. Добавим космический фон, сделаем затемнение в верхней части, цвет текста меняем на белый, добавляем кнопку «Подробнее».

Первый экран пока еще пустоват

Еще пустовато, и нужно добавить цветовые акценты и иллюстрацию. За иллюстрациями идем на manypixels.co, там качественные бесплатные иллюстрации, для коммерческого и некомерческого использования.

Иллюстрации на manypixels.co

Есть неплохие варианты, но нам не очень подходят. Не беда, собираем в фотошопе одну иллюстрацию из нескольких.

Иллюстрация для лендинга собрана

Аналогично собираем иллюстрации для остальных блоков. Очень важно, чтобы иллюстрация дополняла текст и лучше доносила его смысл.

Иллистрация для блока "Финансовая модель"

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

В итоге у нас получается очень информативный экран с заголовком, текстом и интересной картинкой.

Блок о запуске рекламы в интернете

Экран с контактами оформляем в таком же стиле, как и первый экран.

Экран с контактами

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

Первый экран, адаптированный под мобильные устройства

Осталось только настроить форму обратной связи и можно запускать трафик. В итоге у нас получился такой лендинг:

Сроки и стоимость разработки лендинга

От начала работы над текстовой структурой до полной готовности лендинга прошло 2 дня. Но мы закладываем обычно закладываем 4 дня для аналогичных лендингов.

Стоимоть разработки лендинга на Tilda у нас оценивается поэкранно, первый экран стоит 2500 руб, остальные по 1500 руб за экран. Это с учетом использования готовых иллюстраций с доработками. Так же отдельно оценивается разработка текстовой структуры, обычно от 5000 до 10000 тыс.

Разработка текстовой структуры 7500 руб

Разработка первого экрана 2500 руб

Разработка последующих экранов 9 х 1500 руб = 13500 руб.


Итоговая стоимость лендинга 23500 руб

{ "author_name": "IT4Startup", "author_type": "self", "tags": [], "comments": 3, "likes": -2, "favorites": 18, "is_advertisement": false, "subsite_label": "life", "id": 197269, "is_wide": false, "is_ugc": true, "date": "Sat, 16 Jan 2021 21:36:29 +0300", "is_special": false }
18+
45 дней сериалов и фильмов по промокоду VC45
Активировать
0
3 комментария
Популярные
По порядку
2

за 20к можно и нормальный лендинг заказать, а не на тильде

Ответить
0

По стоимости всегда можно найти дешевле, но будет страдать качество. Что касается тильды - это инструмент, и его нужно применять там, где это необходимо. "Нормальный лендинг" будет разрабатываться 10-15 дней. А мы за 3-4 дня уже запустим пару-тройку лендингов на тильде и получим первые лиды.

Ответить
1

Формирование стоимости очень прозрачное.
Цены за такой подход демократичные.

Результат показанный в такое сроки отличный.
Возьмём себе кое что на заметку)))

Ответить

Комментарии

null