Характеристики минимализма в веб-дизайне

Posted on by riasevastopol

Минималистический веб-дизайн (minimalist web-design) — это дизайн, для которого характерно упрощение интерфейса методом исключения элементов либо контента, не требующихся для ответа задач пользователя.

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

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

  • Истоки минимализма в веб-дизайне

Определяющие характеристики минимализма

Так какие конкретно же характерные черты были характерны практически всем проанализированных сайтов? Определяющими особенностями минимализма были названы те из них, каковые наблюдались как минимум в 75% случаев.

текстуры и Плоские паттерны

Использованы в 96% проанализированных интерфейсов (и обычно неэффективно)

Характеристики минимализма в веб-дизайне

Кое-какие дизайнеры считают, что популярность плоского дизайна (flat design) связана с тенденцией к минимализму при создании интерфейса пользователя. Эти два тренда имеют много сходств: удаление ненужных теней, градиентов, текстур согласуется с главной целью — устранение всего лишнего. В указанной выборке 96% сайтов были плоскими.

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

Интерефейс возможно плоским, не будучи наряду с этим минималистическим.

Страница сайта Jeet.gs имеет совсем плоский интерфейс, включая контурные кнопки (ghost buttons), предназначенные для копирования фрагментов кода (code snippets). (Контурные кнопки — прямоугольные кнопки без заливки, с текстом и тонкими границами.) Но такие кнопки смогут быть не хорошо различимы и не соответствовать общепринятому представлению о том, как обязана смотреться кликабельный элемент. (Однако, в этом случае при наведении курсора на кнопки они подсвечиваются, тем самым обозначая собственную кликабельность. Кроме этого при нажатии на кнопку она демонстрирует маленькой 3D-эффект. Так, интерактивный пользовательский опыт додаёт элементам интерфейса пользователя некую глубину.)

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

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

Твитнуть цитату

  • Плоский дизайн: история, неприятности и эволюция

Ограниченная либо монохромная цветовая палитра

Использована в 95% проанализированных интерфейсов

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

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

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

Около половины проанализированных сайтов (49%) применяли монохромную цветовую гамму. Практически столько же сайтов применяли один либо два акцентных цвета (accent colors) в иных монохромных цветовых палитрах (46%, 52 сайта). Из 55 монохромных сайтов — 51 применял только белый, тёмный и серый цвета.

Монохромная палитра домашней страницы сайта Freres d’Encre (французский тату-салон) формирует ясный дизайн

Сайт Solo (ПО для управления проектами) применяет монохромную, но уже не в градациях серого (grayscale), цветовую палитру

Сайт метапоисковой совокупности для путешественников Kayak применяет оранжевый цвет для выделения кнопки и своего логотипа «Поиск»

При применении ограниченной цветовой палитры принципиально важно учитывать два главных момента:

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

Ограниченное количество элементов и функций

Использовано в 87% проанализированных интерфейсов

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

  • пункты меню
  • ссылки
  • изображения
  • графика
  • линии
  • заголовки
  • текстуры (к примеру, градиенты)
  • цвета
  • шрифты
  • иконки

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

Сайт-портфолио писателя Алана Троттера (Alan Trotter) — строго минималистический. По умолчанию он кроме того не раскрывает полного имени писателя: для получения более подробной информации визитёры должны кликнуть по выделенному тексту. Такая стратегия, возможно, формирует уникальный внешний вид, но наряду с этим скрытие самый важного контента — достаточно рискованное мероприятие.

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

Максимизированное отрицательное пространство (negative space)

Использовано в 84% проанализированных интерфейсов

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

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

Этот скриншот демонстрирует домашнюю страницу сайта французского дизайнера Томаса Буффета (Thomas Buffet) так как она выглядит на экране 15-дюймового MacBook Pro. Выше линии сгиба страница состоит фактически из одного безлюдного пространства. Но сайт так же, как и прежде в состоянии ответить на два основных вопроса собственных визитёров: «кто он» и «чем он занимается».

