Техническое задание на разработку сайта: как правильно составить и оформить

Вступление

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

Для чего нужно техническое задание

Техническое задание (ТЗ) — это документ, содержащий технические и смысловые требования к сайту.

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

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

Преимущества ТЗ для заказчика

Есть несколько веских причин, по которым подробно прописанное ТЗ требуется заказчику. Среди них:

  • Страховка от некачественной работы. Если заказчик будет недоволен результатом работы, он сможет сослаться на прописанные в ТЗ договоренности. 
  • Способ структурировать задачу. Часто бывает, что заказчик не знает, чего хочет: его пожелания по поводу будущего сайта неконкретны, а формулировки размыты. И тут на помощь приходит ТЗ. Последовательно отвечая на вопросы по проекту, клиент ясно обрисовывает задачу для себя и подрядчика.
  • Защита от незапланированных трат. Точную стоимость готового веб-ресурса сложно выяснить «на берегу». Но техзадание поможет сформировать адекватное представление о предстоящих затратах. 

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

Преимущества ТЗ для исполнителя

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

  • Способ ясно обозначить задачу. Быстро и без проблем разработать нужный ресурс поможет описание всех значимых для заказчика деталей. 
  • Возможность «блеснуть». Классное ТЗ наглядно продемонстрирует экспертность исполнителя. 
  • Защита проделанной работы (и гарантия оплаты). Представьте ситуацию: подрядчик берет в работу крупный проект, разрабатывает сложный веб-ресурс, погружается в тематику, тратит свое время…и представляет готовый сайт заказчику. Но заказчик недоволен! Он утверждает, что хотел CMS на Java, а не на PHP.  Что делать? Обратиться к ТЗ. Если тот или иной нюанс не был прописан в документе, то клиент не может требовать его выполнения.
  • Способ заработать. ТЗ – это первый важный шаг при создании сайта. На этом документе базируется техническое и смысловое содержание ресурса. А потому нередко агентства и фрилансеры расценивают составление техзадания, как отдельно оплачиваемую услугу. 

Особенно большое значение техзадание имеет при создании крупных веб-ресурсов со сложной структурой. Не поленитесь и сделайте ТЗ качественно…или делегируйте задачу специалистам DIART AGENCY. Мы на разработке сайтов собаку съели, а потому зададим все нужные вопросы и уточним важные детали быстро и прицельно точно. В результате вы получите подробный профессионально выполненный документ для создания 100% эффективного ресурса. Поверьте, это сэкономит ваше бесценное время и нервы. 

Кто составляет техническое задание

В чьи обязанности входит составление ТЗ: заказчика или исполнителя? На этот вопрос нет однозначного ответа. 

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

Составление ТЗ — это совместная работа заказчика и исполнителя.

Бриф на разработку сайта

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

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

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

Структура и объем технического задания

Каждое ТЗ состоит из двух основных смысловых разделов: организационной и технической частей.

Организационная часть: общая информация о проекте

Для всех специалистов, которые будут работать над разработкой сайта, в ТЗ нужно добавить вводную информацию о проекте:

  • Общие сведения о компании и целях создаваемого сайта.
  • Подробное описание ЦА сайта, ее интересов и «болей».
  • Описание объема работ. Важно, чтобы каждый специалист, работающий над проектом, видел «картину» в целом. Разработка простого сайта-визитки и создание интернет-магазина с поддержкой всех необходимых сторонних сервисов – это разные вещи. 
  • Информация об особенностях будущего сайта, деталях, на которые нужно обратить особое внимание. 
  • Сроки выполнения работы. 

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

Техническая часть: требования к сайту

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

  • Система управления контентом сайта (CMS). Выбор «движка» – один из первых важных выборов, с которыми предстоит столкнуться при разработке веб-ресурса. «Движок» может быть коммерческим (как 1C-Битрикс),  бесплатным (как WordPress, Joomla, OpenCart) или самописным, то есть создаваемым разработчиком с нуля по требованию заказчика. 
  • Кроссбраузерность. Важно указать, на каких версиях популярных браузеров должен работать будущий сайт. 
  • Адаптивность. На каких устройствах будет чаще всего использоваться сайт? Нужна ли ему мобильная версия? Эту информацию также необходимо добавить в ТЗ.

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

Структура сайта

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

