WebValley Studio

Гайд по направлениям и стилям в веб-дизайне

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

Почему дизайнеру нужно разбираться в стилях

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

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

Основные стили сайтов в веб‑дизайне 2022 года

Нет четкой единой классификации стилей. В разных источниках можно встретить варианты или подборки ТОП-10. Это связано с тем, что ниша достаточно молодая, активно растет. В UI‑дизайне появляется 20−30 трендов в год, из которых 15−20 так же быстро улетучиваются, отчего любая стилистика понемногу видоизменяется, пока сама не преобразуется в отдельное движение.

Рассмотрим основные стили в оформлении сайтов с точки зрения нашей студии:

● Классический;
● Минимализм;
● Рисованный;
● Метро (карточный);
● Полигональный;
● Флэт (плоский);
● Брутализм;
● Фестивальный (промо);
● Гранж;
● Ретро;
● Organic & Natural.

Классический стиль

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

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

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

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

Минимализм в веб-дизайне

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

Хочется крикнуть «мы делаем ставку именно на этот стиль» =). И да, дизайнеры: вас, вероятно, задолбали уже статьями на тему минимализма, но сорри, без него никак. Тем более это главный стиль для нашего агентства)

Современный минимализм это не пустота и простота. Мы не о скуке тут вещаем! Часто, услышав минимализм, заказчики представляют белую комнату, с белым полом, белыми стенами, белым столом, стулом, и дешманским белым шкафом за 2000 рублей. Такая аля neo‑келья. Но это дикое заблуждение, минимализм не про дешман и отсутствие всего и вся.
«Добиться сочетания эстетики, функциональности, удобства и атмосферности — вот что главное при работе с минимализмом».
Алексей Гамов
Цветовые решения просты и минимальны. Часто это один цвет или монохром. При этом цвет не обязательно должен быть нейтральным белым или черным. Минимализм приветствует любые цветовые решения, если они задают верный тон и правильным образом акцентируют внимание. Значит, наш пользователь не будет блуждать глазами по китайскому рынку, легко считает нужную информацию и за долю секунды поймёт, куда нажать.

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

Типографика может быть как очень сложной, так и простой, лаконичной. Так как в стиле минимализм контент на первом месте, то именно типографике уделяется особое внимание. Шрифты могут быть элегантные с засечками, строгие без засечек, крупные, стандартные, яркие и скромные. Выбор зависит от общего настроения сайта, позиционирования бренда. Главное — ничего лишнего: фото только по теме, текст в минимальном объёме, тезисно. Никаких сложных текстур из кирпичей под текстом, объёмных текстурированных букв, аляпистых баннеров. Лучший пример для понимания — это такие компании, как: Bork, Apple, BornFight.

Это самый популярный (и на наш взгляд грамотный) стиль оформления сайтов. Он может использоваться почти в любой нише: от технологий до парашютинга. Минимализм отлично смотрится в Fashion, Travel, бьюти, производстве, современных технологиях, IT, личных портфолио, интернет-магазинах, дизайне интерьеров. Вообще он идеально подходит в случаях, когда нужно:

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

Зачастую современные, молодые, премиальные, прогрессивные компании выбирают именно минимализм.

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

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

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

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

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

Шрифты в данном стиле часто также рукописные, либо простые, аккуратные, классические, преимущественно гротески (без засечек).

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

Стиль Метро в веб-дизайне

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

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

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

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

Шрифты простые, универсальные, без засечек. Главный принцип — доступность и удобство чтения. Сетка на таких сайтах преимущественно модульная.

Стиль метро используют для интернет-магазинов, корпоративных сайтов, сайтов-визиток, портфолио, блогов в разных видах деятельности. Хорошие примеры — сайты Microsoft и Xbox:

Полигональный стиль

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

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

