Простота — это ключ — изучение минимального веб-дизайна

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

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

Меньше значит больше с минимальным веб-дизайном

«Меньше значит больше» — пожалуй, один из самых распространенных минималистских девизов, независимо от того, идет ли речь о веб-дизайне или любой другой форме минимализма. Но что это на самом деле означает в контексте минималистского веб-дизайна?

Иногда проще понять, что такое минималистский дизайн, если сначала посмотреть на то, что не минималистично. Вот один крайний пример:

Хотя веб-сайт Ling's Cars, по-видимому, невероятно успешен, он регулярно попадает в списки сайтов с худшим дизайном из существующих. Просто так много всего происходит. Любой может взглянуть на него и сразу понять, что это не минималистский стиль.

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

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

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

Минималистичный веб-дизайн позволяет контенту выделяться

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

Возьмем, к примеру, сайт Яна Джонса. Он занимается графическим и цифровым дизайном, а также фотографией. Его веб-сайт уделяет особое внимание содержанию, а также включает в себя некоторые интересные элементы дизайна (например, сетку фона) и тонкую анимацию. Конечным результатом является минималистичный дизайн пользовательского интерфейса, который заставляет его работу сиять.

Сайт сценариста и кинорежиссера Артемия Ортуса — еще один потрясающий пример минималистского дизайна, в котором основное внимание уделяется его работе. Элемент слайд-шоу создает массу визуального интереса, не создавая беспорядка в дизайне.

Веб-сайт Купера Перкинса — еще один прекрасный пример минималистского дизайна, использующего анимацию для создания интереса без беспорядка.

Каждое решение UI и UX должно быть преднамеренным

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

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

Тема WordPress «Рассказчик» — отличный пример сайта, в котором много внимания уделено маленьким элементам, связывающим все вместе. Без добавления визуального беспорядка линии, символы стрелок и простой серый фон для различных элементов придают сайту блеск, которого иногда не хватает в минималистском дизайне.

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

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

Используйте свободное пространство

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

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

Platoon Branding Studio использует достаточно пустого пространства вокруг типографики в своем заголовке, выделяя ее и сразу привлекая внимание.

Заголовок Nohau похож, с большим количеством пробелов вокруг шрифта.

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

Этот логотип из зоопарка Бронкса играет с промежутками между ногами жирафов. Это силуэты небоскребов.

Создайте драму с помощью фотографии, типографики и контраста

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

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

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

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

Помимо больших фотографий, в минималистичном веб-дизайне можно использовать большие иллюстрации и видео.

Веб-сайт In Focus использует анимацию, иллюстрации и видео в качестве фона. Хотя сайт не сразу интуитивно понятен, его очень интересно изучать и использовать.

Типографика — еще одна область, где дизайнеры-минималисты делают действительно крутые вещи.

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

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

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

Типографская иерархия

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

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

В блоге InVision Inside Design используется четкая типографская иерархия для разделения заголовка, заголовков и основного текста.

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

Тема WordPress Stills использует четкую типографскую иерархию, чтобы различать заголовки и основной текст.

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

Сделайте навигацию простой

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

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

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

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

Nilton Clothing использует три смещенные линии для создания своего гамбургер-меню, что стало популярной альтернативой трем совпадающим линиям.

Размещение цветного фона позади гамбургер-меню RFTB выделяет его.

Чаще всего гамбургер-меню используется для основной навигации, в то время как кебаб-меню может использоваться для таких вещей, как меню настроек или другие типы подменю. Хотя оба становятся все более распространенными навигационными элементами, некоторые дизайнеры по-прежнему добавляют текст, указывающий, что гамбургер — это меню. Это особенно полезно, если сайт не предназначен для технически подкованных пользователей.

Минималистские цветовые палитры

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

Веб-сайт Pittori di Cinema использует трехцветную палитру для своей домашней страницы (курсор красный, а фон желтый с черным шрифтом).

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

На веб-сайте Dot Lung используется яркая палитра фиолетового, красного и белого цветов. Он создает ощущение энергии и современности, сохраняя минималистскую общую цветовую гамму.

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

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

Заключение

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

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

• • •

Дальнейшее чтение в блоге Toptal Design:

• Бруталистический веб-дизайн, минималистский веб-дизайн и будущее веб-UX
• Скевоморфизм, плоский дизайн и рост шрифтового дизайна
• Хватит делать мусор: руководство по разработке долговечных интерфейсов
• Используйте свое вдохновение — руководство по мудбордам
• Искусство воровать: как стать мастером-дизайнером