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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Посмотреть итоговое ТЗ на дизайн

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Посмотреть итоговую схему страницы

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

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

Посмотреть итоговую схему страницы

Посмотреть итоговое ТЗ на дизайн

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

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