Строго говоря, в сайтах, чтоб прям весь макет был в полигональном стиле, — это крайняя редкость. Так как, даже с точки зрения CSS кода, разработка таких решений — супер трудоемкий процесс. В основном полигональность используется в отрисовке логотипов, элементов фирменного стиля, паттернов для фона, элементов дизайна и т. п. Такие сайты и приложения зачастую яркие, футуристические, отражают динамичность бренда. За счёт контрастности между полигональной фигурой и фоном, а также слоистым расположении элементов дизайна достигается эффект глубины и объёма на сайте.
полигональный стиль сайта
Обычно дополнительные детали отсутствуют, текст используется по минимуму, другой графики нет, так как полигоны в центре внимания и не нуждаются в излишнем украшательстве. По факту, самое главное в данном стиле — «картинки из треугольничков». А за счёт теней, контрастности полигонов друг к другу, анимации, цветовых сочетаний уже создаётся ощущение динамики и объема изображения.
геометричный веб дизайн
Важно, что как и в рисованных сайтах, графика (полигональные иллюстрации) либо закупается на стоках, либо нанимается художник-иллюстратор, либо в случае сложных анимированных сцен — прокаченный Front-end разработчик подобных историй. Всё это + к стоимости, + к срокам.
Готовы создать сайт прямо сейчас. А вы?

Стиль Флэт

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

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

Типографика в данном направлении простая, понятная, аккуратная. Это простые гротески (шрифты без засечек) и классические общепринятые размеры в оформлении заголовков и основного текста.

Сетка также простая — модульная либо 2−3 колонки.

Плоский дизайн подходит для любых ниш бизнеса. Это корпоративные сайты, сайты крупных компаний, портфолио, визитки, интернет-магазины. Большую популярность стиль набрал в UI‑дизайне десктопных интерфейсов и мобильных приложений.

Брутализм

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

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

Кислотные цвета в приоритете при построении дизайна, часто это сочетания красного и зеленого оттенков.

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

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

У брутализма есть как плюсы, так и минусы.
К плюсам можно отнести простой подход при создании дизайна — не нужно много времени тратить на составление ТЗ, проработку структуры, сетки и логики.

Из минусов — впечатление пользователя. Не всем заходит смелый и неоднозначный дизайн в данном стиле. Существует риск испортить впечатление и потерять пользователя.

Поэтому из-за специфического оформления у брутализма мало сфер для применения, скорее это дизайн ради дизайна. Может использоваться на торговых площадках, форумах, креативных энциклопедиях, узконаправленных портфолио или нестандартных, креативных фестивалях.
«С точки зрения продающего инструмента для крупных компаний, агентств и прочих бизнесов, которые не настолько хаотичные, смелые и рисковые, хорошим решением будет микс брутализма и минимализма или флэта. Именно микс набрал мощные обороты и популярность в 2020-х годах — сочетание крупных заголовков, набранных акцидентным шрифтом, с фокусом на типографике или фотографиях, а также иерархическим расположении объектов в макете, наложениями и нестандартными смещением текста. При этом логика, структура и адекватность восприятия информации сохраняются. Такое комбо используют молодежные, современные, прогрессивные бренды, однако добиться грамотного сочетания — назовём это „пропорциями брутализма к адекватизму“ — крайне сложно. На мой взгляд, только сильно прокаченные дизайнеры и креативные агентства делают адекватные миксы, причём за соответствующую большую стоимость. В остальных случаях либо получается брутализм в чистом виде, либо вообще треш. На мой взгляд, те тренды, что стали популярны в 20−21 году (стикеры, наклейки, бегущие наклонные полосы на всю ширину экрана крупными буквами, коллажи из греческих статуй и вылетающих у них из головы магнитофонов) — это отголоски чистого брутализма, встроенные в более удобную, трендовую и понятную концепцию, позволяющую брендам выделиться и уйти от единообразия».
Алексей Гамов

Фестивальный стиль

