Экран 1 из 21: вступление
01 — что умею
От швейцарской сетки до Y2K — каждый стиль собран вживую, а не картинкой. Выберите язык, на котором заговорит ваш сайт.
листайте вниз ↓
01 / 20 · International Typographic Style · 1950-е · Цюрих, Базель
Форма следует за содержанием. Ничего лишнего.
Родился в швейцарских школах после войны. Модульная сетка, гротеск без засечек, выключка влево, крупные поля. Отказ от декора ради ясности и объективности — дизайн как нейтральный носитель информации, а не украшение.
02 / 20 — Brutalism — 2010-е (веб) · от арх. 1950-х
Честность материала. Сайт, который не притворяется.
Реакция на прилизанный корпоративный дизайн. Системные шрифты, видимые границы, нулевые скругления, резкие контрасты, «сырая» вёрстка. Ссылки синие и подчёркнутые, кнопки выглядят как кнопки. Эстетика намеренной необработанности.
| 1 | системный шрифт |
| 2 | жёсткие рамки |
| 3 | острые углы |
| 4 | без анимаций |
| 5 | подчёркнутые ссылки |
>> это ссылка — она синяя и подчёркнута, потому что так честно.
03 / 20 — Neo-Brutalism — 2020-е
Брутализм, который улыбается. Толстые контуры и жёсткие тени.
Дружелюбная ветвь брутализма. Плотные чёрные обводки, жёсткие смещённые тени без размытия, ядрёные плоские цвета, крупные элементы, механическое «нажатие» кнопок. Максимум характера при простой реализации.
04 / 20 · Bauhaus · 1919–1933 · Веймар, Дессау
Круг, квадрат, треугольник. Красный, синий, жёлтый.
Школа, соединившая ремесло и промышленность. Геометрические примитивы, три основных цвета плюс чёрный, строгая функция, конструктивистская композиция. Красота рождается из назначения предмета, а не из орнамента.
— потяните фигуру мышью, чтобы повернуть
05 / 20 · Memphis Design · 1980-е · Милан
Постмодерн, который смеётся над хорошим вкусом.
Группа Этторе Соттсасса взорвала минимализм 80-х. Кислотные цвета, зигзаги, кляксы, наклонённые фигуры, конфетти-треугольники, узоры «терраццо». Декор ради декора и радости — антитеза «форма следует за функцией».
06 / 20 · Glassmorphism · 2020-е · после iOS · Windows Aero
Матовое стекло. Свет проходит сквозь слои.
Полупрозрачные панели с размытием фона, тонкая светлая граница, яркая заливка позади. Создаёт глубину и иерархию слоёв без теней. Работает там, где нужен «премиальный» воздух: дашборды, оверлеи, навигация.
07 / 20 — Minimalism — вне времени
Убирай, пока не останется только суть.
Не про пустоту, а про приоритет. Один акцент, много воздуха, строгая типографика, никаких лишних линий. Каждый элемент оправдан. Тишина как приём — глазу не за что зацепиться, кроме содержания.
воздух · один акцент · без теней · крупная типографика · дисциплина
08 / 20 · Editorial / Magazine · из печати XX века
Вёрстка как в хорошем журнале: буквица, колонки, врезка.
Переносит приёмы полиграфии в веб. Контрастная антиква для заголовков, буквица в начале статьи, многоколоночный текст, врезные цитаты, тонкие линейки-разделители, подписи и byline. Ритм чтения важнее «вау».
антиква · буквица · колонки · врезка · линейки · подпись автора
09 / 20 — Retro-Futurism / Synthwave — 1980-е глазами будущего
Каким будущее видели из 1984-го: сетка, горизонт, свечение.
Синтвейв-эстетика: почти чёрный фон, неоновое свечение (циан, маджента), перспективная сетка, скан-линии CRT, глитчи, моноширинный шрифт. Ностальгия по будущему, которого не случилось.
10 / 20 · Claymorphism · 2021-е
Мягкий 3D. Интерфейс как из пластилина.
Пухлые скруглённые формы с двойной тенью (внешняя и внутренняя), пастельная палитра, толстые мягкие края, никаких острых линий. Тактильный, игрушечный, дружелюбный — хорош для обучающих и детских продуктов.
11 / 20 · Skeuomorphism · 2007–2013 · ранний iOS
Интерфейс притворяется вещью: кожа, дерево, сукно, металл.
Цифровые элементы копируют физические прототипы: календарь с отрывными листами, заметки на линованной бумаге, выпуклые кнопки с бликом и тенью. Экран объясняет себя через знакомые предметы — это помогало первым пользователям смартфонов. Проиграл плоскому дизайну, но вернулся в «мягком 3D».
12 / 20 · Flat Design · 2012–2016 · Metro, iOS 7
Долой имитацию — только цвет, форма и типографика.
Ответ на перегруженный скевоморфизм. Никаких градиентов, теней и бликов: плоские заливки, чёткие силуэты, яркая палитра, крупная сетка. Быстрее грузится и чище масштабируется на экраны разной плотности. Позже смягчился в «почти плоский» с едва заметными тенями.
13 / 20 · Material Design · 2014 → · Google
Цифровая бумага: у слоёв есть толщина, свет и тень.
Система Google: интерфейс — это листы «материала» в трёхмерном пространстве, с реалистичными тенями по высоте, отзывчивой анимацией и чернильными волнами от касания. Строгая сетка, выразительная типографика, плавающая кнопка действия. Мост между плоским и объёмным.
14 / 20 ✦ Y2K / Frutiger Aero ✦ 1999–2008 · снова в моде
Техно-оптимизм нулевых: хром, глянец, пузыри, кислотный неон.
Эстетика рубежа тысячелетий: жидкий металл, стеклянные гелевые кнопки с бликом, аква-голубой, кислотный лайм и розовый, звёздочки-искры, прозрачный пластик. Вера в блестящее цифровое будущее. Возродилась в 2020-х как ностальгия по «наивному» интернету.
15 / 20 — Art Deco — 1920–1939 · снова в digital-luxury
Геометрическая роскошь: симметрия, золото, лучи и зигзаг.
Стиль эпохи джаза: строгая симметрия, ступенчатые формы, веерные «солнца», тонкие золотые линии на глубоком фоне, узкие вытянутые капительные буквы. Означает достаток, прогресс и рукотворную точность. В вебе — приём люксовых брендов: вино, отели, часы, парфюм.
16 / 20 · Neumorphism / Soft UI · 2019–2020
Элементы выдавлены из фона — та же поверхность, объём только светом и тенью.
Развитие плоского дизайна и наследник скевоморфизма: кнопки, карточки и переключатели не лежат на фоне, а «выдавлены» из него — тот же цвет, мягкая светлая тень сверху-слева и тёмная снизу-справа. Нажатие превращает выпуклость во вдавленность. Красиво, но слабый контраст и проблемы с доступностью оставили его нишевым.
17 / 20 — Art Nouveau — 1890–1910 · Париж, Вена, Брюссель
Природа как орнамент: текучие «хлыстовые» линии, лозы, женские силуэты.
«Новое искусство» на рубеже веков: асимметрия, длинные изгибающиеся линии-«удар хлыста», растительные и цветочные мотивы, декоративная типографика с вытянутыми буквами, тёплые приглушённые тона — золото, олива, лиловый. Ремесло против машинного производства, красота в каждой детали. Прямой предок ар-деко.
18 / 20 · Maximalism · 2020-е · маятник от минимализма
Больше — это больше. Слои, узоры, спорящие цвета и шрифты разом.
Осознанный перегруз как реакция на «чистые» лендинги: несколько шрифтов сразу, наложенные паттерны, рамки поверх рамок, кислотные сочетания, стикеры и наклейки, плотная композиция без воздуха. Заявляет индивидуальность и энергию бренда там, где минимализм звучал бы безлико.
19 / 20 · Kinetic Typography / Big Type · 2016-е · Awwwards-эра
Шрифт — единственный герой. Гигантский кегль, который движется и режется.
Типографика вместо изображений: заголовок во весь экран, буквы уходят за край, строки разбиваются и въезжают по одной, бегущие строки, обводка без заливки. Ритм и движение текста несут эмоцию и держат внимание. Любимый приём студийных портфолио и модных брендов.
20 / 20 · Aurora / Mesh Gradient · 2020-е
Мягкое сияние: размытые цветные пятна перетекают друг в друга.
Фон из нескольких размытых цветовых пятен (mesh-градиент), медленно перетекающих как северное сияние — обычно на тёмной основе, с лёгким свечением и полупрозрачными панелями поверх. Даёт «дорогую» атмосферу и глубину без иллюстраций. Негласный стандарт заглавных экранов SaaS и AI-продуктов.