Раніше ми вже поговорили про те, якими бувають бічні панелі сайтів і як правильно вибрати собі відповідний тип сайдбара. Тепер давайте з'ясуємо, як правильно розробити дизайн бічної панелі та які елементи (особливо це стосується віджетів) потрібно включити до неї.
Дивіться також:
Створюємо дизайн ідеальної бічної панелі
Одна з причин, чому більшість відвідувачів сайту ігнорують вміст бічної панелі, — це недостатньо вдалий дизайн. У сайдбарі може бути занадто багато або занадто мало елементів, нудний або нерелевантний контент, різноманітність реклами, неправильний порядок структурних блоків та багато подібних помилок.
Ігнорування принципів дизайну та цікавих підходів до контенту призводить до того, що знижується частота кліків, падає кількість переглядів та рівень потенційних продажів.
Навіть якщо ви не очікуєте особливих фінансових надходжень від свого WordPress-сайту, все одно дизайн сайдбару треба робити таким, щоб усі основні елементи та потенційні рекламні блоки підкорялися правилам дизайну та були узгоджені між собою візуально. Для цього важливо дотримуватися співвідношення, пропорції, типографіки та кольорової гами сайту.
Ширина та висота сайдбару
Здоровий глузд підказує, що ширина бічної панелі повинна бути меншою, ніж основний контент. Тому що всі ключові дані та графіка містяться на головній колонці. Сайдбар повинен складати від 20% до 40% від ширини всього сайту. Загальна сума ширини бічних панелей (якщо їх кілька) не повинна перевищувати половини від усієї ширини сторінки.
Якщо на сайті використовується лише 1 бічна панель, можна застосувати підхід золотого перерізу. У цьому випадку ширина сайдбару не повинна перевищувати близько 38% від усієї ширини сторінки з контентом. Більше інформації про правило золотого перерізу у розробці сайтів можна знайти у Джарела Реміка у статті The Golden Ratio in Web Design.
Що стосується висоти, то тут важливо не перелізти за нижню межу основної колонки сторінки на екрані користувача. Краще постаратися, щоб ви не доходили до цього кордону небагато. Втім, якщо ваша цільова аудиторія звикла промотувати донизу більшість сторінок, надто довга бічна панель їх не злякає.
Найважливіші елементи поміщають у бічній панелі на самому початку, а менш важливі – ближче до нижньої межі сайдбару. Якщо бічна панель набагато довша, ніж основний контент, це виглядає вкрай непривабливо.
Використання кольорів та картинок
Сподіваюся, ви не забули слоган "Less is More"? Його можна прочитати і у зворотному порядку.
Кольори на сайті можуть як залучати, так і відволікати користувачів. Надто яскрава та строката кольорова гама не сприятиме уважному прочитанню контенту: користувачеві буде важко зосередитися.
Використання лише декількох основних кольорів для меншого числа елементів, навпаки, сприяє більш уважному споживанню контенту. А потрібні віджети або блоки можна підкреслити в бічній панелі за допомогою контрастного кольору.
Картинки можуть бути винятком із правил, якщо йдеться про залучення та збереження уваги. Не забувайте лише 1 правило: надлишок фотографій та картинок на сторінках сайту в бічних панелях теж не піде на користь ні дизайну сайту в цілому, ні збереженню уваги користувачів на основному контенті.
Розмір шрифту та вирівнювання елементів
Для правильного дизайну сайту завжди важлива правильно підібрана друкарня. Іноді вона навіть замінить вам усі картинки та "рюшечки" з кольоровою гамою.
Спробуйте зробити шрифт у бічних панелях приблизно на 10-20% більше, ніж шрифт основного контенту на сайті. Так ви привернете увагу до рубрик та важливих посилань, але не відвернете увагу від основного посту чи медіа-матеріалу на сторінці. А також не забувайте, що часом текст, який менший за розміром, привертає увагу не гірше, ніж більші шрифти.
І звичайно ж використовуйте вирівнювання та заголовки в тексті та на сторінках (ліворуч та по центру).
Упорядковуємо елементи бічної панелі
Неважливо, два у вас елементи в бічній панелі або цілий десяток, вам треба навчитися розташовувати ці елементи в правильній послідовності. Так ви збільшите конверсію, кліки та рівень продажів.
Насамперед у бічній панелі повинні з'являтися найважливіші елементи та блоки, які містять ключову інформацію для навігації, здійснення дій чи покупок на сайті.
Наведу приклад: на сайтах, де важлива читацька аудиторія та постійна взаємодія з нею, на самому початку бічної панелі (у верхній її частині) розміщуються форми передплати та кнопки передплати, а також найпопулярніші пости.
Також додатково треба вивчити, що варто помістити у нижній частині сайту. У "підвал" відправляють зазвичай найменш важливі елементи.
Висновок
Суворих правил немає, але дотримуватися певних правил і пропорцій при верстці і розташуванні структурних блоків все ж таки слід.
Якщо у вас є запитання чи доповнення, можете поділитись ними у коментарях до цієї посади.
Джерело: wp.tutsplus.com
Коментарі до запису: 2
Підкажіть, чи можна редагувати/видалити вбудовані в тему віджети (якщо вони не влаштовують)? Тема SimpleBiz.
Звичайно можна. Це можна робити або з адмінки Зовнішній вигляд - Віджети, або через виправлення коду теми SimplyBiz.