Опишіть ваш проєкт
Наші спеціалісти звʼяжуться з вами найближчим часом
Надіславши запит, ви отримуєте:
  • Лист чи дзвінок від нашого менеджера
  • Оцінку свого проєкту
  • Особисту зустріч, за необхідності
  • Конфіденційність гарантовано!
maxim_kaschjev
Ваш менеджер
Максим Кащєєв
Із задоволенням відповімо на всі ваші запитання
Задати питання
UX/UI

Як це робиться? Правильний редизайн сайту

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

Дозріти до повного перевтілення сайту непросто. Колишні зусилля не дають наважитися на те, щоб стерти минулі напрацювання, і практично з нуля створити сайт, що відповідає сучасним вимогам як цільової аудиторії, так і пошукових систем (адже всі пам'ятають оновлення в алгоритмах ранжування Google?).

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

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

Для початку, позначу, як зрозуміти, що вам дійсно варто оновити дизайн сайту. Для цього поставте собі запитання, відповівши на які "ні" - вам варто негайно взятися за переробку веб-ресурсу:

  • Сайтом зручно користуватися, і це підтверджують дані систем веб-аналітики? (глибина перегляду сторінок, цільові дії: підписка, купівля, дзвінок, замовлення, показник конверсії сторінок)
  • Якість сайту відповідає рівню вашої компанії? (логічно, що якщо ви лідери ринку, або прагнете ними стати, рівень сайту повинен передбачати очікування відвідувачів)
  • Сайт адаптований під мобільні пристрої? (перевірити, наскільки він адекватний для мобільних користувачів, можна тут)
  • На вашому сайті впроваджено хоча б 5 із 20 фішок веб-дизайну 2015 року (повний список із прикладами тут)?
  • Ваш сайт ідеальний, і в ньому нема чого покращувати?

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

Щоб ваш редизайн пройшов максимально ефективно і безболісно, та що там, щоб ви насолодилися цим процесом, пропоную покрокову інструкцію, яка дасть змогу зробити все правильно:

1 Аналізуємо діючий сайт

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

Не треба так. Особливо з сайтом.

Щоб зробити якісне оновлення, потрібно обов'язково зберегти наявні напрацювання. Ретельно проаналізуйте свій сайт, виявивши не тільки слабкі місця, які потрібно буде посилити новими рішеннями під час редизайну, а й зберегти сильні.

Наприклад, коли ми перемальовували наш сайт, під час дизайну головної сторінки ми зіткнулися з тим, що нам нічого не подобається. Дивишся, і розумієш, що наявна головна краща! Що робити? Ми взяли структуру чинного (над якою билися кілька років, доводячи її до розуму), поклали на новий дизайн, і вуа-ля!

Мораль цієї байки - не винаходьте велосипед, якщо ви зробили це раніше. Тюнінгуйте його.

На що звернути увагу під час аналізу сайту:

  • які найбільш конверсійні елементи?
  • де "сліпі зони"?
  • яких розділів або сторінок не вистачає?
  • чого можна позбутися?
  • чи влаштовує вас діюча адмінка сайту?
  • у чому вас обмежує ваш наявний сайт?
  • про які "фішки" тепло відгукуються клієнти?
  • що думають про все це програміст і SEO-шник?

2 Планування змін

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

При розробці технічного завдання в обов'язковому порядку враховуйте, чи буде переноситься сайт на новий движок, або ж ви залишаєтеся на існуючому. Якщо ви переїжджаєте, проконсультуйтеся з SEO-фахівцем щодо збереження напрацювань із внутрішньої оптимізації ресурсу. Важливо не тільки утримати позиції після оновлення, а й додати їх.

Під час проектування архітектури сторінок, також орієнтуйтеся на дані аналізу. Ваше завдання - зробити сайт ще зручнішим, кориснішим і конверсійнішим.

При прототипуванні важливо:

  • Дотримуватися принципу AIDA (Увага-Інтерес-Зацікавлення-бажання-Дія) на кожній ключовій сторінці сайту (подробиці читайте в статті "Якою має бути ефективна посадкова сторінка")
  • Зробити конверсійними хедер і футер сайту
  • Врахувати особливість мобільних користувачів, продумавши навігаційні елементи для них
  • Продумувати "фішки" вже зараз, а не сліпо слідувати шаблону в голові

Наприклад, під час проєктування нового блогу, ми врахували слабкі сторони наявного та побажання читачів:

3 Власне, редизайн

Якщо вже переробляти сайт, то поставити за мету перед дизайнером не просто "дати нове віяння", а стрибнути на три голови вище. Адже ви створюєте сайт не на місяць і не на рік, він буде з вами довго (поки на п'яти не почнуть наступати нові тренди і вимоги цільової аудиторії).

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

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

Важливо, щоб дизайнер не використовував рибний контент, а все брав з наявного ресурсу. Якщо чогось немає - краще готувати заздалегідь. І не забудьте про дизайн тексту - замість того, щоб ховати тисячі символів, які напрацьовував копірайтер для роботів і людей, оберніть це в красиву візуальну подачу, а не ховайте вниз дрібним сірим текстом. Використовуйте силу тексту на благо!

Дизайнеру, звісно, видніше, але ніщо не заважає вам пропонувати нові ідеї та "фішки" самостійно. Якщо вони дійсно варті уваги, всі від цього тільки виграють. А тут можна надихнутися:

Під час редизайну сторінки кар'єри ми вдосталь награлися з фішечками, щоб кожному захотілося приєднатися до нашої команди:

4 Верстка

На цьому етапі варто підключити таких фахівців, як дизайнер і SEO-фахівець.

Дизайнер - для того, щоб усі ідеї та "фішки", які той задумав, були втілені в життя, під час адаптації під розміри мобільних ґаджетів нічого не загубилося і зайвого не додалося. А ще для того, щоб згенерувати нові вау-елементи, які впровадить верстальник: анімація, інтерактивні ефекти для ховерів або під час скролінгу, і ще багато чого. Знову ж таки, надихнутися можна на вищевказаних сайтах.

SEO-фахівець потрібен для того, щоб зберегти мікророзмітку сайту, всі h1, h2, h3 і h4, нічого не втратити з напрацювань минулого сайту, і поліпшити внутрішню частину, щоб наростити позиції після "викочування".

Обов'язкова участь тестувальника - щоб проконтролювати якість верстки.

5 Програмування

Я сподіваюся, ви склали технічне завдання, як було рекомендовано в другому пункті? Ніколи, ніколи не робіть сайт без ТЗ. Знаєте таку приказку у світі вебу - "без ТЗ результат ХЗ"? І це ще м'яко сказано.

Зі сторонніх фахівців (крім програміста) тут потрібен верстальник (для з'ясування нюансів верстки, якщо виникнуть питання), SEO-фахівець - щоб проінструктувати щодо внутрішньої оптимізації та збереження напрацювань, тестувальник - для контролю якості.

На етапі програмування важливо опрацювати адмінку так, щоб вам було зручно нею користуватися. Тому в ТЗ потрібно включити всі необхідні функції оновленого движка. Як кажуть програмісти, скласти перелік "хотілок" з описом кожної, а програміст впровадить.

6 Наповнення контентом

Контент - король, і це не перебільшення. Заморочтесь із ним. Я серйозно. Неякісні картинки угроблять ваш трендовий дизайн. Не оптимізоване відео сповільнить швидкість завантаження. Тексти, написані на "відчепись від мене", не принесуть плодів.

З досвіду редизайну нашого сайту (а сторінок у нас там близько 1000), контент займає близько 30% всієї роботи над новим сайтом. Промалювати для кожної роботи в портфоліо і кейса нову візуалізацію. Підготувати фото всіх співробітників. Переробити картинку кожної білої книги. Перенаповнити кожну сторінку послуги. Це монотонна, але дуже важлива робота. Добре, що всі 700 статей блогу перенесли автоматично, від початку запланувавши це з верстальником і програмістом. Інакше, просто б збожеволіли :-)

Приклад сторінки послуги нового сайту:

7 Контроль якості та запуск

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

В якийсь момент ви зрозумієте, що настав час вимикати вже перфекціоніста, і показати ваше творіння світу. Просто змиріться з тим, що краще "майже добре", але зараз, ніж "чудово", але не зрозуміло коли.

8 Що покращити?

А ось тут знову увімкніть свого перфекціоніста, і згенеруйте ідеї щодо поліпшень оновленого ресурсу, який вже щосили функціонує в мережі. Вдосконалюйте, прокачуйте, аналізуйте та підсилюйте. Піднімайте планку й отримуйте результат!

Поділіться своєю емоцією від статті
Давайте обговоримо Ваш проєкт
Ми з радістю зробимо безкоштовну оцінку вашого проєкту
Або просто завантажте файл з презентацією або описом
Моісєєв Артем
Business Development Manager
Моісєєв Артем