monopo saigon
Рідке сяйво, що переливається, за редакційною тишею — монохромна редакційна галерея, що ширяє на розплавленому світлі.
Monopo Saigon працює на основі радикальної монохромної дисципліни: чистий чорний і білий з ледь вловимими сірими відтінками, обгорнутими навколо масивного шрифту Roobert, який немов дихає на полотнах, що займають всю ширину сторінки. Фірмовий контраст полягає в суворій редакційній стриманості (гострі кути навігації та текстових посилань, велика кількість вільного простору, ритм, заснований на 4px) і єдиному виразному жесті — кнопках з радіусом 75px, які ніби рідина ширяють над зображеннями. Основні елементи оформлення тяжіють до переливаються, текучих хроматичних атмосфер (зелені відтінки переходять у бурштинові, а потім у глибокий бордовий), у той час як сам інтерфейс ніколи не набуває жодного відтінку, створюючи відчуття чорно-білої редакційної галереї, що ширяє над річкою рідкий. Тип шрифту задає тон: шрифт з товщиною лінії 300 при 78px шепоче, шрифт з товщиною лінії 400 при 225px заповнює область перегляду, а шрифт з товщиною лінії 400 при 11px впевнено та мінімалістично позначає все інше. Рух виразно, але терпляче - криві згладжування cubic-bezier (0.19, 1, 0.22, 1), що розтягуються до 1,25 с, перетворюють переходи, дозволяючи елементам ковзати, а не різко зупинятися.
Макет має максимальну ширину, обмежену 1078px, центрований з темними секціями-заставками, що займають всю ширину сторінки і виходять за межі контейнера. Заставка займає всю область перегляду: центрований монументальний заголовок (Un i ted, Unbound) ширяє над медіаконтентом, що переливається, мінімалістична навігація плаває вгорі, один обертовий значок внизу зліва. Розділи основного тексту наслідують просторий редакційний ритм — великі проміжки між секціями 46px створюють простір для дихання між блоками, чергуючи білі та темні (чорні з білим шрифтом) смуги. Розташування контенту асиметричне: переважають чергування тексту зліва/зображення праворуч і зображення зліва/тексту праворуч, без центрованих блоків поза заставки. Карткові сітки відображаються як одноколонні списки проектів, а не багатоколонні - кожен проект займає всю ширину зі своїм зображенням і заголовком. Навігація є прозорою верхньою панеллю з логотипом зліва, локалізацією по центру, меню праворуч — без постійної зміни кольору, без тіні, тільки невидиме збереження. Внизу сторінки розташований компактний триколонок адресний блок (Токіо, Сайгон, Лондон) зі спокійним текстом. Загалом редакційний стиль журналу в цифровому форматі.
Візуальний ряд театральний і унікальний: на головному екрані домінує масивна текстура, що переливається, текуча — органічні зелені відтінки, що розчиняються крізь бурштиновий у бордовий, немов масло на воді або розплавлене скло. Це сприймається як атмосферний медіаконтент, що займає всю площу екрану, можливо, відео або полотно, створене за допомогою шейдерів, і сприймається як єдиний чуттєвий момент, а не як візерунок, що повторюється. У демонстраційних матеріалах проекту використовуються камерні редакційні фотографії (великомасштабні кадри продукції, рекламні знімки), представлені без рамок та кордонів – зображення є змістом. Жодних ілюстрацій, жодних іконок, крім крихітних гліфів інтерфейсу користувача, ніяких декоративних фігур. Іконографія мінімальна чи відсутня; круглий текстовий значок, що обертається, служить єдиною типографічною прикрасою системи. Загальна щільність: домінує текст з одним візуальним жестом великого розміру, потім довгі спокійні редакційні відрізки типографіки та зображень продукції.
Палітра
Бренд
- Iridescent Fade
#a02d25— Хроматичний акцент з'являється тільки всередині градієнтного переходу - розплавлений бордовий відтінок, що є основою атмосфери, що переливається, не використовується в елементах управління інтерфейсу.
Нейтральні
- Obsidian
#000000— Основний текст, обведення SVG, заливка поверх основного тексту – чистий чорний колір містить всю інформацію переднього плану та графічні елементи. - Paper
#ffffff— Світлий текст на темних поверхнях, інвертовані підписи та висококонтрастні заголовки. Не слід виділяти його як основний колір заклику до дії. - Inkstone
#181818— Основний текст у нижньому колонтитулі та додаткові заголовки – приглушений чорний колір для читання довгих текстів. - Felt Gray
#6d6d6d— Допоміжний текст, блоки адрес, юридичні тексти – тихі інструкції, які непомітно відступають, не зникаючи повністю. - Slate Pill
#636363— Нейтральне тло кнопки із заливкою — єдина суцільна заливка, яка використовується для таких дій, як «Прийняти». - Ash Mist
#9a9a9a— Нейтральний відтінок середньої тональності для поверхонь із ослабленим зором чи низькою контрастністю у наборі поверхонь.
Друкарня
від 12 до 225px · 9 ступенів
- Roobert — заміна: Inter or Söhne — both share Roobert's geometric-humanist balance and clean aperture · зображення 300, 400, 600 · Основний шрифт використовується у всьому тексті інтерфейсу, навігації, заголовках, основному тексті, списках та нижніх колонтитулах. Цей спеціально розроблений шрифт без засічок поєднує геометричну чіткість із гуманістичною теплотою; його широкий діапазон товщини (від 300 Whisper до 600 Anchor) дозволяє шрифту "дихати" - від монументальних заголовків до нотаток.
- Raleway — заміна: Montserrat or Jost · зображення 400 · Використовується тільки в певних контекстах заголовків, де елегантніший і вужчий шрифт без засічок створює контраст — застосовується рідко як контрапункт до сміливішого шрифту Роберта.
- system-ui — заміна: Inter · зображення 400 · Мікро-мітки інтерфейсу, основний текст банера cookie, дрібний шрифт - резервний варіант за замовчуванням для браузера, що забезпечує читання в найдрібніших деталях без необхідності використання шрифту користувача.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | щільна |
| Базовий крок | 14px |
| Радіус кнопок | 75px |
| Радіус карток | 0px |
| Тіні | ні — межі замість тіней |
| Між секціями | 46px |
| Ширина сторінки | 1078px |
ІІ збере ваш сайт у стилі monopo saigon і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Hyer Aviation — Сутінки в кабіні пілота над пергаментом. Бліде світане небо зустрічається з логотипом із засічками розміром з фюзеляж, а один теплий глиняний акцент порушує монохромну стриманість
- OFF+BRAND. — Переливається сфера на теплому пергаменті
- Seed — живий організм під лабораторним склом
- Eindhoven Design District — Редакційний бруталізм на білому папері – маніфест муніципального дизайну, виконаний великим шрифтом, з мінімальною кількістю фотографій та абсолютною стриманістю
- Subframe — Графічний малюнок на теплому пергаменті. Дизайнерський папір, де кожен штрих - це або графіт, або гумка, ніколи не фарба - глибина досягається за рахунок товщини ліній і рідкісних засічок
- Miranda — Класичний широкоформатний шрифт на світло-кремовому фоні - редакційна стаття газети для цифрової доби
- Monocle — Якісна газета широкоформатна на кремовому папері. Редакція, ретельно підібрана за всіма параметрами, де кожна колонка заслуговує на своє місце, а на сторінці є лише один колір, що має значення
- Agencja brandingowa — Редакційна галерея в білих тонах з типографікою, виконаною чорним чорнилом
- Websmith Studio — Вранішнє світло на кремовому папері
- Aspelin Reitan — Архітектурний архів при свічках — сторінка виглядає як портфоліо побудованих місць, прикріплене до стіни теплого кремового кольору, з одним рядком білого тексту, що ширяє над кожним зображенням на всю ширину сторінки
- Public — Монохромна редакційна стаття на холодному мармурі — майже монохромне полотно, шрифт із засічками завтовшки 300, один фіолетовий акцент, який виконує всю колірну роботу
- Motto — Друкарський моноліт на папері - єдиний впевнений голос, що заявляє про себе на білому папері