Улучшить интерфейс за счёт мелочей: семь хитростей для недизайнеров

Перевод материала разработчика Адама Ватана и дизайнера Стива Щёгера.

Каждый веб-разработчик неизбежно приходит к тому моменту, когда надо принять важные решения по визуальному дизайну, нравится ему это или нет.

Может быть, в вашей компании нет дизайнера на полную ставку, и поэтому вам приходится самостоятельно внедрять интерфейс новой функциональности. А может, вы взялись за сторонний проект и хотите, чтобы он выглядел лучше, чем ещё один сайт, созданный с помощью Bootstrap.

Легко сдаться и сказать, что вы неспособны это сделать, потому что вы не художник. Но оказывается, существует множество различных приёмов, которые не требуют опыта в графическом дизайне.

Ниже приведены семь простых идей, с помощью которых можно быстро улучшить свой дизайн.

Распространённая ошибка — слишком сильно полагаться на размер шрифта, работая с иерархией при стилевом оформлении текста.

«Текст важный? Давайте сделаем его покрупнее».

«Это второстепенный текст? Давайте уменьшим шрифт».

Вместо того чтобы всю самую тяжёлую работу перекладывать только на шрифт, попробуйте выполнить ту же работу за счёт цветов или толщины шрифта.

«Текст важный? Давайте сделаем шрифт потолще».

«Это второстепенный текст? Давайте возьмём более тонкое начертание».

Попробуйте придерживаться двух или трёх цветов:

Тёмный (но не чёрный) цвет для основного контента (например, заголовок статьи).
Серый для второстепенного контента (дата публикации статьи).
Светло-серый для вспомогательного контента (может быть предупреждение об авторском праве в сноске).

Также толщины шрифта обычно хватает для работы с интерфейсом пользователя:

Шрифт нормальной толщины (400 или 500, зависит от шрифта) для основной части текста.
Более толстый шрифт (600 или 700) для текста, который вы хотите выделить.

Не берите шрифты толщиной меньше 400 для работы с пользовательским интерфейсом. Они могут неплохо работать с крупными буквами заголовка, но если буквы маленькие, их сложно читать. Если вы хотите использовать текст меньшей толщины, чтобы показать его незначительность, лучше возьмите светлые цвета или шрифт меньшего размера.

Светло-серый текст на белом фоне хорошо подходит, если вы хотите, чтобы текст не привлекал внимание читателя. Но на цветном фоне светло-серый текст уже смотрится плохо.

Так происходит из-за уменьшения контраста.

Именно приближение цвета текста к цвету фона позволяет создать иерархию в тексте, а не светло-серый цвет.

Уменьшить контраст при работе с цветным фоном можно двумя способами.

Нужно сделать текст белым и увеличить степень его прозрачности. Фон в таком случае будет немного просвечивать, а значит, текст не будет привлекать внимание читателя и не будет конфликтовать с фоном.

Этот способ работает лучше, чем увеличение степени прозрачности, когда ваш фон — это фотография или рисунок, или если увеличение прозрачности текста делает его слишком мрачным или размытым.

Выберите цвет того же оттенка, что и фон, настраивайте насыщенность и яркость, пока цвет не покажется вам правильным.

Чтобы тени были более заметны, вместо blur и spread добавьте вертикальное смещение.

Такой эффект смотрится более естественно, потому что он симулирует источник света, расположенный сверху, — как мы привыкли видеть в реальном мире.

Это работает и со встроенной тенью, которую можно использовать в ячейках или формах ввода:

Если хотите узнать больше о дизайне с тенью, Material Design Guidelines — прекрасный учебник для начинающих.

Не хватайтесь за границы, если нужно разделить два элемента — это хороший способ, но не единственный. А слишком частое использование границ может перегрузить дизайн.

В следующий раз, когда потянетесь, решите воспользоваться границами, вспомните про одну из следующих идей.

Тень в ячейке отлично оттеняет элемент, как это сделала бы и граница, но смотрится неброско, достигает той же цели и при этом не настолько сильно отвлекает внимание.

Чуть-чуть отличающегося цвета фона хватит, чтобы разделить два расположенных рядом элемента. Если вы уже используете различный цвет фона в дополнение к границе, попробуйте её удалить — возможно, она вам и не нужна.

Размещение элементов на большем расстоянии друг от друга — прекрасный способ разделить их и при этом обойтись совсем без новых деталей в интерфейсе.

Если вы работаете над чем-то, где можно использовать большие иконки (например, раздел «Функциональные возможности» на лендинге), возможно, вы инстинктивно берёте бесплатный набор иконок (например, Font Awesome или Zondicons) и просто увеличиваете размер, пока он не покажется вам подходящим.

Это векторные изображения, так что качество не пострадает от того, что увеличится размер, так? Но если размер иконок был от 16 до 24 пикселей, они не будут смотреться профессионально, если увеличить их размер в три или четыре раза. У них не будет нужной детализации, так что они всегда будут казаться непропорциональными и грубыми.

Если у вас есть только маленькие иконки, попробуйте вставить их в фигуру другого цвета:

С одной стороны, сама иконка будет ближе к своему размеру, с другой, она займёт больше пространства на странице.

А если позволяет бюджет, то вы можете воспользоваться премиум-набором иконок, которые как раз и созданы для того, чтобы быть большими. Попробуйте Heroicons или Iconic.

Если вы не графический дизайнер, как тогда вы можете добавить визуальную изюминку своему пользовательскому интерфейсу, которая у других дизайнеров появляется благодаря красивым фотографиям или цветным иллюстрациям?

Очень простой способ — добавить акцент с помощью цветных границ в те части интерфейса, которые иначе бы смотрелись слишком бледно.

Например, сбоку от предупреждения:

Или чтобы подчеркнуть активный пункт навигации:

Или даже во всей ширине вверху макета:

Чтобы добавить цветной прямоугольник в UI, не требуется никакого таланта в графическом дизайне, а он может способствовать тому, чтобы ваш сайт казался более профессиональным.

Сложно выбрать цвета? Попробуйте начать с ограниченной палитры Color Search от Dribbble, чтобы не попасть под влияние бесконечных возможностей обычной палитры цветов.

Когда пользователь может произвести множество разнообразных действий на странице, очень легко попасться в ловушку и сделать дизайн этих действий, опираясь исключительно на семантику.

Шаблоны сервисов вроде Bootstrap даже поощряют это тем, что предоставляют меню семантических стилей при выборе кнопки:

«Это положительное действие? Сделайте кнопку зелёной».

«Это удаление данных? Сделайте кнопку красной».

Но существует более важный момент, о котором обычно забывают, — иерархия.

Каждое действие на странице имеет своё место в пирамиде важности. На большинстве страниц есть только одно главное действие, пара менее важных второстепенных действий и несколько редко используемых действий третьестепенной важности.

При дизайне важно передать их место в этой иерархии.

Основные действия должны быть очевидными. Здесь хорошо использовать высококонтрастные и ровные цвета фона.
Второстепенные действия должны быть ровными, но не яркими. Здесь лучше всего применить стиль внешней границы элемента (Outline styles) или цвета фона с меньшей контрастностью.
Третьестепенные действия должны быть заметны, но не навязчивы. Лучше всего здесь применить стиль ссылок.

«А что с деструктивными действиями, разве не нужно их всегда выделять красным?»

Необязательно. Если деструктивное действие не является главным на этой странице, то лучше сделать его в стиле второстепенного или третьестепенного действия.

Приберегите такое стилевое оформление — жирный шрифт, красный цвет — для тех случаев, когда негативное действие является основным действием в интерфейсе, например, в диалоговом окне подтверждения: