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

Редизайн сайта

Редизайн сайта – термин неоднозначный. Он вошел в употребление с легкой руки Келли Гото и Эмили Котлер, написавших знаминитый «Веб-редизайн». Первое издание этой книги – одно из самых толковых описаний веб-проектов, которые сейчас есть. Но, к сожалению, книга во многом устарела.

Редизайн – это не только изменение внешнего вида сайта. Это анализ и модификация структуры, функционала и контента в связи с изменением рекламной политики компании или же трансформацией целей функционирования самого проекта.

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

Она хорошо подходит для корпоративных сайтов с текстовой информацией о компании, ее продуктах и услугах.

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

Группы исполнителей

Проект по редизайну сайта ведут две группы исполнителей: внутренние и внешние.

Внутренние исполнители – это сотрудники компании: менеджер интернет-проектов, системный администратор, PR-менеджер, копирайтер, маркетолог. Все те, кто отвечает за размещение информации о компании в интернете.

На что нужно обратить внимание при работе с внутренними исполнителями:

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

Внешние исполнители – веб-агентство, которое будет выполнять работы по разработке нового сайта.

На что нужно обратить внимание:

• определить критерии выбора подрядчика (описано в статье «Проведение тендера на разработку сайта»),
• описать задачу, проверить, правильно ли представители веб-студии поняли, что именно вы хотите получить в итоге,
• наладить взаимодействие между менеджерами агентства и компании.

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

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

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

1. Планирование

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

Статья по теме:  Axure — инструмент для проектирования интерфейсов

Основные проблемы:

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

Время: при условии отсутствия задержек при согласованиях — 27-30 рабочих дней.

Результат этапа:

3.1. Креатив-бриф

Заполняется заказчиком. Описывает видение, каким должен быть сайт. Отвечает на вопросы по дизайну, позиционированию и контенту. Содержит информацию о торговой марке, фирменных цветах, конкурирующих сайтах и предпочтениях руководителей компании. Заполнение креатив-брифа обычно занимает около 1 рабочего дня (при условии наличия бренд-бука). Согласования отнимают от 3 до 5 рабочих дней.

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

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

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

Столько же уходит на согласования и утверждения.

3.3. Концепция сайта

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

Концепция обычно создается методом «мозгового штурма». Итоговая версия в обязательном порядке должна быть подписана всеми участниками совещания. Написание и согласование концепции не требует много времени: примерно 2 рабочих дня уходит на создание документа.

Примерно 2 дня документ согласовывается.

3.4. Техническое задание (ТЗ)

Разрабатывается исполнителем. Утверждается и подписывается заказчиком. Содержит выжимку из всех предыдущих документов, а также подробное описание интерфейсов и функционала сайта.

Основное назначение ТЗ – постановка задач дизайнерам, верстальщикам и программистам. Это итоговый документ, на который ориентируется рабочая группа.

Большинство агентств работает по принципу «Делаем то, что описано в ТЗ».

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

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

2. Дизайн

Отрисовка дизайн-макета главной, внутренних и служебных страниц.

Основные проблемы:

— размывание задачи; — нечеткость требований со стороны заказчика (не знаем, чего именно хотим); — утверждение дизайна, которое идет тяжело и занимает много времени; — непонимание дизайнером, чего от него хотят; — многочисленность сотрудников заказчика, имеющих право вето; — несогласованность комментариев со стороны заказчика;

— попытки дизайнера самоутвердиться и самореализоваться за счет заказчика.

Статья по теме:  Инструмент прототипирования: Flinto

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

Время: разработка одного макета главной страницы занимает 3-5 рабочих дней. Разработка макетов внутренней и служебной страницы – максимум по 1 рабочему дню на каждый макет.

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

Общее время, которое может занять разработка дизайна – 20-22 рабочих дня для простого сайта из 6-7 макетов.

Результат этапа:

