Что такое техническое задание? Как составить техническое задание для landing page

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

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

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

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

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

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

Лендинги

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

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

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

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

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

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

Кстати

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Контакты

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

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

• О компании.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

​

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

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

Помните закон Мерфи? Если вас могут понять неправильно, вас обязательно поймут неправильно. Это справедливо не только в общении между людьми, но и в создании сайтов. Клиент хотел второй «Фейсбук», а получил форум юных собаководов. Разработчик не угадал хотелку заказчика - потратил время впустую.

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

Статья будет полезна:

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

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

Что такое техзадание и зачем оно нужно

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

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

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

Польза для клиента:

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

Польза для исполнителя:

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

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

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

Техзадание составляет исполнитель

Вообще техзадание может составить кто угодно. «Нужен сайт-визитка для стоматологической клиники» - это уже техзадание. Но будет ли оно выполнять свои функции? Вряд ли.

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

Это не значит, что клиент исчезает и появляется в самом конце, чтобы написать: «Збс, одобряю». Он тоже должен участвовать в процессе:

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

Пишите однозначно и точно

Этот совет вытекает из главной цели техзадания - «Убедиться, что клиент и исполнитель правильно поняли друг друга».

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

Посмотрите. Кто-то ведь посчитал этот дизайн красивым и разрешил использовать на своем сайте:

То же самое - с невнятными формулировками, которые ничего сами по себе не значат:

• Сайт должен понравиться заказчику. А если у него будет плохое настроение?
• Сайт должен быть удобным. Что это значит? Удобным для чего?
• Сайт должен выдерживать большие нагрузки. 10 тысяч посетителей? Или 10 миллионов?
• Качественный экспертный контент. Ну, вы поняли.

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

• Сайт должен загружаться быстро → Любая страница сайта должна иметь больше 80 баллов в Google PageSpeed Insights.
• Большие нагрузки → 50 тысяч посетителей одновременно.
• На главной странице выводится список статей → На главной странице выводится список последних 6 опубликованных статей.
• Минималистичный удобный интерфейс подписки → Поле «Оставьте e-mail» и кнопка «Подписаться» → *нарисованный эскиз*.

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

Укажите общую информацию

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

А еще стоит указать цель сайта и описать его функционал в двух словах - чтобы не получить интернет-магазин вместо блога.

Поясните сложные термины

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

Опишите инструменты и требования к хостингу

Представьте, что вы 2 месяца делали крутой сайт. Каждый этап согласовывали с клиентом - он в восторге. И вот пришло время сдавать работу. Вы показываете админку, а клиент кричит: «Это что такое? Модэкс?! Я думал, вы сделаете на «Вордпрессе»!»

Чтобы таких проблем не было, опишите используемые инструменты, движки и библиотеки. Заодно укажите требования к хостингу. Мало ли, вы сделаете на PHP - а у клиента сервер на.NET.

Перечислите требования к работе сайта

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

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

Укажите структуру сайта

До начала отрисовки дизайна и верстки вам нужно согласовать с клиентом структуру сайта.

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

Можно показать структуру списком, можно нарисовать блок-схему. Как вам удобнее.

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

Объясните, что будет на каждой странице

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

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

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

Распишите сценарии использования сайта

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

• Действие пользователя.
• Ответное действие сайта.
• Результат.

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

Подробнее о сценариях использования читайте в «Википедии ».

Определите, кто отвечает за контент

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

Придумать объективные критерии оценки качества текстов довольно сложно. Лучше не пишите ничего, чем «Качественный, интересный и продающий контент, полезный для целевой аудитории». Это мусор, он никому не нужен.

Указать, что весь контент должен быть уникальный, - это полезно. Еще одна защита клиента от недобросовестных исполнителей.

Опишите дизайн (если сможете)

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

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

Вместо вывода: структура техзадания

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

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

• Правила составления Software Requirements Specification. SRS - следующая ступень эволюции техзадания. Нужна для больших и сложных проектов.
• Стандарты и шаблоны ТЗ на разработку ПО. Описания разных ГОСТов и методологий создания технических заданий.

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

Комментарии разработчиков

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

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

ТЗ составляет менеджер проекта после общения с клиентом и обсуждения задачи с дизайнером.

Крупные заказчики часто просят очень подробные ТЗ, в которых описана каждая кнопка. Небольшие компании наоборот не любят дотошные документы на 100 страниц. Долго читать и легко упустить что-то важное. Чаще мы делаем лаконичные ТЗ на 10–15 страниц.

Мы указываем:

• Информацию о компании и цель сайта.
• Требования к дизайну, цветовую гамму.
• Используемые технологии и CMS.
• Кто занимается контентом - мы или клиент.
• Структуру сайта вплоть до каждой страницы.
• Описания каждой страницы. Мы не делаем прототипы, но указываем, какие элементы должны быть на странице, и как они должны работать.

Последние 2 раздела - самые важные. Именно они обеспечивают понимание, какие будет сайт и как он будет работать.

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

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

«Сверстать одностраничный сайт». Пишете почту для получения заявок. «Особенности макета». Как вы помните, у нас ширина сайта 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. ТЗ будет отослано кандидату. Ничего придумывать не надо, сверстать, как на макете. Прислать две ссылки на сайт и с примерами вашей верстки. Здесь я приписал еще три ссылки работающих сайта с вашей верстки. Три, две в любом случае. И дальше анализируйте кандидатов, выбирайте только тех, кто прислал хотя бы несколько ссылок, смотрите, как все работает и выбираете по своему вкусу.