60 дней фильмов
и сериалов
18+
Условия подписки Плюс
Мульти: clck.ru/YMaCq
VC60
Забрать
Личный опыт
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 руб

!function(e){var o={};function t(n){if(o[n])return o[n].exports;var r=o[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,t),r.l=!0,r.exports}t.m=e,t.c=o,t.d=function(e,o,n){t.o(e,o)||Object.defineProperty(e,o,{enumerable:!0,get:n})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,o){if(1&o&&(e=t(e)),8&o)return e;if(4&o&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(t.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&o&&"string"!=typeof e)for(var r in e)t.d(n,r,function(o){return e[o]}.bind(null,r));return n},t.n=function(e){var o=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(o,"a",o),o},t.o=function(e,o){return Object.prototype.hasOwnProperty.call(e,o)},t.p="",t(t.s=0)}([function(e,o,t){"use strict";t.r(o);const n=e=>{if("object"==typeof Air){Air.import("module.ajaxify").one("Before page changed",()=>{e&&e()})}};((e="teaser",o=[],t="vc")=>{const r={root:e,index:e+"--index",entry:e+"--entry",loaded:e+"--loaded",location:e+"--%location%",sitename:`${e}--${window.__codename||t}`},a=document.querySelector("."+r.root),i=document.querySelector('[air-module="module.feed"]');if(a){a.classList.add(r.sitename),-1===r.location.indexOf("location")&&a.classList.add(r.location),i?a.classList.add(r.index):a.classList.add(r.entry);const e=()=>{a.classList.add(r.loaded)};return new Promise(t=>{var i;(i=o,Promise.all(i.map((function(e){return new Promise((function(o){var t=document.createElement("img");t.onload=()=>{o(t)},t.onerror=o,t.src=e}))})))).then(()=>{t({showBanner:e,oneBeforePageChange:n,rootHTML:a,css:r,siteName:window.__codename})})})}})("kpsk-footer",["https://leonardo.osnova.io/db4d29e8-6b05-57c9-a668-8be251b5999f/","https://leonardo.osnova.io/4bc540c7-94c3-523d-a568-289bb3048c90/","https://leonardo.osnova.io/f9b0fdc7-0122-5954-86d2-a9c7b69464e5/","https://leonardo.osnova.io/b955990b-dbc0-5bf5-b6b4-d580e1ae8174/"]).then(e=>{e.showBanner()})}]);
0
3 комментария
Популярные
По порядку

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

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

2

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

2

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

0
Читать все 3 комментария
Эксперимент: оформляем банковские карты без бумажных документов

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

Лайфхак в подборе: как ATS-системы помогают экономить время и бюджет рекрутеров

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

Мвидео отказал в замене товара ненадлежащего качества. Битый телевизор

14.11.2021 доставка магазина Мвидео привезла мне домой телевизор LG. При приёме телевизора от доставщиков никаких недостатков не обнаружили ( или не заметили, потому что телевизор был весь запотевший). Включать для проверки тоже не стали из-за запотевания. В тот же вечер через несколько часов телевизор повесили и попытались включить, он не…

На сайтах с эквайрингом от ПСБ появился Yandex Pay

Покупатели с аккаунтом «Яндекса» смогут оплачивать покупки, не вводя данные карты.

Это Элви Рэй Смит: он мечтал создать анимационный фильм на компьютере, соосновал Pixar, но ушёл из компании из-за Джобса Статьи редакции

Смит создал альфа-канал, который используется в Photoshop и других редакторах, работал в Xerox и LucasFilm и убеждал всех, что за компьютерной графикой будущее, однако всерьез его никто не воспринимал – кроме Стива Джобса.

Минэкономразвития РФ приняло предложения РСПП по совершенствованию рынка интеллектуальной собственности

На актуализации плана дорожной карты ТДК (трансформация делового климата) «Интеллектуальная собственность» в соответствии с пожеланиями бизнес-сообщества настоял первый заместитель председателя правительства Андрей Белоусов.

«Мегафон» заблокировал 36 тыс. ₽ на 2 недели по ФЗ № 115

Являюсь абонентом Мегафона второй десяток лет. Несколько лет назад завёл себе карту Мегафон-банка. Очень нравилось, и рекомендовал всем, так как:

Путин поручил разработать вариант налогового вычета для частных инвесторов при долгосрочных вложениях в российские акции Статьи редакции

Фондовый рынок должен не только финансировать инвестиционные проекты, но и приносить доход гражданам, считает президент.

Kornia - Python библиотека для обработки изображений в задачах CV

В этой статье я хотел бы познакомить читателей с библиотекой для ЯП python — Kornia, имеющей богатый функционал в области computer vision. Библиотека написана с использованием pytorch, в ее основе лежат готовые решения, такие как torchvision, PIL, skimage, tf.image, OpenCV. В Kornia реализована возможность выполнения вычислений не только с…

null