Це десять поширених помилок дизайнерів, які доволі часто зустрічаються нині. Викорінюйте їх із власних звичок, бо це справжнісіньке зло веб-дизайну у чистому вигляді. А якщо ви хочете замовити сайт, а в портфоліо дизайнера знайшли такі помилки, то гарно подумайте стосовно вашого рішення.
Забудьте про десяток шрифтів для оформлення одного текстового блоку. Варто користуватися золотим правилом – не більше двох шрифтів для тексту сторінки. Крім того, використовуйте обрані шрифти відповідно і на всьому ресурсі надалі. Наприклад, якщо для заголовку обрали певний шрифт, то й інші заголовки виконуйте в такому ж стилі. Це важливо для цілісності сприйняття ресурсу.
Відмовтеся і від нестандартних шрифтів. Не кожна операційна система та браузер може підтримувати шрифти, які так хочеться використати. І пам’ятайте – в Photoshop реалізація шрифтових рішень може виглядати як витвір мистецтва, але у браузері ситуація може скластися кардинально інша.
Ваш користувач повинен чітко розуміти, до якого блоку відноситься той чи інший елемент. Це може стосуватися заголовкового комплексу, коли незрозуміло, де підзаголовок, а де основний текст, бо все злилося через відсутність відступів та варіацій оформлення.
Важливо зауважити і стосовно відступів – вони повинні допомогати чітко зрозуміти, до чого призведе натиснення на кнопку, до якого конкретно блоку вона відноситься. Групуйте інформацію за сенсом, використовуючи відступи.
Дотримуватися обраної загальної концепції сайту дуже важливо, адже ресурс має виглядати цілісним у всіх аспектах. Таку помилку часто можна спостерігати в оформленні деталей. Наприклад, для сайту було обрано плаский дизайн, але іконки соціальних мереж об’ємні. Є певні характеристики, що притаманні стилю конкретно вашого сайту, важливо не допускати, щоб якісь деталі відверто не відповідали цій загальній стилістиці.
Не створюйте зайвих проблем для користувача. Якщо тільки ви не хочете влаштувати гру з призами «Знайди на сторінці посилання». Варто обов’язково використовувати виділення, щоб відвідувач відразу ідентифікував посилання чи активний елемент.
Перед початком роботи необхідно чітко розмежувати пріоритетність інформації, щоб обрати правильне розташування блоків. Завдання дизайнера – вести користувача, як це робить сценарист фільму, від одного елементу до іншого. Тому, якщо є два блоки з інформацією, то, розмістивши їх поруч і з однаковим оформленням, ви створите всі умови, аби вони «конфліктували» між собою. Це приведе до розсіювання уваги користувача.
Зарані продумайте, в якому порядку варто подавати інформацію, і відповідно до цього розташовуйте блоки, а також оформлюйте їх. Для цього можна використовувати різні інструменти: варіювати розміри шрифтів, змінювати насиченість кольорів.
Також не можна подавати для користувача декілька ліній поведінки, від постійного переключення уваги відвідувач тільки заплутається.
Не варто додавати безліч непотрібних полів при реєстрації. Цей крок відвідувач зачасту хоче взагалі пропустити, а якщо вже так потрібно, то якнайшвидше закінчити. Краще дати можливість пізніше додати певну інформацію, аніж затягувати реєстрацію.
Банальна і ніби ж очевидна помилка, але від цього не менш поширена. Пам’ятайте – текст створений для того, щоб його читали, а не просто “аби було”. Тому завжди при дизайні думайте про читабельність. Наприклад, букви, що зливаються з фоном, прочитати неможливо, а поєднання різних яскравих та кислотних кольорів фону і тексту взагалі може змусити користувача заплакати кривавими слізьми.
Позбудьтесь елементів, що не несуть в собі жодного сенсу. Прибирайте все зайве, все, що вискакує нізвідки, залишайте необхідне. Велика кількість різноманітних елементів на сторінці створює лише візуальний шум, а сам сайт стає схожим скоріше на Діснейленд. Це скупчення всього, що ніби кричить «Зверни увагу на мене», «Ні, на мене», «Юху, а ось і я», лише дратує і змушує якнайшвидше рятуватися заповітним червоним хрестиком.
Часто на сторінці можна спостерігати справжній хаос, коли елементи не вирівняні відносно один одного, а також є непропорційними. Щоб цього уникнути, потрібно обов’язково використовувати модульну сітку. Модульна сітка – це набір ліній, до яких прив’язуються всі елементи сторінки. У переважній більшості випадків вона буває 12, 16 і 24 колонковою. Знайти модульні сітки можете тут.
Завдання модульної сітки:
Зменшення часових затрат на пошук геометричного місця для елемента в макеті;
Збалансування та пропорційність елементів макету;
Шаблонування та забезпечення цілісності сторінки.
Мова йде саме про різні кольори, а не відтінки. Сайт, сповнений широкою кольоровою гамою схожий, скоріше, на папугу чи клоуна, чия кар’єра в цирку добігла кінця. Ресурс стає строкатим, а головне – зовсім неможливо закцентувати увагу на чомусь конкретному.
Як кажуть, прості речі рятують життя, а в нашому випадку: прості правила рятують сайти. Досягти довершеності можливо, лише враховуючи всі деталі.