Когда и как использовать минимализм в дизайне сайта

Давайте сначала избавимся от неправильного представления о минимализме. То, что меньше всего можно увидеть, не означает, что это проще. На самом деле все совсем наоборот. Чем меньше у вас есть, тем больше времени вам нужно потратить, чтобы убедиться, что каждый элемент, который у вас есть, соответствует деньгам.

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

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

Если это то читайте дальше, читайте дальше! Мы спускаемся в кроличью нору.

Негативное пространство

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

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

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

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

Фото

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

Я имею в виду это двумя способами.

1. Очевидно, убедитесь, что фотография не слишком загромождена объектами или людьми, так как это сведет на нет всю цель вашего минималистского дизайна.
2. Однако этого недостаточно, так как намек на быстрое движение или опасность так же способен привлечь внимание к изображению и отвлечь его от основного элемента, который вы пытаетесь отобразить. На самом деле, даже демонстрация негативных эмоций может отвлечь людей от того, на чем вы действительно хотите, чтобы они сосредоточились.

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

Типография

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

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

Но, конечно, нужно учитывать не только читабельность, но и то, какие эмоции вызывают шрифты. Да, верно, разные шрифты по-разному влияют на людей, такие шрифты, как Times New Roman, чаще ассоциируются с такими эмоциями, как «забавный» и «злой», чем Ariel.

Я предупреждал вас, что минимализм не для слабонервных!

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

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

Контраст и позиционирование

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

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

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

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

Кнопка «Гамбургер» и другие макеты

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

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

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

Визуальный стиль

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

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

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

Стоит ли идти на минимализм?

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

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

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

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

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

И это вполне может окупить весь пот и тяжелую работу.

Конечно, на время забывая, что минималистичные страницы просто красивы.