UXPUB 🇺🇦 Дизайн-спільнота

Cover image for UI и UX микро-советы: часть 9
Редакція
Редакція

Опубліковано • Оновлено

UI и UX микро-советы: часть 9

#ui

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

В этой статье я представлю еще одну подборку простых в применении микро-советов по UI и UX дизайну.

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

Хотите еще больше микро-советов по UI и UX дизайну? Тогда ознакомьтесь с моими предыдущими статьями:

Приступим…

1. Пустое пространство – это элемент дизайна. Так что используйте его с умом

Не перегружайте свой дизайн. Позвольте и дизайну, и пользователю свободно дышать.

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

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

2. Поддерживайте подходящий коэффициент контрастности между светлым текстом и изображениями

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

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

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

3. Получите идеальный вертикальный ритм для заголовков и основного текста

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

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

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

4. Чтобы определить удобочитаемость выбранного вами шрифта, используйте высоту по оси x или тест Il1

Я уже рассказывал об этом совете ранее, но захотел продемонстрировать его снова, потому что он может быть чертовски полезным (спасибо, Джессике Хиш за совет использовать «Тест Il1»).

Высота по оси x (X-height) – это высота строчной буквы «x» по отношению к прописной букве (т. е. T) в той же гарнитуре.

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

Еще один способ определить читабельность гарнитуры – это провести тест Il1.

В этом тесте вы сравниваете три символа одной и той же гарнитуры: прописную i (I), строчную L (l) и цифру один (1).

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

При выборе гарнитуры для основного текста всегда стремитесь к лучшей читабельности, используя высоту по оси x, тест Il1 или оба метода сразу.

5. В зависимости от размера используемого текстового блока соответствующим образом отрегулируйте высоту строки

При работе с текстовыми блоками разного размера вам нужно найти высоту строки, подходящую для конкретного блока.

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

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

Отрегулируйте высоту строки исходя из размера тестового блока.

6. Сохраняйте простую цветовую палитру для текста и используйте только Tints и Shades

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

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

Избавьте себя от стресса и попробуйте использовать проверенные Tints (более светлые варианты) и Shades (более темные варианты) вашего основного цвета.

Посетите maketintsandshades.com, чтобы узнать, как можно ускорить процесс создания Tints и Shades.

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


Перевод статьи uxdesign.cc

Топ коментарі (0)