1. распечатанные и подписанные обеими сторонами макеты дизайна;
2. предоставленные исполнителем исходники (psd).

3. Верстка

Состоит из двух частей: нарезка дизайна и кодирование в HTML.

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

Основные проблемы: у заказчика может появиться ощущение, что агентство «что-то там делает, но непонятно, что».

Время: 2-3 рабочих дня на каждый шаблон. При условии верстки 6-7 шаблонов время, потраченное на этот этап (и включающее время на согласование), составляет 12-15 рабочих дней.

Результат этапа — сверстанные шаблоны (html-файлы): 1. главной страницы, 2. второстепенных страниц,

3. служебной страницы.

4. Программирование и сборка сайта

Второй после верстки этап, на который заказчик никак не может повлиять. Включает в себя работы по программированию системы управления контентом (CMS), ее доработку под спроектированный функционал сайта. Работы по этапу выполняют программисты агентства. Главное – это соответствие ТЗ и того, что получилось в итоге.

Этап удобно запараллелить частично с версткой, частично с написанием контента.

Основные проблемы: функционал, описанный в ТЗ, реализован не полностью.

Время: зависит от проекта. Обычно программирование занимает около 10-15 рабочих дней.

Результат:

1. функционирующая система управления контентом,
2. тестовая версия сайта, выложенная на сервер исполнителя.

5. Написание и наполнение сайта контентом

Определенные риски возникают на всех этапах проекта по редизайну сайта. Однако наибольшие трудности вызывают утверждение дизайна и написания контента. Что и понятно: эти два этапа наиболее творческие и потому здесь наиболее вероятен подход «Мне не нравится» без объяснения причин и озвучивания выводов, которые могут быть применены на практике.

Основные проблемы:

Когда работы подходят к этапу наполнения сайта контентом, проект находится в следующем состоянии: дизайн нарисован, шаблоны сверстаны, программирование завершается, а текстов и иллюстраций нет.

Статья по теме:  Как сделать выпадающее меню своими руками в Axure 7

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

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

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

Результат: написанный контент для сайта.

6. Тестирование

Тщательная проверка функционала сайта как сотрудниками заказчика, так и тестерами исполнителя. Выполняется в трех наиболее распространенных в Интернете браузерах: Internet Explorer, Opera и Mozilla Firefox.

Главное – провести тестирование качественно и запланировать не менее двух (а лучше трех) итераций. По результатам тестирования составляется баг-лист, описывающий ошибки, найденные на сайте.

Исполнители отчитываются по каждой ошибке, найденной на сайте.

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

Время: 5-10 рабочих дней.

Результат: полностью функционирующий и наполненный сайт.

7. Перенос сайта на хостинг

Готовый сайт размещается в Сети. До этого момента необходимо выбрать хостера и заключить с ним договор.

Основные проблемы: некачественный хостинг, которые не обеспечивает круглосуточной работы сайта.

Время: 1-2 рабочих дня.

Результат: завершение проекта.

Продолжительность всего проекта – 100-170 рабочих дней

Заключение

Важно помнить о том, что:

Проект нужен не только компании или только агентству. Проект нужен обеим сторонам. И обе стороны достигают с помощью проекта свои цели. Поэтому задержки по срокам могут происходить по вине обеих сторон. Нужно искать точки соприкосновения и заранее учитывать возможные риски.

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

Добавление функционала в ходе проекта ведет к увеличению сроков и стоимости. На все время разработки стоит запомнить принцип «лучшее – враг хорошего». К сожалению, никогда и ничего не получается делать сразу. Выгоднее начать с малого, сделать сайт, и только потом начинать его постепенно развивать и улучшать.

Идея статьи: Анны Карауловой (webplanet.ru)

Правильный редизайн сайта — пошаговый алгоритм, основные вопросы и нюансы

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

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

В силу чего, каждый из предпринимателей рано или поздно придет к вопросу редизайна своего интернет-магазина или сайта услуг.

