Меню

Техническое задание на разработку дизайна сайта

Что нужно писать в ТЗ на разработку дизайна сайта

Если вы не ставите бесплатный шаблон, не ищете премиум-шаблон, а заказываете новый дизайн с нуля с учетом специфики — значит, вы серьезно относитесь к своему сайту. Классные проекты для людей именно так и делают. Можно сказать, что уникальный дизайн с нуля — одно из отличий проекта действительно «для людей» от трафосборника. В дизайне стандарты и мода постоянно меняются, но я постараюсь выделить основные моменты, которые помогут сделать дизайн, одинаково пригодный как для пользователя, так и для продвижения, а также правильно объяснить дизайнеру, что от него требуется.

Что мы должны получить на выходе от дизайнера?

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

В наше время также необходимо заказывать версии для разных разрешений экрана, чтобы сделать дизайн адаптивным. Google, например, предупреждает в панели Вебмастера, если сайт не оптимизирован для просмотра на мобильных устройствах. Поэтому придется делать по 3 мобильных версии главной, поста и рубрики — примерно от 320 до 414px, от 414 до 768px и от 768 до 1024px.

Сперва нам нужно заполнить небольшой бриф, чтобы дизайнер понял, на что ему следует ориентироваться.

  • В качестве общего напутствия можно написать вначале стандартное золотое правило: при разработке руководствуемся принципом «Хороший дизайн — это дизайн, которого не видно». Если у сайта уже есть дизайн, напишите, чем он вас не устраивает (если такие пункты есть).
  • Похожие сайты. Напишите небольшой список ваших конкурентов.
  • Задача, которую должен решать сайт. Здесь можно описать свои цели, которых хотим добиться с помощью этого проекта.
  • Тип сайта. Сайт-визитка, корпоративный, интернет-магазин, блог и так далее.
  • Цветовая гамма сайта. Если есть предпочтения по цвету — пишите, если нет — оставьте на усмотрение дизайнера.
  • Предусматривать ли место под баннерную рекламу.
  • Предусматривать ли место для счетчиков посещений.
  • Какой сайт нравится. Лучше указать 4-5 ресурсов.
  • Как сайт не должен выглядеть. Тоже 4-5 адресов.
  • Распишите, что должно находиться на главной странице сайта; если нужно — приведите примеры (скетчи).
  • Какие страницы необходимы помимо главной.
  • Дополнительная информация.

Требования

