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

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

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

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

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

1. Используйте для создания иерархии цвет и вес шрифта вместо размера1 3 80x30 - 7 практических советов по дизайну интерфейсов

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

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

 «Этот текст вторичен? Давайте сделаем его меньше».

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

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

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

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

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

2 1 80x43 - 7 практических советов по дизайну интерфейсов

Аналогично, обычно для интерфейса достаточно два веса шрифтов:

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

3 2 80x43 - 7 практических советов по дизайну интерфейсов

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

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

4 1 80x50 - 7 практических советов по дизайну интерфейсов

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

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

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

5 2 80x40 - 7 практических советов по дизайну интерфейсов

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

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

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

6 2 80x40 - 7 практических советов по дизайну интерфейсов

Выберите цвет текста, на основании цвета фона

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

7 80x40 - 7 практических советов по дизайну интерфейсов

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

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

8 1 80x28 - 7 практических советов по дизайну интерфейсов

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

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

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

9 1 80x50 - 7 практических советов по дизайну интерфейсов

Если вам интересно узнать больше о дизайне теней, то руководство Material Design – это фантастический учебник.

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

10 1 80x42 - 7 практических советов по дизайну интерфейсов

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

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

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

Используйте тень для блока

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

11 80x40 - 7 практических советов по дизайну интерфейсов

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

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

12 80x41 - 7 практических советов по дизайну интерфейсов

Добавьте дополнительный отступ

Увеличение отступа – отличный способ создать различие между группами элементов без необходимости переработки интерфейса.

13 80x57 - 7 практических советов по дизайну интерфейсов

5. Не растягивайте иконки

14 80x43 - 7 практических советов по дизайну интерфейсов

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

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

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

15 80x16 - 7 практических советов по дизайну интерфейсов

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

16 1 80x16 - 7 практических советов по дизайну интерфейсов

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

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

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

17 80x40 - 7 практических советов по дизайну интерфейсов

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

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

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

18 1 80x43 - 7 практических советов по дизайну интерфейсов

…или выделить активные элементы навигации:

19 1 80x43 - 7 практических советов по дизайну интерфейсов

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

20 80x53 - 7 практических советов по дизайну интерфейсов

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

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

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

21 80x37 - 7 практических советов по дизайну интерфейсов

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

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

22 80x32 - 7 практических советов по дизайну интерфейсов

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

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

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

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

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

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

23 80x41 - 7 практических советов по дизайну интерфейсов

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

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

24 80x18 - 7 практических советов по дизайну интерфейсов

Используйте красный и смелый стиль, когда это негативное действие действительно является основным действием в интерфейсе, например, подтверждение в диалоговом окне:

25 80x46 - 7 практических советов по дизайну интерфейсов

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

Свежие вакансии
                        GermanLanguage.ph LLC GermanLanguage.ph LLC German Language School – Product Designer (UX/UI) Удаленно Ереван
                        Региональная Академия делового образования Региональная Академия делового образования Технический дизайнер Удаленно Самарская область
                        BR LAb BR LAb UX/ UI web-designer Удаленно Москва 80 000 - 120 000 ₽
                        Rightapplications Rightapplications UX дизайнер Офис Харьков
                        Emlid Emlid UX/UI Designer Офис Санкт-Петербург
Все вакансии

Оригинал: Adam Wathan & Steve Schoger

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

4
Добавить комментарий
Похожие записи

Тренды UI/UX дизайна на 2020 год

Подборка основных трендов UI/UX дизайна, которые мы увидим в 2020 году

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование

Гамбургер-меню? Есть ли лучшая альтернатива? В этой статье я попытаюсь рассмотреть эти вопросы

О Доне Нормане, вандализации UX и широком подходе к дизайну

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