Яркий, сочный, запоминающийся. Фестивальный стиль или стиль промо характерен для рекламы события, товара, бренда, фестивалей, маркетинговых creative- и event-агентств.

Важный критерий — зрелищность. Необходимо выделиться, запомниться, впечатлить, создать вау-эффект. Преимущественно, фестивальные сайты создаются в виде лендингов / одностраничных сайтов, так как это: сложно, долго, очень дорого, как на этапе дизайна, так и на этапе разработки; для подобных проектов нужны senjor-дизайнеры и фронтендеры. Поэтому в 90% случаев это чисто презентационные рекламные страницы. Говоря прямо — это дизайн, чтобы показать понты =)

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

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

Текст играет второстепенную роль, в основном используются заголовки, слоганы, призывы, точечные тезисы. Тут также есть где развернуться, и допустимы самые нестандартные решения в оформлении. Заголовки могут быть огромными, а могут — классических размеров, это аккуратные гротески или вычурные декоративные (акцидентные) шрифты. К слову антиква (с засечками) крайне редко встречается в промо сайтах, скорее если используется декоративный шрифт, это будет что-то рукописное, как лого Coca-Cola.

Сетка также служит зрелищности и может быть как максимально простой, так и сложной иерархической, с наложениями, неоднородностью размеров объектов и прочим.

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

Гранж

Экстравагантный, брутальный, креативный.

Данный стиль можно охарактеризовать как бунтарский. Смелый и небрежный.
В переводе с английского гранж — отталкивающий, неприятный.

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

Цвета, используемые в стиле Гранж — коричневый, серый, черный, болотно-зеленый, темно‑оранжевый. Часто можно встретить в оформлении различные текстуры, паттерны (например, клетка тетради), трещины, потертости. Кроме этого, в оформлении часто используются различные мелкие детали — значки, эмблемы.

Шрифтовые решения такие же смелые, дерзкие, как и сам стиль — крупные размеры текстов, рукописные или нестандартные шрифты, 3D-эффекты.

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

Ретро

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

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

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

Типографике присущи шрифты с засечками, брусковые шрифты, как отсылка ко временам печатной машинки, рукописные шрифты, леттеринг.

В ретро стиле обычно оформляют сайты компаний схожей тематики — винтажные магазины и выставки, ретро автомобили, а также портфолио фотографов, дизайнеров, артистов.

Organic & Natural

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

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

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

Типографика аккуратная и незаметная. Классические гротески, скромные, женственные декоративные шрифты.

В оформлении используются декоративные элементы: листики, линии, цветы, животные, птицы.

Сетка простая и логически понятная. Обычно колоночная или блочная.

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

Разнообразие стилей дизайна сайтов

Помимо перечисленных стилей UI-дизайна, на просторах интернета гуляют футуризм, арт‑деко, Hi‑tech и множество других. Зачастую стили дизайна могут использовать схожие решения и техники, могут отлично сочетаться и дополнять друга, делая дизайн более цельным. А из этих сочетаний рождаются новые стили, из них новые тренды, из устоявшихся трендов новые сочетания и так по кругу… Следить за этим почти нереально =)

Но есть и не сочетаемые варианты. Например, будет странно увидеть брутальный гранж с природными мотивами или минимализмом :)))

Важно научиться не только определять стили сайта, но и грамотно сочетать их, а также определять, какой стиль отразит tone of voice бренда и подойдёт при разработке дизайна по конкретной задаче. Поэтому, если уж идти на риск, то быть готовым к неожиданному исходу. Рискуй осознанно ;)))
Авторы статьи
Мария Дрокина
UI-дизайнер
07.10.2021
Алексей Гамов
CEO
Доверьте разработку сайта профессионалам!
Оставьте заявку с кратким рассказом о проекте или заполните бриф.
Понравилась статья?
Поделись материалом с другими в социальных сетях — сохрани статью себе для быстрого доступа, поддержи нашу студию!

Подпишись, чтобы быть в курсе!

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