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

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

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

Нет, данное заявление — не очередной кликбейт от маркетологов.

Команда Ant-Team.ru разработала свой способ создания подробнейшего технического задания для дизайнеров и разработчиков.

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

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

Зачем мы вообще это делаем?

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

Как так вышло и почему мы, а не кто-то другой?

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

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

Если говорить конкретно о задаче на ТЗ для дизайнера, сеошников в меньшей степени интересуют такие дизайнерские фишки, как цветовая гамма, содержимое картинок на страницах или закорючки на шрифтах. Дизайн в этом понимании мы не трогаем и оставляем на усмотрение дизайнера и клиента. В рекомендациях же мы говорим о заполнении страницы: блоках, необходимых для повышения доверия у посетителя и поисковика. Нам не всегда важно, как они будут выглядеть, но нужно, чтобы они в принципе были. Неподготовленный человек, не знакомый с Инструкцией для асессоров Google (или хотя бы с данной статьей), по нашему опыту упускает большую часть YMYL-факторов, что в дальнейшем может сказаться на ранжировании.

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

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

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

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

Что будет результатом работы?

Для одной страницы

В случае когда мы прорабатываем какую-то одну страницу (например, лендинг или главную) или какой-то один тип страниц (например, товарную карточку интернет-магазина), мы получаем:

  • схематичный прототип (мы между собой зовем его блок-схема, поэтому дальше по привычке я продолжу периодически называть его именно так) в формате .drawio;
  • подробное ТЗ для дизайнера — в Гугл доке.

Для целого сайта

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

  • список типов страниц на сайте (таких как главная, категория, служебные и т.д.);
  • примерная структура сайта — в Гугл таблицах или блок-схемой;
  • блок-схема для каждого типа страниц в формате .drawio;
  • ТЗ дизайнеру для каждого типа страниц — в Гугл доках;
  • ТЗ программисту с описанием основного функционала сайта — в Гугл доках;
  • если для каждой служебной страницы не рисуем схему, то список служебных страниц с примерами и подробным описанием, что должно быть на каждой - в Гугл доках или Гугл таблицах;
  • ТЗ на контент для ряда страниц — в Гугл доках.

В обоих случаях подход можно считать комплексным, так как в работе мы учитываем все требования SEO, такие как YMYL, E-A-T, удобство для пользователя, полнота контента, сопоставимость с конкурентами и многое другое.

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

При чём тут семантика

Для анализа конкурентов нужен список конкурентов, а для получения списка конкурентов нужна семантика — те запросы, по которым должен ранжироваться сайт или страница на сайте. Если ТЗ составляется для какой-то одной страницы-лендинга, то достаточно кластера (группы запросов), под который будет оптимизирована страница. Если мы составляем полное ТЗ на сайт, то нужна хотя бы какая-то поверхностная семантика по теме (примерно от 5-10 кластеров).

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

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

  1. Возможно, у вас или ваших коллег уже есть семантика по проекту.
  2. Можно поверхностно собрать семантику в Wordstat для одной или нескольких страниц.
  3. Можно полноценно собрать семантическое ядро по всем правилам (для данного типа задачи это совсем не обязательно, но пригодится для дальнейшей проработки сайта).

Семантика в нашем примере

Для примера подготовлена поверхностно собранная через Вордстат семантика для рандомно выбранной тематики “ремонт бытовой техники”.

<p>Рисунок 1. Часть отобранных для примера ключевых фраз</p>

Рисунок 1. Часть отобранных для примера ключевых фраз

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

Важно! Собирать семантику и анализировать конкурентов нужно по региону продвижения. На примере все сделано по Москве.

Отбираем конкурентов

Добавляем подготовленную семантику в Key Assort и собираем данные.

<p>Рисунок 2. Добавили фразы с ненулевой частотностью в Key Assort через “Ручное добавление фраз”</p>

Рисунок 2. Добавили фразы с ненулевой частотностью в Key Assort через “Ручное добавление фраз”

<p>Рисунок 3. Нажали “Собрать данные” в Key Assort</p>

