Современные стили веб-дизайна: от минимализма до сложной эстетики

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

Это не один элемент, а система, в которую входит:

Правильно подобранный стиль помогает решить сразу несколько задач ↓

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

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

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

Кому подойдёт. Минимализм универсален, и его применяют в самых разных направлениях: от бьюти-индустрии до IT, чтобы подчеркнуть премиальность и технологичность.

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

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

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

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

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

Кому подойдёт. Чаще максимализм встречается в творческих индустриях — на сайтах креативных агентств, художников и музыкантов, а также на страницах, созданных для продвижения фильмов и художественных проектов.

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

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

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

Конструктивизм пришёл в веб-дизайн из полиграфии и архитектуры. Основу стиля составляют асимметрично расположенные фигуры: круг, квадрат, многоугольники. За счёт геометрии страницы выглядят динамично и энергично. Вид такого сайта можно сравнить с советским конструктивистским плакатом — работами Маяковского, Родченко и Лисицкого.

Популярные цвета в конструктивизме: чёрный, белый, красный и серый. Шрифты используются броские, функциональные, без декоративных элементов — так текст сразу приковывает внимание и легко считывается. Блоки обычно крупные, рассредоточенные по краям страницы. Линии прямые и чёткие, без мелких и изогнутых элементов. Часто используются фотографии и анимация. Элементы при этом могут соседствовать, как на коллаже, и наслаиваться, как на аппликации.

Недостаток. Не так информативен, как, например, минимализм, и не подходит для передачи большого количества контента.

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

Рисованный стиль строится на ручной или псевдоручной графике: иллюстрациях и рукописных шрифтах.

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

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

Ретро-стиль отсылает к прошлому. Чаще всего под ним понимают винтажный стиль середины прошлого века: например, тёмную культуру нуарного кино или, наоборот, оптимистичную эстетику пинап-плакатов.

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

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

Это направление можно отнести к ретро — но если в винтажном прочтении стиль воссоздаёт в интерфейсах предметы из середины прошлого века, то Y2K отсылает к детству и юности миллениалов, 1990-м и 2000-м.

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

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

Название стиля отсылает к японским ланч-боксам с маленькими отделениями под каждое блюдо или закуску. Бенто в веб-дизайне тоже использует небольшие секции с закруглёнными углами и отсутствием пустого пространства. Этот стиль часто называют модульным или плиточным.

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

Недостаток. Не подойдёт сайтам с маленьким количеством контента — страницы с несколькими полупустыми плитками будут выглядеть неубедительно.

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

Характер подхода передан в названии — такой дизайн сайта заимствует элементы и приёмы вёрстки из The New York Times, Vogue, Harper’s Bazaar и других газет и журналов.

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

Недостаток. Требует постоянного обновления контента — страница с устаревшими материалами будет выглядеть заброшенной.

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

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

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

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