Автор: Александра Гонтарева

Mobile First: да или нет?

Вступление

Раньше просмотров с компьютера было больше и все сайты создавали сначала для больших экранов (для ПК), затем начали создавать адаптивные версии для смартфонов или отдельные мобильные версии сайтов. Сейчас все наоборот, поскольку просмотров с телефона стало гораздо больше, чем с ПК. Пришло время нового направления в разработке — mobile first, что означает «сперва для мобильных», а для десктопа — это уже второстепенный шаг.

Что такое Mobile First и в чем его суть

Понятие Mobile first (в переводе самого Гугла означает индексирование, которое направлено на мобильные устройства) — это новая концепция индексации, следуя которой для ранжирования сайтов Google использует мобильные версии страниц веб-сайтов. Раньше Гугл сперва учитывал десктопную версию, а оптимизация под смартфоны лишь улучшала ранжирование.

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

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

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

Есть ли разница между адаптивным дизайном и Mobile First

Оба способа гарантируют комфортное взаимодействие с веб-сайтом. Рассмотрим подробнее их главные отличия.

  • Адаптивный вариант. При создании веб-проекта создают статичные макеты, рассчитанные на разные гаджеты. Шаблоны имеют структуру расположения и размера зависимо от экрана. Как правило, создают стандартные макеты от 320 до 1600 пикселей. Специальные скрипты выявляют размеры дисплея конкретного посетителя и открывают подходящий шаблон. В таких макетах учитывают особенности разных моделей устройств. Допустим, для больших экранов — создают только горизонтальный вид, а для гаджетов — возможность переключения между горизонтальным и вертикальным видом.
  • Вариант Mobile First. При таком раскладе сначала создается и открывается версия для гаджетов. После этого она изменяет масштаб зависимо от ОС, вебмастер сможет вносить в дальнейшем правки, добавляя дополнительные опции и работать со стилями.

Как работать с Mobile First

Работа по такому принципу проходит так:

  1. Создается дизайн, чтобы на смартфоне всё смотрелось красиво. Основываясь на нарисованном дизайне пишут код. Либо код и сам дизайн создают параллельно исходя от общего видения.
  2. При необходимости создают отдельный вариант версии для ПК, если необходимости нет — делают так, чтобы мобильный дизайн мог «увеличиваться» до больших размеров.
  3. При внесении правок работают сначала с версией для смартфонов и только потом переходят к компьютерной версии.

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

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

Делаем акцент на контенте

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

Возьмем для примера торговую онлайн площадку. В поступках посетителей есть следующие закономерности:

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

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

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

Создаем визуальную иерархию

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

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

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

Упрощаем навигацию

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

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

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

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

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

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

Создаем интерфейс User-friendly

Комфорт посетителя – важное требование Mobile First. Создав идеально проработанный UX, можно рассчитывать на то, что человек вернется на вебсайт еще ни один раз.

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

  • Расположение содержимого в области просмотра;
  • Грамотная типографика;
  • Нацеленность на сенсор;
  • Устранение контента, который не воспроизводится;
  • Оптимизация всех виджетов сайта;
  • Уменьшение ненужный пользовательских действий.

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

Где нужно применять

Mobile First можно использовать абсолютно везде, если в этом есть необходимость: в информационных и новостных сайтах, интернет-магазинах, сервисах доставки и дистанционных услуг, службах такси, социальных сетях и сервисах. Реализовать mobile first можно абсолютно на любом проекте, если перед вами стоит главная задача – обеспечить пользователям удобный просмотр контента со смартфона.

Плюсы и минусы Mobile First

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

Плюсы:

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

Минусы:

  • Временные и финансовые затраты на разработку mobile first;
  • Визуальное оформление весьма ограничено.

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

Продвигаем мобильное приложение: бесплатно и платно

Вступление

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

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

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

Что такое performance-маркетинг

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

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

Чаще всего Performance-маркетинг используется при бюджете на рекламу в 200 тысяч рублей и более. Хотя и при более скромном финансировании с его помощью можно орудовать базовыми инструментами: например, отслеживать, какое финансирование требуется тому или иному каналу, или смотреть статистику по эффективности инструментов.

С помощью Performance-маркетинга можно:

  • измерить результаты эксплуатируемых каналов по рекламе;
  • оценить бизнес-показатели: CPA и ROI;
  • в реальном времени повлиять на результаты продвижения; 
  • синхронизировать работу всех каналов продвижения (SEO, SMM, email-рассылки, реклама в СМИ).

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

