Что такое редизайн сайта

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

Что такое редизайн сайта

Один из частых запросов владельцев web-ресурсов, с которым мы сталкиваемся в нашей работе: «Объясните простыми, человеческими словами, что это такое — редизайн сайта, что входит в эту услугу?»

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

Когда нужно делать редизайн

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

В каких случаях пора заниматься апгрейдом?

• Ребрендинг компании.

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

• Смена владельца.

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

• Устаревший дизайн.

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

• Снижение продаж.

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

• Проблемы с юзабилити.

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

• Отставание от конкурентов.

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

• Шаблонный дизайн.

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

• Нет адаптивной версии.

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

Варианты редизайна

Глубина модернизации зависит от текущего состояния web-ресурса и задач, которые он должен решать. Выделим 4 уровня:

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

Что учесть в ТЗ на редизайн

• Четко сформулируйте цель редизайна: повышение конверсии, привлечение новых клиентов, вывод сайта в топ, что-то еще — конкретное и измеряемое.
• Опишите или подготовьте примеры web-дизайна, который вы считаете хорошим.
• Прикиньте, насколько текущая CMS отвечает вашим требованиям, стоит ли затевать переезд на другой движок.
• Заранее позаботьтесь о SEO и сохранении топовых позиций, если портал успешно продвигался до апгрейда.
• Анализируйте эффективность изменений с помощью инструментов web-аналитики. Заранее подключите ресурс к Яндекс.Метрике и сравнивайте результаты до / после.

Как сделать редизайн сайта без потерь позиций

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

• Не трогаем структуру, не меняем URL страниц, это повлечет переиндексацию, перераспределение веса документов и, как следствие, изменение позиций. Если не получается сохранить прежнюю структуру сайта, а у сайта хорошие позиции в поисковых системах – обязательно настройте 301 редиректы со старых адресов на новые.
• Запоминаем, а потом воспроизводим в обновленных файлах все основные HTML-теги.
• Обращаем внимание на релевантность: любые манипуляции с контентом, например, замена вывода информации на карточке товара, могут привести к проседанию позиций.

Алгоритм подготовки и контроля преобразований

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

Пошаговая подготовка

1. Анализируем поведение пользователей по метрикам.
2. Выясняем у целевой аудитории, что ей нравится / не нравится на вашем сайте.
3. Изучаем площадки конкурентов, смотрим, что в тренде в нашей нише, прикидываем, чем можем выделиться.
4. Обновляем айдентику. Неважно, меняете ли вы сайт под новый фирстиль или начинаете модернизацию фирстиля с обновления web-ресурса: редизайн — это повод привести к единому знаменателю все элементы айдентики бренда.
5. Готовим контент: обновляем тексты, пишем статьи под новые страницы, делаем фото и видео в духе обновленной стилистики.
6. Осторожно тестируем новые элементы. Внедряем отдельные фишки, смотрим на реакцию аудитории.
7. Постепенно запускаем новые элементы. Не стоит выкатывать все обновления скопом — это может вызвать шквал негатива, особенно, если площадка популярна.
8. В процессе проверяем корректность работы обновленных элементов, ловим технические ошибки.
9. Постоянно мониторим поведенческие факторы, контролируем количество отказов, изучаем отзывы, проводим опросы пользователей о результатах модернизации. Возможно, придется что-то переделывать, если обновления негативно скажутся на метриках.

Набор документов для проекта

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

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

Этапы выполнения редизайна сайта

1 этап. Планирование

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

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

2 этап. Дизайн

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

Итог работы:

• подписанные распечатки макетов страниц;
• исходники в формате psd.

3 этап. Верстка

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

4 этап. Программирование

Это этап сборки сайта и отладки CMS под его функционал. В результате мы получаем:

• настроенную под проект систему управления контентом;
• тестовую версию ресурса, выложенную на временный сервер.

5 этап. Контент

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

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

1. нет текста и картинок для наполнения;
2. нет человека, ответственного за контент.

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

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

7 этап. Перенос файлов на хостинг

Готовый проект переносится на постоянный хостинг, соответствующий по мощности обновленному функционалу.

Признаки качественного редизайна

Что значит качественный редизайн сайта? Как понять, что исполнитель хорошо делает свою работу?

• Соблюдается график работ, не превышается бюджет.
• Отклонения от проектной документации не превышают 10 %.
• Интерфейс делается с расчетом сохранить актуальность, как минимум, следующие 5 лет.
• Обновленный сайт не потерял своих позиций в поисковых системах, а в перспективе улучшил их и имеет потенциал роста, т.к. предусмотрены новые разделы и современный функционал.
• После запуска конверсия не просела и начала расти.
• Все лучшие элементы старой версии сохранены.

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

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

Цена на редизайн

Стоимость работ зависит от глубины переделки, объема самого web-ресурса и затраченного на апгрейд времени.

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

• управление проектом;
• дизайн-концепт Главной;
• дизайн-макеты всех типовых страниц;
• адаптивный дизайн страниц для мобильных устройств;
• верстка всех страниц;
• настройка SEO-параметров и метрик;
• услуги копирайтера;
• покупка фото.

Итоговый бюджет зависит от уровня сложности переделки.

• Замена функционала без изменения дизайна: 45–120 тысяч руб.
• Замена дизайна без изменений функционала: 50–100 тысяч руб.
• Замена дизайна и функционала: 120–250 тысяч руб.

Типичные ошибки

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

• Редизайн как самоцель, переделка проводится просто «чтобы было».
• Заказчик хочет реализовать свои фантазии, не учитывая пожеланий пользователей.
• Апгрейд воспринимается, как интересный эксперимент или развлечение, но цена вопроса здесь слишком велика, учитывая не только бюджет, но и риск упущенной выгоды из-за неудачного проекта.
• Готовь сани летом, а редизайн заранее. Без предварительной подготовки — аналитики, работы над сбором семантики, подготовки контента и нового функционала — модернизация web-ресурса рискует затянуться на годы.
• При обновлении не учитывается источник основного трафика на сайт, игнорируются характеристики устройств, с которых заходят пользователи.
• Не дождавшись результатов тестирования и исправления выявленных багов на обновленном ресурсе, заказчик удаляет старую версию.
• После обновления владельцы не занимаются продвижением. Сама по себе смена дизайна не выведет ресурс в топ.
• Владельцы, выведя свой портал на приличные места в поисковых системах после обновления, забрасывают продвижение. В конкурентных нишах сайты нуждаются в постоянном контроле и регулярном обновлении контента.
• Лучшее — враг хорошего: увлекаясь наворотами, усложнением кода, внедрением спецэффектов, вы рискуете потерять трафик, потому что базовые, главные элементы будут сделаны некачественно.
• Редизайн — это не только смена визуального ряда, но и улучшение качества контента. Об этом часто забывают.

Заключение

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