А теперь давайте рассмотрим технические требования. Для информационных сайтов это обычно следующее:

  1. Навигация. Сайдбар справа. Пользователь читает слева направо, поэтому лучше, чтобы его взгляд сразу падал на контент, а не на меню. Ширина сайдбара — не меньше 260 пикселей. Сайдбар не должен быть слишком широким, чтобы не отбирать место у контента. В версии для планшета можно оставить сайдбар (в отличии от версии для мобильных — там меню сайдбара выносится вниз), его можно сузить до 240рх, еще более узким делать не надо. При обычном разрешении планшетов в 768рх с учетом отступов на контент остается примерно 510 пикселей. Помним, что главная выполняет навигационную роль, как и рубрика. При этом под основными элементами (меню, посты) на главной и в рубрике должно быть пространство с подложкой для размещения текста (на всякий случай).
  2. Шапка. Должна содержать в себе основные навигационные элементы, выражать индивидуальность сайта по отношению к другим, при этом занимать минимум места. Пример шапки и верхнего меню, на которые следует ориентироваться — http://simptomer.ru/ . У Симптомера шапка одновременно и выполняет все основные функции, и не мешает представлению контента. Шапка должна быть размером не более 200-300 пикселей.
  3. Меню — не выпадающее. Выпадающее меню по возможности делать не надо (лучше сделать логичную структуру, а скрытые в выпадающем меню ссылки сразу не видны пользователю, что не есть хорошо и в будущем отношение к нему поисковиков может измениться не в лучшую сторону), поэтому следует указать дизайнеру, чтобы не тратил на это силы.
  4. Фон — светлый. Не надо нагружать глаза пользователя. Можно указать, чтобы не был белый.
  5. Шрифты — Tahoma, Verdana, Arial. Размер их будет 12-16px. Цвет — черный (в крайнем случае серый (#444). Это практически общепризнанные стандарты наиболее читабельного текста.
  6. Заголовок — главный заголовок (h1) должен выделяться на фоне текста и других заголовков, возможно за счет подложки, шрифта или цвета. Пример оформления: http://stroy-bloks.ru/chto-soboj-predstavlyaet-nalivnaya-vanna/ . По умолчанию дизайнер может и не подумать о такой важной вещи, как выразительные заголовки и подзаголовки.
  7. Подзаголовки. Подзаголовки h2 и более мелкие должны выделяться за счет подложки, шрифта, цвета или т.д. Можно указать, что, мол, размер подзаголовков будет от 18px и больше.
  8. Содержание поста. Все знают блоки «Содержание статьи» у Википедии, так вот на контентных сайтах надо делать дизайн такого блока, что дизайнеры по умолчанию также зачастую не делают. В дизайне поста нужно сделать дизайн содержания поста с отдельной подложкой и чтобы цвет ссылок отличался от обычных (например, чтобы они были подчеркнуты пунктиром).
  9. Списки — в дизайне поста нужно изобразить, как будут выглядеть маркированный и нумерованный списки. Лучше, чтобы это были не тупо цифры в случае с нумерованным списком, а красивые цифры, а в качестве маркеров другого вида списков можно сделать какие-нибудь тематичные иконки.
  10. Таблицы должны выглядеть в общем стиле сайта.
  11. Цитаты. То же самое.
  12. Рамки картинок/галереи.
  13. Рамки видео/видео галереи.
  14. Облако тегов под текстом в посте + облако тегов в сайдбаре.
  15. Подвал сайта присутствует, в нем повторяется навигация из главного меню, плюс размещен копирайт и есть место для другого текста на всякий случай. Строгих ограничений по размеру нет, но надо сохранять трезвую голову.
  16. Справа должна быть аккуратная кнопка «наверх».
  17. Внутренние контекстные ссылки — подчеркнуты. Цвет ссылок — такой, чтобы хотелось кликнуть (использующийся в выдаче Яндекса сойдет). В рубриках ссылкой должен быть только заголовок, никаких «Подробнее» или «Читать далее». Ссылки «Предыдущая запись» и «следующая запись» в дизайне поста также вообще не нужны. Даты новостей — то же самое. В начале поста (желательно сбоку) должно быть изображение поста — такое же, какое отображается в рубрике.
Читайте также:  Как создается дизайн обуви

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

Источник

ТЗ на дизайн сайта

Во-первых, давайте для начала разберемся для чего вообще нужно ТЗ на дизайн сайта.

Чем подробнее прописаны все (даже мельчайшие) моменты в техническом задании на дизайн сайта, тем легче прийти к хорошему результату и стабильной работе между исполнителем и заказчиком.

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

Зачем заказчику техническое задание на дизайн сайта?

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

А теперь подробнее по пунктам

  • Во-первых, важно понять, какой именно сайт заказчику нужен. Тут задача клиента не просто взять дизайнера и сказать «нарисуй мне что-нибудь», а сформулировать свои мысли в какую-то понятную себе и окружающим формулировку именно на бумаге, написать. Образец ТЗ на дизайн сайта легко найти в сети, и я рекомендую это сделать.
  • Во-вторых, что важно сказать про оговоренный в ТЗ на дизайн сайта объем работ. Здесь также есть интерес дизайнера, чтобы на вас не нагрузили лишнего. Чтобы вы сами понимали, что нужно сделать, понимали время, оценивали сколько это стоит и т.д. То есть ТЗ для веб дизайнера тоже очень нужная вещь.
  • И дальше, когда клиент будет нагружать вас какими-то дополнительными правками, вы можете спокойно показать ему задание на дизайн сайта, где четко указано, на что вы договоривались. Все правки в этом случае можно вносить за дополнительную плату.
  • В-третьих, контролировать сроки. Это то, чем грешат и клиенты, и дизайнеры. Сроки — это общая ответственность. Клиент должен выслать какие-то задачи, посмотреть ваши макеты и дать какие-то правки. Это его ответственность за сроки. Также ваша ответственность за сроки, например, если вы срываете сроки,необходимо заранее об этом предупредить и минимизировать срыв всеми возможными способами.
  • В-четвертых, составить представления о функциях и будущем оформлении проекта на основании разработанных в техническом задании прототипов. Ниже расскажу, как описать дизайн сайта и подробно зафиксировать все его функции.

Зачем ТЗ на дизайн сайта нужно исполнителю?

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

Из чего состоит техническое задание на дизайн сайта?

Шаблон тз на дизайн сайта обычно содержит следующие блоки:

  1. Рассказ о деятельности клиента. Эти сведения необходимы для лучшего понимания целей и задач проекта. Частая ошибка дизайнеров в том, что они не спрашивают, чем вообще клиент занимается. Для дизайнера важно понимать общее представление о бизнесе, нужна его вовлеченность и понимание того, над чем он работает. Когда вы погружены в бизнес клиента, вы совершенно по-другому начинаете думать. Поэтому важно описать дизайн сайта именно с учетом текущего бизнеса клиента.
  2. Задача сайта. Это может быть организация интернет-торговли, просто размещение информации об услугах компании или организация обратной связи с партнерами и постоянными клиентами. Иногда сайт может выполнять сразу несколько задач, каждую из которых необходимо обозначить именно на этапе проектирования сайта. Какой конечный результат мы хотим получить в итоге? Вот это и нужно прописать в техническом задании на дизайн сайта.
  3. Структура сайта. Определяется количество основных разделов и подразделов. В тз для веб дизайнера это особенно важно, так как ему придется нарисовать шаблоны будущих страниц, как раз на основании такой структуры.
  4. Дизайн сайта. В данном разделе описываются пожелания Заказчика к цветовому решению фона и шрифтов, необходимость соответствия фирменному стилю и т.п. Дизайнеру полезно прийти к клиенту и показать ему варианты. Клиент может быть скуден на идеи, может просто не знать, как описать дизайн сайта, поэтому важно показать клиенту кучу картинок и узнать, что ему нравится, а что нет. И понять, в каком направлении нужно двигаться.
  5. Функциональности сайта. В ТЗ на создание сайта описываются необходимые для эффективной работы сервисы для посетителей сайта. Под сервисом я понимаю какие-то функции ( кнопочки, калькуляторы), которые на сайте будут реализованы.
  6. Система управления сайтом и требования к ней. Это задача между заказчиком и программистом, дизайнер не имеет к ней отношения. Это относится к настройке CMS. То есть помимо того, что вы нарисуете сайт, вы потом будете делать его в Muse или Webflow. Это и есть CMS — система управления контентом сайта. И дизайнер тоже должен это учитывать: например, если сайт на WordPress, то там есть определенная стуктура, каркас, блоки, которые выглядят определенным образом и по-другому его реализовать будет невозможно. Поэтому на систему управления сайтом тоже важно обращать внимание изначально.
  7. Контент сайта. Оговаривается количество заполняемых страниц, формат предоставляемой информации и сроки её предоставления. Тут опять же про сроки. Во-вторых, дизайнер работает с информацией, поэтому важно обсудить контент, расставить акценты, иерархию, последовательность и т.д.
  8. Сроки создания сайта. Определить сроки разработки большого проекта достаточно непросто, но если поделить работу на этапы и задать срок выполнения каждого из них, то это выполнимая работа. Есть такой подход, как метод интерации, когда вы берете не весь большой сайт, а говорите так: Главную сделаем за неделю, а за следующую неделю пять внутренних страниц и т.д. То есть делите на фрагменты. Оплату, кстати, тоже иногда привязывают к небольшим фрагментам (предоплата 50%, постоплата 50%).
  9. Прототипы основных разделов сайта. Блоки, которые необходимо показать клиенту, чтобы он их утвердил.
Читайте также:  Дизайн прямоугольной детской комнаты для двух детей

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

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

Для отправки комментария вам необходимо авторизоваться.

Чем подробнее прописаны все (даже мельчайшие) моменты в техническом задании на дизайн сайта, тем легче прийти к хорошему результату и стабильной работе между исполнителем и заказчиком.

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

Зачем заказчику техническое задание на дизайн сайта?

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

А теперь подробнее по пунктам

  • Во-первых, важно понять, какой именно сайт заказчику нужен. Тут задача клиента не просто взять дизайнера и сказать «нарисуй мне что-нибудь», а сформулировать свои мысли в какую-то понятную себе и окружающим формулировку именно на бумаге, написать. Образец ТЗ на дизайн сайта легко найти в сети, и я рекомендую это сделать.
  • Во-вторых, что важно сказать про оговоренный в ТЗ на дизайн сайта объем работ. Здесь также есть интерес дизайнера, чтобы на вас не нагрузили лишнего. Чтобы вы сами понимали, что нужно сделать, понимали время, оценивали сколько это стоит и т.д. То есть ТЗ для веб дизайнера тоже очень нужная вещь.
  • И дальше, когда клиент будет нагружать вас какими-то дополнительными правками, вы можете спокойно показать ему задание на дизайн сайта, где четко указано, на что вы договоривались. Все правки в этом случае можно вносить за дополнительную плату.
  • В-третьих, контролировать сроки. Это то, чем грешат и клиенты, и дизайнеры. Сроки — это общая ответственность. Клиент должен выслать какие-то задачи, посмотреть ваши макеты и дать какие-то правки. Это его ответственность за сроки. Также ваша ответственность за сроки, например, если вы срываете сроки,необходимо заранее об этом предупредить и минимизировать срыв всеми возможными способами.
  • В-четвертых, составить представления о функциях и будущем оформлении проекта на основании разработанных в техническом задании прототипов. Ниже расскажу, как описать дизайн сайта и подробно зафиксировать все его функции.
Читайте также:  Дизайн для детской комнаты для двойняшек

Зачем ТЗ на дизайн сайта нужно исполнителю?

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

Из чего состоит техническое задание на дизайн сайта?

Шаблон тз на дизайн сайта обычно содержит следующие блоки:

  1. Рассказ о деятельности клиента. Эти сведения необходимы для лучшего понимания целей и задач проекта. Частая ошибка дизайнеров в том, что они не спрашивают, чем вообще клиент занимается. Для дизайнера важно понимать общее представление о бизнесе, нужна его вовлеченность и понимание того, над чем он работает. Когда вы погружены в бизнес клиента, вы совершенно по-другому начинаете думать. Поэтому важно описать дизайн сайта именно с учетом текущего бизнеса клиента.
  2. Задача сайта. Это может быть организация интернет-торговли, просто размещение информации об услугах компании или организация обратной связи с партнерами и постоянными клиентами. Иногда сайт может выполнять сразу несколько задач, каждую из которых необходимо обозначить именно на этапе проектирования сайта. Какой конечный результат мы хотим получить в итоге? Вот это и нужно прописать в техническом задании на дизайн сайта.
  3. Структура сайта. Определяется количество основных разделов и подразделов. В тз для веб дизайнера это особенно важно, так как ему придется нарисовать шаблоны будущих страниц, как раз на основании такой структуры.
  4. Дизайн сайта. В данном разделе описываются пожелания Заказчика к цветовому решению фона и шрифтов, необходимость соответствия фирменному стилю и т.п. Дизайнеру полезно прийти к клиенту и показать ему варианты. Клиент может быть скуден на идеи, может просто не знать, как описать дизайн сайта, поэтому важно показать клиенту кучу картинок и узнать, что ему нравится, а что нет. И понять, в каком направлении нужно двигаться.
  5. Функциональности сайта. В ТЗ на создание сайта описываются необходимые для эффективной работы сервисы для посетителей сайта. Под сервисом я понимаю какие-то функции ( кнопочки, калькуляторы), которые на сайте будут реализованы.
  6. Система управления сайтом и требования к ней. Это задача между заказчиком и программистом, дизайнер не имеет к ней отношения. Это относится к настройке CMS. То есть помимо того, что вы нарисуете сайт, вы потом будете делать его в Muse или Webflow. Это и есть CMS — система управления контентом сайта. И дизайнер тоже должен это учитывать: например, если сайт на WordPress, то там есть определенная стуктура, каркас, блоки, которые выглядят определенным образом и по-другому его реализовать будет невозможно. Поэтому на систему управления сайтом тоже важно обращать внимание изначально.
  7. Контент сайта. Оговаривается количество заполняемых страниц, формат предоставляемой информации и сроки её предоставления. Тут опять же про сроки. Во-вторых, дизайнер работает с информацией, поэтому важно обсудить контент, расставить акценты, иерархию, последовательность и т.д.
  8. Сроки создания сайта. Определить сроки разработки большого проекта достаточно непросто, но если поделить работу на этапы и задать срок выполнения каждого из них, то это выполнимая работа. Есть такой подход, как метод интерации, когда вы берете не весь большой сайт, а говорите так: Главную сделаем за неделю, а за следующую неделю пять внутренних страниц и т.д. То есть делите на фрагменты. Оплату, кстати, тоже иногда привязывают к небольшим фрагментам (предоплата 50%, постоплата 50%).
  9. Прототипы основных разделов сайта. Блоки, которые необходимо показать клиенту, чтобы он их утвердил.

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

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

Источник

Adblock
detector