Создаем подробное техническое задание для дизайнера и разработчиков с нуля буквально из ничего — бесплатно, быстро, красиво и чтобы не стыдно было показать клиенту!
Нет, данное заявление — не очередной кликбейт от маркетологов.
Команда Ant-Team.ru разработала свой способ создания подробнейшего технического задания для дизайнеров и разработчиков.
Сегодня мы делимся с вами всеми подробностями и тонкостями нашей технологии. Инструкция настолько полная, что мы уже передаем ее новичкам команды в качестве регламента!
Дисклеймер 1: если вам кажется, что какие-то этапы решения данной задачи можно сделать по-другому — пожалуйста. Описываемый процесс в большой степени является творческим, и подходить к нему можно по-разному. А мы всего лишь покажем конкретный пример, полностью подходящий под наши задачи.
Зачем мы вообще это делаем?
Может показаться, что SEO и разработка дизайна — несвязанные области. В таком случае вы удивитесь, если мы скажем, что рано или поздно выполняем задачу такого типа практически для каждого нашего проекта!
Как так вышло и почему мы, а не кто-то другой?
Дело в том, что качественное SEO-продвижение — это комплексный подход, а не просто вливание ключевых слов в тексты, как некоторые думают. Обращаясь к хорошим сеошникам, будьте готовы, что они со своими рекомендациями дотянутся до вашего сайта и даже до вашего бизнеса со всех сторон. Именно такой подход, при условии, что работу выполняют профессионалы, поможет достичь самых крутых результатов.
SEO-специалисты могут составить рекомендации для сайта с точки зрения дизайна, структуры, ассортимента, способов доставки и даже цен на продукцию. При этом они учитывают особенности ниши и решения прямых конкурентов и лидеров тематики, а также ориентируются одновременно на пользователей и на поисковые машины.
Если говорить конкретно о задаче на ТЗ для дизайнера, сеошников в меньшей степени интересуют такие дизайнерские фишки, как цветовая гамма, содержимое картинок на страницах или закорючки на шрифтах. Дизайн в этом понимании мы не трогаем и оставляем на усмотрение дизайнера и клиента. В рекомендациях же мы говорим о заполнении страницы: блоках, необходимых для повышения доверия у посетителя и поисковика. Нам не всегда важно, как они будут выглядеть, но нужно, чтобы они в принципе были. Неподготовленный человек, не знакомый с Инструкцией для асессоров Google (или хотя бы с данной статьей), по нашему опыту упускает большую часть YMYL-факторов, что в дальнейшем может сказаться на ранжировании.
Схематичный прототип же мы составляем для упрощения понимания ТЗ. По опыту мы знаем, что ТЗ в Гугл доке с перечислением блоков и примеров конкурентов очень тяжело воспринимается даже подготовленным человеком. Поэтому, чтобы избежать лишней головной боли, мы не ленимся и составляем схематичный прототип. Всего лишь час работы значительно упрощает дальнейший процесс согласования и разработки дизайна.
Что нам понадобится?
Начнем с подготовки к работе. Мы знаем, что никто не любит платные или трудные в использовании программы. И сегодняшний мануал рассчитан на использование исключительно простых и бесплатных инструментов:
- Google Документы;
- diagrams.net;
- программа для снятия скриншотов (у меня это Monosnap);
- инструмент Арсенкина Выгрузка ТОП-10 сайтов;
- Яндекс Wordstat;
- Key Assort;
- ровные руки;
- пара часов времени и терпения.
Дисклеймер 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. https://servis-remonta.moscow/
2. https://www.mosremslugba.ru/
4. https://moscow.trade-services.ru/
Их мы будем использовать в дальнейшем анализе. На остальных тоже можно посмотреть на предмет интересных фишек, равно как и на лидеров тематики в зарубежном сегменте, но все же основой для работы послужит именно эта пятерка.
Типы страниц и структура сайта
Этот пункт нужен для ТЗ с более серьезной проработкой. Посмотрим на отобранные сайты и определим типы страниц и структуру.
Сделать это можно несколькими способами:
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. Футер — финальный блок в нашей схеме
Если нужно нарисовать несколько страниц для одного проекта, я не стану создавать следующие схематичные прототипы с нуля, а скопирую этот и буду работать в копии. Это сэкономит мне время на прорисовке повторяющихся блоков, как минимум шапки и футера.
Посмотреть итоговую схему страницы
Заключение
Потратив всего пару часов, мы составили подробное техническое задание для дизайнера и нарисовали красивую схему к нему. Результат нашей работы:
- Выглядит профессионально.
- Понятен всем специалистам, которые будут в дальнейшем работать над проектом. Все любят подробные ТЗ!
Мы уверены, что при достаточной доле упорства подобную задачу может выполнить любой человек с первого раза и получить достойный результат. А если вам нужна помощь, вы всегда можете обратиться к нам!
Видеообзор ТЗ на дизайн и схематичного прототипа
Посмотреть ТЗ и схему
Посмотреть итоговую схему страницы
Посмотреть итоговое ТЗ на дизайн
Автор: Алина Ширяева (Ant-Team.ru).
P.s. Подписывайтесь на наш телеграм-канал t.me/seoantteam, чтобы первыми узнавать о выходе новых полезных материалов.
