Ваша мышка проехала метров
До скидки 5% осталось м
Ваш промокод на скидку

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

11.06.2019

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

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

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

Краткая справка:

  • Юлия Шереметова, ведущий веб-дизайнер Pear Advert
  • В 2018 году закончила Школу дизайна НИУ ВШЭ под руководством Юрия Гулитова
  • Участник триеннале "Золотая пчела"
  • Участник выставки "Плакат умер. Да здравствует плакат!"
  • В Школе дизайна создала фирменный стиль для фантастического утопического проекта "Биофабрика людей "Добрые органы"", где можно купить любой недостающий орган или часть тела
  • Интересный факт: все еще ждет, когда технология печати органов на 3D-принтерах будет более распространена.

Структура сайта

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

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

Цветовая гамма

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

Читайте также: Как выбрать цветовую палитру для сайта

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

Описание стиля элементов

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

Логотип

Если в ТЗ есть логотип, то вместе с ним решается как минимум еще одна проблема – проблема выбора цветовой гаммы. Но иногда клиенты пытаются прыгнуть выше головы, и в ТЗ по созданию макета сайта умудряются добавить ТЗ на создание логотипа. Это затрудняет и очень сильно замедляет работу. Поэтому в этом случае мы делим работу на этапы: сначала одно, потом другое.

Читайте также: Восемь шагов к идеальному логотипу

Фото- и видеоматериалы

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

Заполненный бриф

Да-да, бриф и техническое задание – немного разные вещи. Жаль, что не все клиенты это понимают. Чаще всего веб-дизайнерам приходится работать только по брифу, что усложняет и замедляет скорость работы.

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

Прототип на бумаге

Прототипирование на бумаге - самый простой и легкий способ показать веб-дизайнеру, как должен выглядеть сайт. На видеоролике ниже вы можете познакомиться с тем, как создать самый простой прототип сайта на бумаге. Это самые основные пункты, которые должны быть в техническом задании для веб-дизайнера. Они упрощают работу и сводят правки к минимуму.