Атлас
Визуальное направление

Мемфис

Memphis Design

Наследие итальянской группы «Мемфис» 1980-х: зигзаги, круги и сквиглы, точечные паттерны, дерзкие несочетаемые цвета и асимметрия.

Использовать Все направления
Сайт Приложение Веб-платформа
Учебная демонстрация

Суть

Стиль восходит к миланской группе «Мемфис» (1981–1987) во главе с Этторе Соттсассом: дизайнеры нарочно делали мебель и предметы из ярких геометрических блоков, пластика и пёстрых паттернов, споря с «хорошим вкусом» модернизма. В интерфейсах от этого наследия берут геометрические фигуры, точечные и штриховые узоры, контрастные «несочетаемые» цвета и подчёркнуто асимметричные композиции.

Подробнее

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

От необрутализма Мемфис отличается тем, что объём и глубину создают паттерны и фигуры, а не толстая рамка с жёсткой чёрной тенью у каждого блока; от игривого стиля — отсутствием персонажей и мягкости: здесь всё геометрично, графично и немного дерзко.

Признаки

  • Набор геометрических фигур: круги, треугольники, полукруги, квадраты под углом, зигзаги и волнистые линии-сквиглы.
  • Паттерны как материал: точечная сетка, диагональная штриховка, клетка, волна — ими заливают плашки, подложки и части фигур.
  • Контрастные «несочетаемые» плоские цвета: розовый, жёлтый, бирюзовый, кобальтовый синий, красно-оранжевый, сиреневый и чёрный.
  • Тонкие чёрные контуры 2 px у фигур и блоков без скруглений или с нарочито разными скруглениями.
  • Асимметрия: смещённые, повёрнутые на 2–8° блоки и плашки, ступенчатые ряды карточек.
  • Смещённые подложки из паттерна вместо теней: под кнопкой или заголовком лежит точечный или штриховой прямоугольник.
  • Предметы-фигуры: мебель, лампы и объекты собраны из простых геометрических тел, как конструктор.
  • Плотный тяжёлый гротеск в заголовках и геометрический шрифт в тексте.

Композиция

Композиция

  • Асимметричная коллажная композиция: крупный заголовок с одной стороны, предмет-фигура и группа фигур — с другой, с перекрытиями.
  • Блоки одного ряда сдвинуты по вертикали на 8–30 px или повёрнуты на 2–3°, чтобы ряд выглядел «рассыпанным», но читался как группа.
  • Свободное пространство заполнено фигурами-конфетти разного размера, но вокруг текста остаются чистые поля.
Ещё 2
  • Ключевые факты (даты, цены, числа) вынесены в отдельные фигуры: круг, повёрнутая плашка, треугольник.
  • Внутри рабочих блоков — обычная сетка; асимметрия касается расположения и декора, а не порядка данных.

Визуальная иерархия

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

Цвета

Примеры палитр · нажмите на цвет, чтобы скопировать

Классика Мемфиса

Пастельный Мемфис

Чёрный Мемфис

Принципы работы с цветом
  • Основа — светлый тёплый или белый фон и почти чёрный цвет для текста и контуров.
  • 4–6 насыщенных акцентов, которые «не должны» сочетаться: розовый, жёлтый, бирюзовый, кобальт, красно-оранжевый, сиреневый.
  • Каждый цвет — плоская заливка без градиентов; разнообразие дают паттерны поверх цвета.
  • Соседние фигуры и блоки окрашены в разные цвета; один цвет не занимает больше 25–30% площади.
  • Допустимы пастельный вариант (мятный, персиковый, сиреневый) и тёмный вариант на чёрном фоне.

Шрифты

С поддержкой кириллицы

  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Dela Gothic One
    Текст
    Jost

  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Rubik Mono One
    Текст
    Rubik

  • Съешь же ещё этих мягких булок

    Основной текст набран этим шрифтом. 0123456789

    Заголовки
    Train One
    Текст
    Jost
Принципы типографики
  • Заголовки — плотный тяжёлый гротеск или геометрический шрифт с характером, крупно и с плотным интерлиньяжем 0.95–1.05.
  • Основной текст — геометрический гротеск 15–18 px, вес 500–600.
  • Отдельные слова заголовка выделяют плашкой цвета под углом, а не курсивом или подчёркиванием.
  • Метки и надзаголовки — прописными с разрядкой +0.06…+0.1 em, часто с маленькой фигурой перед текстом.

Компоненты

Кнопки

Кнопки — прямоугольники с плоской яркой заливкой, контуром 2 px и смещённой на 7–9 px подложкой из точек или штриховки. Вторичные — белые с контуром без подложки.

Поля ввода

Поля — белые прямоугольники с контуром 2 px; при фокусе контур утолщается и рядом появляется цветная фигура-маркер или паттерн-подложка.

Карточки

Карточки — белые блоки с контуром 2 px и цветной шапкой-паттерном; в ряду карточки сдвинуты по высоте, у каждой свой цвет и своя фигура.

Навигация

Навигация — текстовые пункты с фигурой-иконкой; активный пункт подчёркнут зигзагом или стоит на цветной плашке под углом.

Применение

Где подходит

  • Фестивали, выставки, маркеты, события и культурные площадки.
  • Магазины дизайна, мебели, декора, одежды и аксессуаров.
  • Креативные агентства, школы дизайна, детские и образовательные проекты.
Ещё 1
  • Промостраницы и спецпроекты, которым нужно выделиться в ленте.

Как применять

  • Соберите библиотеку из 6–8 фигур и 3–4 паттернов и комбинируйте только их.
  • Назначьте каждому разделу или категории свою фигуру и цвет — так геометрия станет навигацией.
  • Держите текстовые зоны однотонными: паттерн рядом с текстом, но не под ним.
Ещё 1
  • Проверяйте асимметрию: смещения должны быть заметными (от 8 px), иначе они выглядят как ошибка вёрстки.

Ограничения

Ограничения

  • Плохо подходит для банков, медицины, юридических и других сервисов, где нужна сдержанность.
  • Обилие паттернов и цветов перегружает плотные рабочие экраны и длинные таблицы.
  • Асимметрия и повороты усложняют адаптивную вёрстку и требуют ручной проверки на каждом размере.
Ещё 1
  • Мелкие паттерны дают муар и рябь на некоторых экранах и при печати.

Ошибки

  • Обводить каждый блок толстой рамкой с жёсткой чёрной тенью — это уже необрутализм.
  • Класть точечный или штриховой паттерн под основной текст.
  • Использовать градиенты и мягкие тени: Мемфис плоский.
Ещё 3
  • Рассыпать фигуры случайно, без повторяющегося набора и ритма.
  • Делать все смещения и повороты по 1–2 px — асимметрия выглядит как ошибка.
  • Красить соседние блоки одним цветом — исчезает фирменная пестрота.

Сочетания

Подходы разного уровня — их можно сочетать.

  • Bento-компоновка

    Плитка карточек получает разные цвета, паттерны и фигуры; асимметрию создают смещения плиток.

    Компоновка

  • Плоский дизайн

    Плоские заливки и простые иконки — общая основа; Мемфис добавляет паттерны, контуры и дерзкую палитру.

    Направление

  • Игривый дизайн

    Для детской и семейной аудитории: из игривого стиля — дружелюбные тексты и микродетали, из Мемфиса — геометрия и паттерны.

    Направление

  • Редакционный стиль

    Журнальная вёрстка с крупной типографикой и колонками, а геометрия и паттерны Мемфиса — для обложек и разворотов.

    Направление

Применить стиль

Промпт для ИИ под ваш тип продукта.

Использовать
Отзыв