Дизайн дуже тісно пов'язаний з юзабіліті, вони невіддільні. Адже дизайн робить величезний вплив на кінцеве сприйняття і зручність взаємодії з сайтом.
Дизайн може викликати різні емоції, спонукати до чого-небудь, звертати увагу на окремі елементи. Важливо правильно використовувати силу дизайну і не робити помилок, які присутні на багатьох сайтах і псують поведінковий фактор ресурсу.
Дизайн-макет сайту починається з створення сітки. Якщо буквально, то це поділ макета сторінки сайту вертикальними та/або горизонтальними лініями сітки. Сітку можна вважати єдиним каркасом для розміщення всіх елементів сайту. Якщо в дизайні ними нехтували, то візуально відвідувачам сайту здається, що окремі елементи ніби висять у повітрі, відсутні взаємозв'язки з іншими елементами на сторінці.
Наш мозок прагне до упорядкування, і ми не помічаємо вирівнювання. Але ми легко побачимо безладність у разі його відсутності.
Всім нам знайоме поняття стилю. У сайту теж є свій стиль.
Окремі елементи дизайну потрібно об'єднувати загальним стилем (дизайн-шаблоном), який застосовується глобально, для всіх сторінок сайту. Це допоможе досягти однаковості і полегшить взаємодію відвідувачів з сайтом – вони швидко освояться і зрозуміють що до чого. Спілкування користувачів з таким сайтом буде легким і невимушеним, і, швидше за все, вони прийдуть ще не один раз. Про деякі факти щодо дизайну сайтів читайте тут.
Перевірте, щоб всі однотипні елементи на сайті були оформлені однаково:
Добре і зручно, коли однотипна інформація в картках товарів представлена в одній і тій же формі і в одному і тому ж місці.
Наприклад, характеристики всіх товарів суворо на окремій вкладці і строго у формі таблиці.
Переходячи з картки на картку, відвідувач вже буде знати, де шукати характеристики товару.
Потрапивши на сайт, відвідувач часто не помічає потрібну інформацію, так як її складно розрізнити серед іншого шуму, безладу.
Дана проблема виникає із-за великої кількості помітних, відволікаючих увагу елементів. Слід уникати візуального шуму, який створюють:
Все це відволікає відвідувачів, і важливі елементи сайту просто губляться.
Допоможіть користувачам свого сайту: виділяйте для них важливу інформацію і найбільш важливі функції серед інших елементів.
Практично на всіх сайтах є стандартні функціональні елементи, наприклад, кнопки, поля вводу. Для стандартних функціональних елементів застосовуються стандартні візуальні шаблони.
У дизайні сайту потрібно показувати, що кнопка є кнопкою, поле введення – полем.
Саме тому в гонитві за унікальним дизайном не варто відмовлятися від візуальних шаблонів, які спростять роботу з сайтом. Наприклад, не варто робити кнопки схожими на картинки, так як відвідувачі можуть і не здогадатися, що це кнопки.
Щоб полегшити відвідувачам навігацію по сайту, посилання в тексті завжди потрібно виділяти. Загальноприйнятий шаблон оформлення посилань – підкреслення і /або виділення синім кольором. Але цим усталеним шаблоном нехтують на більшості сайтів.
Шаблон оформлення посилань часто використовують для звичайного тексту, тому він неминуче асоціюється з посиланням.
Бездумне використання підкреслення і оформлення кольором для основного тексту заплутує відвідувачів, ускладнює навігацію по сайту.
Щоб дизайн сайту був приємний оку, важливо грамотно підібрати кольори.
У дизайні сайту можуть бути різні проблеми, пов'язані з неправильним використанням кольорів: недостатній контраст, насичені додаткові кольори (наприклад, червоний текст на синьому тлі), надмірна колірна насиченість елементів.
На жаль, досі багато власників «зроблених на коліні» сайтів впевнені, що їх дизайн найкращий.
При виборі кольорів потрібно керуватися контекстом: яка тематика сайту і хто його цільова аудиторія. У дизайні завжди краще дотримуватися більш спокійних і універсальних варіантів поєднання кольорів:
Важливо! Кольоровий фон для сайту краще не використовувати, оскільки тексти на будь-якому тлі, крім білого, важко читати.
Текст для читання повинен добре контрастувати з тлом. Має бути 80% контрасту.
Недостатній контраст призводить до того, що текст важко читати. Так і пошукові системи це не люблять, можуть і застосувати фільтр.
Для багатьох сайтів текстовий контент – основна складова, тому текст повинен бути легким для читання.
На сайті краще використовувати:
В цілому для дизайну сайту достатньо 2 шрифтів для основного тексту і заголовків.
Важливо! Використання великої кількості шрифтів різних розмірів і кольорів призводить до появи візуального шуму.
У дизайні потрібно знати міру. Ми вже говорили, що яскраві кольори, картинки, рамки допомагають привернути увагу, виділити важливе. Але їх треба застосовувати тільки тоді, коли вони служать для вирішення якої-небудь задачі.
Інакше є ризик захопитися оформлюванням і почати робити дизайн заради дизайну.
У цьому випадку оформлення буде відволікати від корисного вмісту сайту.
Прийміть як належне: відвідувач приходить на сайт не помилуватися дизайном, а знайти інформацію. Дизайн повинен йому в цьому допомагати!
Якщо декоративний елемент (іконка, картинка, рамка) не несе смислового навантаження, а розміщується на сайті для краси, його можна сміливо видаляти.
Розробіть дизайн сайту для цільової аудиторії, з урахуванням її потреб і особливостей. У кожного, навіть невеликого, елемента в дизайні має бути своє практичне призначення.
Якщо хочете, щоб ваш сайт був інструментом бізнесу – ставтеся до нього саме так, і забудьте слова «а мені це подобається, а це ні», сайт не повинен подобатися вам, він повинен подобатися вашій цільовій аудиторії і приносити вам прибуток.
P. S. Якщо на вашому сайті присутні помилки, замовте його редизайн. Послуга редизайну коштує значно дешевше розробки «з нуля». Але при цьому ви отримаєте цікаву, привабливу сторінку. До того ж, ми не просто дизайн поміняємо, але і текст напишемо новий. Подивитися послугу «Редизайн сайтів».
Ви можете завантажити і заповнити бриф щоб надати більше інформації розробнику щодо деталей майбутнього ресурсу
Бриф на розробку сайту Бриф на розробку лендінга Бриф на розробку додатку