Минимализм
в веб-дизайне
Минимализм — стиль в дизайне, характеризующийся лаконичностью, простотой, точностью и ясностью композиции. Используются простые геометрические формы и нейтральные цвета — чёрный, серый, белый и их оттенки. Истоки минимализма лежат в конструктивизме и функционализме.
Основным фактором является простой и понятный интерфейс, который не представляет разных стилей. Главный принцип в минимализме при создании веб дизайна — это не более трёх цветов. Он также используется в создании иконок, иллюстраций и изображений.
Минимализм становится популярным в изобразительном искусстве и архитектуре. Наиболее выдающимися популяризаторами были графический дизайнер Йозеф Мюллер-Брокман, художник Эллсворт Келли и промышленный дизайнер Дитер Рамс.
Минимализм возникает как реакция на хаотичность и пестроту в работах абстрактных экспрессионистов (таких как капельные картины Джексона Поллока). Сильное влияние на его становление оказало знаменитое немецкое художественное движение Bauhaus, которое сосредоточилось на простом, но функциональном дизайне.
Этот девиз позже станет духом и неофициальной мантрой минимализма в веб-дизайне: меньшее количество элементов на странице приводит к снижению когнитивной нагрузки на пользователей.
Перспектива минималистского искусства была четко сформулирована под девизом известного архитектора 20-го века Людвига Мис ван дер Роэ: «Меньше значит больше».
Радио RT 20 tischsuper, 1961, разработанное Дитером Рамсом для Браун.
Пятерка полного понимания Джексона Поллока (1947) в Музее современного искусства.
Бруклинский мост Эллсворта Келли VII (1962) в Музее современного искусства.
SR Crown Hall, спроектированный Людвигом Мисом ван дер Роэ, 1956 год.
Эксперт по визуализации данных Эдвард Тафти выступил за максимизацию соотношения данных и чернил, которые не дают полезной информации, в виде формулы:
Эта концепция соотношения данных и чернил может быть применена к веб-интерфейсам с учетом соотношения контента и элементов.
СООТНОШЕНИЕ ДАННЫХ И ЧЕРНИЛ = КОЛИЧЕСТВО ИНФОРМАТИВНЫХ ЧЕРНИЛ / ОБЩЕЕ КОЛИЧЕСТВО ЧЕРНИЛ.
Эдвард Тафти
Исследователь HCI Джон М. Кэрролл изучал, как люди используют технические учебные пособия, и искал пути их улучшения. Он разработал теорию минимализма в технической коммуникации. Теория Кэрролла предполагает, что успешный дизайн будет поддерживать быстрые действия, отдавая приоритет краткости.
Кэрролл подчеркнул, что приведение дизайна к его основным элементам не является конечной целью минимализма. Скорее, Кэрролл отстаивал краткость и простоту в обслуживании целенаправленных результатов.
Джон М. Кэрролл
В 1995 году Якоб Нильсен включил минималистичный дизайн в свои 10 эвристик юзабилити. Его использование термина соответствовало чувству минимализма Тафти и Кэрролла, поскольку он выступал за устранение ненужной информации из интерфейсов.
Якоб Нильсен
Начиная с середины 2000-х годов в веб-интерфейсах стали появляться отголоски минималистского художественного движения: меньшее количество контента и ограниченная цветовая палитра. Google часто считают пионером минималистичных веб-интерфейсов.
Google, главная страница. 1999 год.
Google, главная страница. 2019 год.
Появление адаптивного веб-дизайна (RWD) в 2010 году заставило оценить минималистский подход. Чтобы эффективно использовать методы RWD, приходилось тщательно расставить приоритеты для своего контента - отвлечение от основного контента, которое можно игнорировать на десктопе, становится большой проблемой на мобильном устройстве.
Постепенно предпочтения пользователей и дизайнеров стали склоняться к большей простоте в веб-интерфейсах. Этот сдвиг был подчеркнутосовременным дизайном Microsoft. Выпуск Microsoft Windows 8 в 2011 году стал первым значительным обновлением операционной системы за последние десятилетия. В то же время компания объявила о своей философии дизайна - «современный дизайн».
Эта новая философия дизайна была квинтэссенцией минимализма, основанной на минималистском искусстве. Официальная проектная документация Microsoft даже утверждает, что школа Баухауза является одним из ее фундаментальных принципов проектирования.
Windows 8
Apple радикально обновила iOS до более плоского и более минималистичного стиля в версии iOS7. Решение Apple перейти к более минималистичному и плоскому дизайну особенно подчеркивает популярность этой тенденции, поскольку она в корне противоречит историческому стилю дизайна бренда (сквеморфизму).
Apple iOS7
Минималистические принципы дизайна теперь проявляются в новых и неожиданных местах: сайты электронной коммерции, онлайн-публикации и даже образовательные сайты принимают минималистские тенденции и стратегии.
Многие универсальные услуги веб-дизайна и хостинга теперь предоставляют стандартные шаблоны сайтов в минималистичном стиле, что было точно нацелено на людей, не имеющих опыта разработки или проектирования.
История
1983
1990
1995
2000-е
2010
2011
2013
2014-...
Принципы
Подход к разработке программного обеспечения, объявляющий простоту реализации и простоту интерфейса более важными, чем любые другие свойства системы.
20% усилий дают 80% результата, а остальные 80% усилий — лишь 20% результата.
Цвет приобретает дополнительное значение в минимализме. Многие дизайнеры останавливают свой выбор на черном, белом и сером цветах, но в минимализме может быть использован любой цвет из существующих.
ПРОЩЕ — ЛУЧШЕ
ЗАКОН ПАРЕТО
МИНИМУМ ЦВЕТА
Черты
Говоря «плоский дизайн», мы имеем в виду текстуры, иконки и графику в интерфейсе. Понятие «минималистичный дизайн» описывает более общие вопросы организации контента, функций и композиции. Интерфейс может быть плоским, но при этом вовсе не минималистичным.
В плоских интерфейсах нет ни явно выраженных бликов, ни теней, ни градиентов, ни других текстур, благодаря которым элементы выглядят блестящими или объёмными. Иногда выражение «плоский дизайн» нередко ошибочно используют как синоним минималистичного дизайна, но несмотря на общие черты, эти явления имеют разный характер.
ПЛОСКИЕ ПАТТЕРНЫ И ТЕКСТУРЫ
ОГРАНИЧЕННАЯ ИЛИ МОНОХРОМНАЯ ПАЛИТРА
Чем меньше визуальных объектов борются за внимание пользователей, тем более важную и заметную роль играет в интерфейсе цвет. Минималистичные цветовые палитры сильно отличаются от кричащих и спорящих друг с другом цветов, популярных в вебе 2000-х.
На многих минималистичных сайтах используются оттенки одного и того же цвета, либо один насыщенный цвет — причём применяется он осторожно, для акцентировки самых важных элементов. Выделяемые элементы обычно кликабельны.
Используя ограниченную цветовую палитру, стоит учитывать несколько моментов: убедитесь, что сочетание цветов достаточно контрастно — иначе люди со слабым зрением или дальтонизмом не смогут их различить; будьте осторожны и последовательны в работе с акцентным цветом: выделяйте им только самую важную информацию и действия.
УРЕЗЫВАНИЕ ФУНКЦИЙ И ЭЛЕМЕНТОВ ИНТЕРФЕЙСА
МАКСИМУМ НЕГАТИВНОГО ПРОСТРАНСТВА
ЭФФЕКТНАЯ ТИПОГРАФИКА
ИЗОБРАЖЕНИЯ
МОДУЛЬНАЯ СЕТКА
Дизайнер, использующий минималистский подход, должен тщательно продумать каждый элемент интерфейса и избавиться от всего, что не связано с основными функциями или посланием сайта. Под элементом в данном случае подразумевается любая самостоятельная часть интерфейса, в том числе (но не только):
Негативное пространство, или пространство фона — так называют не занятые ничем участки интерфейса. Негативное пространство называют «непременным условием» и «краеугольным камнем» минималистичных интерфейсов. Многие дизайнеры используют его для того, чтобы направить внимание пользователей на нужный объект или облегчить восприятие.
Подобно цвету, смелая типографика и крупные надписи отлично работают, если надо передать сообщение, не загромождая страницу лишними элементами. Грамотно распорядившись возможностями шрифта, можно компенсировать нехватку элементов (например, фотографий и иллюстраций) и сделать минималистичный сайт более привлекательным.
Вариации размера, насыщенности, основных и выделительных начертаний шрифта — лучшее средство помочь пользователям в восприятии иерархии текста и понимании места отдельных фрагментов в общей структуре.
Крупные изображения или видео в качестве фона. Если фоновое изображение используется обдуманно и к месту, минималистский подход поможет сделать так, чтобы остальные элементы сайта с ним не спорили. Часто используются изображения с однородным фоном.
Сетка — отличный способ организовать однородный контент, не прибегая к дополнительным визуальным элементам.
ЭЛЕМЕНТЫ МЕНЮ
ССЫЛКИ
ИЗОБРАЖЕНИЯ
ГРАФИКА
ЛИНИИ
ТЕКСТУРЫ
ЦВЕТА
ЗАГОЛОВКИ
ШРИФТЫ
ИКОНКИ
Примеры
Заключение
В теории минимализм должен противостоять «максимализму», его цель — упрощение контента и построение более эффективных цепочек пользовательских задач. Но на практике мы видим, как минимализм превратился в поверхностный визуальный тренд: дизайнеры копируют внешние признаки минималистичных интерфейсов, не задумываясь, соответствует ли это целям их сайта.
Подобно тому, как скевоморфизм сменился плоским дизайном, на смену «максимализму» пришёл минимализм. Какой бы подход вы ни использовали, нужно руководствоваться здравым смыслом. Минималистский подход может оказаться мощным инструментом, но только тогда, когда учитываются потребности аудитории — минимализм ради минимализма пользователям ничего не даст.
ПРОЕКТ СДЕЛАН В ОБРАЗОВАТЕЛЬНЫХ ЦЕЛЯХ
АРТ ДИРЕКТОР
КУРАТОР
ДИЗАЙНЕР
Поделиться