Разработка
Aleksandr Chepukaytis

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

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

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

{ "author_name": "Aleksandr Chepukaytis", "author_type": "self", "tags": [], "comments": 8, "likes": 19, "favorites": 90, "is_advertisement": false, "subsite_label": "dev", "id": 218696, "is_wide": true, "is_ugc": true, "date": "Thu, 11 Mar 2021 11:45:10 +0300", "is_special": false }
0
8 комментариев
Популярные
По порядку
Написать комментарий...
2

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

Ответить
2

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

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

Ответить
0

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

Ответить
1

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить
0

👍 Супер!
Забрал в закладки. 
Благодарю за труды. 

Ответить

Комментарии

null