На дворе 2015 год, и вокруг только и разговоров что об адаптивности, флэте и видео-контенте. И, наблюдая за всеми трендами веб-дизайна, у каждого владельца веб-проекта наверняка чешутся руки обновить свой, особенно, если его делали 2-3 года назад.
Созреть к полному перевоплощению сайта непросто. Былые усилия не дают решиться на то, чтобы стереть прошлые наработки, и практически с нуля создать сайт, соответствующий современным требованиям как целевой аудитории, так и поисковых систем (все ведь помнят обновления в алгоритмах ранжирования Google?)
Признаюсь, когда мы переделывали наш сайт, меня терзали смутные сомнения на предмет того, сколько же всего было уже сделано, и как же так взять, и отказаться от этого.
Стало легче, когда пришло понимание, что отказываться от эффективных наработок вовсе не нужно, а обернуть их в новую, красивую и конверсионную обертку — однозначно стоит.
Для начала, обозначу, как понять, что вам действительно стоит обновить дизайн сайта. Для этого, задайте себе вопросы, ответив на которые «нет» — вам стоит немедленно взяться за переработку веб-ресурса:
- Сайтом удобно пользоваться, и это подтверждают данные систем веб-аналитики? (глубина просмотра страниц, целевые действия: подписка, покупка, звонок, заказ, показатель конверсии страниц)
- Качество сайта соответствует уровню вашей компании? (логично, что если вы лидеры рынка, или стремитесь ими стать, уровень сайта должен предвосхищать ожидания посетителей)
- Сайт адаптирован под мобильные устройства? (проверить, насколько он адекватен для мобильных юзеров, можно тут)
- На вашем сайте внедрены хотя бы 5 из 20 фишек веб-дизайна 2015 года (полный список с примерами тут)?
- Ваш сайт идеален, и в нем нечего улучшать?
Теперь, когда вы осознали необходимость редизайна сайта, давайте же сделаем все правильно, чтобы не потерять качественные наработки существующего, и действительно улучшить свой веб-проект, а не просто надеть на него модную одежку.
Чтобы ваш редизайн прошел максимально эффективно и безболезненно, да что там, чтобы вы насладились этим процессом, предлагаю пошаговую инструкцию, которая позволит сделать все правильно:
1 Анализируем действующий сайт
Бывает такое — пишешь пишешь статью, что-то не понравилось, процесс не идет, психанул, удалил всю статью. Пишешь с нуля. И вспоминаешь, что же там стоящего было, из того, что стер.
Не надо так. Особенно с сайтом.
Чтобы сделать качественное обновление, нужно обязательно сохранить существующие наработки. Тщательно проанализируйте свой сайт, выявив не только слабые места, которые нужно будет усилить новыми решениями при редизайне, но и сохранить сильные.
Например, когда мы перерисовывали наш сайт, во время дизайна главной страницы мы столкнулись с тем, что нам ничего не нравится. Смотришь, и понимаешь, что существующая главная лучше! Что делать? Мы взяли структуру действующего (над которой бились несколько лет, доводя ее до ума), положили на новый дизайн, и вуа-ля!
Мораль сей басни — не изобретайте велосипед, если вы сделали это раньше. Тюнингуйте его.
На что обратить внимание при анализе сайта:
- какие самые конверсионные элементы?
- где «слепые зоны»?
- каких разделов или страниц не хватает?
- от чего можно избавиться?
- устраивает ли вас действующая админка сайта?
- в чем вас ограничивает ваш существующий сайт?
- о каких «фишках» тепло отзываются клиенты?
- что думают обо всем этом программист и SEO-шник?
2 Планирование изменений
Тут начинается процесс, схожий с созданием нового сайта. Пишется техническое задание, разрабатываются прототипы страниц. Отличие в том, чтобы, как говорилось в первом пункте, сохранить сильные стороны, и усилить слабые.
При разработке технического задания в обязательном порядке учитывайте, будет ли переносится сайт на новый движок, или же вы остаетесь на существующем. Если вы переезжаете, проконсультируйтесь с SEO-специалистом на предмет сохранения наработок по внутренней оптимизации ресурса. Важно не только удержать позиции после обновления, но и добавить их.
При проектировании архитектуры страниц, также ориентируйтесь на данные анализа. Ваша задача — сделать сайт еще удобнее, полезнее и конверсионнее.
При прототипировании важно:
- Соблюдать принцип AIDA (Внимание-Интерес-Желание-Действие) на каждой ключевой странице сайта (подробности читайте в статье «Какой должна быть эффективная посадочная страница»)
- Сделать конверсионными хэдер и футер сайта
- Учесть особенность мобильных юзеров, продумав навигационные элементы для них
- Продумывать «фишки» уже сейчас, а не слепо следовать шаблону в голове
Например, при проектировании нового блога, мы учли слабые существующего, и пожелания читателей:
3 Собственно, редизайн
Если уж переделывать сайт, то поставить целью перед дизайнером не просто «дать новое веяние», а прыгнуть на три головы выше. Вы ведь создаете сайт не на месяц, и не на год, он будет с вами долго (пока на пятки не начнут наступать новые тренды и требования целевой аудитории).
Обратите внимание, что в погоне за модой не стоит упускать из зоны внимания более важную деталь — удобство для пользователей. Для мобильных в том числе.
Чтобы дизайн легко адаптировался под их экраны, нужно рисовать по модульной сетке, использовать блочную подачу информации, и продумывать заранее, как облегчить сложные и тяжелые элементы, которые подойдут лишь для десктопа.
Важно, чтобы дизайнер не использовал рыбный контент, а все брал с существующего ресурса. Если чего-то нет — лучше готовить заранее. И не забудьте о дизайне текста — вместо того, чтобы прятать тысячи символов, которые нарабатывал копирайтер для роботов и людей, оберните это в красивую визуальную подачу, а не прячьте вниз мелким серым текстом. Используйте силу текста во благо!
Дизайнеру, конечно, виднее, но ничто не мешает вам предлагать новые идеи и «фишки» самостоятельно. Если они действительно стоящие, все от этого только выиграют. А тут можно вдохновиться:
- рубрика «Веб-тюнинг» с идеями по темам проектов
- cssdesignawards.com
- awwwards.com
- csswinner.com
При редизайне страницы карьеры мы вдоволь наигрались с фишечками, чтобы каждому захотелось присоединиться к нашей команде:
4 Верстка
На этом этапе стоит подключить таких специалистов, как дизайнер и SEO-специалист.
Дизайнер — для того, чтобы все идеи и «фишки», которые тот задумал, были воплощены в жизнь, при адаптации под размеры мобильных гаджетов ничего не потерялось и лишнего не добавилось. А еще для того, чтобы сгенерировать новые вау-элементы, которые внедрит верстальщик: анимация, интерактивные эффекты для ховеров или при скроллинге, и еще много чего. Опять же, вдохновиться можно на вышеуказанных сайтах.
SEO-специалист нужен для того, чтобы сохранить микро-разметку сайта, все h1, h2, h3 и h4, ничего не потерять из наработок прошлого сайта, и улучшить внутреннюю часть, дабы нарастить позиции после «выката».
Обязательно участие тестировщика — чтобы проконтролировать качество верстки.
5 Программирование
Я надеюсь, вы составили техническое задание, как было рекомендовано во втором пункте? Никогда, никогда не делайте сайт без ТЗ. Знаете такую поговорку в мире веба — «без ТЗ результат ХЗ»? И это еще мягко сказано.
Из сторонних специалистов (кроме программиста) здесь нужен верстальщик (для выяснения нюансов верстки, если возникнут вопросы), SEO-специалист — чтобы проинструктировать на предмет внутренней оптимизации и сохранения наработок, тестировщик — для контроля качества.
На этапе программирования важно проработать админку так, чтобы вам было удобно ею пользоваться. Поэтому, в ТЗ нужно включить все необходимые функции обновленного движка. Как говорят программисты, составить перечень «хотелок» с описанием каждой, а программист внедрит.
6 Наполнение контентом
Контент — король, и это не преувеличение. Заморочьтесь с ним. Я серьезно. Некачественные картинки угробят ваш трендовый дизайн. Не оптимизированное видео замедлит скорость загрузки. Тексты, написанные на «отстань от меня», не принесут плоды.
По опыту редизайна нашего сайта (а страниц у нас там около 1000), контент занимает около 30% всей работы над новым сайтом. Прорисовать для каждой работы в портфолио и кейса новую визуализацию. Подготовить фото всех сотрудников. Переделать картинку каждой белой книги. Перенаполнить каждую страницу услуги. Это монотонная, но очень важная работа. Хорошо, что все 700 статей блога перенесли автоматически, изначально запланировав это с верстальщиком и программистом. Иначе, просто бы сошли с ума :-)
Пример страницы услуги нового сайта:
7 Контроль качества и запуск
Перед выходом сайта в свет нужно протестировать несколько раз — сперва сделать первый прогон, затем ретест после внедрения правок, после выдать доверенным лицам бета-тест (на этом этапе можно обнаружить много подводных камней).
В какой-то момент вы поймете, что пора выключать уже перфекциониста, и показать ваше творение миру. Просто смиритесь с тем, что лучше «почти хорошо», но сейчас, чем «превосходно», но не понятно когда.
8 Что улучшить?
А вот тут снова включите своего перфекциониста, и сгенерируйте идеи по улучшениям обновленного ресурса, который уже вовсю функционирует в сети. Совершенствуйте, прокачивайте, анализируйте и усиливайте. Поднимайте планку и получайте результат!
