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



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

Как это делается? Правильный редизайн сайта


На дворе 2015 год, и вокруг только и разговоров что об адаптивности, флэте и видео-контенте. И, наблюдая за всеми трендами веб-дизайна, у каждого владельца веб-проекта наверняка чешутся руки обновить свой, особенно, если его делали 2-3 года назад.

Созреть к полному перевоплощению сайта непросто.

Былые усилия не дают решиться на то, чтобы стереть прошлые наработки, и практически с нуля создать сайт, соответствующий современным требованиям как целевой аудитории, так и поисковых систем (все ведь помнят обновления в алгоритмах ранжирования Google?).Признаюсь, когда мы переделывали наш сайт, меня терзали смутные сомнения на предмет того, сколько же всего было уже сделано, и как же так взять, и отказаться от этого. Стало легче, когда пришло понимание, что отказываться от эффективных наработок вовсе не нужно, а обернуть их в новую, красивую и конверсионную обертку — однозначно стоит. Для начала, обозначу, как понять, что вам действительно стоит обновить дизайн сайта.

Для этого, задайте себе вопросы, ответив на которые «нет» — вам стоит немедленно взяться за переработку веб-ресурса:

  1. На вашем сайте внедрены хотя бы 5 из 20 фишек веб-дизайна 2015 года (полный список с примерами тут)?
  2. Качество сайта соответствует уровню вашей компании? (логично, что если вы лидеры рынка, или стремитесь ими стать, уровень сайта должен предвосхищать ожидания посетителей)
  3. Сайтом удобно пользоваться, и это подтверждают данные систем веб-аналитики? (глубина просмотра страниц, целевые действия: подписка, покупка, звонок, заказ, показатель конверсии страниц)
  4. Сайт адаптирован под мобильные устройства? (проверить, насколько он адекватен для мобильных юзеров, можно тут)
  5. Ваш сайт идеален, и в нем нечего улучшать?

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

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

Например, когда мы перерисовывали наш сайт, во время дизайна главной страницы мы столкнулись с тем, что нам ничего не нравится. Смотришь, и понимаешь, что существующая главная лучше! Что делать? Мы взяли структуру действующего (над которой бились несколько лет, доводя ее до ума), положили на новый дизайн, и вуа-ля!

Мораль сей басни — не изобретайте велосипед, если вы сделали это раньше. Тюнингуйте его. На что обратить внимание при анализе сайта:

  1. устраивает ли вас действующая админка сайта?
  2. от чего можно избавиться?
  3. о каких «фишках» тепло отзываются клиенты?
  4. где «слепые зоны»?
  5. каких разделов или страниц не хватает?
  6. какие самые конверсионные элементы?
  7. что думают обо всем этом программист и SEO-шник?
  8. в чем вас ограничивает ваш существующий сайт?

2 Планирование изменений Тут начинается процесс, схожий с созданием нового сайта.

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

Если вы переезжаете, проконсультируйтесь с SEO-специалистом на предмет сохранения наработок по внутренней оптимизации ресурса.

Важно не только удержать позиции после обновления, но и добавить их.

При проектировании архитектуры страниц, также ориентируйтесь на данные анализа.

Ваша задача — сделать сайт еще удобнее, полезнее и конверсионнее.

При прототипировании важно:

  1. Соблюдать принцип AIDA (Внимание-Интерес-Желание-Действие) на каждой ключевой странице сайта (подробности читайте в статье «Какой должна быть эффективная посадочная страница»)
  2. Продумывать «фишки» уже сейчас, а не слепо следовать шаблону в голове
  3. Сделать конверсионными хэдер и футер сайта
  4. Учесть особенность мобильных юзеров, продумав навигационные элементы для них

Например, при проектировании нового блога, мы учли слабые существующего, и пожелания читателей: 3 Собственно, редизайн Если уж переделывать сайт, то поставить целью перед дизайнером не просто «дать новое веяние», а прыгнуть на три головы выше. Вы ведь создаете сайт не на месяц, и не на год, он будет с вами долго (пока на пятки не начнут наступать новые тренды и требования целевой аудитории).

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

Если чего-то нет — лучше готовить заранее.

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

