Мелочи решают. Мы их можем не замечать, но они влияют на наше восприятие веб-интерфейса. Что же я подразумеваю под этими «мелочами».
Отступы
С отступами в дизайне веб-интерфейсов всегда были проблемы. Верстальщики часто упускают их или считают, что это маловажная деталь дизайна. Если отступы слишком большие, появляются неприятные «дыры», если слишком маленькие — всё выглядит скомкано и, в результате, информация теряется. Существует понятие whitespace.
«Белые пустоты» или отступы (whitespace) — это пустое пространство между элементами в композиции. Чтобы приблизительно понять как влияет whitespace на восприятие информации попробуйте прочитать следующее предложение без пробелов: «Воднутелегувпрячьнеможноконяитрепетнуюлань». Отступы подобно пробелам несут функцию разделения и группировки элементов. Это один из главных инструментов дизайнера в оформлении информации.
Расcмотрим простой пример с текстом на плашке.
Очевидно, что на втором варианте текст читается легко.
Выравнивания элементов
Микровыравнивания элементов сильно влияют на эстетический вид. Когда элементы «гуляют» относительно друг друга, складывается ощущение неуклюжести. Это как застегивать пуговицы рубашки не по порядку и пропуская отверстия. Для примера возьмем шапку hrbroker.ru и выровняем некоторые элементы относительно друг друга.
Выровняем часть верхнего меню по правой стороне и уже относительно него выровняем «напомнить пароль», «регистрация» и текст блока с новостями. В новостях выравнивать будем только текст, так как рамка не тяжелая, её можно вынести за линию выравнивания. Выровняем текст внутри кнопки «Войти» по вертикали. Логотип также необходимо выровнять по вертикали относительно блока новостей. Вот что у нас получилось.
Не меняя никаких элементов, шапка приобрела более эстетический вид.
Очень важны правильные выравнивания в полях формы. Текст внутри текстовых полей должен располагаться по центру с достаточными отступами слева и справа.
Цвета
Я не буду говорить про цветовые палитры, про воздействия определенных цветов на психику человека. Я хочу акцентировать внимание на некоторых ошибках в работе с цветами в градиентах, тенях и бликах.
Бывает так, что смотришь на сайт и вроде бы всё в нем нормально, но чувство грязи нас не покидает. Вероятнее всего проблема в цветах и градиентах.
Последние годы стало трендом делать псевдообъемные плашечки, кнопочки, поля ввода, выпуклости, вдавленности и т. п. Объем элемента можно показать с помощью блика (более светлого оттенка основного цвета) и тени (более темного оттенка света). Так вот эти оттенки часто подобраны не правильно (не реалистично).
В качестве примера рассмотрим плашки под заголовками на сайте radialka.net
Если слегка подправить тени на плашках, не трогая даже основной цвет, получится уже лучше.
Тени, отбрасываемые объектами никогда в природе не будут серого цвета. Все цветные объекты будут отбрасывать тень с темным оттенком своего основного цвета. Простой пример. Кнопка слева очевидно реалистичнее выглядит.
На этом хороший дизайн, конечно, не заканчивается, но благодаря таким мелочам, любой дизайн веб-интерфейса станет комфортнее и приятнее для пользователей.