Основные вопросы при смене дизайна сайта

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

1. Падает ли конверсия? Падает ли время на сайте, падают ли переходы? *Посмотреть всю эту информацию можно в метрике.

2. Современно ли выглядит ваш интернет-магазин? *Просмотрите всех ваших конкурентов по основным запросам, сравните их дизайн с вашим, удобство использования, фильтры товаров, различные блоки и так далее.

3. Имеет ли ваш сайт мобильную версию либо адаптивный дизайн? *Думаю, вы знаете ответ на этот вопрос, если нет, то переходим в webmaster.yandex.ru, в раздел «Диагностика» — «Диагностика сайта» в отчете будут указаны рекомендации о мобильной версии.

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

Как сменить дизайн сайта и не потерять позиции ?

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

• Во первых, никогда не меняем структуру сайта, то есть, после смены дизайна, у ваших страниц должны остаться прежние url-адреса, это очень важно (редизайн подразумевает под собой просто смену внешнего оформления и не более). Если сменяться адреса страниц, это повлечет за собой переиндексацию, 404 ошибки (если не будет 301 редиректов), распределение статического веса по страницах будет совершенно другое, все это повлечет за собой неизбежную смену позиций. *Если планируется масштабная работа над сайтом в том числе и смена структуры, то эту процедуру проводим до редизайна.

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

• Рекомендую запомнить все основные html-теги. Речь идет не только о заголовках H1-H6, но и о тегах оформления b, i, ul и тд. Рекомендую их оставлять там где и были (включаем это в ТЗ при верстке макета). Все эти теги влияют на релевантность страницы запросам в той или иной степени, а мы хотим не испортить позиции нашего сайта, поэтому эти моменты крайне желательно оставить как и были.

• Моменты с новыми блоками. К примеру, возьмем страницу категории товаров, в новом дизайне у нас появился блок с новостями магазина, пример:

Все это хорошо, но стоит понимать, что это все внутренние ссылки которые передают свой вес, то есть, по факту имеем, что с данной категории магазина добавилось 6-7 (смотря сколько статей в карусели) ссылок на статьи (которые продвигать нам не нужно). Также, этот блок добавляет нерелевантный контент нам на страницу, что не хорошо. Подобных «новых» блоков может добавиться очень много, поэтому рекомендую некоторые из них ставить в теги noindex и ссылки в атрибут nofollow, это обезопасит ваш сайт от изменений в поиске. Подобным образом поступаем со всеми подобными блоками. По истечению некоторого времени (1-2) недели, рекомендую начинать постепенно убирать проставленные теги и смотреть на позиции сайта. Это нам даст возможность «Откатить изменения» при смене позиций в нежелательную сторону.

• Немного по релевантности. Опять же, возьмем страницу категории товаров, на которой выведен блог товаров. Может быть ситуация, что ранее, у каждой из карточек товаров были показаны те или иные характеристики (цена, артикул, цвет, размер и тд), но в новой версии, дизайнеру не понравилось как это выглядит и он убрал вывод характеристик с карточек. Это тоже может повлиять и повлияет на позиции сайта, как со стороны релевантности контента (так как некоторая часть контента пропадет), так и со стороны поведения пользователя, стоит помнить об этом.

Подытожим все основные рекомендации:

1. Не меняем структуру, не меняем url;
2. Не меняем CMS;
3. Минимум изменений по основным тегам верстки, которые влияют на релевантность (H1-H6, b, i и тд);
4. Следим, чтобы вся информация которая выводилась ранее осталась на сайте (если она нужна, можно посмотреть по метрике — карта кликов, видеозаписи действий пользователей и тд).
5. Если добавляем много новых блоков, новый функционал, в котором используется много контента, то рекомендую закрывать их от индекса (тем самым обезопасим себя от лишних вопросов). Далее, постепенно снимаем noindex-ы и следим за позициями (есть возможность вернуть все обратно).
6. Аналогичная механика с новыми блоками в которых будет много ссылок, также рекомендую, закрывать ссылки в атрибуты nofollow (сохранение позиций наше все), далее постепенно убираем их, смотрим результаты съема позиций.

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