1. Сквозные элементы

Сквозными структурными элементами называют те элементы, которые демонстрируются на всех страницах сайта. К ним относятся: 

  • Хедер (header, шапка сайта) — отдельный информационный блок, располагающийся вверху на каждой странице сайта. В хедере содержатся название и логотип компании, элементы навигации по сайту (меню), контакты, корзина (если речь об интернет-магазине), кнопка «вход/выход» (если на сайт добавлена возможность регистрации). 
  • Футер (footer, подвал сайта) — нижний информационный блок с полезной, но не первостепенно важной информацией. В футер обычно выносятся ссылки на социальные сети компании, полные контактные данные, навигационное меню.
  • Сайдбар (sidebar) — закрепленная боковая панель сайта, которая размещается справа или слева от основного контента и улучшает показатели юзабилити ресурса. Размещенная в сайдбаре информация упрощает навигацию, а также может содержать анонсы или комментарии, рекламу. 
  • Всплывающие окна, попапы (pop-up) — элемент интерфейса, появляющийся поверх основного контента на странице в ответ на определенное действие пользователя. В попап может быть добавлена форма подписки на рассылку, заполнения заявки, заказа звонка. 

В ТЗ нужно добавить как можно более подробное описание вышеуказанных элементов.

2. Уникальные страницы

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

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

Уникальными могут быть страницы самых разных типов. Из описания могут быть примерно такими: 

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

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

3. Прочие страницы

Нередко специалисты, составляющие ТЗ на разработку сайта, забывают добавить описание структуры типовых страниц, к которым относятся: 

  • Страницы ошибок. То есть те страницы, которые увидит пользователь в том случае, если на сайте что-то пойдет не так. 

Больше примеров оформления таких страниц можно посмотреть тут.  

  • Страница результатов поиска по сайту. 
  • Страница авторизации пользователей. 
  • Типовая текстовая страница. То есть структура, на основе которой будут создаваться все новые страницы сайта.

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

Рекомендации для составления ТЗ

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

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

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

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

Вот несколько не самых удачных формулировок: 

  • «Сайт должен быть удобным». Удобным для кого? По каким критериям будет оцениваться его удобство?
  • «Сайт должен содержать экспертный контент». Что делает контент экспертным? Кому он должен таковым показаться? 
  • «Сайт должен выдерживать большие нагрузки». То есть какие? Сотню или тысячу пользователей запросов пользователей одновременно? А может гораздо больше? 

Используемые в ТЗ формулировки должны быть точными и четкими, лучше всего – имеющими цифровое значение. 

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

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

  • для какой компании создается сайт? 
  • какой целевой аудитории он должен быть полезен? 
  • на какие нюансы работы стоит обратить особое внимание? 

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

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

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

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

Зафиксируйте в ТЗ, на каком «движке» будет работать будущий сайт и какой функционал необходимо внедрить в ходе разработки.

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

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

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

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

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

Какие элементы будут на каждой странице сайта? Для чего? Зафиксируйте информацию по наполнению каждой страницы, сделав это одним из двух способов:

  • Способ 1. Прототип. Создание прототипа — наиболее наглядный способ демонстрации интерфейса будущего сайта.
  • Способ 2. Перечисление. Перечисление — менее энергозатратный способ, подразумевающий простое перечисление запланированных элементов.

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

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

Приведем для примера сценарий авторизации в типичном интернет-магазине (OZON, Wildberries и т.п.): 

  • пользователь нажимает на кнопку «Войти» — сайт открывает форму входа/регистрации →
  • пользователь вводит номер телефона/e-mail и получает код для входа — сайт открывает форму ввода кода для подтверждения учетной записи →
  • пользователь вводит полученный код — сайт открывает версию сайта для авторизованного пользователя. 

Если в разработке лендинг или простой сайт-визитка, то прописывать пользовательские сценарии необязательно.

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

Ведь как выглядит сайт без контента? Как рама без картины. 

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

  • контент предоставляется исполнителем и включен в стоимость сайта;
  • контент предоставляется исполнителем и оплачивается заказчиком отдельно;
  • контент предоставляется заказчиком. 

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

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

Сложно описать дизайн объективно. Но кое-что указать все-таки можно: 

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

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

Лайфхаки по составлению ТЗ

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

