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

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

Рассказываем, из чего состоят стили в веб-дизайне, какими они бывают и на что стоит ориентироваться при выборе.

Что такое стиль в веб-дизайне и из чего он складывается

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

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

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

Как стиль влияет на доверие и поведение пользователя

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

• Формирует первое впечатление. Первое столкновение пользователя с сайтом похоже на работу системы «свой-чужой»: человек попадает на страницу, мгновенно считывает общую чистоту композиции, цвет, типографику, наличие знакомых паттернов и делает выводы, доверять ли ресурсу. Это же впечатление может распространиться и на сам продукт.
  
  
• Доносит нужный посыл о продукте. Например, яркие акценты подскажут, что в компании царит дух стартапа — она полна энергии и свежих идей. А качественная анимация и сложная типографика создадут эффект премиальности.
  
  
• Подтверждает надёжность. Сайт укрепляет доверие к продукту, если стиль дизайна совпадает с контекстом. Например, на сайте банка или страховой компании пользовали ожидают увидеть сдержанный дизайн, чёткую организацию и строгую типографику.
  
  
• Показывает креативный продукт «лицом». Если для банка важно подтвердить надёжность, то художник, дизайнер или творческая студия могут использовать сайты как возможность заявить о своей креативности. В этом случае яркая страница в рисованном или бруталистском стиле работает как ещё один кейс в портфолио.
  
  
• Управляет вниманием и подводит к целевому действию. Стиль определяет, насколько быстрым и удобным будет путь пользователя к заполнению формы или нажатию кнопки «Купить». Интерактивные элементы могут заинтриговать и сделать этот путь увлекательным, но иногда важнее простота и лаконичность — всё зависит от продукта.

Современные стили веб-дизайна: 10 популярных вариантов с примерами

Минимализм

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

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


Ничего лишнего — даже скриншоты проектов ограничены экраном монитора. Источник: Moritz Petersen

Преимущества:

• Не перегружает пользователя визуальной информацией и упрощает восприятие контента.
  
  
• Фокусирует внимание на главных элементах.
  
  
• Придаёт продукту премиальный вид.
  
  

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

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

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

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

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


Классика швейцарского стиля — иерархия страницы задана исключительно текстом, написанным шрифтом без засечек. Источник: Neutra VDL

Преимущества:

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

Недостатки:

• Ещё более ограничен в приёмах, чем минимализм — есть риск сделать сайт, который будет выглядеть шаблонным.
  
• Не вызывает ярких эмоций.

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

Максимализм

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

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


Максимализм помогает выразить хаос, который происходит в квартире с тараканами и грызунами. Источник: Pest Stop Boys

Преимущества:

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

Недостатки:

• Часто уводит от целевого действия — чем больше ярких элементов, тем труднее пользователю найти кнопку «Купить» или «Оставить заявку».
  
• Требует развитых навыков и чувства вкуса от дизайнера.
  
• Дорог в производстве — такую работу нельзя собрать по шаблону.
  
  

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

Брутализм

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

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


На странице раздражает всё — и шрифт, и ошибки в предложении, и стандартные эмодзи, и нечитаемый амперсанд (&), и подушка из магазина приколов, летающая по экрану. Источник: Problem Studio

Преимущества:

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

Недостатки:

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

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

Конструктивизм

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

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


Характерная для стиля геометрия. Источник: Nine To Five

Преимущества:

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

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

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

Рисованный стиль

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

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


Иллюстрации встречаются в самых разных элементах интерфейса — тут одна из них даже заменяет курсор. Источник: The Genius Club

Преимущества:

• Выглядит оригинально и эксклюзивно — такие сайты не повторяются.
  
• Вызывает тёплые эмоции.
  
  

Недостатки:

• Сложен в производстве, так как требует навыков рисования.
  
• Не информативен и не подходит для сложных интерфейсов с большим объёмом информации.
  
  

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

Ретро

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

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


История развития транспорта — с ретро-иллюстрациями и на текстуре состаренной бумаги. Источник: Oliver Wyman Forum

