7 практических советов усовершенствования дизайна сайта

Вашему вниманию предлагается перевод статьи 7 Practical Tips for Cheating at Design, в которой вы найдете ряд рекомендаций по созданию дизайна элементов сайта или мобильных приложений. Этот материал рассчитан на разработчиков, у которых нет под рукой дизайнера,  но также будет полезен в равной степени как верстальщикам, так и дизайнерам.

Улучшите дизайн ваших проектов, используя тактические приемы, а не талант дизайнера

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

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

Легко поднять руки вверх и сказать: "Я никогда не смогу сделать это хорошо, я не художник!", Но, оказывается, есть тонна трюков, которые вы можете использовать, чтобы улучшить свою работу, прекрасно обходясь без помощи  специалиста-дизайнера.

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

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

Основная ошибка при стилизации текстов для UI (User Interface, или интерфейс пользователя) - это слишком сильное увеличение размера шрифта для управления иерархией блока или страницы.

“Этот текст важен? Давайте сделаем его больше.”

“Этот текст второстепенен? Давайте сделаем его меньше.”

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

“Этот текст важен? Давайте сделаем его жирнее.”

“Этот текст второстепенен? Давайте использовать более  светлый оттенок цвета для него.”

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

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

Аналогично, для работы с пользовательским интерфейсом (UI) обычно достаточно двух вариантов жирности шрифта:

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

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

2. Не используйте серый текст на цветных фонах

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

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

Есть два способа уменьшить контраст при работе с яркими фонами :

1. Уменьшите непрозрачность белого текста (css-свойство opacity или добавление альфа-канала).

Используйте белый текст и уменьшите непрозрачность. Это позволяет цвету текста немного "потухнуть", приуменьшая его значимость, но при этом так, чтобы он не сливался с фоном.

2. Используйте для выделения цвет, основанный на цвете фона

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

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

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

Вместо того, чтобы использовать большие значения размытия (blur) и распространения (spread), чтобы сделать тень блока более заметной, добавьте вертикальное смещение.

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

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

Если вам интересно узнать больше о дизайне теней, стоит прочитать статью Материальный Дизайн  - Руководство - это фантастический пример в этой области.

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

Когда вам нужно создать разделение между двумя элементами, попытайтесь противостоять своему желанию немедленно добавить в этом месте границу (css-свойство border).

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

В следующий раз, когда вы решите использовать границу, попробуйте одну из этих идей:

1. Используйте тень для блока (css-свойство box-hadow)

Блочные тени (box-shadow) отлично справляются с оформлением элемента а-ля создание границы, но могут быть более тонкими и выполнять ту же задачу, не отвлекая на себя внимание.

2. Используйте два разных цвета фона

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

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

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

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

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

В конце концов, это векторные изображения, поэтому качество не пострадает, если вы увеличите размер, не так ли?

Вы наверняка знаете, что векторные изображения не ухудшатся по качеству при увеличении их размера. Тем не менее иконки, которые были нарисованы для 16-24px, никогда не будут выглядеть профессионально, если вы увеличите их в 3 или 4 раза от их предполагаемого размера. Им не хватит деталей, и они всегда будут выглядеть непропорционально «коренастыми».

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

Это позволит сохранить иконку ближе к ее предполагаемому размеру, при этом визуально заполненного пространства будет больше.

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

6. Делайте акценты с помощью цветных границ для выделения блоков UI

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

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

Например, сбоку в предупреждающем сообщении:

… или при выделении активного пункта меню:

… или даже в верхней части всей вашего макета:

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

Вам сложно выбирать цвета? Попробуйте использовать ограниченные палитры цветов на таких сервисах, как Dribbble’s color search, чтобы не сойти с ума от бесконечных возможностей традиционного выбора цвета.

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

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

Такие фреймворки, как Bootstrap, поощряют это, предоставляя вам набор семантических стилей для выбора цвета для новой кнопки из нескольких существующих вариантов:

“Это будет положительное действие? Сделайте кнопку зеленой.”

“ Нужно удалить данные? Сделайте кнопку красной.”

Семантика - важная часть дизайна кнопок, но есть более важное измерение, которое обычно забывается: иерархия.

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

При разработке этих действий важно показать пользователю место каждой кнопки в иерархии страницы.

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

“Как насчет деструктивных действий, ведь они не всегда должны быть красными?”

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

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