Где взять сайты-образцы

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

Как определить цветовую гамму

Не знаете, как выбрать цвета для сайта? Попробуйте поискать в интернете палитры хорошо сочетающихся оттенков, просто вбив в поисковую строку «подборки цветов». Или воспользуйтесь сервисами для создания цветовых схем: Adobe Color CC, Colormind, Coolors и тому подобными.

Как подобрать шрифты для сайта

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

В интернете легко найти альтернативу вышеуказанным сервисам. Найдите ту, что подойдет именно вам!

Есть ли специальные требования для написания ТЗ

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

Ошибки при написании ТЗ

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

Нет ограничений во времени

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

Отсутствие наглядности

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

Утрата данных доступа

Важно отнестись к данным доступа серьезно. Получив все нужные логины и пароли (к примеру, для входа на хостер или DNS-регистратор) от разработчика, следует аккуратно приложить их к ТЗ и не потерять впоследствии. 

Качественные прилагательные

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

«На усмотрение разработчика»

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

Не прописана цель создания сайта

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

Не учтена семантика

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

Нет пользовательских сценариев

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

При полном отсутствии опыта в составлении ТЗ стоит прибегнуть к помощи грамотных специалистов. Это поможет получить предсказуемый рабочий результат.

Пример-образец технического задания

Заключение

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

Пора в ребрендинг: 7 признаков устаревшего логотипа

Вступление

Смена логотипа поможет привлечь новую аудиторию, поднять продажи и сделать бренд узнаваемым. Удачный ребрендинг – это залог признания клиентов и увеличения прибыли, в то время как непривлекательный или устаревший логотип может стать одной из причин «торможения» компании в росте.

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

Как понять, что логотип устарел и его нужно обновить

Возможно, вы даже не подозреваете, что вашей компании пора сменить логотип. Может быть, он вам даже нравится. Но эффекта «вау» не вызывает и не помогает в продвижении. Чтобы разобраться, нужен ли вам ребрендинг, рассмотрим 7 основных признаков устаревания логотипа.

Неактуальный шрифт

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

Для логотипа не подходят шрифты со следующими характеристиками: 

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

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

Чрезмерная детализация

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

На сегодняшний день идеальный логотип:

  • максимально простой и универсальный;
  • содержащий максимум 3 цвета;
  • матовый и плоский;
  • с полупрозрачным фоном. 

Наличие объемной графики

Трехмерная графика востребована и современна, но только не при создании логотипов. Вспомните старый логотип Google с объемными буквами: сейчас это не иначе, как моветон. Сегодня бренды отказываются даже от намека на объем в 2D-графике.

Пестрота

Согласно статистике ребрендинга большинство компаний отказываются от многоцветности и отдают предпочтение однотонности. Самый целесообразный вариант использовать 1-2 (максимум 3) цвета, которые станут запоминающейся «фишкой» бренда. С какими цветами у вас ассоциируется Билайн, Альфа-Банк, Газпром? Уверены, вы без труда вспомните их.

Моральное устаревание

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

Отсутствие адаптивности

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

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

Отсутствие конкурентоспособности

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

Другие причины

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

  • Логотип сделан собственноручно. 

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

  • Логотип вызывает негатив. 

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

  • Логотип приводит к путанице. 

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

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