Используйте силу текста во благо! Дизайнеру, конечно, виднее, но ничто не мешает вам предлагать новые идеи и «фишки» самостоятельно. Если они действительно стоящие, все от этого только выиграют.

А тут можно вдохновиться:

  1. рубрика «Веб-тюнинг» с идеями по темам проектов
  2. awwwards.com
  3. cssdesignawards.com
  4. csswinner.com

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

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

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

Обязательно участие тестировщика — чтобы проконтролировать качество верстки.

5 Программирование Я надеюсь, вы составили техническое задание, как было рекомендовано во втором пункте?

Никогда, никогда не делайте сайт без ТЗ. Знаете такую поговорку в мире веба — «без ТЗ результат ХЗ»?

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

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

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

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

Не оптимизированное видео замедлит скорость загрузки.

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

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

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

Просто смиритесь с тем, что лучше «почти хорошо», но сейчас, чем «превосходно», но не понятно когда.

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

Поднимайте планку и получайте результат!

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

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

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

Нужно четко описать, дизайн каких страниц нужен. Для информационного сайта сгодятся 3 страниц — главная, рубрика и пост.

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

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

Google, например, предупреждает в панели Вебмастера, если сайт не оптимизирован для просмотра на мобильных устройствах.

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

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

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

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

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

Я с него начинал И я в том числе.

Они номер 1 по надежности и по примочкам Которые мне пишут тексты сотнями.

Рефам даю подсказки в скайпе

Автор статьи Znet Это я.

Имею опыт продвижения крупных проектов (более 15К уников дейли), владею небольшой сеткой собственных сайтов.

+3

Загрузка. Рекомендуем статьи по теме

Редизайн сайта без боли для бизнеса

Евгений Костров 2251 15.05.

Мая 2021 Редизайн — это полное обновление внешнего и внутреннего функционала текущего сайта.

Переделка, реконструкция, модернизация отражают лишь частичное изменение.

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

В этом лонгриде мы собрали 10-летний опыт работы с сайтами (смотрите и услугу ). Узнайте все про редизайн в лонгриде.

Информация полезна для руководителей, кто выстраивает процесс и думает над сохранением SEO и конверсии.

Подчеркнем, что это наш опыт и по такой технологии мы работаем. Смотрите оглавление. Пример дизайна магазина Связной в 2016 и 2021 Рассказываем о собственной методологии проведения редизайна.

Эта методология учитывает все нюансы проведения редизайна, чтобы в итоге новый сайт выполнял задачи и сохранил лучшее из наследия предыдущего. Требуется провести звонок, skype, встречу для знакомства с клиентом. Мы задаем вопросы, направленные на понимание мотивов редизайна.

От клиента часто можно услышать.
  1. Проводим ребрендинг.
  2. Руководство поставило задачу, не знаю причин.
  3. Просто устарел дизайн.
  4. Нам нужно как вот у этих.
  5. Не устраивает CMS.

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

Мнение основанное, возможно, не на фактах и цифрах. В этой ситуации объясняем, что мы проводим редизайн с четко поставленными целями и задачами, которые измеримы и достижимы. Редизайн проводится на основе проектной документации. Если клиент не предоставил проектной документации, то требуется разработка.

Если клиент не предоставил проектной документации, то требуется разработка.

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

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

Мы видим структуру постановки задач в такой иерархии начиная с самого важного: Продукт. Продажи. Маркетинг. Интернет-маркетинг.

Редизайн сайта. Маркетологи служат продажам.

Им нужен редизайн сайта. Мы расцениваем сайт, как инструмент маркетолога. А какие цели маркетинга бизнеса?

Какие цели продаж? У грамотного бизнеса должны быть ответы на эти вопросы.

Грамотный редизайн начинается с исследования бизнеса.

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

Для составления проектной документации аналитик использует гостевые доступы заказчика по счетчикам Яндекс.Метрика, Google Analytics.

Проводит аудит веб-аналитики.

Берет задачи, переданные от заказчика и формирует выводы. Ответы на вопросы, которые дает веб-аналитика:

  1. Что аудитория делает на сайте (наиболее посещаемые страницы, источники трафика, основные сценарии поведения).
  2. Кто аудитория сайта (пол, возраст, география, интересы).
  3. Как эта аудитория ведет себя на сайте (время и периодичность визитов, браузер, устройство, глубина просмотра, время визита).
  4. Что это дает бизнесу (уровень конверсии, количество достижения целей, стоимость цели).

