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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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