Стили веб-дизайна: наглядный обзор с цветовыми палитрами
Стили веб-дизайна - это узнаваемые визуальные языки: набор решений о сетке, шрифтах, формах и прежде всего о цвете. В этом обзоре 19 стилей - от исторических течений вроде Bauhaus и Art Deco до современных трендов вроде Glassmorphism и Bento Box. У каждого - миниатюра, типичная цветовая палитра и тип проектов, для которых он подходит.
Примерить свою палитру на эти стили
Как читать этот обзор
Под каждым стилем - скриншот его шаблона с палитрой по умолчанию, краткое описание цветового характера и ссылка на его страницу с живым превью. Откройте любой стиль, чтобы попробовать в нём свои цвета.
Исторические течения в дизайне
Стили, уходящие корнями в искусство и дизайн первой половины и середины XX века. Они построены на строгой геометрии, плоском цвете и уверенной типографике и очень чисто переносятся в веб.
- Bauhaus - Немецкая школа дизайна, 1919-1933. Молочно-белая или почти чёрная основа, плоские заливки и один уверенный основной цвет, часто синий или красный. Подходит дизайн-студиям, образованию и брендам, которым нужна ясность через геометрию.
- Конструктивизм - Советский авангард, 1919-1930-е. Строгая система из чёрного, кремового и красного, плоские заливки и диагональные цветовые блоки. Подходит кампаниям, событиям и смелым редакционным заявлениям.
- Art Deco - Роскошь 1920-1930-х. Почти чёрный лакированный фон, металлическая золотая линия и редкие акценты глубоких самоцветных оттенков. Подходит гостиничному бизнесу, премиальным продуктам и торжественным запускам.
- Swiss Style - Международный типографский стиль, 1950-е. Почти чёрное на белом, строгая колоночная сетка и один яркий акцент, классически красный. Подходит портфолио, агентствам и информационно плотным сайтам.
- Футуризм - Научно-фантастические машины и HUD-интерфейсы. Графитово-чёрная основа с оранжевым свечением реактора и голубой телеметрией. Подходит железу, мобильности и продуктам про производительность.
- Мемфис - Миланская группа Memphis, 1981-1988. Конфликтующие насыщенные цвета на кремовом фоне и толстые чёрные контуры. Подходит игривым брендам, творческим событиям и молодёжным продуктам.
Ностальгия, игры и научная фантастика
Стили, заимствованные из видеоигр, культуры раннего интернета и научной фантастики. Здесь основную работу делает цвет: неон на тёмном, хром и глянец или тёплые закатные тона.
- Pixel Art - 8- и 16-битные игры. Тёмный фон «экрана» и небольшая палитра с одним насыщенным основным и одним контрастным акцентным цветом. Подходит играм, инди-проектам и ностальгическим кампаниям.
- Y2K - Интернет конца 1990-х - начала 2000-х. Холодные насыщенные синие и фиолетовые с одним громким акцентом вроде маджента или циана. Подходит музыке, моде и ретро-техно запускам.
- Frutiger Aero - Технооптимизм середины 2000-х. Бледная небесно-голубая основа, аквамариновый основной цвет с листово-зелёным акцентом и глубокий бирюзовый текст. Подходит велнесу, эко-проектам и дружелюбным потребительским приложениям.
- Ретро - Графика туристических плакатов 70-х. Тёплая кремовая основа, жжёно-оранжевый основной цвет с бирюзовым акцентом и коричневые чернила. Подходит радио, еде, путешествиям и ностальгическим брендам.
- Cyberpunk - Антиутопические научно-фантастические HUD. Почти чёрный или глубокий фиолетовый фон с электрическим голубым и ярко-розовым неоном. Подходит играм, крипто и ночной жизни.
Современные стили веб-дизайна
Стили, выросшие из самого современного веба: продуктовые лендинги, портфолио студий и маркетинговые сайты дашбордов.
- Brutalism - Возрождение «сырого HTML» конца 2010-х. Жёсткое почти чёрное на белом, толстые рамки, плоский цвет и один громкий акцент. Подходит творческим студиям, зинам и антикорпоративным заявлениям.
- Glassmorphism - Матовые стеклянные панели поверх яркого фона. Преимущественно белые панели с двухцветными градиентами в акцентах. Подходит продуктовым интерфейсам, дашбордам и SaaS- или финтех-лендингам.
- Неоморфизм - Soft UI, 2019-2020. Один нейтральный базовый цвет для всех поверхностей, лепка светлой и тёмной тенью и единственный акцент для активных состояний. Подходит контролам умного дома, wellness и музыки.
- Editorial - Вёрстка печатной журналистики. Тёплый «бумажный» фон, почти чёрные чернила и один сдержанный акцент. Подходит журналам, блогам и брендам, построенным на контенте.
- Oversized Typography - Гигантский заголовок вместо hero-картинки. Почти чёрная или почти белая основа и мягкие полупрозрачные цветовые заливки. Подходит портфолио, студиям и лендингам запусков.
- Bento Box - Модульная сетка плиток разного размера. Приглушённый фон, в основном белые плитки и один последовательный акцент. Подходит страницам возможностей SaaS и обзорам продуктов.
- Lightweight 3D - Мягко затенённые шары, капли и кольца из градиентов. Спокойный фон и фигуры в одном-двух фирменных цветах. Подходит SaaS и продуктовым лендингам.
- Biomorphism - Органические капли и волнистые разделители. Землистые кремовый, глиняный и шалфейный тона с одним тёплым акцентом вроде терракотового. Подходит велнесу, еде и брендам про устойчивое развитие.
Как выбрать стиль веб-дизайна
Отталкивайтесь от проекта, а не от тренда. Несколько вопросов быстро сужают список:
- Какой контент? Текстовым сайтам подходят Editorial или Swiss Style; продуктовым сайтам и страницам возможностей - Bento Box, Lightweight 3D или Glassmorphism.
- Что должны почувствовать посетители? Доверие и ясность ведут к Swiss Style или Bauhaus; энергия и игра - к Memphis, Y2K или Retro; роскошь - к Art Deco.
- Кто аудитория? Геймеры и разработчики откликаются на Cyberpunk, Pixel Art и Futurism; аудитория велнеса и лайфстайла - на Biomorphism и Frutiger Aero.
- Сколько у вас цвета? Один сильный фирменный цвет подходит Swiss Style, Bauhaus и Brutalism; широкая насыщенная палитра - Memphis и Glassmorphism.
- Удастся ли сохранить читаемость? Чем декоративнее стиль, тем внимательнее нужно проверять контраст текста и мобильный макет.
Быстрый выбор: какой стиль под какую задачу
| Задача | На какие стили посмотреть | Почему |
|---|---|---|
| Портфолио или сайт студии | Oversized Typography, Editorial, Swiss Style | Первое впечатление создают шрифты и композиция, поэтому палитра может оставаться минимальной. |
| SaaS или продуктовый лендинг | Bento Box, Lightweight 3D, Glassmorphism | Модульные, мягкие и похожие на дашборд стили ясно показывают возможности. |
| Блог, журнал или издание | Editorial, Swiss Style | Комфорт чтения важнее всего: бумажные тона, сильная иерархия, один акцент. |
| Игра, продукт для разработчиков или технологичный продукт | Cyberpunk, Pixel Art, Футуризм | Тёмные HUD-подобные стили с яркими акцентами совпадают с ожиданиями аудитории. |
| Люксовый или премиальный бренд | Art Deco, Editorial | Формальные сдержанные палитры сигнализируют о качестве. |
| Игривый или творческий бренд | Мемфис, Ретро, Frutiger Aero | Насыщенные, тёплые или глянцевые палитры создают характер. |
| Смелое антикорпоративное заявление | Brutalism, Конструктивизм, Y2K | Жёсткий контраст и плоский цвет говорят, что дизайн намеренный. |
| Велнес или натуральный бренд | Biomorphism, Frutiger Aero | Мягкие, землистые или воздушные палитры воспринимаются спокойно и дружелюбно. |
Как стиль и цвет работают вместе
Стиль - это во многом цветовое решение в другой одежде. Glassmorphism не работает на сером фоне, а Brutalism - с мягким градиентом; Swiss Style требует одного акцента, используемого экономно, а Memphis - нескольких, используемых громко. Быстрее всего это увидеть, попробовав свою палитру в нескольких шаблонах и сравнив - именно это делает превью Explore Styles.
Читайте также: Руководство по Explore Styles · Как проверить палитру на реальном интерфейсе · Все страницы стилей
Частые вопросы
Какие основные стили веб-дизайна существуют?
К распространённым стилям веб-дизайна относятся Bauhaus, Swiss Style, Art Deco, Конструктивизм, Memphis, Brutalism, Glassmorphism, Editorial, Bento Box, Cyberpunk, Y2K, Ретро, Pixel Art, Frutiger Aero, Футуризм, Biomorphism, Oversized Typography и Lightweight 3D.
Какой стиль веб-дизайна лучше всего подходит для SaaS-сайта?
Bento Box, Lightweight 3D и Glassmorphism популярны для SaaS-лендингов, потому что показывают возможности ясными модульными блоками. Лучший выбор зависит от ваших фирменных цветов и аудитории, поэтому перед решением попробуйте палитру в каждом.
Как подобрать цвета под стиль веб-дизайна?
У каждого стиля есть типичные цветовые черты: Swiss Style использует почти чёрное на белом с одним ярким акцентом, Cyberpunk - неон на почти чёрном, Ретро - тёплый кремовый с оранжевым и бирюзовым. Посмотрите палитру внутри шаблона стиля, подходит ли она, а затем проверьте контраст текста.
Можно ли посмотреть свои цвета в этих стилях?
Да. У каждого стиля есть живое превью в Explore Styles, где можно переключиться с собственной палитры стиля на вашу текущую палитру. Просмотр бесплатен; применение своих цветов к части шаблонов требует Pro.
Стили вроде Glassmorphism всё ещё используют?
Да. Glassmorphism по-прежнему часто встречается в продуктовых интерфейсах, особенно в дашбордах и финтехе, но ему нужен яркий фон и внимательная работа с контрастом, чтобы оставаться читаемым.
Хотите увидеть свои цвета в одном из этих стилей? Примерить свою палитру на эти стили