Однако этот подход трудится не в любых ситуациях.

Надлежащее применение отрицательного пространства окажет помощь привлечь интерес визитёров к ответственному контенту. При работе с этим инструментом в обязательном порядке продумайте следующее:

  • Как добавление/удаление свободного пространства повлияет на восприятие иерархии страницы?
  • Как оно скажется на том, какой контент будет отображен в верхней части страницы? «Линия сгиба» так же, как и прежде имеет значение: визитёры будут прокручивать страницу вниз при необходимости, но однако они уделят больше внимания контенту, расположенному в ее верхней части.
  • Как отрицательное пространство повлияет на цена сотрудничества (interaction cost): не придется ли пользователям прилагать больше упрочнений для нахождения нужной им информации?
  • Как отрицательное пространство будет изменяться при разных разрешениях экрана?

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

Твитнуть цитату

Ясная типографика

Использована в 75% проанализированных интерфейсов

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

На сайте-портфолио арт-директора Александра Энгцеля (Alexander Engzell) использована увлекательная типографика для тэглайна, благодаря чему страница выглядит эффектно без применения дополнительных графических элементов. Однако текст представляет собой графический файл, увеличивающий время загрузки страницы. Помимо этого, на данной странице не указано прямо, кому в собственности данное портфолио либо чем занимается его создатель.

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

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

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

  • Меньше, да лучше: из-за чего простое постоянно продаёт?

Сопутствующие тренды

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

Большие фоновые изображения либо видео

Использованы в 57% проанализированных интерфейсов

Наличие большого фонового изображения (image background) либо фонового видео (video background) есть одной из самые спорных черт минималистичного веб-дизайна.

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

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

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

Если вы решите применять этот прием, обязательно учтите следующие моменты:

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

Сетчатая разметка (grid layout)

Использована в 43% проанализированных интерфейсов

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

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

Агентство дизайнаPaprika применяет сетку для организации собственных проектов на странице, не смотря на то, что сайт наряду с этим не респонсивный

На десктопном сайте-портфолио фотостудии Sea Chant фотографии расположены по сетке

При ширине экране в 400px фотографии портфолио Sea Chant выстраиваются в одну колонку и исчезают все hover-эффекты

  • Перечень vs. Сетка: секреты юзабилити мобильного интерфейса

Круглые графические элементы

Использованы в 16% проанализированных интерфейсов

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

На домашней странице минималистического сайта Gesture Theory использовано пара круглых элементов

Скрытая глобальная навигация

Использована в 13% проанализированных интерфейсов

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

На сайте-портфолио дизайн студии Visual Soliders глобальная навигация скрыта за иконкой гамбургер-меню

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

  • Создание мобильной навигации независимо от гамбургер-меню

Довольно часто видящиеся показатели в минималистических интерфейсах

Совершённый анализ 112 сайтов распознал следующие определяющие характеристики минималистического веб-дизайна:

  • текстуры и Плоские паттерны
  • Применение ограниченной либо монохромной цветовой палитры
  • Строго ограниченной число графических элементов и функций
  • Максимизированное отрицательное пространство
  • Применение эффектной типографики для передачи иерархии сайта либо создания визуального интереса

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

Помимо этого, изучение распознало кроме этого пара схожих тенденций, находившихся менее чем на 75% проанализированных сайтов:

  • Большие фоновые изображения либо видео (57%)
  • Сетчатая разметка (43%)
  • Круглые графические элементы (16%)
  • Скрытая глобальная навигация (13%)
  • Дизайн лендингов: преимущества минимализма с позиций психологии восприятия

Заключение

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

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

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

«Минимализм для минимализма» никак не окажет помощь вам в достижении цели.

Высоких вам конверсий!

По данным: nngroup.comimage source Justin Wolfe

Случайные статьи:

Нужно ли учиться на веб-дизайнера?


Подборка похожих статей:

riasevastopol

More Posts