Помимо исследования веб-аналитики следует обратить внимание на:

  1. Уровень SEO-оптимизации сайта.
  2. Сайты конкурентов.
  3. Бизнес-процессы клиента (маркетинг, продажи, производство).
  4. CMS-клиента.

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

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

Проектная документация при реализации учитывается, но всегда выполняется на 100%.

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

В агентстве Evklead мы используем следующий набор документов для создания проекта: 1. Таблица «Анализ спроса» Исследование позволяет выявить наличие поискового спроса и спроектировать структуру сайта под требования поисковых систем. Предоставляется в формате Microsoft Excel.

2. Таблица «Структура сайта» Содержит информацию о количестве типовых страниц на сайте, учитывает иерархию будущего сайта и позволяет сформировать адреса страниц будущего сайта.

Если на проекте много SEO трафика, то отдел проектирования старается сохранить адреса страниц сайта и не переделывает с нуля структуру. Предоставляется в формате Microsoft Excel. 3. «Визуальный проект сайта» Формирует представление у ЗАКАЗЧИКА о визуальном образе будущего сайта.

Нужен для:

  1. Построения удобной навигации на сайте
  2. Расположить смысловые блоки на каждой странице сайта
  3. Сбора информации о потребности в разработке контента (фото, видео, текст)
  4. Выстроить правильную логику подачи информации и расположении элементов, которые влияют на результат от маркетинга.

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

Проект представляет из себя набор типовых страниц в виде черно-белых блоков.

4. Документ «Техническое задание на разработку сайта» Описывает технические средства для реализации сайта следуя визуальному прототипу.

Позволяет описать логику работы технического функционала сайта. Предоставляется в свободном формате в виде документа формата Microsoft Word или PDF. 5. Документ «Концепция стратегии» Описывает задачи маркетинга, описывает общие выводы по анализу и выбору технического решения, предлагает каналы привлечения аудитории и средства обхода конкурентов.

Предоставляется в свободном формате в виде документа формата Microsoft Word или PDF. 6. Таблица «График разработки сайта» Визуально показывает этапы разработки сайта, их последовательность и определяет зоны ответственности ЗАКАЗЧИКА по совместной работе.

Предоставляется в виде диаграммы Ганта в формате Microsoft Excel.

7. Коммерческое предложение Разработка сайта» Содержит информацию о фиксированных сроках реализации каждого этапа разработки.

А также расчет фиксированной стоимости с учетом определенных специалистов, стоимостью их часа и итоговой стоимостью за каждый этап и всю работу. Предоставляется в свободном формате в виде документа формата Microsoft Word или PDF. Предлагаем сравнивать проектную документацию с планировкой и дизайном интерьера дома.

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

Всем заказчикам, кто готов работать без проектной документации предлагаем почасовую оплату. Этот вариант также возможен. Можно будет перекрашивать обои по 3 раза в день. Обратитесь к нам с задачей, и мы устроим демонстрацию с реальными документами.

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

Вся документация в виде задания утверждена.

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

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

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

Нюансы. На рынке существуют решения, которые позволяют ускорить процесс разработки.

Сам сайт состоит из двух частей CMS (бэкенд) и его внешний вид для пользователя (фронтенд). Бэкенд можно написать:

  1. с нуля,
  2. конструкторы.
  3. использовать гибкие фреймворки,
  4. готовые CMS,

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

Помимо готовых систем управления контентом (CMS) существуют и готовые решения сайты. Примеры можно увидеть в . Это уже не только готовая CMS, но и даже весь внешний функционал.

Остается только его адаптировать под себя, заполнить содержанием — готово.

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

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

Если у вас типовые товары или статьи, то часто программисты смогут выгрузить базу и автоматически залить в новую CMS.

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

Эти работы крайне важны для сохранения результатов SEO, веб-аналитики и т.д.

На этом этапе выполняются следующие работы:

  1. По согласованию сторон производится настройка целей аналитики.
  2. Составление таблицы адресов страниц старого и нового сайта для создания редиректов с целью сохранения результатов работы по SEO.
  3. Перенос метатегов со старого на новый сайт.
  4. Настройка SEO для запуска (sitemap, robots.txt и т.д.).
  5. Перенос счетчиков веб-аналитики и пикселей соцсетей.

