monopo saigon
Płynna, opalizująca poświata za redakcyjną ciszą – monochromatyczna galeria redakcyjna unosząca się na roztopionym świetle
Monopo Saigon działa w oparciu o radykalną monochromatyczną dyscyplinę: czysta czerń i biel z subtelnymi odcieniami szarości, otulone masywnym krojem pisma Roobert, który zdaje się oddychać płótnami rozciągającymi się na całą szerokość strony. Charakterystyczny kontrast tkwi w surowej redakcyjnej powściągliwości (ostre kąty nawigacji i linków tekstowych, duża ilość białej przestrzeni, rytm oparty na 4 px) oraz jednym ekspresyjnym geście – przyciskach o promieniu 75 px, które unoszą się niczym płyn nad obrazami. Główne elementy projektu grawitują w stronę opalizujących, płynnych, chromatycznych atmosfer (zielenie przechodzą w bursztyn, a następnie w głęboki burgund), a sam interfejs nigdy nie przyjmuje pojedynczego odcienia, tworząc wrażenie czarno-białej galerii redakcyjnej unoszącej się nad rzeką płynnego światła. Krój pisma nadaje ton: grubość 300 linii przy 78 px szepcze, grubość 400 linii przy 225 px wypełnia obszar widoku, a grubość 400 linii przy 11 px pewnie i minimalistycznie definiuje wszystko inne. Ruch jest ekspresyjny, ale jednocześnie cierpliwy — krzywe wygładzania krawędzi o sześciennych krzywych Beziera (0,19, 1, 0,22, 1), rozciągające się do 1,25 s, przekształcają przejścia, dzięki czemu elementy ślizgają się, a nie zatrzymują nagle.
Układ jest wyśrodkowany na maksymalnej szerokości 1078 px, z ciemnymi sekcjami powitalnymi rozciągającymi się na całą szerokość strony i rozciągającymi się poza kontener. Sekcja powitalna zajmuje cały obszar widoku: wyśrodkowany, monumentalny tytuł (Un i ted, Unbound) unosi się nad migoczącą zawartością multimedialną, minimalistyczna nawigacja unosi się u góry, a pojedyncza obracająca się ikona zajmuje lewy dolny róg. Sekcje treści głównej podążają za obszernym rytmem redakcyjnym — duże 46 px przerwy między sekcjami tworzą przestrzeń do oddychania między blokami, naprzemiennie białymi i ciemnymi (czarnymi z białą czcionką) paskami. Układ treści jest asymetryczny: przeważa naprzemiennie tekst po lewej stronie/obraz po prawej stronie i obraz po lewej stronie/tekst po prawej, bez wyśrodkowanych bloków poza sekcją powitalną. Siatki kart są wyświetlane jako listy projektów w jednej kolumnie, a nie w wielu kolumnach — każdy projekt zajmuje całą szerokość z własnym obrazem i tytułem. Nawigacja składa się z przezroczystego górnego paska z logo po lewej stronie, lokalizacją pośrodku i menu po prawej stronie – bez trwałych zmian kolorów, cienia, jedynie niewidoczny przycisk zapisu. Na dole strony znajduje się kompaktowy, trzykolumnowy blok adresowy (Tokio, Sajgon, Londyn) z dyskretnym tekstem. Ogólnie rzecz biorąc, styl redakcyjny jest typowy dla magazynu cyfrowego.
Wizualizacje są teatralne i niepowtarzalne: ekran główny zdominowany jest przez masywną, opalizującą, płynną fakturę – organiczne zielone odcienie rozpuszczają się w bursztynie i burgundzie, niczym olej na wodzie lub roztopione szkło. Sprawia to wrażenie nastrojowej treści medialnej zajmującej cały ekran, być może wideo lub płótna stworzonego za pomocą shaderów, i jest postrzegane jako pojedynczy moment sensoryczny, a nie powtarzający się wzór. W demach projektu wykorzystano intymną fotografię redakcyjną (duże zdjęcia produktów, zdjęcia promocyjne) prezentowaną bez ramek ani obramowań – obraz jest treścią. Nie ma ilustracji, ikon poza drobnymi glifami interfejsu użytkownika, żadnych dekoracyjnych kształtów. Ikonografia jest minimalna lub nieobecna; obracająca się okrągła ikona tekstowa służy jako jedyny typograficzny element ozdobny systemu. Ogólna gęstość: tekst dominuje pojedynczym gestem wizualnym w dużym rozmiarze, po którym następują długie, spokojne odcinki redakcyjne typografii i zdjęć produktów.
Paleta
Marka
- Iridescent Fade
#a02d25— Akcent chromatyczny pojawia się tylko w przejściu gradientowym — odcień stopionego burgundu, który stanowi podstawę opalizującej atmosfery, nie jest wykorzystywany w elementach sterujących interfejsu.
Neutralny
- Obsidian
#000000— Tekst główny, obrys SVG, wypełnienie tekstu głównego — czysta czerń zawiera wszystkie informacje na pierwszym planie i elementy graficzne. - Paper
#ffffff— Jasny tekst na ciemnych powierzchniach, odwrócone napisy i nagłówki o wysokim kontraście. Unikaj używania jasnego tekstu jako koloru podstawowego w wezwaniach do działania. - Inkstone
#181818— Główny tekst w stopce i dodatkowe nagłówki mają stonowany, czarny kolor, co ułatwia czytanie dłuższych tekstów. - Felt Gray
#6d6d6d— Tekst pomocniczy, bloki adresowe, teksty prawne – ciche adnotacje, które niezauważalnie ustępują, lecz nie znikają całkowicie. - Slate Pill
#636363— Jedynym jednolitym wypełnieniem używanym w przypadku akcji takich jak Akceptuj jest neutralne tło przycisku. - Ash Mist
#9a9a9a— Neutralny, średniotonowy odcień przeznaczony do powierzchni przeznaczonych dla osób słabowidzących lub o niskim kontraście.
Typografia
od 12 do 225px · 9 kroków
- Roobert — wymiana: Inter or Söhne — both share Roobert's geometric-humanist balance and clean aperture · wytyczne 300, 400, 600 · Główny krój pisma jest używany we wszystkich tekstach interfejsu, nawigacji, nagłówkach, treści, listach i stopkach. Ten zaprojektowany na zamówienie krój bezszeryfowy łączy geometryczną klarowność z humanistycznym ciepłem; szeroki zakres grubości (od 300 Whisper do 600 Anchor) pozwala mu swobodnie oddychać – od monumentalnych nagłówków po notatki.
- Raleway — wymiana: Montserrat or Jost · wytyczne 400 · Używany tylko w niektórych kontekstach nagłówków, w których bardziej elegancka, wąska czcionka bezszeryfowa zapewnia kontrast - rzadko stosowany jako kontrast dla grubszego kroju pisma Robert.
- system-ui — wymiana: Inter · wytyczne 400 · Mikro-etykiety interfejsu, tekst banera plików cookie, mała czcionka — domyślna opcja awaryjna przeglądarki, zapewniająca czytelność najdrobniejszych szczegółów bez konieczności stosowania niestandardowej czcionki.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | gęsty |
| Podstawowy krok | 14px |
| Promień przycisku | 75px |
| Promień karty | 0px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 46px |
| Szerokość strony | 1078px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu monopo saigon i wypełni ją
- Uzupełnij produktami i postami za pomocą linku - Instagram, TikTok, Facebook.
- Przenieś zawartość ze starej witryny — wystarczy podać adres.
- Nowoczesny design na najlepszym silniku: React ( Next.js) z renderowaniem serwerowym i optymalizacją SEO od razu po wyjęciu z pudełka.
- W pełni zautomatyzowana optymalizacja SEO dla wyników wyszukiwania i rekomendacje sieci neuronowych.
Podobne style
- Hyer Aviation — Zmierzch w kokpicie nad pergaminem. Blade niebo o świcie spotyka się z szeryfowym logo wielkości kadłuba, a pojedynczy, ciepły, gliniany akcent przełamuje monochromatyczną powściągliwość.
- OFF+BRAND. — Tęczowa kula na ciepłym pergaminie
- Seed — żywy organizm pod szkłem laboratoryjnym
- Eindhoven Design District — Brutalizm redakcyjny na białym papierze jest manifestem miejskiego designu, wykonanym dużą czcionką, z minimalną ilością zdjęć i absolutną powściągliwością.
- Subframe — Rysunek graficzny na ciepłym pergaminie. Papier designerski, gdzie każde pociągnięcie jest albo grafitem, albo gumką, nigdy farbą – głębia jest osiągana poprzez grubość linii i rzadkie szeryfy.
- Miranda — Klasyczny, szeroki format czcionki na jasnokremowym tle – artykuł redakcyjny do gazety na miarę ery cyfrowej
- Monocle — Wysokiej jakości, szerokoformatowa gazeta na kremowym papierze. Starannie opracowany wstępniak, w którym każda kolumna zasługuje na swoje miejsce, a na stronie pojawia się tylko jeden, znaczący kolor.
- Agencja brandingowa — Galeria redakcyjna w białej tonacji z typografią wykonaną czarnym tuszem
- Websmith Studio — Poranne światło na kremowym papierze
- Aspelin Reitan — Archiwum Architektoniczne autorstwa Candlelight - Strona wygląda jak portfolio zabudowanych przestrzeni, przypiętych do ciepłej kremowej ściany, z pojedynczą linią białego tekstu unoszącą się nad każdym obrazem na całej szerokości strony.
- Public — Monochromatyczny artykuł redakcyjny na zimnym marmurze – niemal monochromatyczne płótno, z czcionką szeryfową o szerokości 300 punktów i pojedynczym fioletowym akcentem, który pełni całą rolę kolorystyczną.
- Motto — Typograficzny monolit na papierze – pojedynczy, pewny siebie głos wypowiadający się na śnieżnobiałym papierze