1
4.7

Оцінити

Статті 4.7 7 голосів 438

Кращий дизайн бізнес-сайтів: топ-7 прикладів для натхнення

Хочете, щоб сайт приводив читачів або продавав? Подбайте про два критерії: візуальної привабливості і зручності. Кращий дизайн сайту сьогодні — це простота і лаконічність. У статті розповімо про складові хорошого дизайну і поділимося надихаючими прикладами. А в кінці — бонус: чек-лист для створення сторінки бренду.

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

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

Вгорі сторінки — лаконічне меню зі зручною навігацією. А переваги продуктів описані в окремих розділах у вигляді короткого тексту на яскравих великих фотоблоке.

Висновок

Підсумуємо головні правила дизайну бізнес-сторінок: привабливий вигляд і комфорт для користувачів. Пам'ятайте, що в тренді — мінімалізм і лаконічність. Подбайте про зручну навігацію, не перевантажуйте сайт зайвою інформацією і дратівливими елементами: спливаючими вікнами або анімацією. Щоб ви нічого не упустили, склали для вас чек-лист.

Чек-лист: як створити технічний дизайн сайту

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

Схожі матеріали

Подпишитесь на рассылку
Компьютерной школы Hillel

Ви отримаєте:

  • Інформацію про корисні галузеві заходи
  • Цікаві статті IT-сфери
  • Новини Комп'ютерної школи Hillel