Важно понимать, что Performance-маркетинг будет эффективен только после продолжительной настройки всех каналов продвижения и детального тестирования продукта и его целевой аудитории. И в этом вам с радостью помогут специалисты DIART AGENCY. К ключевым компетенциям digital-агентства относятся как разработка продающей структуры сайта или лендинга (на основе CJM и прототипа), так и создание рекламы и дизайна для любого бизнеса. И кстати, что немаловажно, с DIART AGENCY вам гарантированы внимательное отношение к проекту и скрупулезность в проработке каждой детали.

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

Для успешного продвижения приложения в магазинах — в App Store, Google Play и их менее популярных аналогах — нужна продуманная стратегия. Еще до начала работы над приложением важно понимать, кто им будет пользоваться, на какую целевую аудиторию оно рассчитано. А после успешного попадания в ЦА необходимо постоянно продвигать приложение, не давая ему затеряться среди конкурентов на рынке. Именно на этом этапе подключается performance-маркетинг.

Основные понятия мобильного performance-маркетинга: 

  • магазины мобильных приложений («сторы»): App Store, Google Play и т.д.;
  • трекинговые системы («трекеры») для отслеживания установок приложения;
  • бесплатные каналы распространения мобильных приложений (собственный сайт, SMM, реклама в СМИ и т.д.);
  • платные каналы распространения мобильных приложений (Яндекс.Директ, Google Ads и т.д.).

Магазины мобильных приложений («сторы»)

App Store и Google Play — крупнейшие магазины приложений, продвигающие аппы для iOS и Android соответственно. С их помощью возможен охват огромной потенциальной аудитории. Но стоит учитывать, что и конкуренция на этих сторах очень высока. 

В то же время существуют альтернативные магазины приложений — ряд популярных аналогов Google Play (Aptoide, Amazon Appstore, GetApps и многие другие) и целая коллекция китайских сторов, появившихся из-за запрета на сервисы компании Google в Китае. 

При выборе стора/-ов для размещения приложения нужно: 

  • обратиться в тем сторам, которыми пользуется целевая аудитория приложения (например, для Китая это будут TencentMyApp, а для Кореи — SK T-Store);
  • выбрать стор в зависимости от того, на публикации какого типа приложений он специализируется (это могут быть мини-игры, утилиты, бизнес-приложения и т.д.).

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

Трекинговые системы («трекеры»)

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

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

  • Install Referrer — метод атрибуции, основанный на добавлении уникального параметра, который передается по ссылке. 
  • Device ID Matching — метод атрибуции, сохраняющий первоначальный идентификатор пользователя при клике на баннер и сверяющий его с параметрами девайса при установке приложения. 
  • Fingerprint — метод атрибуции, основанный на сборе информации об устройстве в момент прохождения редиректа. 

Мобильные трекеры играют незаменимую роль в performance-маркетинге. Они помогают маркетологам:

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

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

Бесплатные каналы распространения мобильных приложений

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

Представьте, что вы выложили свое мобильное приложение в один из самых популярных доступных магазинов (App Store или Google Play). У приложения хорошие отзывы, отличная оценка, но…оно все равно не достаточно востребовано и запланированные вами прогнозы по скачиваниям и установкам не оправдываются. Что же делать? Обратиться к каналам привлечения бесплатного трафика. 

Бесплатно привлечь внимание к приложению, рассказав о нем потенциальным клиентам, можно разными способами, среди которых: 

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

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

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

Платные каналы распространения мобильных приложений

Платные каналы распространения мобильных приложений — это, прежде всего, контекстная и таргетированная реклама. Запускается она с помощью соответствующих инструментов: 

  • Google Ads — контекстная онлайн-реклама для размещения на страницах с результатами поиска Google;
  • Яндекс.Директ — сервис для размещения контекстной рекламы на Яндексе; 
  • Facebook Ads — сервис для запуска рекламных кампаний на Facebook (и, соответственно, Instagram);
  • myTarget — платформа для настройки рекламы во ВКонтакте, на Одноклассниках, Моем Мире и других социальных сетях от Mail.Ru Group.

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

Анализ конкурентов

Для начала разберемся, почему Performance-маркетинг предполагает проведение анализа конкурентов. Представьте ситуацию: ваше мобильное приложение уже год на рынке, и дела вроде бы идут неплохо. Есть стабильные продажи, от клиентов регулярно поступают позитивные отзывы о сервисе…А теперь обратите внимание на два ключевых параметра: LTV и CRR (посмотреть их можно с помощью инструмента Google Analytics).

  • LTV (LifeTimeValue) — параметр, демонстрирующий жизненную ценность клиента. То есть ту прибыль, которую бизнес получит от пользователя за все время работы с ним. 
  • CRR (CustomerRetention) — параметр, демонстрирующий способность бизнеса удерживать клиента. 

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