Подготовка прототипа будущего дизайна сайта

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

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

Выбор программы для создания прототипа

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

1. Gliffy

Бесплатная версия есть, можно пользоваться.

2) Axure

Простая и удобная программа.

3) Mockingbird

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

1) Находим всех наших конкурентов

*Не берем только топ-5, так как у данных магазинов может быть другое ранжирование от поисковых систем (топы ниши) и некоторые моменты (блоки, функционал и тд), которые мы решим у них взять, нам могут никак не улучшить ситуацию, а может и ухудшить.

Находим 20-30 сайтов (берем разные регионы), которые нам понравились и тщательно анализируем их. Берем у каждого самое лучшее решение того или иного блока, будь то фильтр товаров, блок рекомендуемых товаров, какие-либо подсказки и так далее.

Стоит обращать внимание на все, где стоит ссылка, какая кнопка и т.д.

2) Выписываем все блоки

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

3) Выбираем все элементы сайта

На данном этапе необходимо определиться, какая будет шапка, какое будет основное меню, подвал и так далее.

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

4) Определиться со стилем и цветовой гаммой

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

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

• Kwork.ru;
• Fl.ru;
• Weblancer.net;
• и другие.

Выбираем ресурс, заходим в раздел «Дизайн» и переходим по исполнителям, смотрим их портфолио. Дизайнеров много, работ представленных у них в портфолио, тоже много, поэтому мы легко сможем выбрать дизайн который нам нравиться и по стилю исполнения и по цветовой гамме.

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

Отрисовка прототипа сайта

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

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

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

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

Пишем подробное ТЗ к прототипу

Это также весьма ответственный момент, так как если мы что-то забудем этого и не будет в дизайне.

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

*Данные вопросы и нюансы, можно описать и на самом прототипе, пример: Переходим непосредственно к выбору и заказу дизайна.

Выбор исполнителя, заказ дизайна

Имеется два варианта заказа дизайна:

1) Обратиться в студию разработки дизайна или сайтов

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

2) Обратиться к фрилансеру, через популярные площадки

Подобный вариант идеально нам подходит. Так как, основной целью подготовки подробного прототипа и ТЗ было не только получение именно того дизайна, который нам нужен, но и способ сэкономить наши средства. Ведь все что осталось дизайнеру это только добавить графику в наш прототип, по факту мы уже нарисовали весь «дизайн», исполнителю не нужно думать, как и что должно выглядеть, все уже нарисовано, стиль и цветовая гамма предоставлена. Как и писал выше, существует огромный выбор площадок с фринсерами и все они по своему хороши. Но мы остановим свой выбор на сервисе Kwork.ru, так как нам необходимо достойное качество за адекватную сумму, а как я уже писал выше, нам не нужен профессионал за 100 тыс., нам нужна графика для нашего прототипа. Также, здесь очень простая и защищенная система оплаты, нам не нужно напрямую платить фрилансеру, все оплаты происходят через сам сервис. Если предоставленный дизайн будет не по ТЗ, то можно легко вернуть средства. Первым делом регистрируемся и переходим в раздел дизайна. Рекомендую не тратить свое время на долгий выбор дизайнера, просматривая сотни портфолио и так далее, открываем топ 20-30 и высылаем всем наше ТЗ, уточняем цену и сроки. После чего все кто заинтересован в выполнении вашего задания, предложат вам свои условия на основе чего мы сможем сделать свой выбор. Все достаточно просто и прозрачно. *Стоит помнить, что все что мы ждем от дизайна уже написано нами в ТЗ, поэтому отдать предпочтение лучше финансовой стороне вопроса, так как результат от этого фактически не измениться. В итоге имеем полностью готовый, простой и современный дизайн:Полностью ознакомиться с проектом можно по ссылке tkspecodegda.ru

