Тз на разработку лендинга. Что такое техническое задание

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

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

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

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

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

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

​

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

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

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

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

Примерная схема

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

Вам нужен сайт, но вы сомневаетесь в правильности его структуры и нет уверенности в необходимых блоках на страницах? Ребята сделают прототип сайта - чёткий, грамотный и продуманный, на котором будет видно, где и что расположено, смотрится ли это вместе и будет ли в конце концов работать. Это кропотливая титаническая работа и иногда просто необходимый этап в разработке сайта (например, в случае портала или «тяжёлого» интернет-магазина).

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

Лендинги

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

Хотите заказать хорошие информационные тексты или продающие сео-статьи? Нуждаетесь в клевых главных страницах или текстах для лендинга со структурой? Срочно потребовались креативные названия, сочные слоганы или стихотворения? Обращайтесь к девчонкам - помогут! Всё, что вы хотели - не на словах, а на деле!

Эй! Значит, я готовлю подробное ТЗ, а ты тупо разукрашиваешь и все?

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

Я сделаю так, как считаю правильным на основе своего опыта. Если вам не понравится, переделаю по прототипу. Вы ничего не теряете =)

Вот некоторые отзывы от моих заказчиков:

Кстати

Подписывайтесь, жмите колольчик, ставьте лукасы. Ну вы и так все знаете)

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

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

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

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

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

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

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