Рисунок 3. Нажали “Собрать данные” в Key Assort

Нажмем на “Топ тематики” и посмотрим 15 основных конкурентов. Этого обычно достаточно для подбора хотя бы 4-5 подходящих сайтов.

Рисунок 4. Нажали “Топ тематики” в Key Assort и увидели основных конкурентов
Рисунок 4. Нажали “Топ тематики” в Key Assort и увидели основных конкурентов

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

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

Типы страниц и структура сайта

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

Сделать это можно несколькими способами:

  1. Вручную.
  2. Спарсить сайты с помощью Netpeak Spider или Screaming Frog.
  3. Посмотреть структуру сайтов через keys.so.

Обычно выбор зависит от удобства в конкретной ситуации и наличия платных инструментов (речь о Netpeak Spider и Keys.so). Типы страниц я почти всегда определяю вручную, а структуру мне лично удобнее смотреть через keys.so. Но бесплатная версия Screaming Frog тоже подойдет.

Что такое типы страниц? Это шаблонные страницы на сайте, которые отличаются только контентом и не отличаются структурой. Примеры: категория, товарная карточка, страница услуги, страница блога. Сюда же я обычно отношу Главную, хотя вряд ли она повторяется в пределах одного ресурса.

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

Рисунок 5. Пример оформления типов страниц интернет-магазина на реальном проекте
Рисунок 5. Пример оформления типов страниц интернет-магазина на реальном проекте

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

Рисунок 6. Пример оформления анализа служебных страниц на реальном проекте
Рисунок 6. Пример оформления анализа служебных страниц на реальном проекте

Ряд служебных страниц является общим для большинства тематик (такие как “О компании”, “Контакты”, “Доставка” и проч.), но всегда есть специфические страницы именно для этой тематики. И если у других будет некая специфичная страница, а у вас нет, то по сравнению с остальной выдачей это будет вашим упущением, которое заметят пользователи и поисковики. При составлении списка служебных страниц необходимо смотреть на конкурентов.

Если нас интересует примерная структура сайтов, то есть основные крупные разделы, ее также можно набросать на этом этапе. Сделать это можно в таблице или в одной из бесплатных программ для составления блок-схем — XMind или diagrams.net.

Составляем ТЗ на дизайн

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

Походим по услугам отобранных конкурентов и посмотрим, что там вообще есть (некое первое общее впечатление).

Примерно в то же время создадим Гугл док и начнем туда записывать буквально все, что встретим, не забывая при этом давать хотя бы один пример со ссылкой на источник. Если требуется, даем краткое описание для дизайнера: например, в таком-то блоке обязательно должны быть 3 картинки и текст длиной около 500 символов.

<p>Рисунок 7. Начинаем оформлять ТЗ для дизайнера</p>

Рисунок 7. Начинаем оформлять ТЗ для дизайнера

<p>Рисунок 8. Описали содержимое шапки и дали пример со ссылкой</p>

Рисунок 8. Описали содержимое шапки и дали пример со ссылкой

<p>Рисунок 9. Встретили еще пару блоков и занесли их в ТЗ со ссылками</p>

Рисунок 9. Встретили еще пару блоков и занесли их в ТЗ со ссылками

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

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

После получаса работы с принтскрином получаем подробный сводный файл (у меня он занял 13 страниц в Гугл доке, больше 25 пунктов):

<p>Рисунок 10. Скриншот начала технического задания</p>

Рисунок 10. Скриншот начала технического задания

Рисунок 11. Скриншот рандомной части технического задания
Рисунок 11. Скриншот рандомной части технического задания

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

Давайте рисовать!

Подготовка завершена, наступает финальный и самый творческий этап, “лицо” нашего технического задания — схематичный прототипсайта!

Идем на Гугл диск и создаем файл diagrams.net. Если у вас не установлено данное расширение на диске, установите и откройте ему необходимые разрешения.

<p>Рисунок 12. На Гугл диске создаем файл diagrams.net</p>

Рисунок 12. На Гугл диске создаем файл diagrams.net

