Редизайн сайта: советы, пошаговая инструкция + чек-лист

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

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

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

Нет времени читать статью? Найдите её в нашем телеграм-канале и сохраните себе в «Избранном» на будущее.

Содержание статьи

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

Редизайн сайта vs. обновление сайта

Как часто нужно делать редизайн сайта?

Как произвести редизайн сайта за 10 шагов?

1. Определите, не пора ли произвести редизайн сайта
2. Проанализируйте текущие показатели производительности вашего сайта (и сайта конкурентов)
3. Установите цели редизайна и создайте план
4. Определите свой визуальный язык, брендинг и обмен сообщениями
5. Создайте карту сайта
6. Используйте лучшие практики дизайна
7. Обновите контент сайта
8. Следите за SEO
9. Оптимизируйте мобильную версию
10. Оцените редизайн сайта и поделитесь им

Сколько времени занимает редизайн сайта?

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

Редизайн сайта — это основная часть обслуживания сайта (website maintenance). Эффективный редизайн улучшает как функциональность сайта, так и его внешний вид. Редизайн должен учитывать содержание сайта, пользовательский опыт, методы SEO, оптимизацию для мобильных устройств, а также веб-дизайн.

Редизайн сайта vs. обновление сайта

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

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

Изображение: Bench Accounting для Unsplash

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

Как часто нужно делать редизайн сайта?

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

• Обновления компании, ребрендинг или новые бизнес-цели. Если ваш бизнес или бренд недавно прошел процесс ребрендинга или обновил основные цели компании, такие как цель вашего бренда, миссия или видение, возможно, сейчас самое подходящее время для редизайна сайта. Важно убедиться, что ваш сайт точно отражает ценности и идеалы компании.
• Эффективность сайта. Ваш сайт работает так, как вы ожидали? Например, конвертирует ли он пользователей? Сколько времени пользователи проводят на определенных страницах? Как ваши новые и старые пользователи ведут себя на вашем сайте? Эти вопросы помогут лучше понять эффективность вашего сайта.
• Увеличение или уменьшение бюджета. Процветающие компании часто обладают необходимым бюджетом для полномасштабного редизайна сайта, но существует очень много компаний с ограниченным бюджетом. Если небольшие изменения могут помочь привлечь больше пользователей и увеличить продажи, подумайте об обновлении сайта.
• Изменения в отрасли. Представьте, что все ваши конкуренты внезапно интегрируют на свои сайты новые технологии. Это может побудить вас изменить ваш собственный сайт.

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

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

Как произвести редизайн сайта за 10 шагов?

Мы подготовили чек-лист по полному редизайну сайта, который поможет вам на всех этапах:

1. Определите, не пора ли произвести редизайн сайта.
2. Проанализируйте текущие показатели производительности вашего сайта (и сайта конкурентов).
3. Установите цели редизайна и создайте план.
4. Определите свой визуальный язык, брендинг и обмен сообщениями.
5. Создайте карту сайта.
6. Используйте лучшие практики дизайна.
7. Обновите контент сайта.
8. Следите за SEO.
9. Оптимизируйте мобильную версию.
10. Оцените редизайн сайта и поделитесь им.

1. Определите, не пора ли произвести редизайн сайта

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

• Не устарел ли дизайн моего сайта?
• Заметил ли я снижение продаж или конверсий?
• Поступали ли от пользователей жалобы на навигацию или дизайн?
• Проводил ли я недавно ребрендинг своего бизнеса?

Если вы ответили «да» на любой из этих вопросов, редизайн сайта может принести пользу вашему бизнесу.

2. Проанализируйте текущие показатели производительности вашего сайта (и сайта конкурентов)

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

Проанализируйте свой текущий сайт: оцените свой сайт и пройдитесь по разным страницам. Выявите, что работает, а что нет. Определите свои самые популярные страницы, средний путь пользователя и самые эффективные кнопки призыва к действию (CTA).

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

Вы должны ежемесячно анализировать следующие показатели:

• трафик (количество посетителей);
• время, проведенное на странице;
• показатель отказов;
• наиболее эффективные ключевые слова;
• новые лиды;
• конверсии;
• количество проиндексированных страниц;
• объем продаж.

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

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

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

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

3. Установите цели редизайна и создайте план

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

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

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

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

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

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

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

Настройка цветовой схемы сайта

5. Создайте карту сайта

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

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

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

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

Пример карты сайта

6. Используйте лучшие практики дизайна

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

• Иерархия: Благодаря иерархии посетители просматривают каждый элемент сайта в порядке приоритета, начиная с наиболее важного. Это убирает не только беспорядок, но и ненужное ощущение срочности.

Размер и вес (например, более крупные и жирные буквы для заголовков) и размещение элементов (например, размещение важной кнопки CTA в самом центре экрана) вам в этом помогут.

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

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

• Баланс: Каждая страница сайта должна быть сбалансированной и гармоничной. Представьте, что ваша страница — это весы, а ее элементы равномерно распределены по обеим сторонам.

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

• Изображения: Включите высококачественные медиа для поддержки вашего сообщения, такие как фотографии, иконки или векторные изображения. Ваши изображения могут демонстрировать ваш продукт или просто создавать нужное настроение.

Например, сайт о питании и здоровом образе жизни может использовать фото растений для создания успокаивающей атмосферы. Изображение: Igor Miske для Unsplash

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

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

7. Обновите контент сайта

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

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

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

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

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

• Тон коммуникаций (tone of voice). Тон коммуникаций должен соответствовать идентичности вашего бренда. Пишите так, как бы вы хотели, чтобы ваш бренд звучал, если бы это был человек. Лично и дружелюбно или профессионально и авторитетно?
• Микротексты (microcopy). Микротексты играют важную роль в тексте сайта. Этот термин относится к любым коротким фрагментам текста, начиная от кнопок призыва к действию (CTA) до ваших онлайн-форм.

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

• Намерение. Что бы вы ни писали — статью в блог, описание продукта или email-рассылку — всегда думайте о том, что ваш пользователь намеревается сделать. Что его мотивирует? Что удовлетворит его потребности? Это поможет вам обратиться к аудитории более аутентично и осмысленно.

8. Следите за SEO

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

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

• Ключевые слова: проведите исследование ключевых слов и выберите 2–3 ключевых слова для описания вашего бизнеса (короткие фразы или термины, которые люди будут вводить в поисковые системы при поиске бизнеса, похожего на ваш).

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

• Альтернативный текст (alt-text): написание альтернативного текста для изображений на сайте укрепляет как его SEO, так и доступность в Интернете. Просто добавьте несколько слов, описывающих содержание вашего изображения.

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

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

9. Оптимизируйте мобильную версию

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

Помимо улучшения пользовательского опыта mobile-friendly сайт также приносит пользу SEO. Google использует индексирование с приоритетом мобильного контента.

Десктопная и мобильная версии сайта

10. Оцените редизайн сайта и поделитесь им

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

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

Сколько времени занимает редизайн сайта?

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

В целом будьте готовы, что редизайн сайта может занять 1–3 месяца, но в зависимости от размера сайта он может длиться и больше 6 месяцев.

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

Высоких вам конверсий!

По материалам: wix.com. Автор: команда Wix