14 веб-дизайн поради, які допоможуть вам бити конкуренції в 2017

Сайт – це обличчя вашого бізнесу і головний інструмент залучення нових клієнтів. Хочете зацікавити відвідувача з перших секунд і тримати його на сайті?

Використовуйте останні фішки веб-дизайну. Почніть залучати регулярний потік відвідувачів і легко конвертувати їх у постійні клієнти.

Виконайтета впровадьте 14 порад щодо веб-дизайну, які допоможуть вам залишатися в тренді в 2017 році.

1. Підключити робот

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

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

2. Спочатку зробіть мобільну версію

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

• 82% користувачів прийняти рішення про покупку, перейшовши через Інтернет зі свого телефону;
• 62% людей воліють шукати відповіді на питання миттєво за допомогою смартфона.

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

3. Додайте правильні шрифти

Шрифти стають елементом дизайну. Вони навіть замінити фотографію. Пам'ятайте: на мобільному екрані дрібні і іноді важливі деталі зображення потрібно розглядати під мікроскопом. Хоча текст може бути ідеально введений в будь-який екран.

Пишіть слова в горизонтальному і вертикальному напрямку – це дозволить виділити ваш сайт серед ряду подібних.Але не перестарайтеся:

• Вибирайте шрифти, які легко Розбираємо, краще без засічки;
• Використовувати не більше 3 сімей
• Переглядайте шрифти на веб-сайтах конкурентів.

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

Погляньте на те, як виглядає меню і заголовок, на сторінці нашого головного щорічного заходу – Online Business Labs:

4. Використовувати яскраві кольори

Білий «чистий» дизайн був популярний протягом тривалого часу. І це гарне рішення, яке не втрачає актуальності. Але якщо ви хочете виділитися, використовуйте яскраві пастельні тони і градієнти. Вони знову в моді. Виконайте ці 3 правила, щоб не перевантажувати ваш сайт і зробити його зручним для відвідувачів:

• Приклеюємо до міри-максимум 2 кольори або 1 градієнт.
• Використовуйте кольори вашого бренду-і сайт легко розпізнає постійних клієнтів.
• Зробіть кнопку заклик до дії, граючи на контрасті.

5. Налаштуйте відвідувача

Сьогодні ви можете дізнатися будь-яку інформацію про потенційних клієнтів.Налаштуйте аналітику (наприклад, Google Analytics) і змініть свій сайт залежно від того, хто зайшов.

Ви використовували для створення різних посадок. Однієї сторінки вистачає зараз. Відображення певних блоків або пунктів меню в залежності від того, хто прийшов до вас-25-річний чоловік або 60-річна жінка.

Найпростіший приклад: коли назва вашого міста під'їхав в капелюсі:

6. Зробити сайт здаватися швидким

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

Робіть швидкі завантаження для відвідувачів. Ви можете показувати прогрес у% Або використовувати «скелетну» структуру, коли сторінка завантажується поетапно. Спочатку малюються розмиті блоки, а потім загострені. Відвідувачі бачать, що прогрес зробив, і не поспішайте, щоб закрити сторінку.

Перевірте ефективність вашого рішення: перейдіть за допомогою різних гаджетів і подивіться, як завантажується сайт.

7. Додати анімацію

Вона розширює статимісто сторінки і привертає увагу. Наприклад:

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

Хочете дізнатися, як створювати такі «живі» фотографії в кілька кліків? Напишіть в коментарях "+", щоб отримати докладну інструкцію.

Крім того, додайте ненав'язливий анімацію до кнопки "заклик до дії". Відвідувачам буде легше помітити та клацнути його. Але це Головна мета вашого сайту, так що вперед!

8. Використовувати відео

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

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

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

9. Змінення спливаючого повідомлення

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

Раніше основною метою спливаючого було отримати контактні дані відвідувача і за допомогою подальших дій «вивести» її на покупку… Тепер він служить менеджером з продажу. Пам'ятаєте момент, коли ви готові повісити слухавку, а на іншому кінці дроту кажуть: «У мене для вас така пропозиція …»? І ви залишаєтеся на зв'язку, щоб познайомитися з цим.

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

10. Додайте блок "вони говорять про нас"

Він продовжує утримувати керівні посади і все частіше з'являється на посадок або передніх сторінках. Блок "говорити про нас" збільшує довіру до вас і вашого бренду.

Виберіть один з двох варіантів:

• Ваш список клієнтів показує, що ви дійсно виграють;
• Медіа-список (Онлайн та оффлайн видання)-обов'язково додайте логотип компанії та посилання на статтю або відео.

---

УВАГА: Ви хочете знати, якими ще повинні бути блоки і як їх правильно розмістити?Отримайте більше інформації про останні тенденції дизайну Landing Page від експертів GM у спеціальній пропозиції Бізнес Академії Бізнес

Ще не зареєстровані в нашій Бізнес Академії? Переходьте за посиланням!

---

11. Виправити Бічне меню при прокручуванні

Це може бути не тільки меню, але, наприклад:

• Список останніх або найпопулярніших статей/товарів;
• Банер з майбутнім заходом;
• Форма підписки на новини.

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

12. Використовувати плоскі іконки

Замість простого і настільки звичного списку, додайте іконку до кожного предмету. Це одна з останніх трендів: стильна, проста і візуальна. Замовляйте картини у дизайнера або знаходьте їх на сайті, наприклад, на freepik.com.

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

Наприклад, таким чином:

13. Звузити екран

Ми живемо у світі протилежностей. І ваш сайт можна спостерігати як з вузького мобільного екрану, так і для широкого настільного монітора. І там, і там вона повинна виглядати бездоганно.

Як це можна досягти? Встановіть максимальну ширину сайту, наприклад, 700-800 пікселів. Таким чином можна контролювати вигляд сторінки на різних моніторах. І навіть на 2 000 пікселів екрані, зміст не буде танути.

14. Забудьте про фондовий зображення

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

Що робити?

• Почніть зйомку вашого бізнесу. Особисті фотографії, хоча і не досконала якість, викликають більше відповіді від відвідувачів, ніж "неживих".
• Замовити або намалювати ілюстрацію-це індивідуальна, і ви можете бути впевнені, що такий малюнок не з'явиться на сайтах ваших конкурентів.
• Створюйте власні колажі або соковиту інфографіку – це в рази краще«стандартної» дівчини за монітором комп'ютера.

Визначте: зміст або дизайн?

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

І я дійсно не міг відірвати себе від цієї статті. Хоча читання корисного контенту на добре оких сайт набагато краще. Але мораль цієї історії інша: в гонитві за барвистим оформленням не забувайте про текст.

Рисунок замінює 1 000 слів. Хочете дізнатися всі тонкощі створення ілюстративних ілюстрацій для свого сайту? Натисніть "Подобається" і я підготую детальну інструкцію.

Хочете значно збільшити відсоток відкриттів своїх листів і тим самим підірвати продажі? Вивчіть основні прийоми з перших вуст – читайте: Олесь Тимофєєв: Як швидко посилити email-маркетинг і збільшити продажі в 3 рази.