Все основные моменты:

1. Необходимо четко определиться необходим ли нам редизайн сайта;
2. Выбираем лучших конкурентов, на основе их сайтов, функционала выбираем все самое лучше;
3. На основе подготовленной информации составляем качественный прототип каждой из страниц;
4. Выбираем сайт который нас полностью устраивает по цветовой гамме и стилю;
5. Составляем пояснительную записку, тз к прототипу;
6. Заказываем дизайн на популярный биржах фриланса;
7. Получаем готовый дизайн, который мы хотели, который нам нужен, за адекватную стоимость;
8. Переходим к составлению ТЗ на верстку и натяжку, поиск исполнителя.

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

• прототипы
• дизайн
• фриланс
• редизайн сайта
• юзабилити
• руководство
• UX

Как должно выглядеть техническое задание на разработку сайта – пример

О чём вы думаете, когда видите по городу или на сайтах (в рекламных блоках) баннеры с заголовками: «Сайт за 500 грн.», «Сайт за 1000 руб.»?

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

• А возможно ли такое вообще?
• Какое качество будет у сайта в таком случае?
• Можно ли будет его потом продвигать?
• Займёт ли он достойные позиции?
• Будет ли он удобным и будет ли возможность его редактировать?

Конечно, порой приемлем и простой набор HTML-файлов: если страниц немного, их редко меняют из-за тематики и владелец сайта (или контент-менеджер) знает HTML.

А если нет? Если, например, потенциальный владелец ничего не знает об HTML и после того, как получит сайт, не вносит никаких изменений? Обычно мало кто вносит какие-то изменения сразу, ведь всё актуально.

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

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

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

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

Итак, образец технического задания на разработку небольшого сайта отзовика.

Тз по разработке сайта

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

Не стесняйтесь и не ленитесь приводить примеры сайтов, на которых вам нравится тот или иной функционал или элементы дизайна, вёрстка, эффекты. Но! не просто давайте ссылки, а прикрепляйте скриншоты.

Вы можете составить ТЗ, а владелец сайта (который вы приведёте в пример) к тому моменту, когда ТЗ перейдёт к исполнителю, поменяет вёрстку.

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

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

Десктопная версия

Общая информация

Ширина сайта – 1140 px (пример –vizaua.com).Шапка и футер растягиваются по ширине экрана и одинаковы для всех страниц.Семейство шрифтов: Cambria (предпочтительно), Century, Georgia. Можно указать и другие популярные шрифты с засечками.Размеры шрифтов (для Cambria):Текст под логотипом в шапке – 15pxСсылки в шапке – 14px

Текст в футере – 16px

страница – home.png

Текст над строкой поиска – 25px

Текст под строкой поиска – 14px

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

1, 2 – цифры с реальным числом магазинов и отзывов. Можно пересчитывать один раз в 24 часа.3 – категории. Располагаем вручную в таком порядке, как на макете.4 – ссылки на магазины. Рядом с названием магазина выводим число отзывов. Если отзывов ещё нет, ничего не выводим.

Под каждой категорией выводим 6 самых популярных по количеству отзывов магазинов. Если в категории есть ещё магазины, на неё ведёт ссылка «Ещё N», где N – число магазинов. Если больше магазинов нет, на категорию ведёт ссылка «Показать всё».

5 – список низкопопулярных категорий.

Выводим их тут.

Страница с описанием магазина и отзывами – shop-page.png

Заголовок H1 – 30px
Заголовок H2 – 22px

Описание элементов:1, 2, 3 – место под рекламные блоки. Нужно отметить это место при вёрстке и закрыть к индексации.4 – контент страницы.

Дизайн меняется таким образом, чтобы все изменения можно было внести глобально, без редактирования каждой страницы по отдельности:– добавлен серый фон контентного блока;– добавлен белый border у таблиц (по умолчанию, вроде, нигде не прописывался);— добавлено место под рекламный блок над отзывами.

