6 шагов совершенствования веб-дизайна в стиле "минимализм"

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

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

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

1) Встречайте плоский дизайн

Мы все знаем, что flat-дизайн, по существу, является ответом на скевоморфизм (который выпал из тренда) в мире дизайна и Apple является тому ярким примером.

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

Один из больших брендов, нашедших впечатляющее применение плоскому дизайну - компания Microsoft, в особенности в Windows 8. На официальном сайте компании для последней, 8.1 версии, мы видим плоский дизайн во всей его красе. И это имеет смысл, так как обновленная Windows 8 имеет стартовую страницу именно в этом стиле.

Потому и на сайте вы не увидите никаких 3d-эффектов и градиентов — все в 2D. Графика шрифтов в заголовках не допускает никаких текстур; структура страницы прозрачна и ничем не загромождена; иконки и кнопки яркие и плоские, какими им и стоит быть; такие же, как и картинки в стартовой странице Windows 8, выполненные в стиле flat:

2) Используйте пробелы

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

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

Вы столько раз видели его, что перестали обращать на него всякое внимание. Я веду речь о Google Search.

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

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

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

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

3) Ограничивайте выбор

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

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

Самый яркий пример использования данного принципа на все 100% - лендинг-страницы. А пример компании, которая положила принцип минимализации вариантов выбора в основу своей лендинг-страницы - компания Gengo, специализирующаяся на переводе.

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

Конечно же, найдутся сторонники минимализма, которые будут утверждать, что и меню сверху нужно убрать. Так это может сбить пользователя с «верного» пути:

4) Сосредоточьтесь на жирных шрифтах

Если хотите ощутить по-настоящему минималистичный дизайн - отправляйтесь в гости к Brian Danaher’s. Брайн - арт-директор, дизайнер и иллюстратор.

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

• Так как навигация исполнена в одну колонку, у Брайна есть возможность в правой части сайта рассказать о себе, о том, что он делает, и как с ним можно связаться;
• Успешно используются контрасты (как в случае с цветами шрифтов фона, так и в части размеров и стилей шрифтов), чтобы заинтересовать посетителей:

5) Упрощайте навигацию по сайту

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

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

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

6) Выделяйте цветом

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

Сайт 960 Grid System, чья миссия заключается в рационализации процесса веб-разработки, является очень хорошим примером умного использования цветов. Скажите, вы ведь заметили небольшие пятна желтого цвета, которыми обозначены ссылки «download» и «view demo»?

И даже кликабельный логотип Twitter в правом верхнем углу выделен пятном ярко-голубого цвета, которое привлекает внимание посетителей (а перекидывает эта ссылка напрямую в Twitter хозяина/дизайнера Nathan Smith’):

Минимализм работает, если вы знаете, как его использовать

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

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

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