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

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

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

1. Используйте цвет и толщину шрифта для передачи иерархической структуры текста

Распространённая ошибка — слишком сильно полагаться на размер шрифта, работая с иерархией при стилевом оформлении текста. «Текст важный? Давайте сделаем его покрупнее». «Это второстепенный текст? Давайте уменьшим шрифт». Вместо того чтобы всю самую тяжёлую работу перекладывать только на шрифт, попробуйте выполнить ту же работу за счёт цветов или толщины шрифта. «Текст важный? Давайте сделаем шрифт потолще». «Это второстепенный текст? Давайте возьмём более светлый цвет». Попробуйте придерживаться двух или трёх цветов:

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

• Серый для второстепенного текстового контента (дата публикации статьи).

• Светло-серый для вспомогательного контента (пример — предупреждение об авторском праве в сноске). В работе веб-интерфейсом полезно играть с толщиной шрифта:

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

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

2. Не делайте серый текст на цветном фоне

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

Уменьшить прозрачность белого текста

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

Вручную подобрать цвет, который будет основан на цвете фона

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

3. Смещайте тени

Чтобы тени были заметнее, вместо blur и spread добавьте вертикальное смещение. Такой эффект смотрится более естественно, потому что симулирует источник света, расположенный сверху. Мы привыкли к такому освещению в реальном мире. Это работает и со встроенной тенью, которую можно использовать в ячейках или формах ввода: Если хотите узнать больше о дизайне с тенью, Material Design Guidelines — прекрасный учебник для начинающих.

4. Меньше используйте границы

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

Использовать тень в ячейке

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

Использовать два различных цвета фона

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

Добавить дополнительное пространство

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

5. Не увеличивайте иконки, которые должны быть маленькими

Если вы работаете над чем-то, где можно использовать большие иконки (пример — раздел «Функциональные возможности» на лендинге»), возможно, вы инстинктивно берёте бесплатный набор иконок (например, Font Awesome или Zondicons) и увеличиваете размер, пока он не покажется вам подходящим. Это векторные изображения, так что качество при масштабировании не страдает, так? Но если размер иконок был 16—24 px, после трёхкратного или четырёхкратного увеличения они не будут смотреться профессионально. У них не будет нужной детализации, так что они всегда будут казаться непропорциональными и грубыми. Если у вас есть только маленькие иконки, попробуйте вставить их в фигуру другого цвета: С одной стороны, сама иконка будет ближе к своему размеру, с другой, она займёт больше пространства на странице. А если позволяет бюджет, вы можете воспользоваться премиум-набором иконок, изначально созданных большими. Попробуйте Heroicons или Iconic.

6. Используйте цветную границу, чтобы добавить цвета в спокойный дизайн

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

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

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

7. Не каждой кнопке нужен цветной фон

Когда пользователь может произвести много разных действий на странице, очень легко попасться в ловушку и сделать дизайн этих действий, опираясь исключительно на семантику. Шаблоны сервисов вроде Bootstrap даже поощряют это — предоставляют меню семантических стилей при выборе кнопки: «Это положительное действие? Сделайте кнопку зелёной». «Это удаление данных? Сделайте кнопку красной». Но существует более важный момент, о котором обычно забывают, — иерархия. Каждое действие на странице имеет своё место в пирамиде важности. На большинстве страниц есть одно главное действие, пара менее важных второстепенных действий и несколько редко используемых действий третьестепенной важности. Дизайн должен отражать место действий в этой иерархии:

• Основные действия должны быть очевидными. Здесь хорошо использовать высококонтрастные и ровные цвета фона.

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

• Третьестепенные действия должны быть заметны, но не навязчивы. Лучше всего здесь применить стиль ссылок. «А что с деструктивными действиями? Разве не нужно их всегда выделять красным?». Необязательно. Если деструктивное действие не является главным на этой странице, лучше сделать его в стиле второстепенного или третьестепенного действия. Приберегите такое стилевое оформление — жирный шрифт, красный цвет — для тех случаев, когда негативное действие является основным действием в интерфейсе. Например, в диалоговом окне подтверждения: