Дизайн — робота творча, тому не завжди результат роботи можна передбачити і не завжди він може нас влаштувати. Тому головне, скласти грамотне і зрозуміле ТЗ. Інтернет змінюється буквально кожен день, тому завжди необхідно стежити за актуальністю і зручністю своїх інтернет-ресурсів. Технології, які були популярними 5 років тому, сьогодні можуть повністю втратити свою актуальність і ваш сайт, може бути (і буде) незручним для ваших відвідувачів і клієнтів, відповідно, ви кожен день будете втрачати потенційний прибуток. В силу чого, кожен з підприємців рано чи пізно прийде до думки, що необхідно зробити редизайн сайту / інтернет-магазину.
Основні питання при зміні дизайну сайту
Ще до початку будь-яких робіт, необхідно чітко зрозуміти чи потрібен вам редизайн сайту.
Рекомендую відповісти на наступні питання:
- Падає конверсія? Падає на сайті, падають переходи? *Подивитися всю цю інформацію можна в метриці.
- Чи сучасно виглядає ваш інтернет-магазин? *Перегляньте всіх ваших конкурентів за основними запитами, порівняйте їх дизайн з вашим, зручність використання, фільтри товарів, різні блоки і так далі.
- Чи має ваш сайт мобільну версію або адаптивний дизайн? *Думаю, ви знаєте відповідь на це питання, якщо ні, то переходимо до webmaster.yandex.ru в розділ «Діагностика» — «Діагностика сайту у звіті будуть вказані рекомендації по мобільній версії. Аналогічно і у Google analytics.
На цьому всі основні пункти, які необхідно зрозуміти, закінчуються, переходимо до основних питань і проблем при редизайні сайту.
Як змінити дизайн сайту і не втратити позиції?
Якщо у вашого інтернет-магазину хороші позиції по регіону, природно, ніхто не хоче їх втратити, тому, рекомендую вам, при редизайні сайту чітко дотримуватися наступних основних рекомендацій:
- По перше, ніколи не змінюємо структуру сайту, тобто, після зміни дизайну, у ваших сторінок повинні залишитися колишні url-адреси, це дуже важливо (редизайн увазі під собою просто зміну зовнішнього оформлення і не більше). Якщо змінювати адреси сторінок, це спричинить за собою переіндексацію, 404 помилки (якщо не буде 301 редиректів), розподіл статичної ваги по сторінках буде зовсім іншою, все це потягне за собою неминучу зміну позицій. *Якщо планується масштабна робота над сайтом в тому числі і зміна структури, то цю процедуру проводимо до редизайну.
- Не змінюємо движок сайту. При зміні CMS, весь код вашого інтернет-магазину буде новим, що знову вимагатиме повної переіндексації вашого сайту, що в свою чергу знайде своє відображення у позиціях.
- Рекомендую запам’ятати всі основні теги html. Мова йде не тільки про заголовки H1-H6, але і про теги оформлення b, i, ul і т.д. Рекомендую їх залишати там де і були (включаємо це в ТЗ при верстці макета). Всі ці теги впливають на релевантність сторінки запитам в тій чи іншій мірі, а ми не хочемо зіпсувати позиції нашого сайту, тому ці моменти вкрай бажано залишити як і були.
- Моменти з новими блоками. Наприклад, візьмемо сторінку категорії товарів, у новому дизайні у нас з’явився розділ з новинами магазину, приклад:
Все це добре, але варто розуміти, що це все внутрішні посилання, які передають свою вагу, тобто, по факту маємо, що з даної категорії магазину додалося 6-7 (дивлячись скільки статей в каруселі) посилань на статті (які просувати нам не потрібно). Також, цей блок додає нерелевантний контент нам на сторінку, що не добре.
Таких «нових» блоків може додатися дуже багато, тому рекомендую деякі з них ставити тег noindex і посилання в атрибут nofollow, це убезпечить ваш сайт від змін в пошуку. Подібним чином поступаємо з усіма подібними блоками.
По закінченню деякого часу (1-2) тижні, рекомендую починати поступово прибирати проставлені теги і дивитися на позиції сайту. Це нам дасть можливість «Відкотити зміни» при зміні позицій в небажану сторону.
- Трохи по релевантності. Знову ж, візьмемо сторінку категорії товарів, на якій виведено блог товарів. Може бути ситуація, що раніше, у кожній з карток товарів були показані ті чи інші характеристики (ціна, артикул, колір, розмір і тд), але в новій версії, дизайнеру не сподобалося, як це виглядає і він прибрав висновок характеристик з карток. Це теж може вплинути і вплине на позиції сайту, як з боку релевантності контенту (так як деяка частина контенту пропаде), так і з боку поведінки користувача, варто пам’ятати про це.
Підсумуємо всі основні рекомендації
- Не змінюємо структуру, не змінюємо url;
- Не змінюємо CMS;
- Мінімум змін за основними тегами верстки, які впливають на релевантність (H1-H6, b, i тд);
- Стежимо, щоб вся інформація яка виводилася раніше залишилася на сайті (якщо вона потрібна, можна подивитися за метрикою — карта кліків, відеозапису дій користувачів і тд).
- Якщо додаємо багато нових блоків, новий функціонал, в якому використовується багато контенту, то рекомендую закривати їх від індексу (тим самим убезпечимо себе від зайвих питань). Далі, поступово знімаємо noindex-и і стежимо за позиціями (є можливість повернути все назад).
- Аналогічна механіка з новими блоками в яких буде багато посилань, також рекомендую, закривати посилання в атрибути nofollow (збереження позицій наше все), далі поступово забираємо їх, дивимося результати знімання позицій.
Після всіх цих дій у нас буде розуміння навіщо нам необхідний редизайн і як правильно його зробити, щоб не зіпсувати те, що було нажито нашою працею і часом. Можна переходити до наступного кроку.
Підготовка прототипу майбутнього дизайну сайту
Це найбільш важлива і основна частина нашої роботи, так як прототип це головне і основне ТЗ, яке ми надішлемо нашому дизайнеру.
Думки дизайнера і ваші ніколи не співпадуть, дизайнер буде думати одне, ви інше, далеко не факт, що ви знайдете дійсно професіонала, який зможе вам щось порадити, на жаль, з досвіду, дизайнер просто виконає роботу по ТЗ і ні кроку в сторону, виконає, як йому це зручно і як йому це більше подобається. В результаті, ми отримаємо посередній дизайн, у якого, при наповненні контентом з’їде верстка, так як дизайнер це не продумав, може не бути ефектів наведення, та й взагалі можемо отримати не те, що ми хотіли.
Тому найголовніше сформувати грамотне ТЗ, після якого ні у вас, ні у дизайнера не буде питань, і ми отримаємо те, що хочемо.
Вибір програми для створення прототипу
На сьогоднішній день подібних програм і сервісів існує дуже багато, тому не рекомендую на цьому загострювати увагу, просто беремо ту, яка безкоштовно і в якій нам комфортно працювати:
Gliffy
Безкоштовна версія є, можна користуватися.
Axure
Проста і зручна програма.
Mockingbird
Є безкоштовна версія, можна експортувати в будь-якому форматі, дуже простий і зрозумілий інтерфейс, не потрібно нічого завантажувати. Будемо використовувати її.
Підготовка до прототипу
1) Знаходимо всіх наших конкурентів.
*Не беремо тільки топ-5, так як у даних магазинів може бути інше ранжування від пошукових систем (топи ніші) і деякі моменти (блоки, функціонал, тощо), які ми вирішимо у них взяти, нам ніяк не можуть покращити ситуацію, а може і погіршити.
Знаходимо 20-30 сайтів (беремо різні регіони), які нам сподобалися і ретельно аналізуємо їх. Беремо у кожного найкраще рішення того чи іншого блоку, будь то фільтр товарів, блок рекомендованих товарів, які-небудь підказки і так далі. Варто звертати увагу на все, де стоїть посилання, яка кнопка і т. д.
2) Виписуємо всі блоки.
Які ми хочемо використати у нас на сайті. Вибираємо кращий блок з реалізації, нам не потрібно самим вигадувати пропорції, де буде фото, де буде текст, а де кнопка, просто беремо найкраще рішення того чи іншого блоку у конкурентів.
3) Вибираємо всі елементи сайту.
На даному етапі необхідно визначитися, яка буде шапка, яке буде основне меню, підвал і так далі.
*Всі обрані нами конкуренти мають хороші позиції в ПС, відповідно і дизайни у них будуть теж хороші, не потрібно думати, що ми самі придумаємо найкраще рішення або тим більше наш дизайнер, вже є робочі, перевірені версії того чи іншого функціоналу, просто беремо і використовуємо це у нас.
4) Визначитися зі стилем і колірною гамою.
Вибрати колірну гамму і стиль, досить не просто. Також, рекомендую, не покладатися на думку вашого дизайнера, він не знає що ви хочете, тому з цим питанням необхідно розібратися на даному етапі.
Для цього, рекомендую звернути увагу на сайти фріланса, на яких ми і будемо замовляти наш дизайн. Таких сайтів є дуже багато, ось найпопулярніші:
- Kwork.ru;
- Fl.ru;
- Weblancer.net;
- та інші.
Вибираємо ресурс, заходимо в розділ «Дизайн» і переходимо по виконавців, дивимося їх портфоліо. Багато дизайнерів, робіт представлених у них в портфоліо, теж багато, тому ми легко зможемо вибрати дизайн який нам подобається і за стилем і за колірною гамою. Після вибору зберігаємо собі обрану роботу.
На даному етапі у нас є все, що нам необхідно для створення якісного та продуманого прототипу, а в наслідок і нашого ТЗ.
Побудова прототипу сайту
Ми зупинилися на сервісі Mockingbird, тому переходимо, реєструємося і починаємо нашу роботу.
Нам необхідно чітко промалювати всі наші майбутні сторінки Головна, Категорія товарів, Картка товарів, Категорія новин, Новина, Контакти, а також всі форми.
На попередньому етапі ми вибрали всі блоки, які ми хочемо бачити в майбутньому дизайні, вибрали як буде виглядати шапка сайту, меню і так далі, що буде в них розташовано. Тому нам залишилося тільки все це перенести в прототип. У прототипі необхідно відобразити всі елементи, всіх блоків сайту, це дасть розуміння дизайнеру що нам необхідно і йому не доведеться довго думати, як і що малювати, адже за фактом вже все намальовано, йому залишається тільки додати графіком.
За бажанням, можна доопрацювати всі Photoshop, щоб усі елементи були ще більш наочні.
На виході ми маємо приблизно наступне:
 |  |
