Рекомендації по дизайну Landing page!

Рекомендації по дизайну Landing page!

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

Хороший дизайн власними руками – можливийРозглядаючи тему самостійно створення Лендінгу, я просто зобов’язаний вас познайомити з основами дизайну для нашої посадкової сторінки!

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

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

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

Інформація, краще сприймається, коли в кожному наступному блоці, чи окремій групі елементів, різна кількість колонок. Найчастіше кількість колонок варіюється від 1-ї до 4-х. Часто застосовують комбінацію – 1,3 чи – 2,4.

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

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

Щодо розміру шрифтів, то заголовок повинен бути в 1,5-2 рази більшим ніж розмір шрифта підзаголовка і в 2,5-3 рази більшим ніж основний текст. По товщині шрифтів – заголовок та підзаголовок можуть бути жирними та напів жирними, а основний текст, посадкової сторінки, в будь-якому випадку мусить бути нормальної товщини. Вид шрифту можна вибрати практично будь-яких, але він має бути чітким та, що саме головне, легко читатися.

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

Для Landing page найкраще підходять кольорові схеми з двох кольорів, а саме схема 90:10. Ці значення у відсотках, де 90% - основний колір, а 10% - додатковий. Додатковий колір призначений для оформлення важливих елементів структури Лендінг пейдж. В мережі безліч сервісів по підбору кольорів, тому це не буде для вас проблемою.

Також, слід не забувати про оформлення кнопки заклику до дії. Тому що CTA, має чітко виділятися на тлі інших об’єктів нашої посадкової сторінки.

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

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

Натомість, невід’ємним елементом кожного Landing page, стала кнопка повернення до гори. Яку розміщують на висоті 20-30 пікселів від нижнього краю.

На цьому розгляд основних рекомендацій по створенню дизайну для нашого Лендінгу можна вважати закінченим! Зустрінемося уже в наступних постах!

Ніколи не припиняйте вчитися!

Бадьорого вам настрою та хороших думок!

З повагою та розумінням - Сайти з Сергієм Шевченко Блог Веб-Майстра!

Сподобався пост? Поділіться будь ласка ним зі своїми близькими та друзями!

Додати коментар

Захисний код
Оновити