Примеры удачного ребрендинга известных компаний

  • Билайн. Не каждый может вспомнить старый фирменный стиль компании (тогда еще «Вымпелком»). Ребрендинг, сделанный в 2005-м году вывел компанию на новый уровень. В то время и появилась надпись «Билайн» и полосатый круг вместо пчелы на синем фоне. Благодаря ребрендингу, компания лидирует по сей день.
    Кстати, 14 октября 2021 года «Билайн» вновь обновили свои логотип и слоган  (впервые за 16 лет!). Компания решила стать ближе к клиентам: название теперь пишется со строчной буквы, а слоган звучит, как «На твоей стороне».
  • Google. «Мировая» поисковая система за весь период существования не слишком часто меняла логотип. Разноцветной надпись была всегда. Но корпорация любит его совершенствовать, постоянно украшая к праздникам. И пользователи оценивают этот шаг по достоинству. 
  • McDonalds. Самый популярный ресторан быстрого обслуживания был создан в далеком 1940 году. Сейчас он ассоциируется с логотипом в виде желтой буквы «М». Но он не всегда был таким. Раньше в качестве логотипа выступал мультяшный шеф-повар, затем его сменил клоун, а желтые арки появились лишь в 1968-м году, тогда и началось активное распространение ресторанов по США. 
  • МТС. Раньше компания говорила, что не будет менять свой имидж. Но, после ребрендинга «Билайна», пришлось сделать «ответочку» и МТС. Это тот случай, когда у конкурентов, логотип был лучше. После этого, в 2006-м году появилась реклама — белое яйцо на красном фоне. И правда, чтобы не отставать от конкурентов, нужно всегда совершенствоваться.
  • РЖД. В данном примере, ребрендинг произошел не в полную силу. Поменялся только стиль компании. Новый фирменный стиль был продемонстрирован в 2007 году. Выбрать его было непросто, поскольку было представлено 173 варианта. Сейчас, по словам представителей бренда, лого отражает переход к реалиям рынка. Внешние изменения дали положительный эффект, жалко только что кроме внешних изменений мало что поменялось.
  • Евросеть. Хороший пример ребрендинга. Долгое время компания оставалась преданной своему стилю, а в 2011 решила сделать ребрендинг. Если раньше название компании было написано синим цветом на желтом фоне, то сейчас белым цветом на таком же белом фоне. Также есть классический черно-белый вариант логотипа. Плюс «Евросеть» обрела фирменный персонаж — желтую собачку в чёрном ошейнике.

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

Заключение

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

Как адаптировать сайт под мобильные устройства: пошаговая инструкция

Вступление

Сегодня больше половины транзакций в сети осуществляются с использованием мобильных устройств. Согласно статистике «Similarweb Introduces», мобильный трафик за период с 2017 по 2021 год уже вырос на 50%. И продолжает неуклонно расти.

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

Изображение: maestro / shutterstock.com

Проблемы, которые решает адаптация сайта

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

Проблема 1: Некорректное отображение текста и элементов

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

Проблема 2: Отсутствие популярности ресурса

Адаптированный сайт, будучи простым и приятным в использовании, не отталкивает потенциального клиента, а привлекает его, заставляя посещать сайт снова и снова. Посетители особо удачных адаптированных версий сайта советуют его знакомым по принципу сарафанного радио: «Смотри, как удобно они сделали!».

Проблема 3: Низкое ранжирование сайта в поисковой выдаче

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

Изображение: maestro / shutterstock.com

Проблема 4: Низкая конверсия

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

Проблема 5: Неработающий таргетинг

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

Приступаем к адаптации

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

Существует три основных вида адаптации сайта:

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

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

Создание адаптивного дизайна

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

Изображение: maestro / shutterstock.com

Для этого мы можем:

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

Теперь пошагово выполняем каждое из указанных действий:

  1. Открываем доступ к коду страницы (или ее исходному ресурсу). Речь идет о параметрах CSS, JScript, изображениях всех форматов и тому подобное.
  2. Вписываем в код страницы специальный метатег под названием «Viewport». Он позволит нам настроить ширину страницы под нужды того или иного устройства, в нашем случае — мобильного. Параллельная переадресация при использовании этого метатега самостоятельно не применяется.
  3. После инжекта метатега (HTML-код которого Вы легко можете найти в открытых источниках), создаем разметку и настраиваем CSS-фреймворк, используя инструкции и свойства кода.

ВАЖНО! Каждое из перечисленных действий выполняется вне зависимости от типа сайта и его дизайна. Случается, что полученная веб-версия становится более компактной благодаря смещению формата по горизонтали, но не становится адаптивной из-за наложения блоков друг на друга и некорректного переноса шрифтов.

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

Изображение: Десктопная версия сайта логистической компании / allitec.ru
Изображение: Мобильная версия сайта логистической компании / allitec.ru

Что мы получаем в итоге? Узнаваемый при просмотре с экрана мобильного телефона или планшета сайт. 

Создание мобильной версии сайта

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

ВАЖНО! При создании мобильной версии сайта обязательным условием станет вписывание в код сайта тега типа «Link rel=»alternate» с добавлением действующего адреса мобильного сайта. Зачем нужен этот тег? После создания второй веб-страницы и присвоения ей доменного имени, автоматическая система идентификации поисковых систем (у Яндекса и Гугла уж точно) посчитает оба сайта за дубликат одного и, скорее всего, заблокирует один из доменов к выдаче. У поисковиков это называется антиспам-политикой.