Пример поэтапного запуска редизайна официального сайта РЖД. Поэтапный запуск проекта. Если делают редизайн сайта с большой посещаемостью, то создают поэтапный, безопасный запуск проекта. Новый сайт выносят на поддомен и закрывают полностью от индексации поисковых систем, но оставляют доступным по ссылке для пользователя.

На старом сайте размещают всплывающее окно или где-то в заметном месте сообщают приглашение для тестирования нового сайта.

Этот шаг позволяет протестировать новый сайт на реальных пользователях. Тестирование нагрузкой и реальными пользователям позволяет:

  1. вскрыть новые ошибки,
  2. избежать стресса пользователей от нового интерфейса,
  3. улучшить пользовательский опыт, протестировать уровень конверсии,
  4. собрать аналитику и построить дальнейшую работу на данных.

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

В смете отражены основные работы из которых формируется стоимость. Смета представлена для редизайна, когда движок 1С Битрикс не меняется, структура сайта не изменяется, изменяется только внешний вид сайта. Что включает в себя редизайн: Дизайн концепции на основе главной страницы:

  1. Стоимость часа (руб.): 1 500
  2. Кол-во специалистов: 1
  3. Кол-во часов: 20
  4. Итого (руб.): 30000

Дизайн всех страниц сайта:

  1. Стоимость часа (руб.): 1 500
  2. Кол-во часов: 100
  3. Кол-во специалистов: 1
  4. Итого (руб.): 150 000

Дизайн-адаптивов (макеты для смартфонов и планшетов):

  1. Итого (руб.): 50 000
  2. Кол-во специалистов: 1
  3. Кол-во часов: 50
  4. Стоимость часа (руб.): 1 000

Верстка всех страниц сайта:

  1. Кол-во часов: 100
  2. Стоимость часа (руб.): 1000
  3. Кол-во специалистов: 1
  4. Итого (руб.): 100 000

Программирование функционала на 1С Битрикс:

  1. Кол-во часов: 95
  2. Кол-во специалистов: 2
  3. Итого (руб.): 142 500
  4. Стоимость часа (руб.): 1500

Управление проектом на этапе разработки:

  1. Стоимость часа (руб.): 1000
  2. Итого (руб.): 60 000
  3. Кол-во часов: 60
  4. Кол-во специалистов: 2

SEO настройка для успешного переезда, перенос веб-аналитики:

  1. Стоимость часа (руб.): 1000
  2. Кол-во специалистов: 1
  3. Итого (руб.): 10 000
  4. Кол-во часов: 10

Копирайтинг

  1. Итого (руб.): 10 000
  2. Кол-во часов: 10 000 символов
  3. Кол-во специалистов: 1

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

  1. Кол-во часов: 1
  2. Итого (руб.): 5000
  3. Стоимость часа (руб.): 5000

Итог:

  1. Кол-во специалистов: 9
  2. Итого (руб.): 557 500

Рассмотрим другие случаи

  1. Пример.

    У вас сайт на 1С Битрикс и вам требуется использовать готовое решение.

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

    этих пунктов не будет. Их заменит пункт доработки готового решения под ваши задачи.

  2. Пример. У вас сайт на 1С Битрикс и вам нужно поменять CMS и сделать редизайн. В этом случае к стоимости из таблицы добавляются работы по установке и настройке новой CMS, переносу всего содержания.
  • Если в вашем проекте есть SEO, конверсия, трафик, лиды и другие маркетинговые слова и бизнес зависит от этого, то крайне важно, чтобы интернет-маркетологи принимали участие в разработке проекта и имели там вес.

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

  • Если у вас есть отдельная команда специалистов по маркетингу, обязательно привлеките их к процессу редизайна.
  • В итоге у вас получится ТЗ, достаточное для грубой оценки.

    Обращайтесь в агентства и запрашивайте оценку стоимости и сроков.

  • Найти средства редизайна. Как сделать редизайн? Это уже задачи.

    На этом этапе рекомендуем обратиться к специалистам.

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

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

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

    Почему нужен редизайн? Что это даст?

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

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

  • Скорее всего вам потребуются фиксированные сроки и суммы.

  • Опишите детально все требования бизнеса, бизнес-процессы в виде общего ТЗ.

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

