Как сделать классный бриф на разработку Landing Page. Образец для скачивания прилагаю. Разработка Landing Page. Техническое задание

Наличие точно составленного технического задания для landing page — половина успеха в его разработке. ТЗ не просто содержит в себе требования к проекту, но помогает сформировать четкое представление о работе над ним. Именно поэтому написанию техзадания стоит уделить максимум внимания и усилий.

Человеку, не имевшему ранее дела с созданием лендинга, написать техническое задание порой кажется невыполнимой задачей. Возникает множество вопросов. А что писать? Какую информацию указать приоритетной? Как сделать все так, чтобы результат не пришлось переделывать по сто раз, расходуя бюджет?

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

В качестве примера приведены скриншоты одностраничника для бизнес-центра 7One, разработанного нашей командой. Подробный кейс о здании можно прочитать .

Цели лендинга

Покупка билетов на мероприятие

Продажа определенного товара или категории товаров

Продажа конкретной услуги (например, модельная стрижка собак, доставка цветов и т.п)

Презентация нового продукта или софта (например, iPhone XS)

На самом деле вариантов предназначения лендинга ещё больше. Общее же у любых типов лендинга — подвести пользователя к совершению желаемого действия.

Хорошая система планирования - технология SMART. Согласно этой концепции, большинство целей должны быть:

• Конкретными
• Измеримыми
• Достижимыми
• Значимыми
• Ограниченными по времени.

Пример такой цели:

Получить не менее 1000 заказов на доставку букетов с сайта за первые две недели после запуска. Сумма среднего чека должна быть не меньше 3000 рублей.

Не обязательно ставить только такие цели. Оптимальное соотношение 80 % к 20 %. Для начала сядьте и выпишите по пунктам, чего вы хотите от будущего сайта.

Определение целевой аудитории

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

Подумайте:

• Какого возраста и пола моя аудитория?
• Кто мои клиенты по роду деятельности? (учащиеся, студенты, домохозяйки, рабочие, бизнесмены и т.д.)
• Какие проблемы их волнуют?
• Как мой продукт может решить эти проблемы?

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

Пример: потенциальные клиенты бизнес-центра «7ONE» - владельцы бизнеса, подыскивающие комфортный офис для аренды на Севере Москвы. Условия аренды помещений в бизнес-центре, прописанные на одном из экранов лендинга, соответствуют потребностям потребителей.

Чем меньше степень вовлеченности пользователя, тем больше информации ему нужно предоставить. Что подводит нас к следующему пункту.

Основные конкуренты

Есть ли уже ваш продукт на рынке? Назовите основных конкурентов и приложите ссылки на их сайты.

Исследование конкурентов поможет вам понять, достаточно ли убедительно вы позиционируете свой продукт. Не стоит слепо копировать чужой одностраничник только потому, что он кажется вам удачным. У конкурентов нужно подглядеть, научиться и сделать свое - лучше и эффективнее.

Посмотрите 5-6 лендингов вашей тематики. Если у вас продукт, которого нет на рынке, изучите максимально близкие по теме сайты. Выпишите себе что вам в них понравилось, а что показалось лишним. Подумайте, какие фишки можно преобразовать и включить в ТЗ.

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

Важно! Не пренебрегайте анализом конкурентов. Лучших на ваш взгляд включайте в ТЗ для примера. Прокомментируйте, что вам у них понравилось и как вы видите это на вашем сайте.

Описание продукта или услуги

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

Кроме того, при написании текста лендинга копирайтер также будет опираться на эти данные.

Структура лендинга

Очень важный момент. Структура есть у любого сайта. Она включает в себя перечень названий страниц, а в случае лендинга — блоков или экранов. Располагается в виде меню для быстрой навигации по странице.

Мы получили окончательный вариант дизайна и теперь нам нужно, наконец-то сделать верстку. Но перед тем, как найти верстальщика и сделать верстку, нам необходимо написать ТЗ на верстку сайта. Я написал основные тезисы, которые я считаю нужно знать любому верстальщику, он у вас это, либо спросит, либо вы это скажете ему это в ТЗ.