5 – заголовок формы. Нужно проставить «».

6 – последние отзывы (сквозной блок для постов и категорий). Это примерное отображение, допускается готовый плагин с похожей визуализацией.

Страница категории – category-archieve.png

Ссылки на магазины – 18 px, цвет # 336699
Текст в анонсах – 14px

Описание элементов:1,2 – место под рекламные блоки.3 – контентная часть. Нужно удалить все описания категорий (тексты сохранить в отдельном .doc-файле и загрузить этот файл на сервер).

4 – ссылка на отзывы. Во всех шаблонах ТЗ слово «комментарии» меняем на «отзывы».

Служебная страница – page.png

Размер шрифта – 15pxРекламные блоки не выводим.

В меню справа выводим только поиск и ссылки на категории. Отзывы не выводим.

404 ошибка – 404.png

404 – шрифт 80pxТекст под ним – 20px

Наклонный текст – 15px

Ссылки навигации:– на главную – 16px

– на служебные страницы– 14px

Активные элементы:Все ссылки подчёркнутые, убираем подчёркивание при наведении, цвет ссылки на несколько оттенков темнее (на усмотрение исполнителя).

Цвет кнопки #ddd, при наведении появляется курсор в виде руки.

Рекомендую делать отдельные макеты и описывать поведение всех ссылок, кнопок, выпадающих меню, всплывающих окон.

Мобильная вёрстка

Сейчас лучше ставить мобильную вёрстку главной и от неё «плясать». Не зря же вся справка и блог Google пестрят «Mobile first» (сначала мобильные или мобильность). Мы говорим вам об этом с 2014 года (статьи «3 способа быстро адаптировать сайт под мобильные устройства» и «Мобильная адаптация сайта — ответы на вопросы» ).

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

• Контактам. Номера телефонов должны быть кликабельными – при нажатии должна открываться панель ввода номера с уже набранным номером и кнопкой вызова.
• Меню. Опишите, как оно должно открываться: выезжать сбоку, сверху и т. д.
• Не должно быть горизонтальной прокрутки на страницах сайта (это само собой разумеется, но я всё же решила напомнить).

Ниже представлены макеты страниц для отображения сайта на мобильных устройствах (адаптивная вёрстка).

Основные требования:
– меню-бургер – раскрывается вниз при касании значка меню:

– сайдбар опускаем под основной контент:

– все элементы в футере находятся друг под другом:

страница

Все элементы выводятся друг под другом:

• краткое описание;
• форма поиска;
• подробное описание;
• списки магазинов, разделённые по категориям.

На этом примере, кстати, действительно всё предельно ясно, можно обойтись без описания.

Страница категории

Страница магазина

Все элементы выводим друг под другом, в том числе колонки в таблице.

Информационная страница

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

P.S.

Еще по теме:

Есть вопросы?

Задайте их прямо сейчас, и мы ответим в течение 8 рабочих часов.

Что нужно писать в ТЗ на разработку дизайна сайта — создание технического задания для дизайнера

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

Можно сказать, что уникальный дизайн с нуля — одно из отличий проекта действительно «для людей» от трафосборника.

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

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

Не нужно слепо требовать «нарисуйте дизайн». Нужно четко описать, дизайн каких страниц нужен. Для информационного сайта сгодятся 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. Внутренние контекстные ссылки — подчеркнуты. Цвет ссылок — такой, чтобы хотелось кликнуть (использующийся в выдаче Яндекса сойдет). В рубриках ссылкой должен быть только заголовок, никаких «Подробнее» или «Читать далее». Ссылки «Предыдущая запись» и «следующая запись» в дизайне поста также вообще не нужны. Даты новостей — то же самое. В начале поста (желательно сбоку) должно быть изображение поста — такое же, какое отображается в рубрике.

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