Домашня сторінка – 10 дизайнів, які можна і чого не можна робити

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

Легко захопитися останніми творчими інноваціями та зануритися в нові техніки, але є й застереження, яке варто розповісти. Дизайн повинен відповідати емоційним потребам і стандартам залучення відвідувачів, які можуть стати клієнтами/послідовниками.

Зробіть крок назад

Будь-який дизайн домашньої сторінки, по суті, є рекламною пропозицією. Чи бажаєте ви, щоб відвідувач увійшов у воронку продажів через певний тип конверсії; чи хочете ви, щоб у відвідувача було достатньо захоплення, щоб перевірити інші сторінки; або якщо ви хочете, щоб відвідувач став емоційно залученим (наприклад, благодійна справа), ви повинні думати з точки зору клієнта, а не своїх уподобань у дизайні чи того, що, на вашу думку, було б «круто». Такими речами легко захопитися як паралакс і прокручування, але будьте готові відпочити й подумати, для кого ви створюєте дизайн. Незважаючи на те, що нова привабливість для очей захоплююча, вона має відповідати бренду та аудиторії, тому будьте обережні. Ось кілька важливих дій, а чого не варто робити завжди переважатиме, які б нові дизайнерські «тенденції» не з’являлися.

1 Встановіть близькі стосунки з брендом та його клієнтами

Незалежно від того, чи це компанія іграшок, розкішний ювелірний магазин чи веб-сайт благодійної організації, кожна організація має свій бренд і імідж бренду. Це вимагає багато вивчення та дослідження, а не просто те, що може сказати генеральний директор або директор з маркетингу. Як компанія представлена ​​в соціальних мережах і на її веб-сайті? Що таке «культура» в самій компанії? Яке положення компанії в галузі? KIA – це не Cadillac і навпаки. Традиційний банк не є новим та інноваційним кредитором. Кожна організація має індивідуальність, і будь-яка домашня сторінка має відповідати цій особистості.

Знайте клієнтів – створіть профіль разом:

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

Те, що подобається власнику компанії, може не сподобатися його/її клієнтам. Переконати в цьому власників компаній іноді складно. У 1971 році Каролін Девідсон, студентка мистецтв і дизайну, розробила галочку Nike. Філ Найт був не в захваті від цього, але погодився спробувати. Добре, що він пішов з дизайнером, а не своїми початковими думками. Можливо, вам доведеться бути трохи наполегливим і дипломатичним у цьому твердженні. Якщо ви не можете отримати згоду, запропонуйте A/B тестування двох дизайнів. Підтвердженням є кількість тих, хто залишається довше і хто певним чином навертається.

2 Вивчайте психологію візуального вмісту та використовуйте його під час розробки

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

• Вісцеральні реакції: ми всі мали такий досвід. Ми дивимося на головну сторінку і просто любимо її (або ненавидимо). Ми не можемо точно сказати, чому, але наша підсвідомість реагує на деякі тригери, які активує візуал. Психологія говорить нам, що ці типи реакцій зазвичай активуються основними бажаннями та потребами – безпека, загроза, комфорт, любов, виживання тощо. Наприклад, використання пасторальної чи мирної водної обстановки викличе приємне відчуття, але відкрите й елегантний дизайн справді створює відчуття безпеки, чого ми можемо не усвідомлювати.

• Рухи очей: якщо ви не читали про нейролінгвістичне програмування, вам слід. Ця галузь нейронауки стосується саме руху очей на сторінці. Деякі з цих досліджень призвели до «правила третин». Ви багато читали, практикували та використовували дизайни сіток. Правило третин, однак, стосується того, куди спрямовується око, коли воно вперше потрапляє на сторінку – є 4 точки, утворені перетином поділу сторінки в хрестики-нулики. Подивіться на цю сторінку:

  Найважливіший елемент сторінки розміщується в одному з цих 4 перетинів. Нижні перетини розташовані нижче згину, що може суперечити традиційним «правилам» дизайну, але нейробіологи з цим не погоджуються. Якщо ви хочете, щоб було видно більше інформації, ви можете використовувати карусель і розмістити її в області двох верхніх перехресть. Це дуже поширений метод, який широко використовується в наш час.