Динамическая демонстрация

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

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

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

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

Также вы можете использовать специальные онлайн-конструкторы по созданию сайтов. Самым популярным из них является к Tilda. 

Создание сайта на Tilda

Tilda – это довольно старый и проверенный сервис по созданию сайтов. Несмотря на то, что Tilda позиционирует себя как универсальный конструктор, следует принять во внимание, что лучше всего он подходит для одностраничных сайтов (лендингов). Это связано с тем, что у Tilda простой и понятный, но вместе с тем довольно ограниченный функционал. Базовые функции предоставляются пользователям сервиса бесплатно, но за дополнительные фишки придется заплатить небольшую сумму.

Изображение: Tilda / tilda.ru

В интерфейсе Tilda вы сможете найти вкладку по созданию сайтов для мобильных приложений. На сайте реализован достаточно удобный пользовательский интерфейс, а также имеется доступный FAQ. К основным преимуществам сервиса относятся: 

  • широкий инструментарий, доступный каждому;
  • понятный пользовательский интерфейс;
  • высокая скорость работы;
  • интересный выбор дизайнерских решений (например, шрифты и оформление блоков);
  • выбор шаблонов для ориентирования.

Вместе с тем, сервис обладает и рядом особенностей:

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

Другие конструкторы сайтов

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

  • Wix.com;
  • uKit.com;
  • Nethouse.ru;
  • Конструктор сайтов от Tinkoff.ru;
  • Bitrix24.ru.

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

Как проверить готовый сайт на адаптивность

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

При работе с браузера Google Chrome просто нажмите F12 и выберите соответствующую функцию в «Инструментах разработчика». Аналогичная процедура применяется в Yandex Browser.

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

Изображение: source / shutterstock.com

Заключение

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

  • Большинству проектов подходит адаптивный дизайн, как самый простой в реализации способ адаптации, не требующий глубоких знаний мобильной верстки.
  • Конструкторы мобильных версий — тоже популярный вариант, подходящий многим проектам. Однако этот способ всегда сопряжен с необходимостью оплаты сервиса и определенными функциональными ограничениями.
  • Сайты на WordPress и других известных системах проще всего адаптировать с помощью встроенных шаблонов, плагинов.
  • Для крупных сложно сконструированных порталов чаще всего используют отдельный поддомен для мобильной версии ресурса.  

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

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

CJM: 10 советов по созданию эффективной карты пути клиента

Вступление

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

Что такое Customer Journey Map

Customer Journey Map (Карта Пути Пользователя»/«Карта Путешествия Пользователя) —  метод развития продукта, основанный на изучении особенностей ЦА и ее потребностей.

Проще говоря, CJM — это описание пути пользователя от момента, когда он еще не знает о продукте, до совершения покупки и дальше.

В ходе следования по CJM каждый пользователь проходит несколько контрольных точек: 

  • Осознание (от англ. Awareness): «Пытаюсь понять, что мне нужно»;
  • Изучение (от англ. Consideration): «Уже осознаю свою проблему и ищу ее решение»;
  • Принятие решения (от англ. Decision): «Знаю, как решать проблему, ищу у кого купить нужное»;
  • Покупка (от англ. Purchase): «Покупаю»;
  • Лояльность (от англ. Loyalty): «Покупаю снова и снова»;
  • Готовность защищать бренд (от англ. Advocacy): Покупаю снова и даже рекомендую». 
Изображение: maestro / shutterstock.com

Зачем нужна CJM

CJM – это часть маркетинговой стратегии (а в случае работы над сайтом, часть digital-стратегии), позволяющая быстро привести клиента в желаемую точку и, как следствие, увеличить конверсии и продажи.

Продуманная CJM дает ответы на ряд важнейших вопросов о взаимодействиях ЦА и продвигаемого продукта: 

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

