Практическая сторона минимализма

Bogdan Gerasymenko
4 min readJul 26, 2017

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

В поисках золотой середины

Жил в XIV веке английский философ-номиналист Уильям Оккам, который сказал весьма умную фразу “Не следует множить сущее без необходимости”. От сюда пошло понятие бритвы Оккама: отсекай все лишнее. Именно этим призван заниматься минимализм.

На первый взгляд может показаться, что минимализм — это просто. Убери все лишнее и готово! Вот только “убрать лишнее” не так уж просто…

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

Рубашка одной из самых дорогих колод игральных карт

Приведу яркий пример из личного опыта: покупки онлайн. Человек, четко понимающий, что ему нужно не нуждается в излишним описании товара, видео обзорах к нему. Но что самое главное — на покупку нужной вещи он не желает тратить уйму времени. Он хочет зайти в первый попавшийся магазин и купить там в один клик нужный товар. Когда реальность не оправдывает ожидания, такой клиент очень злиться и покидает сайт (а это, между прочим, убыток для продавца).

Я заметил тенденцию: все больше онлайн-покупателей выбирают функцию быстрого заказа. Указал мобильный телефон и готово! С такими темпами, заставить пользователей регистрироваться на сайте будет крайне сложно…

А всё из-за сложности системы. Процесс борьбы со сложностями в веб-разработке и дизайне называется UX/UI (от слов user experience). Минимализм здесь очень выручает. Чтобы не быть многословным, предлагаю перейти сразу к примерам.

Минимализм в действии

Давайте посмотрим пример страницы перегруженной лишней информацией. В нашем случае это каталог товаров интернет-магазина:

Информации на странице хватит на написание диссертации

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

Порой на пути к минимализму приходится от многого отказываться. С чем-то вы можете расстаться легко, чем-то дорожите, но за потребности можете и отпустить. В нашем случае краткое описание, к тому же еще и урезанное, здесь ни к чему. Лишние здесь и артикулы. Количество отзывов (к слову, накрученных искусственно: не бывает такого, что все товары идеальны) также можно убрать — все понятно и без текста.

Воспользовавшись бритвой Оккама получаем следующий вариант:

Убрали все лишнее, но “полетела верстка”

Глядя на такой дизайн у некоторых людей появляется удивление на лице. Согласны, выглядит крайне коряво и перфекционисты (основные ценители минимализма) нам этого никогда не простят.

Доводим дело до ума, пуская в ход всё лучшее от минимализма:

Привели к идеальному виду

Сравните первоначальный и полученный виды. Что мы потеряли? По сути — ничего! Я специально не стал удалять место под товарами, чтобы вы могли наочно увидеть, сколько пространства мы выиграли на странице.

Собственно, что мы сделали? Мы отсекли условной бритвой все лишнее: убрали краткое описание, которое никто не читал, раскрасили рейтинг, скрыли артикулы по которым могут искать товар у конкурентов (вообще артикулы — это зло!). Но самое главное: мы выработали общую концепцию согласно которой на фотографии может быть изображен лишь один товар смотрящий во внутрь страницы (правило позаимствовали из журнальной верстки).

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

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

Еще одно замечательное свойство на которое следует обратить внимание — возможность скрытия информации до востребования. В нашем случае только при наведении на товар появляется ссылка добавления в корзину, кнопка быстрого просмотра. Можно расширить этот список сменой изображения товара при наведении. Например, по умолчанию показан товар без упаковки, при наведении — в упаковке. Также в категории сразу отображаются возможные цвета (варианты), при наведении на которые меняется изображения. Хотя для этих целей нам достаточно фильтра справа, который позволяет искать нужный товар по определенному критерию, в том числе по цвету.

Выводы

Упрощение — неотъемлемая часть минимализма. Чем проще — тем лучше, красивее. Проще не значит хуже: всегда можно сохранить весь функционал за счет продуманной подачи.

Краткий смысл минимализма: проще, но функциональнее

К примеру, глупо спрашивать имя у пользователя и e-mail, который и так авторизирован на сайте. Те же смайлики вместо целого ряда можно вместить в одну кнопку. Пиктограммы (иконочные шрифты) в этом смысле очень полезны. Одна картинка заменяет длинный текст.

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

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

Поэтому делаем соответствующие выводы:

Минимализм в дизайне сайтов — тщательно отобранный минимум информации с сохранением функционала.

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

--

--