Основы дизайна: Светлое и тёмное

В рамках серии статей “По стопам школы дизайна Баухауз”, мы знакомимся с основами дизайна. В данной заметке рассматриваем контраст.

Что такое Баухауз?

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

Джонни Айв (главный дизайнер Apple) является страстными поклонниками данной школы, и это привело к тому, что принципы Баухауза пронизывают всю линейку продукции Apple. Более подробно о истории школы можно почитать на Википедии.

Мы начнём знакомство с подготовительным курсом Баухауза с раздела “Светлое и тёмное”.

Светлое и тёмное

Контраст светлого и тёмного является базовым инструментом для формирования образа. Достаточно просто нарисовать белый круг на тёмном фоне и мы получим чёткую форму круга. Но при этом, если мы нарисуем белый круг на белом фоне — мы фактически не увидим ничего.

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

Серый квадрат может быть светлым, а может быть тёмным в зависимости от того с чем его сравнивают — с более светлым или более тёмным фоном. На картинке ниже, изображены квадраты одинакового цвета, но на фоне разного оттенка.

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

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

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