UXPUB 🇺🇦 Спільнота дизайнерів

Cover image for Как использовать контраст в дизайне интерфейсов
Редакція
Редакція

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

Как использовать контраст в дизайне интерфейсов

#ux

Определение и примеры

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

Обычно, контраст используется в различных областях дизайна, но иногда кажется, что использовать его правильно - очень сложно. Хельга Б.

Контраст повсюду

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

Открытый и закрытый

Взгляните, какую работу выполняет секция изображения для простой, чистой и открытой текстовой секции. контраст в дизайне UI - 1

Полный и пустой

Хотя левая часть наполнена контентом, правая сторона более открыта и пуста. контраст в дизайне UI - 2

Симметричный и ассиметричный

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

Крупный и мелкий

Мелкие и приглушенные элементы UI по отношению к крупному таймеру. Таким образом, мы привлекаем внимание, создаем прекрасную архитектуру контента и хороший визуальный эффект. контраст в дизайне UI - 3

Заполненный и контурный

Простой способ для определения приоритетов кнопок. контраст в дизайне UI - 4

С засечками и без засечек

Вам не стоит использовать только один тип. контраст в дизайне UI - 5

Упорядоченный и хаотичный

Четкая и организованная типографика рядом с хаотично “разбросанными” элементами. контраст в дизайне UI - 6

Текстура и флэт

Здесь мы видим смесь градиента и фото против обычного белого фона слева. Прекрасно. контраст в дизайне UI - 7

Возможности безграничны

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

Примеры:

  • Межбуквенное расстояние и буквы без расстояний
  • Квадратный и закругленный
  • Заполненный и прозрачный
  • Грубые формы и гладкие формы
  • Горизонтальный и вертикальный
  • Старый и новый
  • Странный и знакомый
  • Подчеркнутый и пунктирный
  • Детализированный и чистый
  • Photoshop и хороший софт .-.

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


Перевод статьи Wojciech Zieliński

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

Web Design Junior

Логічне продовження курсу Web Design Beginning. За три місяці перейдемо від створення базових лендингів до роботи над складними сайтами та e-commerce проєктами. Навчимося презентувати роботу клієнту й аргументувати власні дизайн-рішення
Дізнатись більше