Построение эффективной CJM возможно только на основании детального исследования ЦА продукта. В процессе исследования ЦА разделяется на категории: 

  • Социальные: возраст, социальное положение, пол, доход, национальность, религия, должность, образование.
  • Географические: место жительства, работы.
  • Поведенческие: сроки принятия решения о покупке, место покупки, склонность к спонтанным покупкам, периодичность потребления товара.
  • Психологические: жизненная позиция, мотивация, эмоциональный фон при оформлении покупки продукта, ценности.
  • Сегменты рынка (B2С, B2B или B2D): размер закупок, сезонные изменения, отрасль бизнеса, потенциал покупателя, размер выручки.
Изображение: maestro / shutterstock.com

Каждый бизнес имеет свою индивидуальную CJM, построение которой требует глубокого анализа продукта и целевой аудитории. Провести детальное исследование с полным погружением в специфику проекта помогут специалисты digital-агентства DIART AGENCY, представив карту пути клиента в любой удобной форме (в виде таблиц, графиков и/или схем). 

Когда без CJM не обойтись

Применение анализа Customer Journey Map возможно на любом этапе развития вашего продукта и компании в целом. Но особенно серьезное влияние на работу организации CJM оказывает в следующих случаях:

  • Этап «Старт производства продукта. Когда бренд только выходит на рынок, анализ целевой аудитории и точек ее соприкосновения с продуктом поможет правильно позиционировать компанию.
  • Этап «Уже есть накопленная статистика». Бизнес находится на рынке какое-то время и имеет некоторый объем продаж. Анализ Customer Journey Map помогает скорректировать УТП, проанализировать правильность позиционирования и соответствие характеристик товара запросам покупателей.
  • Этап «Есть препятствия». Компания уже давно существует на рынке. Появилась потребность в анализе повторных обращений для возвращения большего процента покупателей.

Customer Journey Map — это комплексная работа по исследованию пользовательского опыта, как оффлайн, так и онлайн. Тогда как для анализа поведения клиентов непосредственно в интернете выстраивается специальная User Journey Map.

Как составить Customer Journey Map

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

Шаг 1. Определите цель

Определите итоговую цель исследования перед началом составления CJM. От итоговой цели зависит постановка вопросов для фокус-группы и контекст анализа реакции ЦА на продукт бренда. 

Среди целей могут быть:

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

Шаг 2. Соберите информацию о ЦА

Собирая информацию о ЦА, избегайте обобщенных характеристик. Постарайтесь составить детальный «портрет» каждой группы ЦА:

  • подготовьте анкету, отвечающую поставленным целям;
  • соберите данные клиентов (при необходимости мотивируя их с помощью бонусов, акций и других «плюшек» за активность);
  • проанализируйте полученные данные. 
Изображение: maestro / shutterstock.com

Шаг 3. Сегментируйте аудиторию

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

Шаг 4. Проанализируйте каналы и стадии взаимодействия с брендом

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

Среди стадий взаимодействия бренда и клиента выделяют:

  • возникновение потребности у клиента: «проблема»;
  • поиск пути решения проблемы: выбор подходящего предложения; 
  • возвращение за повторной покупкой. 

Знакомство с продуктом начинается с поиска способа удовлетворения потребности и углубляется по мере прохождения клиентом всего пути от формирования задачи до ее решения.

Шаг 5. Найдите барьеры и способы их преодоления

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

Шаг 6. Оформите Customer Journey Map

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

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

10 советов для создания эффективной CJM

  1. Составляйте индивидуальные «портреты» клиентов. При анализе ЦА избегайте обобщенных формулировок. Напротив, опишите каждого целевого покупателя максимально подробно. Чем лучше вы его представите и поймете, тем больше у вас шансов на продажу. 
  2. Не объединяйте разные сегменты ЦА в одном CJM. Не забывайте, что к B2С, B2B и B2D клиентам необходим разный подход. К примеру, если для B2B-клиента важны скидки на оптовые покупки, то для B2C куда более важными показателями будут скорость доставки и аккуратность упаковки. 
  3. Составляйте CJM с опорой на анализ разных ситуации интереса к продукту.
  4. Составляйте CJM регулярно, чтобы вовремя скорректировать позиционирование компании и не упустить новых и старых клиентов. 
  5. Основывайте УТП (Уникальное Торговое Предложение) на CJM. Детальная оценка ЦА в ходе составления CJM поможет выявить боли клиентов и эффективно их закрыть. 
  6. При выстраивании CJM смотрите на ваш бренд глазами клиента.
  7. Визуализируйте Customer Journey Map так, чтобы не отвлекать от сути работы и полученных данных. Излишне художественное оформление CJM ни к чему. Основная задача: наглядно продемонстрировать результаты исследования. 
  8. Используйте полученные данные при обучении сотрудников работе с ЦА.
  9. Не отрицайте пользовательские оценки вашей работы.
  10. Проанализируйте все каналы взаимодействия.