Как анализировать конкурентов

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

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

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

MVP

Полезным шагом в подготовке конкурентного приложения будет создание MVP (Minimal Viable Product) — тестовой версии приложения. С ее помощью бизнес может:

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

MVP поможет оценить рабочие гипотезы и получить первые отклики от пользователей.

Правила ранжирования в App Store и Google Play

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

Сравним параметры ранжирования App Store и Google Play и выясним, какие правила ранжирования им свойственны:

  1. Название. 
  • В App Store под поисковый индекс попадает до 30 символов. 
  • В Google Play больше – до 50 символов.
  1. Подзаголовок. 
  • В App Store подзаголовок играет не последнюю роль, занимая до 30 символов. 
  • В Google Play отсутствует возможность добавления подзаголовков.
  1. Ключевые слова. 
  • В App Store ключевые слова должны содержать не более 100 символов + употребляться в верных словоформах. 
  • В Google Play поля под ключевые слова отсутствуют, нельзя использовать брендовые запросы (в том числе брендовые запросы конкурентов), выдача приложений персонализирована. 
  1. Краткое описание приложения. Доступно в обоих магазинах. 
  • В App Store под описание проекта выделяется 170 символов, но оно не попадает под индекс. Плюс его можно менять. Указав, например, что на товар действует скидка. 
  • В Google Play под описание продукта выделяется всего 80 символов. Менять релиз нельзя, зато он индексируется.
  1. Отзывы. 
  • В App Store отзывы не индексируются. 
  • А Google Play отзывы индексируются. Причем алгоритм учитывает ключевые слова в комментариях. Значит, ключи можно вставлять прямо в текст отзыва — ранжирование будет лучше.
  1. Локализация. 
  • В App Store есть понятия главной и дополнительной локализации у одной страны. Для пользователя это означает, что в зависимости от настроек языка на устройстве, он будет видеть разные страницы приложения с разными метаданными. Для разработчика — что при индексации приложения поисковым движком App Store будут учтены текстовые индексируемые поля.
  1. Встроенные покупки. 
  • У App Store встроенные покупки — это одна из главных фишек. На экране приложения пользователь видит возможность приобрести предмет в игре, подписку, какую-либо услугу. Каждая услуга имеет название, иконку и краткое описание. Подобные предложения занимают больше места на экране юзера, что положительно сказывается на общей конверсии. 
  • В Google play встроенные покупки отсутствуют.

Продвижение в App Store

Чаще всего продвижение приложений на App Store осуществляется тремя основными способами: 

  • через работу с ключевыми словами и фразами;
  • через вывод приложения в топ по популярным запросам (Trending Searches);
  • с помощью выхода в ТОП App Store или по категориям. 

Каждый из этих способов эффективен, имеет свои особенности и достоин отдельной статьи. Но сегодня мы хотим порекомендовать вам 5 неочевидных советов для продвижения приложения на App Store:

  1. Запустите MVP (то есть приобщите людей к тестированию!). На вас будет работать сарафанное радио, эффект эксклюзивности и открытость перед публикой. Люди почувствуют себя частью проекта, а, значит, неминуемо установят ваше приложение.
  2. Работайте с  медиа. Найдите подходящую по тематике площадку, наймите хорошего копирайтера или журналиста. Пусть он пишет обзоры на приложение, делает гайды и создает рекламные материалы.
  3. Используйте раздел «Что нового». Добавляйте в этот раздел информацию о продукте, об обновлениях, об исправленных ошибках. Делитесь новостями с людьми — сделайте товар живым и постоянно развивающимся.
  4. Поработайте над видимостью приложения в App Store. Действуйте, как разработчик, занимаясь ASO-продвижением мобильного приложения.
  5. Продвигайте приложение в интернете. Социальные сети — это хорошая реклама без больших затрат. Растите аудиторию, рассказывайте про продукт во ВКонтакте, Instagram и т.д.

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

Продвижение в Google Play

Выделим основные моменты, на которые следует обратить внимание при продвижении продукта в магазине от Google:

  1. Выбор категории для приложения. Гугл рекомендует выбирать категорию товара максимально точно для лучшего ранжирования. 
  2. Используйте фичеринг. Фичеринг позволяет бесплатно попадать в тематические подборки на главной странице магазина. Размещается предложение автоматически и двигается по площадке с помощью алгоритма. 
  3. Раздел «Выбор редакции», в который попадают лучшие приложения площадки. Раздел обновляется 1 раз в 3 недели или месяц, зато гарантирует рост скачиваний и популярности.
  4. Бесплатные рекомендации. Чем чаще ваше приложение скачивается, тем активнее магазин продвигает его.