«Сверстать одностраничный сайт». Пишете почту для получения заявок. «Особенности макета». Как вы помните, у нас ширина сайта 1000 пикселей, мы еще в дизайне это указывали и здесь мы повторяемся. «Кодировка сайта». Сильно не мучайтесь отчего и почему, просто нужно сделать так. Тогда на всех браузерах, или устройствах будет все нормально открываться, не будет никакой белиберды с текстом. «Шрифт» — Cuprum Regular. У меня, как раз есть Cuprum Regular, я его прикреплю вместе с ТЗ. Если у вас какой-то другой шрифт, значит, указывайте, какие шрифты нужно использовать. «Без CMS, только CSS + HTML + JS». Почему именно так? Я люблю CMS системы, это системы управления сайтами. Многие клиенты хотят видят CMS на своих сайтах, но я придерживаюсь позиции, что сайт и лендинг – это немного разные вещи и лендинг лучше делать без CMS. Почему? Потому, что там не нужно наполнять страницы, многие страницы информацией. Здесь необходимо только исправить несколько блоков, моментов и так далее, т.е. делается это все очень быстро и легко, без CMS. Это первое. Во-вторых, CMS системы обычно используются бесплатные. Бесплатные CMS системы – это одна из самых больших дырок в защите вашего сайта, т.е. сайт у вас может просто исчезнуть из-за вируса, из-за вредоносных каких-либо программ и так далее, если вы правильно не будете ухаживать за CMS. Я предполагаю, что вы бизнесмены, а не программисты, поэтому ухаживать за CMS и следить за хостингом вы особо не будете.