Преимущества:

• Вызывает чувство ностальгии.
  
• Комфортен для восприятия.
  
  

Недостатки:

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

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

Y2K

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

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


Сайт в интерфейсе Windows XP — каждое окно можно открыть, свернуть или переместить. Источник: Mitch Ivin


Преимущества:

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

Недостатки:

• Может быть сложен в производстве и оптимизации.
  
• Легко сделать «как у всех» — стиль популярен и часто используется.
• Как и ретро, сложно адаптируется под мобильные экраны — даже если оптимизировать, эффект погружения в эпоху теряется.
  

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

Бенто

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

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


В другом виде страница с таким количеством данных выглядела бы перегруженно или скучно. Источник: Greenly


Преимущества:

• Удобен для восприятия большого количества информации.
  
• Легко адаптируется под мобильные экраны.
  

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


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

Журнальный стиль

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

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


Экран на сайте в журнальном стиле похож на разворот с содержанием — можно кликнуть (перейти на нужную страницу) и прочитать материал полностью. Источник: GQ


Преимущества:

• Подходит для размещения больших объёмов текста.
  
• Удобен для чтения — как журнал или газета.
• Легко масштабируется и обновляется — как правило, добавлять материалы можно через «админку» без навыков программирования и дизайна.
  

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


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

Как выбрать стиль для своего сайта: пошаговый гайд

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

• Определить задачу и критерии успеха. Начать стоит с цели: что должен делать сайт — продавать, собирать заявки, презентовать продукт или работать как медиа. Также полезно определить критерии успеха, например конверсии, время на странице или показатель отказов. Если важна эффективность и скорость, решение будет проще и функциональнее, а если нужно впечатлить и запомниться, что-то более креативное.
  
  
• Проанализировать аудиторию. Полезно понимать портрет пользователя: социально-демографические признаки, интересы, боли и ожидания от интерфейса. Если посетитель сайта консервативен, стоит выбирать минималистичные стили. Молодая и креативная аудитория легче воспринимает нестандартные решения.
  
  
• Изучить конкурентов. Анализ сайтов в нише подскажет, какие стили обычно в ней используются и какие решения встречаются чаще остальных. Можно предположить, что и ваш пользователь ожидает что-то подобное. И тут тоже есть выбор: оправдать ожидания, усилив доверие, или осознанно отстроиться, чтобы выделиться.
  
  
• Определиться с тоном коммуникации. Понимание задач, аудитории и конкурентов поможет выразить идеи, которые должен транслировать сайт. Это может быть технологичность, креативность, премиальность, дружелюбие, дерзость. Понимание ключевых качеств ограничивает и выбор стилей: например, дружелюбный характер передаёт рисованный стиль, а дерзость — брутализм и максимализм.
  
  
• Оценить ресурсы. Чем сложнее решение, тем дороже его реализация. Поэтому важно оценить, сколько часов у дизайнеров и разработчиков займёт вёрстка сайта или какой бюджет стоит заложить на услуги фрилансеров. Возможно, для решения актуальных задач подойдёт простая версия, сделанная по шаблону в конструкторе, например Tilda или Readymag.
  
  
• Запланировать будущие доработки. Сайты редко существуют годами в одном виде. Стоит заранее подумать, как поддерживать его работу, масштабировать, обновлять и дополнять контент. Простые и типовые решения обслуживать легче, чем индивидуальные и креативные.
  
  
• Собрать мудборд. Мудборд — это виртуальная доска с удачными примерами, на которые дизайнер ориентируется при создании сайта. Референсами могут быть сайты других компаний и кейсы на площадках Behance, Dribbble и Awwwards. Нужно постараться не копировать чужие решения полностью, а находить удачные сочетания цветов, шрифты, композиционные и другие приёмы. Такой подход поможет сформировать насмотренность и глубже понять, как работают стили в веб-дизайне на практике.
  
  

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

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

По материалам сайта Нетология.