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

tz-dizajn

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

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

Не нужно слепо требовать «нарисуйте дизайн». Нужно четко описать, дизайн каких страниц нужен. Для информационного сайта сгодятся 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 по надежности и по примочкам
Которые мне пишут тексты сотнями. Рефам даю подсказки в скайпе
Добавить в закладки
Голосовать ПРОТИВГолосовать ЗА 0
Загрузка...
Комментарии посетителей
Авторам лучших комментариев и дополнений к статье пишу на почту и иногда палю кое-какие темы
  1. 0
    +

    Многовато второстепенных мелочей и не выделено главное — вопросы по структуре и работе сайта. Клиент может заполнить такой бриф, и при этом будет по-прежнему неясно, как должен быть структурирован и функционировать сайт в целом. Лучше сразу спросить максимально близкий к желаемому результату пример, схему которого можно взять за основу + комментарии, что нужно в нём поменять. Или задать несколько общих вопросов (тип, цель, стиль, аналоги) и предложить на выбор список примеров, которые могут служить такой основой. Для клиентов, которым трудно сформировать пожелания, сделать скетчи. Сложнее, чем давать брифы, зато будете знать, что делаете.

    • Znet
      0
      +

      Спасибо за комментарий. По структуре действительно забыл указать — потом допишу. Работа сайта — имелось в виду это?

      «Задача, которую должен решать сайт»

      • 0
        +

        Под работой имел ввиду особенности функционала. Структура может быть ясна, но много вариантов, как могут работать разные элементы — формы, анимация, интерактивные вещи.

Добавить комментарий

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: