Как выбрать стиль дизайна сайта – разбираем на практике

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

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

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

Для сравнения разных стилей, мы взяли кейс по оформлению сайта доставки воды, а именно главную страницу.

Минимализм

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

Что касается шрифтов: для дизайна в стиле минимализм часто используют простые гротески – шрифты, в которых отсутствуют засечки. Такой текст смотрится просто и аккуратно. Хорошо в минимализме выглядят большие заголовки, они хорошо передают смысл.

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

Работать в стиле минимализм и создать дизайн так, чтобы это было не пусто, а красиво – довольно трудно. Поэтому минимализм – не такой уж простой стиль.

Flat

Стиль, который с течением времени очень сильно деформировался. Первоначально флэтом считался максимально плоский дизайн, без теней, градиентов, объема. Его главной особенностью было полное игнорирование действительности: никаких изображений и фото.

Сейчас у флета также есть определенные правила:

1. Двухмерность. Никакого объема: теней, фактур, бликов, отображений и трехмерных изображений. Флэт дизайн = плоский дизайн.
2. Присутствие признаков минимализма. Никаких лишних украшений.
3. Четкие контуры. Изображения во флэт дизайне должны быть упрощены, без лишних деталей. Часто достаточно схематичных изображений.
4. Контраст. Данный стиль не терпит градиентов. Цветовые переходы придают дизайну глубину, которая флэту не нужна. Следует выбирать яркие или приглушенные цвета с максимальным контрастом.

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

Необрутализм

Необрутализм происходит от классических корней брутализма, архитектурного движения 50-70-х годов XX в., когда в строительстве преобладали необработанные материалы, такие как бетон. Брутализм набирает обороты в веб-дизайне с момента цифрового возрождения в 2014 году. Примитивный HTML без использования стилей, простые фоны, ассиметричные макеты, стандартные компьютерные шрифты и необработанные фотографии – это характеризует цифровой брутализм. Этот стиль создан быть строгим, жестким.

Рассмотрим несколько основных характеристик брутализма:

• Сверхвысокая контрастность

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

• Тени

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

• Цвета

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

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

• Типографика

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

• Иллюстрации

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

Кажется, здесь нет никаких правил – некоторые линии толстые, некоторые тонкие, и все выглядит немного хаотично.

Швейцарский стиль

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

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

Рассмотрим основные характеристики этого стиля:

• Модульная сетка

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

• Шрифты и типографика

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

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

• Фотографии и иллюстрации

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

ВЫВОД

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