Предлагаем выделить виды редизайна по степени привнесения нового.

  1. Дизайн, смена CMS и изменение структуры. Тоже самое что и второе, но меняются адреса страниц, добавляются новые разделы. Старые разделы переезжают, удаляются. Потребуется подготовка дополнительного контента.
  2. Полный редизайн. Тоже самое, что и третье, но сюда добавляется разработка нового функционала.
  3. Дизайн и смена CMS. В этом случае по текущей структуре и функционалу создается новый дизайн и все содержание переносим на новую систему управления контентом.
  4. Только дизайн. Текущая CMS, структура сайта и функционал остаются без изменения, обновляется только дизайн.

Таким образом от вида редизайна зависит степень изменения сайта. В каких-то случаях требуется изменить только в дизайн, а в каких-то разработать новый сайт. Сайт . Основная задача: каталог не электронный, а в формате PDF 10 000 позиций.

Требуется сделать редизайн сайта с созданием электронного каталога. Так сайт выглядел в 2016 году .

Сайт . Основная задача: устаревший дизайн не создает имиджа надежной компании. Требуется сделать редизайн с сохранением трафика и усилить конверсию для B2B.

Так сайт выглядел в 2017 году . Сайт . Основная задача: повысить загрузку в сезон, а для этого обновить сайт, разработав календарь событий. Так сайт выглядел в 2018 году .

  • Смена бренда/обновление корпоративного стиля компании.
  • Устаревший дизайн, который неудобен пользователю или не создает доверия к компании. Для этого потребуется экспертная оценка и сравнение с конкурентами. Также возможно заказать исследование пользователями, для понимания текущего уровня сайта.
  • Неудобная CMS для контент-менеджеров, а также небезопасная, медленная работа или нет возможности интеграции с нужными системами учета.
  • Отсутствие мобильной версии сайта или неудобная/технически плохо работающая адаптивная верстка.
  • Задачи SEO-специалистов, которые не могут выполнены на текущей системе управления контентом.
  • Низкая конверсия на сайте или другие проблемы в интернет-маркетинге, например падение трафика из поиска.
  • Изменение маркетинговой стратегии компании и постановка задач от маркетинга по изменению рынков, позиционирования, открытию новых направлений, разделению компании на подсайты.

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

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

  1. Обновление интерфейса сайта, который будет еще конкурентен минимум 5 лет.
  2. Сохранение SEO-трафика без ощутимых падений, в перспективе — увеличение трафика.
  3. Не более 10% отхождений от ТЗ и проектной документации.
  4. Сохранение, а лучше увеличение конверсии сразу после запуска.
  5. Сохранение структуры, контента, аналитики — всего лучшего наследия и привнесения нового для выполнения поставленных задач.
  6. Фиксированные сроки и суммы.

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

Важно сказать, что результат редизайна зависит от двух сторон.

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

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

Мы проводим бесплатные консультации и помогаем менеджерам и основателям компаний найти взвешенные решения по формированию задач. Обращайтесь по . Поделиться Выбор редакции Получите прогноз стоимости привлечения B2B-клиентов. Бесплатно. Ручной анализ. Свежее в блоге 05 Августа 2021 2522 04 Июня 2021 2654 21 Мая 2021 14 Мая 2021 30 Апреля 2021 © Evklead Agency, 2021 Агентство B2B-маркетинга

Инструкция: как составить техническое задание на разработку сайта

Техническое задание – документ, описывающий все страницы и части сайта, их функционал и особенности реализации.

Заказчику этот документ обеспечивает защиту в спорных ситуациях.

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

Заняться составлением ТЗ может кто угодно: хозяин бизнеса со своим личным видением «как надо», маркетолог компании заказчика, менеджер по развитию, проектный менеджер агентства-исполнителя или команда разработчиков. Рассмотрим на примерах, чем будут различаться их задания. Основная миссия ТЗ, которое присылает заказчик исполнителю, – описать все части проекта, дать перечень ожидаемого функционала и указать на важные детали проекта.

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

Как правило, составленный заказчиком документ более короткий, вся информация в нем описывается без подробных технических деталей и способов реализации. Такое ТЗ содержит:

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

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

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

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

