Сегодня я хотел бы затронуть тему "Воздуха" в дизайне. Что это такое, зачем он нужен и как его создавать.
Воздух в дизайне — это пустота, свободное пространство между элементами на сайте, или же в любой другой отрасли дизайна. На английском языке такое пространство называется ещё (WHITE SPACE).
Пустота – это неотъемлемый аспект жизни человека. Только представьте, что слушаете музыку без промежутков между нотами. Это был бы просто шум. То же самое можно сказать про фотографию, архитектуру, живопись, скульптуру. И веб-дизайнеры тоже используют пустоту, чтобы облегчить восприятия, выделить или подчеркнуть какую-то важную деталь. Свободное пространство является важным дизайн аспектом, но начинающие дизайнеры об этом забывают.
Ниже приведен пример сайта сантехнического магазина, при разработке которого, дизайнер не учитывал "Воздух" в макете сайта. Давайте же разберемся что не так с этим дизайном. При входе на данный сайт человек не может сразу сконцентрировать взгляд на каком-либо элементе, будь то поиск или слайдер, по одной простой причине, все элементы очень тесно размещены близь друг друга, и нет как раз таки того самого свободного пространства, которое дает передышку глазам пользователя. Также из-за чего пользователь может быстро уставать при нахождении на этом сайте — это большое количество акцентов на элементах. На данной странице слишком много всего выделено красным цветом и все эти элементы расположены очень близко друг к другу. Хотя я могу точно сказать, что 70% клиентов именно так и хотят видеть свой сайт, так как они считают, что "ЧЕМ БОЛЬШЕ ВСЕГО, ТЕМ ЛУЧШЕ".
Или вот вам второй пример сайта сантехнического магазина, где заказчик решил, что на клиента нужно сразу вываливать все и в большом количестве. Тут текста на один блок больше, чем в журнале. Видимо заказчик думает, что клиенту надо сразу показать и все категории, и оповестить его что заявку можно оставить и фильтр и многое другое. Такой большой набор элементов в одном месте будет путать и отпугивать потенциальных покупателей и это факт!
А вот вам пример хорошего дизайна сайта сантехнического магазина. В данном макете хорошо произведена компоновка элементов в блоках, нет перегруза, а главное используется "Воздух" или по-другому "Свободное пространство", за счет чего взгляд пользователя цепляется за нужные элементы страницы, например за сайдбар (меню сайта) или СТА элемент (кнопка в первом блоке). Свободное пространство создает чистоту и эстетику сайта, а также отражает насколько магазин хорошо относится к клиентам, выдавая информация порционно, а не кидая все сразу в лицо. В данном макет очень хорошо расставлены акценты, например на заголовки, которые объясняют пользователю что он видит сейчас на изображениях.
А как создать воздух в дизайне?
Чтобы создать воздух в дизайне нужно всю информацию и элементы разбивать на блоки. Например, при разработке макета сайта я рекомендую пользоваться Bootstrap сеткой, которая поможет вам красиво, а главное ровно скомпоновать элементы.
Что такое Bootstrap?
Bootstrap - это 12 колончатая сетка, которая помогает выстраивать элементы по ней, данная сетка уже встроена в программу Adobe Xd, а также Figma. Но если вы разрабатываете сайты все еще в Photoshop, то ее можно найти и скачать в интернете формата PSD. ниже приведен пример построение прототипа по bootstrap сетке. Как видите при использовании данной сетки всегда будет оставаться "Воздух" который так нужен элементам в дизайне.
Прототип сайта по системе Bootstrap
Спасибо за внимание, надеюсь данная статья была для вас полезной и интересной.
также вы можете подписаться на мой канал - https://www.youtube.com/channel/UCvIpBa7AFTeLCynH1k-4Kbg?view_as=subscriber и смотреть полезные видеоуроки по дизайну!