Не забывайте, что самое главное условия для успешного продвижения в Google Play (как и в App Store) — это высокое качество продукта. Плюс не упускайте возможность позаботиться о привлекательности приложения: добавьте яркую иконку высокого качества, опишите свой продукт ясно и по существу.

Заключение

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

Используйте их аккуратно, анализируйте полученные результаты и не переставайте двигаться вперед!   

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

Вступление

Что нужно писать в техзадании? Кто и зачем должен этим заниматься? Специалисты 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

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

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

Итоги

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

Как мы нашли графического дизайнера в штат за 4 дня с помощью классного ТЗ

Вступление

DIART AGENCY, молодое digital-агентство, в декабре 2020 года искали графического дизайнера через сервис hh.ru. Рассказываем, как все было и что из этого вышло. 

130 откликов за 3 часа

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

  • Креативный. Наше агентство работает с клиентами из сфер агропромышленности, энергетики, производства и транспортной логистики. А потому в дизайнере мы ищем способность делать сложное ясным и привлекательным. 
  • Адекватный. Важно, чтобы человек понимал, что уместно, а что нет. Нам не нужен креатив ради креатива, шуточки на грани фола, двусмысленности и прочие упражнения в остроумии.
  • Командный игрок. Если можно один раз найти подходящего специалиста, то…лучше так и сделать. Текучка — не наш случай. 

Мы не стали изобретать велосипед и пошли за дизайнером на hh.ru. 

День первый. Знакомимся с рынком и составляем вакансию.

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

Знакомимся с рынком

На момент написания статьи (август 2021 года) сервис hh.ru по запросу «графический дизайнер» выдает 13,5 тысяч резюме за месяц в России:

Количество резюме по запросу «графический дизайнер» за период с 09.07.21 по 09.08.21 в России

А вот резюме специалистов с подходящим для нас опытом от 1 до 3 лет и, соответственно, подходящими зарплатными ожиданиями нашлось почти в 7(!) раз меньше:

Количество резюме по запросу «графический дизайнер» с опытом от 1 до 3 лет за период с 09.07.21 по 09.08.21 в России

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

Составляем вакансию

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

В текст добавили:

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

Полный текст вакансии с работного сайта можно посмотреть здесь. 

Получаем первые отклики

В первые три часа на вакансию откликнулись более 100 человек: 

Нашу вакансию просмотрели 1 286 человек, из которых 241 оставили заявки

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

Уровень зарплаты в составленной нами вакансии

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

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

День второй. Составляем творческое ТЗ

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

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

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

Для нас было важно: 

  • Продемонстрировать, как нам приятен интерес человека к нашей вакансии.
  • Предложить задачу, в которой можно проявить креативность. 
  • Гарантировать обратную связь (нет ничего более неприятного, чем стараться и получить в награду глубокомысленное молчание!).
  • Указать конкретную дату сдачи ТЗ.

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

Тестовое задание, которое мы отправили всем откликнувшимся кандидатам на 2-ой день поиска

День третий. Получаем результаты ТЗ и отбираем лучших кандидатов

В ответ на разосланные ТЗ мы рассчитывали получить в лучшем случае 5–10 работ от самых заинтересованных ребят. Но результат превзошел все наши ожидания! На третий день поиска графического дизайнера нам поступило более 80 выполненных техзаданий.

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

87 соискателей из 241 откликнувшихся на вакансию отправили нам выполненные ТЗ

День четвертый. Выбираем лучшего кандидата

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

Выбираем лучшие работы

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

Собеседование

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

Собрали в папке все ТЗ для голосования внутри команды

Рекомендации компаниям в поиске

От момента публикации вакансии на hh.ru до выхода на работу нашей новой, действительно классной, сотрудницы прошло меньше недели. Это рекорд даже для digital-сферы. Поэтому мы взяли на себя смелость дать пару советов компаниям, находящимся в поиске творческих специалистов: 

  • Подходите к составлению вакансии креативно и с душой. 
  • Просите сделать тестовое задание. Работы в портфолио могут не соответствовать реальным навыкам кандидата. 
  • Предлагайте адекватное тестовое: дайте соискателю возможность покреативить и не требуйте выполнения слишком времязатратных задач (1,5–2 часа на ТЗ — идеально). 
Как проходит Юзабилити Тестирование — в крупных компаниях и банках