Хочете, щоб сайт приводив читачів або продавав? Подбайте про два критерії: візуальної привабливості і зручності. Кращий дизайн сайту сьогодні — це простота і лаконічність. У статті розповімо про складові хорошого дизайну і поділимося надихаючими прикладами. А в кінці — бонус: чек-лист для створення сторінки бренду.
5 критеріїв хорошого дизайну сайту
Лаконічність
Сміливо прибирайте зайве: за перші кілька секунд клієнт повинен зрозуміти, хто ви і що пропонуєте. Кожен елемент покликаний працювати на цільову аудиторію. Цього підходу дотримуються і сайти, які продають, і кращі новинні сайти. Так на ресурсі оренди житла Airbnb основний елемент — рядок пошуку, а на BBC — блоки з новин дня.
Зручність
Неважливо, наскільки хороша ваша сторінка, якщо користувачі не можуть на ній розібратися. Проста структура і навігація в мінімум кліків — must have для сучасного інтернет-ресурсу. Щоб дізнатися ціну товару, клієнт не повинен переходити по п'яти посиланнях, а щоб прочитати текст — вибиратися з-під лавини банерів і спливаючих вікон. Для зручності користувачів не забудьте адаптувати сайт під мобільні пристрої.
Колір
Достатньо трьох-чотирьох базових кольорів — основного і акцентних, відповідних брендовим кольорам компанії. Виділяйте кольором клікабельні елементи: кнопки «Купити» або «Прочитати більше». І пам'ятайте про колірні асоціації: жовтий асоціюють з оптимізмом, білий — з чистотою, а зелений — з упевненістю.
Шрифти і графіка
Не використовуйте багато шрифтів — дизайнери радять обмежитися двома-трьома. Додайте на видному місці логотип компанії, який гармонує з колірною гамою і стилем сторінки. У цьому допоможе сервіс Logaster — генератор корпоративного стилю. Тут ви зможете в кілька кліків створити логотип, вибравши шрифт і кольори.
Контент
Пам'ятайте: користувачі не читають, а сканують інформацію. Текст повинен бути коротким, зрозумілим і корисним. Як, наприклад, на ресурсі додатка для записів Evernot: «Ваші замітки. Порядок. Ніяких зусиль».
7 сайтів з надихаючим дизайном
Потрібні свіжі ідеї, щоб створити кращий персональний дизайн сайту? Зібрали 7 прикладів.
Рекомендуємо курс по темі
ESPN Sports Programming
Ми на трасі «Формули-1», боксерському рингу або змаганнях з фрістайлу? Насправді це головна сторінка каталогу спортивних програм американського каналу ESPN.
Фото- і відеоконтент моментально занурює нас в атмосферу змагань. Азарту додає плашка червоного кольору, який асоціюється з напором і боротьбою. Сторінку не перевантажена текстами: на повноекранному чорно-білому відео — логотип компанії білим шрифтом, а внизу — вісім фотоблоків з назвами видів спорту. Кожен з них веде в розділ з докладною інформацією.
Zillow
«Нарешті я вдома» — таке відчуття виникає на сторінці Zillow. При вигляді великого фото будинку з запаленими вікнами і затишною терасою рука сама тягнеться до пошуку нерухомості по центру екрана. Слоган звучить так, ніби хтось бере нас за руку і вимовляє: «Допоможемо знайти будинок, який ви полюбите».
Інтерфейс складається з простих і зрозумілих елементів, щоб не заважати сприйняттю. Доповнює враження біло-блакитна гамма — кольори чистоти і довіри. У цих же кольорах виконаний логотип Zillow у вигляді стилізованого будинку. Кольорову гаму підтримує і заголовної фото з білим будинком на тлі неба.
Apple
Сайт Apple переносить нас в один з фірмових магазинів компанії: мінімалізм, простір і переважання білого кольору. Перше, що ми бачимо, — великі фотографії продуктів, ефектно виділяються на білому фоні: iPhone XR, Apple Watch Series 4 і інших.
Як і з продукцією Apple, на сайті є відчуття впевненості та контролю над ситуацією: тут немає спливаючих вікон, миготливого тексту або раптово включаються відео. Щоб прочитати докладні характеристики або купити, потрібно клікнути по блакитним кнопок і перейти до відповідних розділів. А вгорі на головній сторінці розміщено лаконічне меню за категоріями продуктів і рядок пошуку.
Crypton.trading
Ви коли-небудь спілкувалися з роботом? На сайті про трейдинг криптовалюти «живе» бот по імені Crypton.
На чорному екрані Crypton друкує користувачам вітання і пояснює, хто він. По мірі прокручування з'являється інфографіка: бот розповідає про принципи своєї роботи за допомогою зрозумілої анімації зі знаків і символів. Здається, ще трохи — він запропонує нам кави і розповість про свою сім'ю. Ну як тут не зацікавитися нюансами трейдингу?
Revols
Філософію бренду передає простий і чистий дизайн сайту. Весь перший екран займає фото навушників, нижче — відео, що пояснює принцип їх роботи, і короткий опис переваг. Ми відчуваємо, що від нас нічого не приховують, і починаємо довіряти бренду.
Сторінка виконана в заспокійливих сіро-білих тонах. Блакитним виділені заклики до покупки і переваги продукції. Загальний стиль підтримує білий логотип компанії, виконаний у вигляді стилізованих навушників.
Fiftythree Pencil
На головній сторінці мінімум інформації, але кожен елемент працює на цільову аудиторію. Творчі люди відчувають себе, як вдома: ось стіл, компанія однодумців, які малюють на iPad і, звичайно, чашка кави. Доповнює враження слоган: «Необхідні інструменти для майбутніх творців».
Під заголовних фото розташовані два блоки з продукцією компанії: Paper (додаток для малювання) і Paste (інструмент для створення презентацій). Детальний опис відкривається при переході до цих розділів, тому на основному екрані не виникає ефекту перенасичення.
Boosted
«Фішка» сайту в ілюстраціях, які відображають динаміку бренду-виробника електричних скейтборду і скутерів. Весь перший екран займають змінюються фото і відео з продукцією компанії. Відчуваєш, як в волоссі майорить вітер, і ти на скутері мчиш з друзями наввипередки по мальовничих вулицях. Звичайно, відразу хочеться натиснути помаранчеву кнопку «Купити».
Вгорі сторінки — лаконічне меню зі зручною навігацією. А переваги продуктів описані в окремих розділах у вигляді короткого тексту на яскравих великих фотоблоке.
Висновок
Підсумуємо головні правила дизайну бізнес-сторінок: привабливий вигляд і комфорт для користувачів. Пам'ятайте, що в тренді — мінімалізм і лаконічність. Подбайте про зручну навігацію, не перевантажуйте сайт зайвою інформацією і дратівливими елементами: спливаючими вікнами або анімацією. Щоб ви нічого не упустили, склали для вас чек-лист.
Чек-лист: як створити технічний дизайн сайту
- визначте цільову аудиторію: від цього залежать всі елементи дизайну;
- виберіть колірну гамму, шрифт і графічні елементи;
- подбайте про якісні фото та відео;
- напишіть короткі і зрозумілі тексти;
- продумайте зручну навігацію;
- розмістіть заклики до дії;
- адаптуйте під мобільні пристрої.