• Настрій і тон/колір: дизайн повинен відповідати всьому настрою та тону продукту чи послуги, що пропонується. Більшість дизайнерів, звичайно, знають про це, але психологія кольору відіграє важливу роль у створенні цього настрою, тону та емоцій:

3 Експериментуйте з візерунками; Не перестарайтеся з візерунками

Існує три типи шаблонів, які ви можете використовувати, але, знову ж таки, коли ви обираєте шаблон, будьте обережні – він має відповідати місії організації та не повинен перебільшувати. На щастя, існує так багато ресурсів і програм для шаблонів, знайде той, який підійде. Ось кілька прикладів шаблонів, які говорять про мету та характер компанії.

• Генеративний візерунок: це повторювані візерунки – геометричні візерунки, частинки тощо. Деякі можуть бути досить тонкими; інший може бути сміливим і переконливим. Ось приклади кожного:

  Цей шаблон тонкий і м’який – для французького музичного сайту.

  Цей візерунок для італійської компанії з виробництва сучасних меблів. На фоні цього рухомого візерунка зображення меблів розлітаються по сторінці.
  Обидва ці шаблони допомагають підвищити ідентичність організації та привернути увагу її клієнтів/підписників.

• Шаблони даних: багато компаній продають більш абстрактні послуги, а не конкретні продукти. Використовувані фонові візерунки мають відображати це. Ці візерунки можуть бути натхненні математикою чи високими технологіями та створювати відчуття «несвітського». Ось приклад дуже тонкого та мінімалістичного шаблону даних для Optimizely:

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

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

• Шаблони анімації: Рухомі частини можуть бути чудовою атракцією, і є нові технології, які роблять їх досить веселими та переконливими. Крім того, легкість, з якою дизайнери тепер можуть додавати анімацію, змусила деяких перестаратися. Знову ж таки, перш ніж додавати анімацію, враховуйте аудиторію та характер компанії. Ось приклад від Manchester Masters Fieldwork, британської компанії веб-дизайну, який демонструє тип анімації, яку вони можуть створити. Ви не можете відчути анімацію всього циклу та руху. Це, звичайно, перебільшення, і було б доречним для сайту, що продає товари для дітей.

• Шаблони сітки: традиційний дизайн сітки можна використовувати для розміщення фонових об’єктів у симетричному візерунку. Розглянемо цю фонову сітку для Aark Collective, продавця годинників – ідеально.

• Bleeding: це відносно новий, але гідний елемент дизайну, який підходить для певних типів компаній. По суті, візерунок починається на сторінці вмісту, а потім переходить у однотонний фон. Ось як Web Designer Depot використовував це для свого сайту.

4 Шукайте унікальний спосіб дизайну кнопок

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

Подивіться на домашню сторінку Small Stone – там продають відео та музику. Меню було розроблено у вигляді старомодної звукової панелі, а ручки є кнопками навігації – досить унікально.

Custom Tshirts — британська компанія, яка дозволяє клієнтам створювати власні футболки. Кнопки навігації розташовані на футболці разом з іншими пунктами меню внизу.

5 Експериментуйте з меню

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

Ще інші дизайнери експериментували, перетворюючи всю домашню сторінку на меню, як показано нижче:

6 Зробіть форми приємними або веселими:

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

Це може бути хорошою ідеєю для туристичного сайту.

Ось зразок для британського дизайнерського та брендингового агентства.

7 Часто додавайте нові матеріали на головну сторінку; Не дайте йому застаріти

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

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

8 Не перестарайтеся з текстом

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

9 Спробуйте односторінковий дизайн веб-сайту

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

10 Не використовуйте каруселі перших сторінок

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

Висновок

Звичайно, існує багато інших речей, які можна і чого не можна робити для веб-дизайну. У вас, мабуть, уже є свої домашні улюбленці та улюбленці. Насправді є лише один ключовий висновок. Сенс дизайну веб-сайту полягає в тому, щоб об’єднати вас, дизайнера та художника, з організацією та її споживачами. І найважливішим із трьох завжди є споживач. Якщо ви пам’ятаєте про створення дизайну з урахуванням цієї цільової аудиторії, ви досягнете місії чудового дизайну домашньої сторінки.