Как составить грамотное ТЗ для дизайнера

Зачем нужно грамотное ТЗ для веб-дизайнера

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

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

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

Мем смешной, а ситуация страшная

Почему с дизайном сайта должен работать SEO-специалист

В нашем агентстве LZ.Media разработкой ТЗ для веб-дизайнеров занимаются сеошники. А всё потому, что мы при создании или изменении сайта придерживаемся идеи SEO-проектирования. Это подготовка технических факторов и внешнего вида веб-ресурса к его последующему продвижению. А если вам интересно, как наши специалисты продумывают страницы и блоки сайта, можете изучить наши статьи про функционал и структуру/архитектуру с подробными примерами.

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

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

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

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

• Google-документы. Удобны тем, что сохраняют все вводимое через секунду. Если случится форс-мажор и компьютер или ноутбук внезапно выключится, то ваша работа сохранится. Для тех, у кого нестабильный интернет, есть оффлайновый режим редактирования. Также к документам можно дать доступ по ссылке любому желающему. А если этот “желающий” случайно что-то удалит из ТЗ, всегда можно “откатиться” к прежней версии текста за пару кликов.
• Для хорошего ТЗ вам обязательно понадобятся скриншоты. Их нужно делать при работе с прототипами страниц, изучения конкурентных сайтов из выдачи и так далее. Скриншотами гораздо проще, чем текстом, объяснить и особенности фирменного стиля бренда, и желаемые визуальные эффекты на сайте. Удобные и бесплатные программы для создания скриншотов есть тут и тут. Но вы можете выбирать тот, которым пользуетесь всегда.
• Выше мы уже сказали, что без конкурентов никуда. Если вам нужно автоматизировать сбор позиций из выдачи, используйте сайт Arsenkin. Среди множества инструментов у этого сервиса есть опция выгрузки сайтов из топ-10, топ-50 и так далее.

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

Что такое ТЗ в дизайне: основные пункты

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

Описание задачи и информация о сайте

Вначале постарайтесь максимально подробно рассказать о том, каким вы видите дизайн вашего сайта. Используйте конкретику: от слов “лучший”, “красивый”, “яркий” лучше отказаться. Также напишите, для чего вам нужна эта веб-площадка, какие у нее задачи и зачем вы хотите доработать дизайн (или сделать его с нуля).

Что вы знаете о боли?

Дедлайн

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

Требования

Расскажите здесь, какими должны быть шрифты, стили, элементы и цвета, которые вы хотите видеть на сайте. Спойлер: реплики в духе “хочу, чтобы буквы были изящными”, скорее всего, не принесут ожидаемого результата. А вот “нужен жирный шрифт без засечек” звучит лучше. Высший уровень: “используем шрифт Verdana для основного текста”.

Не надо так

Описание бизнеса и продукта

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

ЦА

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

В конце можно смело добавлять референсы, пожелания к визуалу, описания иллюстраций, комментарии про анимацию и количество креативов и так далее. Кстати, про поиск картинок для сайта в блоге LZ.Media также выходила отдельная статья. Отдельное внимание в ТЗ нужно уделить анализу конкурентов: приложите ссылки на сайты, чтобы дизайнер наглядно понимал, какие слоганы, цвета и блоки чаще всего используют другие.

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

Также мы хотим подчеркнуть, что эффективнее всего предоставлять ТЗ именно в текстовом варианте. При его составлении лучше не использовать видео или голосовые сообщения (последнее вообще считается моветоном). Это важно для лучшего понимания друг друга и удобно, прежде всего, вам самим: любое стартовое замечание по дизайну оказывается под рукой. Как говорится, рукописи не горят. И хорошее ТЗ тоже.

Если бы мы знали, что это такое…

Может ли нейросеть справиться с написанием ТЗ? Отчасти да: мы затрагивали этот момент, когда писали отдельную статью о применении GPT в digital-отрасли. Но на данный момент нейросети не умеют собирать референсы и подробно анализировать конкурентную выдачу. Поэтому ChatGPT накидает вам, скорее, общий каркас ТЗ для дизайнера, куда вы всё равно добавите конкретные пожелания.

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

Бонус: пример ТЗ для дизайнера

Конечно, всё, что мы описали выше, — требования для идеального мира. Но почему бы нам всем не стать его частью? А чтобы было удобнее, мы, с учетом своего опыта в LZ.Media, составили документ, который поможет быстро и правильно сделать техническое задание. Этот шаблон ТЗ для дизайнера (он же бланк или форма для вашего заполнения) находится тут. Переходите по ссылке, скачивайте и получайте на выходе классный макет стильного сайта.

Подписывайся на наши соцсети — там мы рассказываем о своей работе и анонсируем новые статьи: LZ.Media в ВК и телеграм.