Минималистический дизайн прост и нескучен. Несмотря на то, что в таком дизайне не хватает того, что есть в других стилях (различных украшений, богатой цветовой палитры, художественных шрифтов), на скромный проект все равно приятно смотреть. Даже больше – хочется смотреть и рассматривать. И дело в том, что дизайн в минималистическом стиле вполне может быть самым красочным и ярким среди конкурентов в интернете.
Стиль сам по себе всегда един, но отдельные элементы могут использоваться в том или ином проекте, или не использоваться, могут иметь разный собственный стиль и вид. Это можно назвать тенденциями минимализма, которые периодически меняются. Так как же создать теперь современный минималистический веб-дизайн? Какими использовать отдельные элементы, чтобы сайт выглядел именно «ноу-хау», а не просто: «да, красиво, модненько».
Это просто
Упрощение и еще раз упрощение – тот ключ к дизайну минимализма, который необходимо использовать всегда. Это нелегко спроектировать. Простота – не значит, что на странице должно быть пусто и располагаться всего одна картинка и две ссылки. Даже простые, но функциональные элементы сложно придумывать, развивать, «обыгрывать».
Удобным вариантом проектирования может стать смена приоритетов в начале работы. Начните с подбора шрифта и цветовой палитры. Подумайте о главном элементе проекта, о его визуализации и о том, как можно добиться того, чтобы пользователи смотрели на него и этот элемент мог сообщить им нужное. Визуализируйте свое сообщение и сможете уже получить простую конструкцию проекта.
Посмотрим на theassemblage, art-cross, kopema, everest, lobster. Все проекты имеют мало элементов на страницах, много свободного пространства, модульные макеты и прочее. Но при этом они оснащены и эффектом параллакса, и анимацией. В итоге все выглядит простым, понятным, наглядным. Это – минимализм. Это минимум элементов и большой смысл.
Необычность типографики
Шрифты в течение нынешнего года будут играть судьбоносное значение для всего проекта, вне зависимости от выбранного веб-дизайнером стиля. В минимализме не так много визуальных компонентов, ведущих борьбу за внимание пользователей, поэтому типографика всегда должна отличаться ясностью и читаемостью.
Для этого подбирайте не более двух типов семейств шрифтов и создавайте ими на странице строгую иерархию. И аналогично тому, как веб-дизайнер использует сетки для выравнивания расположения элементов (стандарт действий), также и не стоит добавлять иные шрифты к имеющейся паре и не стоит менять/добавлять что-то в иерархию.
Таким образом, какой бы вы не решили создать типографику, она попросту должна быть систематизирована. В минимализме типографика – главное, поэтому стоит продумать ее очень тщательно. Если выбраны два вида шрифта, то не стоит добавлять третий только оттого, что вдруг захотелось использовать рукописный курсивный вариант для одного (!) заголовка.
Отличные и яркие примеры проработанной типографики можно увидеть в dep-mg, magnentus, azura, pawelwaraksa, rftb, narrator. Если внимательно приглядеться (не открывая режим разработчика в браузере), то проекты состоят из двух шрифтов и не более трех-четырех ступеней иерархии (размеров). Одним шрифтом и размером – заголовки, другим шрифтом и двумя размерами – текст, ссылки, меню и пр. Нет ничего лишнего, но красота и приятная визуализация достигается искусным выбором самих шрифтов. Не везде они стандартные (база googlefonts, например), есть и декоративные варианты в сочетании со строгим начертанием.
Пользовательский интерфейс UX
Визуализация проекта и тематики – отлично и необходимо. Но не менее важно проработать и пользовательский интерфейс, который в минимализме весьма неординарен: его и видно, и нет, он и есть и, словно бы, незаметен. Суть в том, что хороший интерфейс интуитивно понятен и не выделяется над визуализацией. Можно даже сказать, что сама визуализация помогает пользователю сориентироваться в контенте.
При минимализме важно создать с помощью кнопок, элементов прокрутки, анимации целостный UX, который не потребует у пользователя времени на его изучение. Не нужно заставлять посетителей думать: «куда нажать и зачем? Что будет, если нажму?» Если дизайн визуально очень простой, то, возможно, стоит сделать у элементов управления некоторые всплывающие подсказки.
В общем и целом, суть в том, чтобы интерфейс был и не был одновременно. Воздушность и легкость – ключевые моменты стиля вне зависимости оттого, модно использовать меню-«гамбургер» или нет; кнопки должны быть с тенью или без неё; использовать только текст или графические элементы и иконки. Все это для минимализма неважно.
Посмотрим на sherpahire, domyinak, mont-roucous, ting, matchmade, ctrl7. В совокупности на них есть всё – иконки, строки меню, кнопки, текстовые ссылки, анимации и прокрутки – из чего формируется UX. На сайтах понятно куда нажимать и зачем. Но при этом разные проекты отлично обходятся только типографикой или только графикой для формирования интерфейса. Разные графические стили, типографические, но единый визуальный минимализм.
Упорядочивание
Отсутствие беспорядка – как раз то, что отличает минимализм от прочих стилей веб-дизайна. После того, как вы создали дизайн странички, стоит подумать над тем, каждый ли элемент служит той цели, для которой создавался? Не выглядит ли он украшением? Что будет, если его убрать? Логично, если без элемента/блока можно обойтись, то стоит задуматься, действительно ли они нужны. Возможно, стоит пересмотреть всю конструкцию дизайна.
Не имеет значения, строгие или ассиметричные сетки использовались для выравнивания. Беспорядок иногда возникает от обилия элементов, которые можно и не использовать вовсе. Видя сайты в интернете, мы часто хотим добавить в свои дизайны больше, чем нужно.
Несмотря на сложный процесс поиска и удаления ненужных элементов, именно это действительно способно привести дизайнеров к созданию более чистого, более целенаправленного дизайна. Четкое понимание слоев, пропорций, расстояний является ключом к упорядочиванию в целом.
Посмотрим на space, seedlipdrinks, andrgavr, clemenshill, futuregeneration. При первом взгляде на эти сайты кажется, что изображения попросту «накиданы» на страницу как попало и необходимо долго подбирать, какая надпись к чему относится. Но одновременно с просмотром контента становится все на свои места. Асимметричность и симметричность соединяются во многих проектах, прекрасно упорядочивая весь немалый объем изображений и текстовых блоков. При этом наличие также немалого количества пустого пространства позволяет плавно и последовательно все рассмотреть и изучить. Таким образом, упорядочивание является еще одним ключом к минимализму.
Открытость
Возможно, это может показаться возвратом к упорядочиванию. Но на деле – немного не так и не о том. Создание открытого, свободного пространства (концепция открытости, о которой мы рассказывали отдельно) необходимо для привлечения внимания и уравновешивания тяжелых конструкций. Основное отличие здесь – полное отсутствие симметрии или использование узоров в фоне. Иными словами, цель в том, чтобы сделать пространство частью всего дизайна.
Уделим внимание wavemakerlabs, andrgavr, legacyrules, stphilipshomes. Что интересного в них? Пространство (не обязательное светлое) помогает вертикальной и горизонтальной навигации. Изображения размещаются чуть в сторонах от центра, что позволяет взгляду плавно перемещаться от одного элемента к другому. Типографика легкая, шрифты тонкие и благодаря этому конструкция воспринимается проще.
Гармония
Любой элемент веб-дизайна может и должен быть сбалансирован другим элементом, более легким или тяжелым. Это создает гармонию. Когда используются крупные заголовки и названия всегда рядом есть текст мелким шрифтом. Это – баланс.
Многие минималистические проекты грешат использованием крупного шрифта без использования баланса. Это создает некий дискомфорт в восприятии. Кроме текста в этом случае взгляд ничего более не улавливает, не видит. Поэтому таких вариантов лучше избегать и не создавать нечто однобокое и подавляющее.
Проекты blab, mzeppieri, bscmp, downtown-philly используют крупный шрифт или большое количество текста, написанное довольно крупным размером шрифта, но при этом взгляду удобно и легко рассмотреть и окружение данного текста. Достигается это или использованием анимированного фона, цветного, или художественными эффектами для части текста, жирным выделением. Таким образом, текст не теряется на странице и ему нечего поглощать собой. В буквальном смысле, его ничего не окружает, а то, что есть на странице, находится на значительном расстоянии.
Завершение
Работая над дизайном сайта, можно отказываться от некоторых элементов, находить интересные сочетания шрифтов, но это не сможет приблизить ваш дизайн к минимализму. Суть минимализма в том, что некоторые тенденции веб-дизайна имеют очень малое проявление в этом стиле, а те, что присутствуют, обычно сочетаются с фотографиями или анимацией (видео), типографикой.
Чтобы минимализм действительно выглядел современным, не стоит «гнаться» за модой и использовать сразу все, что появилось новенького на данный момент. Попробуйте скомбинировать стили. Оттолкнуться от той мысли: сегодня «это» модно, завтра – уже нет, поэтому лучше сделать «это» простым и универсальным.
Обилие элементов тоже не показатель отсутствия минимализма. Примеры выше отлично показали, что элементов конструкции может быть много, очень много, но упорядочивание и свободное пространство с балансом позволяют создать гармонию. Минимализм – непростой стиль. Его сложно проектировать, но и интересно одновременно.