Маленькі деталі мають значення. Ми можемо їх ігнорувати, але вони впливають на наше сприйняття веб-інтерфейсу. Що я маю на увазі під цими «маленькими деталями».
Поля
Поля в дизайні веб-інтерфейсу завжди були проблемою. Розробники часто не звертають на них уваги або вважають їх неважливими деталями дизайну. Якщо поля занадто великі, можуть з'явитися неприємні «дірки», якщо занадто маленькі — все виглядає скуто і, як наслідок, інформація втрачається. Існує поняття вільного простору.
«Біле порожнеча» або вільний простір — це порожній простір між елементами в композиції. Щоб зрозуміти, як вільний простір впливає на сприйняття інформації, спробуйте прочитати наступне речення без пробілів: «Therestivesteedandtimiddeermustne'erbeharnessedtoonecart». Поля, як і проміжки, виконують функцію розділення та групування текстових елементів. Це один з основних інструментів дизайнера в інформаційному дизайні.
Давайте розглянемо простий приклад з текстом на тарілці.
Очевидно, що друга версія тексту легка для читання.
Вирівнювання елементів
Мікровирівнювання елементів сильно впливає на естетичний вигляд. Коли елементи «танцюють» один щодо одного, часто виникає відчуття незграбності. Це як застібати сорочку не в порядку і пропускати дірочки. Наприклад, візьмемо заголовок hrbroker.ru і вирівняємо деякі елементи один відносно одного.
Вирівняйте верхню частину меню з правого боку, а потім вирівняйте «забули пароль», «реєстрація» та текстовий блок з новинами. Ми вирівняємо лише текст у новинах, оскільки рамка не важка, її можна вивести за межі лінії вирівнювання. Вирівняйте текст всередині кнопки «Увійти» вертикально. Логотип також потрібно вирівняти вертикально відносно блоку новин. Давайте подивимося, що у нас вийшло.
Не змінюючи жодних елементів, ми надали заголовку більш естетичний вигляд.
Вирівнювання також дуже важливе у формах. Текст у текстових полях повинен бути вирівняний по центру з достатнім простором зліва та справа.
Кольори
Я не буду говорити про кольорові палітри, про вплив певних кольорів на людську психіку. Я хочу зосередитися на деяких помилках у роботі з кольорами в градієнтах, тінях та підсвічуваннях.
Так буває, що дивишся на сайт, і все здається в порядку, але все ж виглядає трохи розмитим і брудним. Найімовірніше, проблема полягає в кольорах і градієнтах.
Останні роки стало трендом використовувати псевдодисплейні елементи, кнопки, поля введення, випуклості, западини тощо. Об'єм елемента можна показати за допомогою світла (світліший відтінок основного кольору) та тіні (темніший відтінок). Тому ці відтінки часто підбираються неправильно (не реалістично).
Як приклад, розглянемо пластини під заголовками на сайті radialka.net
Якщо трохи підкоригувати відтінок на пластинах, навіть не торкаючись основного кольору, виглядає краще.
Тіні, що створюються об'єктами, ніколи не бувають сірими в природі. Усі кольорові об'єкти створюють тінь з темним відтінком свого основного кольору. Ось простий приклад. Кнопка зліва очевидно виглядає реалістичніше.
На цьому хороший дизайн, звичайно, не закінчується, але завдяки таким дрібницям будь-який дизайн веб-інтерфейсу буде більш комфортним і приємним для користувачів.