Почему CJM полезна для бизнеса

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

  1. Прибыль растет там, где клиенту легко решить свою проблему сразу. Разрабатывая сайт для логистической компании Allitec Logistics, мы разместили удобную форму расчета стоимости перевозки на главной странице. Теперь заходя на сайт, клиент сразу получает ответ на волнующий его вопрос «Во сколько мне обойдется эта перевозка?».
  2. CJM помогает не тратить деньги компании попусту. Возьмем для примера ту же компанию Allitec Logistics. Благодаря детальной CJM мы выяснили, что ЦА чаще всего интересуются автомобильными перевозками, а уже после железнодорожными, морскими и воздушными. Поэтому наибольшие силы компания сейчас вкладывает в рекламу этого вида перевозок.

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

Как проходит Юзабилити Тестирование — в крупных компаниях и банках

Как составить грамотное ТЗ на дизайн: подробная инструкция

Вступление

Любой бизнес рано или поздно сталкивается с задачами, для реализации которых необходим дизайн. Это может быть дизайн рекламного креатива (например, для таргетинга), сайта или страницы сайта, продукции компании. Давайте разберемся вместе, что нужно добавить в ТЗ для дизайнера, чтобы получить наваристый (если вы понимаете, о чем мы ?) прогнозируемый результат в означенный срок.

Что дает грамотное ТЗ

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

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

Грамотное ТЗ — прочитайте детальную статью

Кто в команде

В создании дизайна принимают участие две стороны: 

  • Руководитель. Человек, который ставит задачу специалисту или группе специалистов, контролирует ход ее выполнения и принимает результат. В роли руководителя может выступать владелец бизнеса или любое другое лицо, принимающее решения (маркетолог, директор по маркетингу и др.).
  • Исполнитель. Один или несколько специалистов, работающие инхаус или на аутсорсе. Это могут быть графические и UX/UI-дизайнеры, 3D-аниматоры, моушн-дизайнеры.

Для создания простых креативов (например, для тестирования рекламной кампании) привлекать отдельных специалистов необязательно. Маркетолог все может сделать сам. Достаточно уметь пользоваться Adobe Photoshop и освоить один из онлайн-сервисов графического дизайна: например, Canva или Crello

Изображение: сервис Canva / canva.com

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

Что нужно знать ДО создания ТЗ

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

  • Что за ПРОДУКТ планируется продвигать? У вас должно быть четкое представление о продукте, его преимуществах и особенностях.
  • Кто КОНКУРЕНТЫ и как они работают? Разберитесь, кто продвигает аналогичные товары/услуги, какие каналы и способы продвижения для этого используются.
  • Для какой ЦЕЛЕВОЙ АУДИТОРИИ предназначен продукт? Составьте детальный портрет вашей целевой аудитории. Дисклеймер. Не стоит ограничиваться набором сухих характеристик – пол, возраст, регион проживания. Согласитесь, что в категорию, например, мужчин 25-40 лет, проживающих в Москве и Московской области, попадают очень разные люди. 

Постарайтесь составить подробный портрет ЦА, выделив ее особенности, нужды и боли.

Как составить ТЗ

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

Чек-лист грамотного ТЗ

  1. Вразумительный заголовок. Включите в него всю основную информацию: «кто исполнитель», «что должен сделать», «к какой дате нужно сделать».
  2. Имя и фамилия исполнителя и его контакты. Укажите конкретного исполнителя.
  3. Описание задачи. Составьте максимально детальное описание.
  4. Исходная информация. Опишите продвигаемый товар/услугу, целевую аудиторию (ту, для которой создается креатив), ожидаемый результат.
  5. Технические требования. Дайте четкий перечень технических свойств креатива и мест его размещения: формат, размер, расширение и т.п.
  6. Общие требования. Приложите список всех требуемых характеристик креатива: цвета, шрифты, элементы и т.п.
  7. Количество. Укажите точное количество необходимых креативов.
  8. Примеры. Приложите к файлу референсы в виде скринов или ссылок.
  9. Имя и фамилия постановщика задачи и его контакты. Чтобы исполнитель при необходимости мог уточнять задачу в ходе выполнения.
  10. Срок выполнения. Укажите конкретные даты и время: дату постановки и дату окончания срока выполнения задачи.

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

