Техническое задание для разработки лендинга. Пользователи с высокой степенью вовлеченности


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подумайте:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В качестве примера в этой статье будет рассмотрено создание ТЗ для лендинга компанией 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. Второстепенные пользователи

Стартапы в eCommerce

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

Дизайнерские площадки

UI kit (а при возможности и сам мастер-класс) можно распространять также на некоторых дизайнерских площадках.


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% — лучше запустить продукт и периодически совершенствовать его (подробнее про ). Надо понять, что ничто никогда по-настоящему не бывает завершено, оно может считаться завершенным лишь на данный конкретный момент. Цифровое пространство постоянно меняется, и создаваемые вами продукты также должны меняться.

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

Заполнение брифа — ответственное дело, от которого во многом зависит судьба всего проекта, эффективность коммуникации между заказчиком/исполнителем. Для того чтобы помочь вам разобраться, мы написали наш мануал. Читайте!

Основные понятия

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

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

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

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

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

Итак, предлагаем наш мануал.

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

Итак, «шапка» обычно содержит следующие пункты:

  • компания;
  • контактное лицо, должность;
  • контактный телефон;
  • сайт;
  • email;
  • другой вид связи (Skype, ICQ).

О компании

В следующем разделе предлагается рассказать полную информацию о бренде. Перечислим основные формы, предлагаемые к заполнению:

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

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

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

Вот наглядный пример фирменного стиля, «говорящего» логотипа от разработчиков LPgenerator.

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

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

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

В контексте выгоды уместно было бы упомянуть любопытное сплит-тестирование, его провели специалисты по маркетингу фирмы из Новой Зеландии — SpaceShips. Сфера ее деятельности — аренда автомобилей. Специалисты решили проверить, какое изображение главной страницы принесет больше конверсий.

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

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

Удивительно, но победила первая версия. Маркетологи нашли объяснение — роль сыграла эмоциональная связь посетителя с продуктом. Красивые пейзажи демонстрировали выгоду пользователя от аренды машины, ведь он может увидеть множество красивых мест, всего лишь сев за руль. Конверсия увеличилась на 8,5%. Вот такой «выгодный» факт.

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

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

Сертификаты, дипломы, отзывы, благодарственные письма — все это социальные доказательства, они служат убедительным аргументом «за» вашу компанию. Не пренебрегайте этим блоком никогда, иначе рискуете нивелировать весь маркетинговый эффект веб-ресурса.

Заполняя этот раздел брифа на разработку landing page, чаще вспоминайте нашу главную рекомендацию. Лучше написать больше, такое решение всегда скажется положительно.

О Landing Page

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

  1. Конверсионное действие, ожидаемое от пользователя: совершить покупку, оставить контакты, скачать файл, прочее.
  2. Желаемый стиль будущего лендинг пейдж (строгий, деловой, винтажный, ультра-современный, другое)
  3. Особые предпочтения в отношении цветовой гаммы
  4. Какие разделы хотели бы видеть? Напоминаем, что обязательными считаются:
    • хедер (где размещается оффер, логотип, CTA-элементы);
    • информация о товаре;
    • преимущества компании;
    • раздел взаимодействия с клиентом (лид-форма, элементы call-to-action);
    • социальные доказательства;
    • футер (адрес, карта проезда, юридический адрес).
  5. Какие графические материалы можете предоставить для работы с сайтом? Например, дизайн этикеток, слайды, прочее.
  6. Желаемая CMS сайта
  7. Нужна ли адаптация под мобильный трафик?
  8. Нужна ли интеграция с социальными сетями, системами интернет-статистики?
  9. Нужны ли счетчики (таймер акции)?

Итак, по порядку. Конверсионное действие, необходимое владельцу бизнеса — определяющий фактор, когда мы говорим о проектировании лендинга. От цели зависит выбор структуры, элементов call-to-action, наконец, того, какой текст написать. Для примера предлагаем вам ряд примеров разных CTA-кнопок, в зависимости от выбранной цели.

Тут конверсионная цель — покупка (выбрать продукты).

Здесь же — получение контактов пользователя, поэтому предлагают только сделать расчет.

Что касается желаемого стиля/цветовой гаммы — желание владельца сайта вряд ли будет непреложной истиной. Безусловно, его мнение берут во внимание, но на деле проектные идеи меняются несколько раз, особенно дизайнерские, они «подгоняются» очень упорно (меняются цвета, шрифты, размеры блоков, многое другое).

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

Тут, например, описаны правила совершения заказа.

Адаптация под мобильный трафик — обязательно. Таким образом удовлетворяются интересы посетителей, часто сидящих в Интернете с помощью смартфонов, планшетов, и поисковых систем. Яндекс, Google, поисковые гиганты, определяют «непослушных», используя специальные алгоритмы, и пессимизируют нещадно.

Кстати, используя LPgenerator, можете сразу разрабатывать мобильные версии.

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

Дополнительные требования

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

Для заказчика совет прежний — пишите как можно больше. Если не хотите «забивать» голову себе, доверьте исполнителю подобрать подходящее доменное имя, только обязательно укажите свои требования.

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

Давайте определимся с концепцией и структурой сайта и на основании вашего видения проблем целевой аудитории составим ТЗ на разработку дизайна одностраничника

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

Что должно содержать ТЗ на разработку дизайна одностраничного сайта

Ваша задача – не просто как можно детальнее описать требования к дизайну, но сделать документ четким, структурированным и понятным. Очень важно использовать маркировку пунктов, чтоб при дальнейшем обсуждении ТЗ на разработку дизайна одностраничного сайта любая из сторон могла просто ссылаться, например, на пункт “4 B”, а не объяснять, что речь идет о моменте, описанном на 3-й странице во втором абзаце снизу.

Заказать техническое задание от 500 руб

Итак, базовое ТЗ на разработку дизайна одностраничного сайта должно содержать:

  • 1. Общее описание одностраничного сайта

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

  • 2. Структура сайта в виде схемы

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

  • 3. Общие пожелания по дизайну:

    • варианты предпочтений по цветовой гамме, желательно с примерами, которые можно генерировать с помощью сервиса Colorscheme.ru;
    • размер сайта (резиновый, фиксированный, мультиразмерный) и разрешение, под которое его нужно будет адаптировать;
    • базовая структура страницы: количество колонок, наличие шапки и футера и других сквозных элементов;
    • другие пожелания, которые касаются конкретных моментов внешнего вида одностраничного сайта.
  • 4. Описание сквозных блоков

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

    • Шапка : каково ее целевое назначение? Должна привлекать к себе внимание, или наоборот – не бросаться в глаза? Какие инфоблоки должны там размещаться? и т.д.
    • Футер – аналогично шапке. Назначение, содержание, акценты.
    • Описание меню должно содержать перечень ссылок (или блоков ссылок) в порядке иерархии. При необходимости нужно уточнить, на каких пунктах должно акцентироваться внимание и какие есть пожелания по оформлению и подсветке ссылок.
  • 5. Описание блоков (экранов) одностраничного сайта

    Описание каждого блока должно включать:

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

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

http://xn--80ahnerbbccukm3exc.xn--80aswg/wp-content/uploads/2017/05/Зачем-вам-простой-и-удобный.jpg 360 950 Одностраничник http://xn--80ahnerbbccukm3exc.xn--80aswg/wp-content/uploads/2018/01/hand.png Одностраничник 2017-05-25 10:34:57







2024 © gtavrl.ru.