Subframe
Grafinis piešinys ant šilto pergamento. Dizainerio popierius, kuriame kiekvienas potėpis yra arba grafitas, arba trintukas, niekada netapytas – gylis pasiekiamas per linijų storį ir retus serifus.
„Subframe“ – tai monochrominė dizainerio darbo erdvė: šilta, kreminė drobė, grafito juodumo rašalas ir visiškas chromatinių akcentų nebuvimas. Visa sąsaja suvokiama kaip viena medžiaga – popierius, pieštukas ir šešėlis – su vienu ryškiu tipografiniu akcentu: rafinuotu serifiniu raštu („Instrument Serif“) ir sistemingu be serifų („Inter“), suteikiančiu antraštėms redakcinio rimtumo. Paviršiai plokšti ir įrėminti, o ne iškilūs; gylis pasiekiamas plonomis pertvaromis su šriftu #e5e7eb ir įterptais paryškinimais tamsiuose valdikliuose, o ne šešėliais. Tankumas yra didelis: platus vertikalus ritmas (48–64 pikselių tarpai tarp sekcijų), centruoti, viso pločio išdėstymai ir dosnūs tarpai aplink tekstą. Vienintelė spalva yra kontrastas tarp beveik baltos ir beveik juodos spalvų, todėl tamsus mygtukas yra ryškiausias elementas kiekviename puslapyje, o partnerių prekių ženklų logotipų juostelė pilkais tonais – vienintelis dekoratyvinis vizualinis elementas.
Centruoti, viso pločio maketai (1200 pikselių) su dosniu vertikaliu ritmu. Pagrindinis elementas yra vienas, centre esantis blokas: tamsus, segmentuotas valdiklis viršuje, didelė antraštė „Inter“, vienos eilutės paantraštė ir du gretimi mygtukai (užpildyti + permatomi) – be šoninio paveikslėlio, be maketo skaidymo. Po pagrindiniu elementu yra centruota pilkos spalvos logotipo juostelė. Kiekviena paskesnė sekcija laikosi to paties modelio: kairėje lygiuotas antraštės ir paantraštės blokas, tada viso pločio produkto demonstracijos rėmelis su 48–64 pikselių tarpu tarp sekcijų. Navigacija minimali: viršutinė juosta su centruotomis nuorodomis ir dešinėje lygiuotais veiksmais, be šoninės juostos, be mega meniu. Puslapis iš viršaus į apačią skaitomas kaip centruotų teiginių serija, kiekvienam iš jų skirta pakankamai vietos – išdėstymas labiau primena redakcinį portfolio, o ne perkrautą produkto puslapį.
Vizualinis dizainas yra minimalistinis ir funkcionalus. Sistemoje naudojami du vaizdiniai režimai: (1) įrėminti produkto ekrano vaizdai ir vartotojo sąsajos maketai, įrėminti 24 pikselių spindulio rėmeliuose – juose rodomi tikri sąsajos komponentai (lentelės, mygtukai, formos), atvaizduojami toje pačioje monochrominėje paletėje, todėl ekrano nuotraukos atrodo sklandžiai integruotos į puslapį; (2) viena pilkos spalvos partnerių logotipų juostelė, atvaizduojama plokščiai, be spalvų ar konteinerių, tarnauja kaip socialinis įrodymas. Nėra jokių gyvenimo būdo nuotraukų, abstrakčių gradientų ar 3D vizualizacijų. Vienintelis iliustracinis elementas yra tamsi produkto „plytelė“, centre šiltai pilkame fone su prekės ženklo piktograma – ji suvokiama kaip produkto demonstracija, o ne dekoracija. Visi vaizdai išdėstyti tekstu, kur vizualinį svorį perima tekstas.
Paletė
Neutralus
- Page Canvas
#fafafa— Puslapio fonas, atvirukas ant drobės, šviesus tekstas ant tamsių paviršių – šilta balta spalva, kuria grindžiama visa monochrominė sistema. - Hairline Border
#e5e7eb— Skirtukai, kortelių kraštinės, paveikslėlių rėmeliai, piktogramų kontūrai – dažniausiai sistemoje naudojamas kontūrų tipas, apibrėžiantis erdvinę struktūrą. - Card Surface
#ededed— Pakeltas atvirukų fonas, papildomas paviršius – yra vienu laipteliu virš drobės, sukuriant grupę be šešėlių. - Divider Mid
#dadada— Vidutinio tono skirtukai ir perėjimai tarp sekcijų - Graphite
#242424— Didelio kontrasto neutralus užpildas pagrindiniams mygtukams ant šviesių paviršių. - Ink Black
#171717— Pagrindinis tekstas, antraštės, piktogramų kontūrai – šiek tiek šaunesnis nei „Graphite“, naudojamas tipografijai, o ne paviršiams.
Tipografija
nuo 12 iki 128 pikselių · 7 žingsniai
- Inter — pakeitimas: Inter (Google Fonts) · kontūrai 500, 600, 700 · Sans serif sistemos sąsaja – navigacija, pagrindinis tekstas, mygtukai, paantraštės ir skyrių antraštės. Svoris: 500 pagrindiniam tekstui ir valdikliams, 600 paantraštėms ir naršymo akcentams ir 700 skyrių antraštėms. Didelis neigiamas raidžių tarpas suspaudžia bet kokio dydžio geometrines figūras, suteikdamas sąsajai glaustą, techninę išvaizdą.
- Instrument Serif — pakeitimas: Playfair Display · kontūrai 400 · Serifinis šriftas, sukurtas išskirtinai antraštėms ir redakciniam turiniui. Jo 400 storis ir -0,025 em tarpai tarp raidžių sukuria elegantišką, kursyvu rašytą išvaizdą, kuri kontrastuoja su industrine „Inter“ geometrija – tai firminė technika: vienas žodis ar frazė su serifais puslapyje be serifų, naudojamas kaip vizualinis skyrybos ženklas, o ne kaip antraštės stilius.
- Fragment Mono — pakeitimas: JetBrains Mono · kontūrai 400 · Akcentinis monofoninis elementas, skirtas į kodą panašiems elementams, žymų etiketėms ir techniniams paaiškinimams. Naudojamas retai, jis rodomas funkcijų sąrašuose ir įterptosiose anotacijose, kur projektavimo įrankis nori nurodyti, kad „tai yra kompiuterio išvestis“.
Intervalai ir forma
| Tikslas | Reikšmė |
|---|---|
| Tankis | vidutinis |
| Pagrindinis žingsnis | 8px |
| Mygtuko spindulys | 16px |
| Kortelės spindulys | 24px |
| Šešėliai | ne – rėmeliai vietoj šešėlių |
| Tarp sekcijų | 64px |
| Puslapio plotis | 1200px |
Dirbtinis intelektas sukurs jūsų svetainę Subframe stiliumi ir ją užpildys
- Užpildykite produktais ir įrašais per nuorodą – Instagram, TikTok, Facebook.
- Perkelkite turinį iš senos svetainės – tiesiog nurodykite adresą.
- Modernus dizainas geriausiame variklyje: React ( Next.js) su serverio atvaizdavimu ir SEO optimizavimu iš karto.
- Visiškai automatizuotas SEO optimizavimas paieškos rezultatams ir neuroninių tinklų rekomendacijoms.
Panašūs stiliai
- monopo saigon — Skystas, vaivorykštinis švytėjimas už redakcijos tylos – monochrominė redakcijos galerija, plūduriuojanti išsilydžiusioje šviesoje
- Hyer Aviation — Prieblanda kabinoje virš pergamento. Blyškus aušros dangus susitinka su fiuzeliažo dydžio serifo logotipu, o vienas šiltas molio akcentas nutraukia monochromatinį santūrumą.
- OFF+BRAND. — Vaivorykštinė sfera ant šilto pergamento
- Seed — gyvas organizmas po laboratoriniu stiklu
- Eindhoven Design District — Redakcinis brutalumas ant balto popieriaus yra savivaldybės dizaino manifestas, atliktas dideliu šriftu, su minimaliu fotografijos kiekiu ir absoliučiu santūrumu.
- Miranda — Klasikinis plataus formato šriftas šviesiai kreminiame fone – skaitmeninio amžiaus laikraščio redakcijos straipsnis
- Monocle — Aukštos kokybės, plataus formato laikraštis ant kreminės spalvos popieriaus. Kruopščiai kuruojamas redakcinis straipsnis, kuriame kiekvienas stulpelis nusipelno savo vietos ir puslapyje pateikiama tik viena prasminga spalva.
- Agencja brandingowa — Redakcinė galerija baltais tonais ir juodu rašalu atlikta tipografija
- Websmith Studio — Ryto šviesa ant kreminio popieriaus
- Aspelin Reitan — Architektūros archyvas žvakių šviesoje – puslapis atrodo kaip prie šiltos kreminės sienos pritvirtintų pastatytų erdvių portfolio, o virš kiekvieno paveikslėlio per visą puslapio plotį kybo viena balto teksto eilutė.
- Public — Monochrominis redakcinis straipsnis ant šalto marmuro – beveik monochrominė drobė, su 300 taškų serif šriftu ir vienu violetiniu akcentu, atliekančiu visą spalvų darbą.
- Motto — Tipografinis monolitas ant popieriaus – vienas, užtikrintas balsas, pasiskelbiantis ant sniego baltumo popieriaus