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 комментария
Сберлогистика и потерявшаяся посылка

Добрый вечер, господа и господессы. Хочу поделиться своей историей случайной (и, вероятно, последней) связи со Сберлогистикой.

Обзор глобальных сделок: неделя от 29 ноября 2021

Традиционный недельный обзор глобальных сделок.

Сайты в 2021 году
Дайджест новостей Сбера: сайт Digital Пётр, сценарии для умного дома и платина от Forbes

Прошлый дайджест мы целиком посвятили 180-летию Сбера, поэтому новостей накопилось много. Среди них — запуск сайта по распознаванию рукописей Петра I, большое обновление на платформе умного дома Sber и другие. Рассказываем всё самое интересное.

Картинка, сгенерированная ruDALL-E по запросу «рыжий котик»
SkillFactory раздает подарки: повышенная ставка и новогодний марафон для вебмастеров

В преддверии Нового года мы решили порадовать своих настоящих и будущих партнеров — участников партнерской программы школ Skillfactory, Contented и Product LIVE. Это возможность получить денежный бонус и заодно увеличить прибыль от продажи наших курсов.

Продавец eBay из Кургана стала победителем в финале Всероссийского конкурса «Молодой предприниматель России 2021»

27 ноября в Москве состоялся финал ежегодного конкурса «Молодой предприниматель России 2021». В нём приняли участие предприниматели и самозанятые в возрасте до 35 лет. Всего было подано более 300 заявок из 43 регионов страны.

И сотрудников тоже касается: кибербуллинг на рабочем месте
Design vector created by pikisuperstar - www.freepik.com
«Вещи должны быть не только функциональными, но и красивыми»: как устроена ландшафтная архитектура Карла Сёренсена

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

Овальные садовые участки в Неруме Metropolis
Сбербанк компрометирует код CVC при выдаче карты

Пришёл срок замены карты, по сроку действия. Стоит сразу сказать, что на низовом видимом варианте сотрудники Сбера работают отлично. Всегда помогут, подскажут, доброжелательно и в целом приятно. Но когда работает та невидимая часть Сбера к которой не приедешь, увы начинаются проблемы.

Откуда берут взрослые деревья для парков и улиц

А также сколько они стоят и почему выращивать их — неплохой бизнес.

Автор огромного дополнения к игре Red Alert 2 завершил работу над проектом
null