Что понадобится?

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

Составить крутое ТЗ помогут:

  • Google Документы. Можно использовать любой текстовый редактор, но Google Документы хороши тем, что дают возможность совместного доступа к создаваемым документам.
  • Программа для создания скриншотов (например, удобные и бесплатные Joxi или Monosnap). Скриншоты пригодятся для демонстрации приглянувшихся референсов конкурентов.
  • Инструмент для выгрузки топовых сайтов конкурентов. Подборка сайтов, попавших в топы Яндекса и Google по схожим с вашими запросам, понадобится для выявления самых высокоранжируемых конкурентов. У них можно подглядеть что-нибудь интересное: оригинальный рекламный баннер, интересный способ показа кейсов и др (в зависимости от задачи).
  • Сервис для создания макетов Balsamiq Mockups. Для большей наглядности после создания текстового ТЗ можно собрать для дизайнера макет рекламного креатива, страницы или даже сайта. Так вы точно сможете быть уверены, что вас правильно поймут.
  • Немного времени и терпения. Дисклеймер. Любой инструмент из предложенных можно заменить на знакомую вам альтернативу.

Заголовок

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

В заголовок добавляем:

  • дату постановки задачи и дату дедлайна;
  • суть задачи;
  • ответственное за выполнение лицо.

Имя и фамилия исполнителя и его контакты

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

Описание задачи

Четко сформулируйте задачу:

  • Продумайте и внятно изложите идею. Не пишите сложно и витиевато, – старайтесь выражаться максимально понятно. 
  • Заранее подготовьте контент (например, написанный копирайтером текст) и примерную схему креатива. В схеме отразите наиболее важные блоки информации, их примерную компоновку.

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

Исходная информация

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

  • Сформулируйте конкретную цель, обозначив ожидаемый от креатива результат. Это может быть переход на сайт, регистрация на онлайн-мероприятие, подписка на email-рассылку или канал и т.п. Например, цель может звучать: «заполнение брифа на сайте владельцами бизнеса и руководителями компаний в сфере агропромышленности, энергетики, транспортной логистики и производства».
  • Опишите ЦА, для которой создается креатив. Укажите пол, возраст, регион проживания, сферу деятельности, должность и уровень дохода целевой аудитории, а также ее интересы, страхи, боли. 
  • Приведите список основных конкурентов. У них можно подсмотреть интересные идеи.
  • Детально опишите продукт. 
  • Дайте доступ ко всем материалам, которые могут понадобиться: логотипы, фото с уже проведенных фотосессий, гайдлайн, брендбук и т.п.

Технические требования

Рекламные креативы различаются по техническим характеристикам на:

  • статичные изображения;
  • GIF-анимация и анимационная графика (моушн-дизайн);
  • видео (со звуком/без, с субтитрами/без, со спецэффектами/без).

При создании креативов важно учитывать их специфические параметры.

Чтобы дизайнер точнее выполнил задачу, добавьте в ТЗ следующую информацию: 

  •  площадка, на которой будет размещен креатив (например, YouTube);
  • формат (например, MPEG4); 
  • размер; 
  • расширение;
  • вес файла;
  • количество кадров в секунду;
  • все остальное, что посчитаете важным.

Общие требования

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

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

Количество

Укажите точное количество креативов, которые вам нужны. Если количество не указано или указан диапазон – например, 5-10 креативов – велика вероятность получить работу, выполненную по минимуму.

Примеры

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

ФИО постановщика задачи и его контактные данные

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

Бонус: как ставить задачи так, чтобы людям было комфортно

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

Изображение: сервис Canva / canva.com

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

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

Итоги

Не пожалейте времени на составление продуманного и подробного техзадания на дизайн. Не поленитесь и проверьте свое ТЗ перед отправкой исполнителю по нашему Чек-листу. Ведь лучше потратить пару часов на постановку задачи, чем получить кота в мешке (и заплатить за него).