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.
Subframe to monochromatyczna przestrzeń robocza projektanta: ciepłe, kremowe płótno, grafitowoczarny tusz i całkowity brak akcentów chromatycznych. Cały interfejs jest postrzegany jako pojedynczy materiał – papier, ołówek i cień – z jednym wyrazistym akcentem typograficznym: wyrafinowaną czcionką szeryfową (Instrument Serif) zestawiona z systematyczną czcionką bezszeryfową (Inter), nadającą nagłówkom redakcyjną powagę. Powierzchnie są płaskie i obramowane, a nie podniesione; głębię uzyskuje się dzięki cienkim podziałom w #e5e7eb i wstawkom podświetlającym ciemne elementy sterujące, a nie cieniom. Gęstość jest hojna: szeroki rytm pionowy (48–64 px odstępów między sekcjami), wyśrodkowane układy o pełnej szerokości i duża ilość białej przestrzeni wokół tekstu. Jedynym kolorem jest kontrast między kolorem zbliżonym do bieli i zbliżonym do czerni, dzięki czemu ciemny przycisk jest najbardziej rzucającym się w oczy elementem na każdej stronie, a pasek logotypów partnerskich w odcieniach szarości jedynym dekoracyjnym elementem wizualnym.
Wyśrodkowane układy o pełnej szerokości (1200 px) z bogatym rytmem pionowym. Głównym elementem jest pojedynczy, wyśrodkowany blok: ciemna, segmentowana kontrolka u góry, duży nagłówek „Inter”, jednowierszowy podtytuł i dwa sąsiadujące przyciski (wypełniony + półprzezroczysty) – bez obrazka bocznego, bez podziału układu. Poniżej głównego elementu znajduje się wyśrodkowany pasek z logo w skali szarości. Każda kolejna sekcja ma ten sam schemat: wyrównany do lewej blok tytułu i podtytułu, a następnie pełnoekranowa ramka prezentacji produktu z odstępem między sekcjami wynoszącym 48–64 px. Nawigacja jest minimalna: górny pasek z wyśrodkowanymi linkami i akcjami wyrównanymi do prawej, brak paska bocznego i megamenu. Strona od góry do dołu wygląda jak seria wyśrodkowanych stwierdzeń, z których każde ma dużo miejsca – układ bardziej przypomina portfolio redakcyjne niż rozbudowaną stronę produktu.
Projekt wizualny jest minimalistyczny i funkcjonalny. System wykorzystuje dwa tryby wizualne: (1) obramowane zrzuty ekranu produktów i makiety interfejsu użytkownika zamknięte w ramkach o promieniu 24 pikseli – wyświetlają one rzeczywiste komponenty interfejsu (tabele, przyciski, formularze) renderowane w tej samej monochromatycznej palecie, dzięki czemu zrzuty ekranu wydają się płynnie zintegrowane ze stroną; (2) pojedynczy pasek logo partnerów w skali szarości służy jako dowód społeczny, renderowany płasko, bez koloru i kontenerów. Brak zdjęć lifestylowych, abstrakcyjnych gradientów ani renderów 3D. Jedynym elementem ilustracyjnym jest ciemny „kafelek” produktu umieszczony na środku ciepłego, szarego tła z ikoną marki – jest on postrzegany jako demonstracja produktu, a nie dekoracja. Wszystkie obrazy mają układ tekstowy, w którym ciężar wizualny spoczywa na tekście.
Paleta
Neutralny
- Page Canvas
#fafafa— Tło strony, pocztówka na płótnie, jasny tekst na ciemnych powierzchniach – ciepła, biała barwa stanowiąca podstawę całego monochromatycznego systemu. - Hairline Border
#e5e7eb— Podziałki, obramowania kart, ramki obrazów, kontury ikon - najczęściej stosowany rodzaj konturu w systemie, definiujący strukturę przestrzenną. - Card Surface
#ededed— Podniesione tło dla kart, dodatkowa powierzchnia - umieszczona o jeden stopień nad płótnem, tworzy grupę bez cieni. - Divider Mid
#dadada— Podziały tonów średnich i przejścia między sekcjami - Graphite
#242424— Wypełnienie o wysokim kontraście i neutralnym kolorze dla głównych przycisków na jasnych powierzchniach. - Ink Black
#171717— Tekst główny, nagłówki, kontury ikon - trochę fajniejsze niż Graphite, używane raczej do typografii niż powierzchni.
Typografia
od 12 do 128 px · 7 kroków
- Inter — wymiana: Inter (Google Fonts) · wytyczne 500, 600, 700 · Interfejs systemowy bezszeryfowy — nawigacja, tekst główny, przyciski, podtytuły i nagłówki sekcji. Grubość: 500 dla tekstu głównego i elementów sterujących, 600 dla podtytułów i akcentów nawigacyjnych oraz 700 dla nagłówków sekcji. Wyraźnie ujemne odstępy między literami kompresują kształty geometryczne dowolnej wielkości, nadając interfejsowi zwarty, techniczny wygląd.
- Instrument Serif — wymiana: Playfair Display · wytyczne 400 · Czcionka szeryfowa przeznaczona wyłącznie do nagłówków i tekstów redakcyjnych. Jej grubość 400 i odstęp między literami -0,025 em tworzą elegancki, kursywny wygląd, który kontrastuje z industrialną geometrią czcionki Inter – charakterystyczną techniką: pojedyncze słowo lub fraza szeryfowa na stronie bezszeryfowej, pełniące funkcję wizualnej interpunkcji, a nie stylu nagłówka.
- Fragment Mono — wymiana: JetBrains Mono · wytyczne 400 · Akcent mono stosuje się do elementów przypominających kod inline, etykiet tagów i objaśnień technicznych. Używany oszczędnie, pojawia się na listach funkcji i adnotacjach inline, gdzie narzędzie projektowe chce wskazać „to jest wynik maszyny”.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | przeciętny |
| Podstawowy krok | 8px |
| Promień przycisku | 16px |
| Promień karty | 24px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 64px |
| Szerokość strony | 1200px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Subframe 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
- monopo saigon — Płynna, opalizująca poświata za redakcyjną ciszą – monochromatyczna galeria redakcyjna unosząca się na roztopionym świetle
- 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ą.
- 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