«Границы должны продолжать фон». Что это значит? Это значит, что по бокам тоже должен быть фон. Не просто он должен заканчиваться на 1000 пикселей, а должен продолжаться. «При меньшем размере экрана, меньше 1000 пикселей, верстка не должна ехать». Очень частая болезнь верстальщиков, что верстка начинает ехать, поэтому мы и будем все проверять. После того, как нам сверстают. «Текст должен быть текстом», т.е. там, где у нас идет текст, должен быть текст. Смешно, но факт. Большинство верстальщиков настолько безалаберны, что просто копируют картинки вместе с текстом. Это неправильно, нам нужен текст. «Кнопки должны реагировать на наведение». Тут понятно. То, что у нас идут при наведении, кнопка должна просто менять цвет и так далее. «В слоях макета при наведении включено, по умолчанию — выключено». Все это в дизайне, в psd так и есть, т.е. при наведении, кнопка меняется. Это можно все посмотреть и верстальщик тоже это знает. «На кнопках должен быть текст, как на макете (сверстанно программно, не рисунок», т.е. кнопки должны быть сверстаны программно.

Большинство верстальщиков пытаются таким образом обмануть людей и делают кнопки-рисунки, т.е. вы не можете поменять на них текст, вы не можете их как-либо изменить, очень много проблем появляется. Вам нужно сделать так, чтобы это были программные кнопки, плюс они меньше по времени грузятся и так далее. «Кнопки «заказать обратный звонок» должны открывать: попал в форму с полем «введите свой телефон» и кнопкой «заказать обратный звонок». Здесь все понятно. Здесь я брал из старого ТЗ вариант, не исправил его. «Форма потолок, крышка капота, двери, полуарки и багажник должны реагировать на наведение: одновременно при наведении картинка должна чуть темнеть и текст под картинкой должен быть выделен другим цветом». Либо просто меняться, увидите потом. И «при нажатии на формы должны открываться попап формы «закажите консультацию» с полем «введите ваш телефон» и «кнопкой заказать консультацию». Ну, здесь все логично. «Со всех форм должны при ходить заявки на почту», которую мы сверху указывали. Вот здесь важный момент. «Также в заявке должны быть: источник: utm source, ключевая фраза: utm term». Например, direct и колодезные кольца зжби купить. Сейчас покажу, как это должно выглядеть. Вот, например, заявка с формы, какая форма. С формы заказать консультацию, телефон e-mail, вопрос, лендинг пейдж. Тут написано транскрибация, русский вариант лендинга, источник и ключевая фраза.

Зачем это нужно? Потому что потом, рано, или поздно вы захотите проверить, а с какого источника, например, с Директа, или AdWords идет больше заявок, а вы это сделать не сможете. Либо сможете, но это будете делать через Метрику, например. А здесь можно просто, проанализировав всю почту, сделав поиск по письмам, например, по источникам Директа, либо по источникам AdWords понять, откуда приходило больше заявок. Здесь все очень просто и легко. Тоже самое с ключевыми фразами. Если нужно, вы можете по определенным ключевым фразам собрать хоть какую-то статистику. Далее вы уже сможете подключить свою CRM систему, например, к AMO CRM. Сможете подключить заявки и у вас будет полная статистика, откуда идут люди, с Директа, с AdWords, с каких ключевых фраз и тому подобное. «Если эта заявка на потолок, крышка капота, пол арки, багажник, то с соответствующими пометками».

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

Остальное, в принципе, не существенно. Этого вполне достаточно, чтобы программист понял, что нужно сделать.

И теперь нам необходимо найти верстальщика. Искать можно на всех тех же сайтах — freelance.ru, Work-zilla.com и тому подобное. Я покажу шаблон, как нужно сделать, чтобы получить действительно хорошую верстку. Во-первых, не называйте никогда «сверстать лендинг, лендинг пейд.» и тому подобное, потому что, как только вы пишете слово лендинг пейдж, все дорожает в несколько раз. Вы хотите сверстать одностраничный сайт. И вы никого не обманываете, потому что это одна страница. Стоимость. Максимум 3000 рублей. Знаю прецеденты, что за 1250 рублей делают очень хорошую верстку. Срок выполнения – 2 дня, этого вполне достаточно. Варианты оплаты – без предоплаты, потому что у вас не будет конечного результата, пока вы не оплатите, в любом случае. Вы сначала будете смотреть на работу верстальщика у него на хостинге и только после оплаты он вам отдает все файлы. Способ оплаты – тут выбирайте сами, в моем случае электронные деньги. Специализация. Тут понятно, что веб-программирование и описание проекта. Необходимо сверстать одностраничный сайт по psd. Psd у вас есть. Без CMS, только CSS + HTML + JS. Картинка прилагается. Картинка имеется в виду psd в виде jepg. ТЗ будет отослано кандидату. Ничего придумывать не надо, сверстать, как на макете. Прислать две ссылки на сайт и с примерами вашей верстки. Здесь я приписал еще три ссылки работающих сайта с вашей верстки. Три, две в любом случае. И дальше анализируйте кандидатов, выбирайте только тех, кто прислал хотя бы несколько ссылок, смотрите, как все работает и выбираете по своему вкусу.

Доброго времени суток, уважаемые читатели. Когда уже заказчики прекратят учить дизайнеров работать? Что бы вы ни создавали и сколько бы ни работали, всегда найдется какой-нибудь гаденыш, который скажет, что все неправильно и давай переделывай.

Наверное, один из самых трудных моментов в работе любого разработчика, это сдача проекта и разговор с клиентом. Конечно, нередко попадаются и хорошие клиенты, которые понимают для чего мы учимся и доверяют работу полностью, но для этого нужно себя проявить и создать правильное впечатление. Это удается не всем и не всегда.

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

Как быть альфа-самцом, с которым не спорят клиенты

Для начала давайте обсудим общие моменты. Это очень важно, ведь от них зависит вся дальнейшая работа и количество времени, которая потом уйдет на сдачу – приемку проекта.

Самое важное в нашем деле – сразу грамотно себя подать. Здесь существует очень тонкая грань. С одной стороны, нужно быть доброжелательным, чтобы человек порекомендовал вас (такого замечательного) своим знакомым, а с другой необходимо проявить себя альфа-самцом (самкой), с которым лучше не спорить лишний раз, вы сделаете все круто без лишних советов и наставлений.

Основная ошибка веб-студий среднего уровня, которая не позволяет им продвинуться дальше. Не делайте так и сможете достичь большего

На порталах некоторых фирм можно увидеть брифы на Landing Page. Клиент заходит на сайт, скачивает, заполняет и ждет, когда проект будет готов. Конечно, я понимаю, что у этих компаний скорее всего большая загруженность и они могут себе такое позволить.

Однако, было бы гораздо эффективнее, если бы с каждым клиентом работал менеджер. Это бы могло позволить им повысить прайс. Те, кто способен платить большие деньги хочет, чтобы его облизывали и относились с почтением и трепетом, он, в конце концов платит.

Качественный сервис – это основа любого бизнеса в XXI веке.

Вам, естественно, я тоже рекомендую использовать именно этот подход к работе, общайтесь по Skype с заказчиком, а еще лучше встретьтесь. Заполняйте бриф самостоятельно и лишь потом отсылайте его на утверждение вместе с остальными документами.

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

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

Пошаговое руководство: идеальная встреча с клиентом

Каким должен быть ваш план действий? Вы приходите на встречу, достаете бриф на разработку и заполняете. После этого приходите домой, оформляете в pdf, высылаете на почту клиенту, чтобы убедиться, что все составлено верно.

Учитывая, что вы закрываете доступ к редактированию, человек сможет написать все свои остальные пожелания либо в письме, либо в текстовом документе. Поверьте, их будет значительно больше, если вы откроете доступ к правкам прямо в документе. Это небольшая хитрость, пользуйтесь.

Далее вы снова встречаетесь с заказчиком и суете ему на подписание договор на дизайн, бриф на создание, смету, . Все это в отдельных файлах (я имею в виду не компьютерный термин), на каждом документе ваши контакты, номер телефона, логотип.

Поверьте, это такая мелочь, а придираться к вам будут меньше.

О том, я уже писал, это очень просто. Ну, а логотип профессионально, качественно и подешевле можно сделать при помощи www.logaster.ru . Ну это на тот случай, если кому нужно.

Если встретиться с клиентом лично не получается, вы без труда можете получить все необходимые документы через интернет. Не забывайте о возможности людей распечатывать и сканировать, хотя в некоторых случаях можно воспользоваться службами экспресс доставки FedEx или типа того. Представляете, насколько круто и профессионально вы будете выглядеть?

Как составлять бриф правильно

Итак, вы встречаетесь с клиентом (или общаетесь с ним через интернет) достаете бриф на лендинг пэйдж и начинаете задавать ему вопросы. Записывайте как можно больше. Все это может пригодиться. Даже если вы не впихнете это в окончательный вариант для подписания – вы будете это знать. Супер. Информации много не бывает.

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

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

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

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

• Контакты

Это вам пригодится в любом случае и чем больше контактов, тем лучше. Даже если у вас уже есть телефон заказчика, просите скайп, аккаунт вконтакте и так далее. Обязательно дайте ему , вдруг что-то понадобится. Проявляйте к нему интерес и покажите, что готовы идти на контакт.

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

• О компании.

Целевая аудитория – это один из самых важных вопросов. От нее будет зависеть даже ваш заработок!

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

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

Другая часть дверей в этом же магазине – более дешевые, они рассчитаны на людей, которых в первую очередь волнуют скидки. Почему бы не предложить клиенту сделать два лендинга? Кстати, для некоторых продуктов можно и нужно создавать несколько посадочных страниц.

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

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

• Информация о товарах и услугах.

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

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

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

• Целевая аудитория

Для кого будем создавать одностраничник? Кому выгодно это предложение? Если это женщины, то будем использовать в дизайне витиеватые шрифты. Если для мужчин, то синий, простой и прямолинейный.

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

• Блоки, которые должны быть на сайте

Это еще одна причина не показывать бриф заказчику сразу. Вы – профессионал, не нужно давать клиенту влезать туда, куда ему не обязательно влезать. Не хватало чтобы он вас учил работать! Отмечайте все самостоятельно, а затем утверждайте. Естественно, что вам придется удалить из списка те блоки, которые посчитаете ненужными.

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

Естественно, что мало кто поведется на предложение только потому, что вы скидываете пару тысяч на доставку. Людям, готовым купить утюг за 300 000, акции не уперлись. В тексте (да и не только там) нужно уделять внимание невероятным по качеству материалами, уникальностью товара и громкими именами, которые используют эту вещь.

Ваш заказчик цепляется глазом за «гениальную» идею, увидев в вашем брифе модуль «Акция», и говорит, что ему это жизненно необходимо. Это же круто, давайте подарим к утюгу еще и носовой платок!

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

• Постановка цели

Целью не всегда будет продажа, особенно если нет соответствующей кнопки. Как посетитель LP сможет у вас что-то купить, если на странице максимум что есть – это кнопка заказа обратного звонка? Конечно же, в этом случае цель будет отличаться.

После того как бриф будет заполнен и подписан, вы можете создавать сайт. Кстати, этот документ должен стать приложением к вашему договору. Несмотря на то, что он оформлен в свободной форме – он все равно имеет юридический вес.

Скачайте мой Бриф и пользуйте на здоровье

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

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

В качестве примера в этой статье будет рассмотрено создание ТЗ для лендинга компанией Verse для своего будущего мастер-класса по дизайну Process. Весь процесс разделен на 3 этапа — определение целей и конечного пользователя, нюансы реализации и итеративные изменения.

Цели и понимание пользователя

На этапе планирования вы определяетесь с целями, получаете представление о том, кто ваши пользователи и как вы можете быть им полезны. Эта информация будет служить вам своего рода путеводной звездой, которая не даст сбиться с верного пути.

1. Постановка целей и задач

В первую очередь, вы должны сформулировать свои цели. И не просто какие-то цели, а SMART-цели — те, которые отвечают следующим характеристикам:

• Конкретные (Specific) — цели должны быть предельно конкретными. Вы должны иметь четкое представление о том, над чем вам нужно работать.
• Измеримые (Measurable) — цели должны быть измеримыми, чтобы вы могли оценивать свой прогресс.
• Достижимые (Achievable) — цели должны быть достижимыми. Стремитесь к большим, но при этом реальным целям.
• Значимые (Relevant) — цели должны быть значимыми и соответствовать тому, чего вы хотите достигнуть.
• Ограниченные во времени (Time-bound) — цель должна иметь конкретный срок выполнения, чтобы вы могли не только оценивать, но и подтверждать свой прогресс.

Однако не все ваши цели обязаны быть SMART-целями, некоторые из них могут быть исключительно качественными. Например, хорошее сочетание — это 75% SMART-целей и 25% качественных целей.

Ниже приведено несколько примеров общих целей, которые были использованы Verse:

• Привлечь трафик на посадочную страницу — 100 000 уникальных посетителей за 1,5 месяца с даты запуска.
• Получить адреса электронной почты от тех, кто заинтересован, и от тех, для кого этот курс действительно может оказаться полезен. Получить 2000 регистраций в течение 1,5 месяцев с даты запуска.
• Повысить (awareness) бренда Verse и увеличить трафик блога на 50%.
• В ясной и лаконичной форме рассказать пользователю о мастер-классе Process и о том, для кого он создан. Вызвать интерес.
  • Разъяснить преимущества мастер-класса.
  • Рассказать о себе и о своем опыте.

2. Кто ваши пользователи

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

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

Таблица 1. Основные пользователи

Таблица 2. Второстепенные пользователи

3. Уровень вовлеченности пользователей

Ваш лендинг будут посещать пользователи с разной степенью (engagement), и это тоже нужно учитывать при составлении технического задания. Что вы можете предложить людям для достижения поставленных вами целей?

Рассмотрим, как разделила своих пользователей компания Verse.

Пользователи с высокой степенью вовлеченности

Знают о Verse
Видели готовые работы на сайте компании
Являются частью сообщества

Пользователи со средней степенью вовлеченности

Видели работы на Dribbble, Behance, Pinterest, Designspiration и т.д.
Не знакомы с сайтом Verse

Что вы могли бы им сообщить и предложить?

• Краткий обзор того, что предлагается в мастер-классе и чем он может быть полезен
• Способ регистрации на курс — регистрация с помощью электронной почты
• Предложить заранее что-то ценное — PSD шаблон из курса
• Направить их на блог Verse

Пользователи с низкой степенью вовлеченности

Пользователи, не имеющие понятия, кто такие Verse и что это за курс

Что вы могли бы им сообщить и предложить?

• Краткий обзор того, что предлагается в мастер-классе и чем он может быть полезен
• Способ регистрации на курс — регистрация с помощью электронной почты
• Предложить заранее что-то ценное — PSD шаблон из курса
• Направить их на блог Verse
• Подтвердить ваш уровень не только ссылкой на готовые работы, то качеством самого лендинга.

Как вы можете видеть, чем меньше вовлечен пользователь, тем больше вам нужно общаться с ним.

Совет: если на вашей посадочной странице есть форма подписки, подумайте о том, чтобы предложить пользователям в обмен на их адрес электронной почты.

Итак, что вам понадобится, чтобы удовлетворить цели пользователя и ваши собственные:

• Лид-форма, чтобы пользователи могли зарегистрироваться.
• Подробности или примеры из мастер-класса — демонстрируются посредством видео, текста, визуального дизайна или изображений.
• Рассказать пользователям, что нового они узнают из мастер-класса (работа с сетками, типографикой, макетами, и как решать различные проблемы).
• Объяснить, как данный мастер-класс может повысить их ценность как дизайнеров. Приятный визуальный дизайн и типографика. Важно продемонстрировать надежный дизайн, опирающийся на все упомянутые принципы.
• Рассказать достоверную историю. Быть собой и передать атмосферу курса.
• Продемонстрировать свои работы и рассказать о себе.

4. Пользовательские истории

Пользовательские истории (user stories) похожи на , за исключением того, что они более конкретны и действуют как более функциональное требование. Однако ключевым отличием здесь является акцент на том, чего хочет пользователь, а не просто на том, каковы технические требования:

Можно сделать даже лучше, заменив пользователя определенной целевой аудиторией, например: как креативный директор, я хочу…, [потому что....].

Техническая реализация

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

1. Поиск подходящего шаблона

Ищите все, что может оказаться вам полезным: шаблоны проектирования, вещи, которые работают, нравятся, могут иметь отношение к проекту. Сохраняйте себе все это и возвращайтесь по ходу работы. Это ваш источник вдохновения, который поможет вам в формировании ваших собственных идей. , помимо конструктора, открывает доступ к галерее готовых страниц, где представлены лендинги по целому ряду востребованных категорий.

2. Структура и взаимодействия

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

Разработайте схематичный макет и переходите к визуальной составляющей. Последовательность в случае с Verse следующей:

1. Познакомить пользователя с курсом. Разместить форму регистрации.
2. Рассказать пользователю об основных преимуществах курса и о том, что он сможет вынести из него.
3. Объяснить, для кого предназначен данный курс.
4. Пример урока и изображение одного из экранов мастер-класса.
5. Заключительная формулировка задачи и цели данного курса.
6. Последняя форма регистрации.
7. Краткая биографическая справка об авторе.

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

3. Визуализация

За основу лендинга была взята сетка (grid) и холст (canvas) сайта Verse, а также используемые в его дизайне шрифты Chronicle Display и Gotham.

Начните с проработки одной какой-то детали (в описываемом примере это была ) и, как только вы будете ей довольны, переходите к следующей, постепенно выстраивая все детали вокруг этого одного ключевого визуального элемента. Изначально холст выглядел примерно так:

Получилось довольно неплохо, но еще было над чем поработать. Акцент был сильно смещен влево и также не хватало динамичности:

Этот вариант показался Verse наиболее подходящим. Но поскольку прав на изображение macbook у авторов не было, они воссоздали нечто похожее с помощью векторных фигур.

Параллельно шла работа над остальной частью посадочной страницы. Были размещены несколько скриншотов из мастер-класса в виде карточек. Кроме этого, пользователю разъяснялось, что он получит из данного курса:

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

Изменения и итерации

Вы подошли к тому моменту, когда вы, наконец, запускаете посадочную страницу. Ваш лендинг еще не идеален, но только поместив его в живую среду и получив обратную связь от пользователей, вы поймете, что может быть еще улучшено вами. Изменения и итерации (iterations) — ключ к успешным сайтам и продуктам.

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

Стремление к совершенству — это хорошо, но если исправление 1% по времени занимает столько же, сколько и выполнение 99% всего остального, лучше оставить все как есть. Даже если это не 1%, а все 10% — лучше запустить продукт и периодически совершенствовать его (подробнее про ). Надо понять, что ничто никогда по-настоящему не бывает завершено, оно может считаться завершенным лишь на данный конкретный момент. Цифровое пространство постоянно меняется, и создаваемые вами продукты также должны меняться.

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

• С первым пунктом проблем никогда не возникает – общие сведения о заказчике и контактная информация. Однако составление даже этого раздела имеет свои нюансы. Постарайтесь отразить положительные моменты в работе вашей компании – основная деятельность и ее особенности, конкурентные преимущества, географический охват интересов.
• Краткий анализ конкурентов. Нельзя сказать, что это обязательно, разработчик все-равно будет проверять представленную информацию. Но включение обзора коммерческих соперников в техническое задание лендинга поможет ускорить работу – кто лучше инициатора проекта знает своих конкурентов и особенности их деятельности.
• Торговое предложение. Его часто называют уникальным и это путает владельцев сайтов, которые точно знают – ничего особенного, просто бизнес. Между тем, в техзадании следует отразить индивидуальные особенности коммерческого предложения и его привлекательные стороны. Это могут быть как характеристики товара или услуги, так и уровень сервиса или гарантийные обязательства.

• Описание веб-страницы. Следует указать все собственные наработки, способные помочь разработчику понять замысел инициатора проекта. Внешний вид и дизайн. Логотипы, слоганы, рекламная составляющая, элементы фирменного стиля. Перечень и расположение информационных блоков, которые вы хотите разместить на сайте. Соотношение текстового и графического контента, их качественная и ценностная составляющие. Разработчику пригодится любая информация, способная проиллюстрировать требования заказчика к лендингу. Многие веб-агентства рекомендуют предоставить образцы действующих веб-ресурсов, которые полностью или частично отвечают требованиям заказчика.

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

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

Вторая деталь – доменное имя и хостинг. Не забудьте внести этот пункт. В противном случае размещать проект в сети будете самостоятельно, а это весьма специфическая работа.

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

​

Требования к изображениям для лендинга

Чем способен выделиться продающий сайт на фоне себе подобных, в достаточном количестве представленных в интернете. Торговое предложение – едва ли. Если, конечно, вы не производите авторские украшения и не имеете достойных конкурентов в своей нише. Уровень сервиса или других сопутствующих услуг – действительно, здесь можно найти свою «фишку» и привлечь покупателя (клиента). Но мы-то говорим о выделении сайта. Прежде чем оценить ваше предложение, посетителя следует заставить с ним ознакомиться, заинтересовать внешним видом. И здесь первостепенное значение играют элементы оформления сайта –