При составлении можно опираться на несколько источников информации:

  1. бриф;
  2. разработанную структуру сайта;
  3. пожелания заказчика;
  4. прототипы.

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

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

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

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

  • Структура сайта и ссылки.
  • Описание страниц и их функциональных особенностей.
  • Другие элементы.
  • Общая информация о проекте.
  • Конверсионные формы.

Опционально могут добавляться:

  1. информация об административной панели;
  2. любые другие пункты в зависимости от особенностей проекта.
  3. описание необходимых интеграций с другими сервисами;
  4. данные о личных кабинетах, группах пользователей и их правах;

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

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

  • Система управления сайтом. Нужна программистам, чтобы понимать, какую CMS устанавливать или разрабатывать с нуля, если необходимо.
  • Информация о разрешениях верстки. Нужна дизайнерам, верстальщикам и тестировщикам для понимания, какие разрешения должны быть отдельно отрисованы, адаптированы и протестированы.
  • Название компании. Если проект выполняется не внутри собственной компании, прописанное название поможет специалистам понять, для кого выполняется разработка сайта.
  • Данные о языковых версиях сайта. Нужны программистам для подключения сайта и настройки вывода данных в админ-панели.
  • Новый и старый URL-адреса компании. Нужны программистам для настройки сайта.
  • Тип сайта. Сайт может быть корпоративным, информационным, сайтом-визиткой, интернет-магазином, порталом. Знание типа может помочь в настройке админ-панели и ее модулей: например, у интернет-магазина должен добавиться модуль работы с заказами.

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

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

Вам нужно понять:

  1. нужен ли вывод меню в админ-панель или его можно редактировать только через код;
  2. есть ли выделение у активного пункта меню;
  3. будут ли выведены в админку email, телефоны и прочие контактные данные или их можно редактировать только из кода;
  4. что будет происходить при взаимодействии с логотипом;
  5. как будет выделен выбранный пункт при наведении на него;
  6. как появляется всплывающее меню;
  7. можно ли добавлять/удалять пункты меню или нужно задать их фиксированное количество;
  8. есть ли минимальное и максимальное количество пунктов, которое нужно задать при настройке админ-панели;
  9. как пункты меню выстраиваются в футере;
  10. требуется ли заверстать почту, номера телефонов, соцсети в специальные теги (url-схемы) или они будут размещены без возможности нажать на них.
  11. если вывод в админку требуется, то в каком формате выводить информацию для редактирования (например, будут ли доступны для редактирования ссылка на страницу, названия пункта меню, сортировка пунктов);
  12. будет ли выводиться меню, если один из параметров меню в админ-панели не заполнить (например, если не добавить ссылку или название пункта меню);
  13. сколько уровней меню будет в хедере/футере;
  14. можно ли менять местами (сортировать) пункты меню в админ-панели;

Пример хедера Пример футера По аналогии можно сформировать ряд требований для других сквозных блоков и форм.

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

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

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

  1. есть ли ограничения по выводу и редактированию элемента/блока, и если да, то какие.
  2. должен ли элемент или блок выводиться в админ-панель (редактируемый он или нет);

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

При описании блока в ТЗ вам нужно учесть:

  1. редактируются ли / выводятся ли в админ-панель поля и информация с формы;
  2. можно ли добавить в форму новые поля, менять их местами, удалять существующие;
  3. есть ли у полей ввода данных подсказки.
  4. что происходит при отправке формы;
  5. куда отправляются данные с формы (на почту, в сервис рассылок);
  6. какие сообщения появляются у каждого из полей, если данные введены неверно;
  7. есть ли у нее проверка на корректность введенных данных;
  8. как закрывается форма и есть ли затемнение/осветление фона при ее открытии и закрытии;
  9. где расположена форма и при каких действиях пользователя происходит ее вызов;
  10. какие данные и в каком виде отправляются с формы (например, в каком виде приходит заявка администратору сайта);
  11. какие данные и поля для ввода данных содержатся в форме;

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

  1. блоки для SEO-текста и прочие элементы, которые встречаются во всех проектах.
  2. пагинацию;
  3. заголовки страниц;
  4. хлебные крошки;

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

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

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

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