Всі форми, таби ми відмалювали в прототипі:
Після створення повноцінного прототипу майбутнього дизайну, переходимо до підготовки ТЗ, нам необхідно докладно описати всі моменти представлені у прототипі.
Пишемо докладний ТЗ до прототипу
Це дуже відповідальний момент, тому що якщо ми щось забудемо цього і не буде в дизайні.
- Обговорюємо в якому форматі має бути дизайн (.psd)
- Вказуємо зображення з портфоліо (яке ми раніше вибрали). Пишемо, що хочемо дизайн в аналогічному стилі і колірній гамі. Вказуємо що кнопки, рамки і тд можна брати з даного дизайну.
- Кнопки, посилання та інші елементи повинні мати ефекти наведення і активності.
- Додати до дизайну використовуються шрифти (деяким верстальникам вони необхідні)
- Далі вказуємо всі моменти, які, на нашу думку, варто уточнити. Наприклад, ми хочемо, щоб після наведення на картку товару, показувалася кнопки «В кошик», описуємо всі подібні моменти.
*Дані питання і нюанси, можна описати і на самому прототипі, приклад:
Переходимо безпосередньо до вибору і замовлення дизайну.
Вибір виконавця, замовлення дизайну
Є два варіанти замовлення дизайну:
1) Звернутися в студію розробки дизайну сайтів або
Вважаю цей варіант не найкращим, по-перше ціна буде значно вище, якщо б ми звернулися до фрілансера, також доведеться витратити не тільки чимало коштів, але й часу. Варто відзначити, що не завжди цей варіант буде відрізнятися якістю та дотриманням строків.
2) Звернутися до фрілансера, через популярні майданчики
Подібний варіант нам підходить ідеально. Так як, основною метою підготовки докладного прототипу і ТЗ було не тільки отримання саме того дизайну, який нам потрібен, але і спосіб заощадити наші кошти. Адже все що залишилося дизайнеру це тільки додати графіку в наш прототип, за фактом ми вже намалювали весь «дизайн», виконавцю не потрібно думати, як і що повинно виглядати, все вже намальовано, стиль і колірна гамма надана.
Як і писав вище, існує величезний вибір майданчиків з фрилансерами і всі вони по своєму гарні. Але ми зупинимо свій вибір на сервісі Kwork.ru, так як нам необхідно гідну якість за адекватну суму, а як я вже писав вище, нам не потрібен професіонал за 100 тис., нам потрібна графіка для нашого прототипу. Також, тут дуже проста і захищена система оплати, нам не потрібно безпосередньо платити фрілансеру, всі оплати відбуваються через сам сервіс. Якщо наданий дизайн буде не по ТЗ, то можна легко повернути кошти.
Першим ділом реєструємося і переходимо в розділ дизайну. Рекомендую не витрачати свій час на довгий вибір дизайнера, переглядаючи сотні портфоліо і так далі, відкриваємо топ 20-30 і висилаємо всім наше ТЗ, уточнюємо ціну і терміни.
Після чого всі хто зацікавлений у виконанні вашого завдання, запропонують вам свої умови на основі чого ми зможемо зробити свій вибір. Все досить просто і прозоро.
*Варто пам’ятати, що все що ми чекаємо від дизайну вже написано нами в ТЗ, тому віддати перевагу краще фінансовій стороні питання, так як результат від цього фактично не змінитися.
В результаті маємо повністю готовий, простий і сучасний дизайн:
 |  |
Всі основні моменти
- Необхідно чітко визначитися, чи потрібен нам редизайн сайту;
- Вибираємо кращих конкурентів, на основі їх сайтів, функціоналу вибираємо все найкраще;
- На основі підготовленої інформації складаємо якісний прототип кожній зі сторінок;
- Вибираємо сайт який нас повністю влаштовує за колірною гамою і стилем;
- Складаємо пояснювальну записку, тз до прототипу;
- Замовляємо дизайн на популярних біржах фрілансу;
- Отримуємо готовий дизайн, який ми хотіли, який нам потрібен, за адекватну вартість;
- Переходимо до складання ТЗ на верстку та натяжку, пошук виконавця.