<p>Рисунок 13. Создаем Blank Diagram, называем ее как-то понятно</p>

Рисунок 13. Создаем Blank Diagram, называем ее как-то понятно

<p>Рисунок 14. Чистый проект в diagrams.net</p>

Рисунок 14. Чистый проект в diagrams.net

Интерфейс diagrams.net прост и понятен. Слева находятся блоки, в центре рабочее поле, справа свойства объектов.

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

<p>Рисунок 15. Основные объекты из левого меню diagrams.net</p>

Рисунок 15. Основные объекты из левого меню diagrams.net

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

<p>Рисунок 16. Нарисовали основу шапки</p>

Рисунок 16. Нарисовали основу шапки

<p>Рисунок 17. Описание шапки из ТЗ</p>

Рисунок 17. Описание шапки из ТЗ

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

<p>Рисунок 18. Собрали шапку по описанию из ТЗ</p>

Рисунок 18. Собрали шапку по описанию из ТЗ

Для наглядности я обычно добавляю немного цвета, чтобы выделить самые яркие элементы на странице. Обычно это кнопки, баннеры, основные картинки и т.д.

Не рекомендую использовать более одного цвета. Минимализм — наше всё.

<p>Рисунок 19. Для нашего примера я возьму фиолетовый как основной цвет</p>

Рисунок 19. Для нашего примера я возьму фиолетовый как основной цвет

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

<p>Рисунок 20. Применили стиль Sketch</p>

Рисунок 20. Применили стиль Sketch

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

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

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

<p>Рисунок 21. Копируем одинаковые блоки в “Листинге”</p>

Рисунок 21. Копируем одинаковые блоки в “Листинге”

<p>Рисунок 22. Продолжаем схематично собирать блоки из ТЗ</p>

Рисунок 22. Продолжаем схематично собирать блоки из ТЗ

<p>Рисунок 23. Продолжаем схематично собирать блоки из ТЗ</p>

Рисунок 23. Продолжаем схематично собирать блоки из ТЗ

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

<p>Рисунок 24. Футер — финальный блок в нашей схеме</p>

Рисунок 24. Футер — финальный блок в нашей схеме

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

Заключение

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

  1. Выглядит профессионально.
  2. Понятен всем специалистам, которые будут в дальнейшем работать над проектом. Все любят подробные ТЗ!

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

Видеообзор ТЗ на дизайн и схематичного прототипа

Посмотреть ТЗ и схему

Автор: Алина Ширяева (Ant-Team.ru)

P.s. Подписывайтесь на наш телеграм-канал t.me/seoantteam, чтобы первыми узнавать о выходе новых полезных материалов.

3232
13 комментариев

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

Часто это очень плохо кончается. Это, вообще, одна из проблем готовых шаблонов. Пока все идет с текстом Lorem Ipsum - все блоки одинаковые и красивые. А в реальной жизни часто оказывается, что в одном текста в 3 раза больше, чем в соседнем.

6
Ответить

Вы не забыли, что это ТЗ? а заполнение реальными данными лежит уже на дизайнере. 

Ответить

Александр отличный гайд! Забрал к себе в закладки, как раз сейчас обновляю клиенту сайт, очень пригодится в ТЗ разработчику. У меня похожий подход, на выходе Бриф + ТЗ + Прототип (в Balsamiq Mockups делаю) .

3
Ответить

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

1
Ответить

Что мешает применить данный подход, только изучив мобильных конкурентов и составив ТЗ на основе них.
Более того сейчас у нас в Google mobile-first в Яндексе десктоп. ОСновные контентные блоки должны быть видны и там и там. Задача ТЗ указать какие блоки должны быть на сайте. Задача дизайнера скомпоновать дизайн в соответствии с требованиями мобилок и десктопа. В статье рассматривается  не разработка дизайна сайта, а приводится инструкция как легко, просто, быстро и бесплатно, сделать достойное ТЗ на дизайн сайта.

3
Ответить

Спасибо за оценку, мы старались)

Ответить

Отлично, но народ ленивый :)

Ответить