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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Эта статья собой представляет перевод публикации « 6 steps to perfecting minimalism in web design » , подготовленной дружной командой проекта Интернет-технологии.ру