Framer
neoninė galerija tuštumoje
„Framer“ veikia kaip beveik visiška tamsa – juoda drobė, ant kurios turinys kybo lyg neoninis ženklas galerijos atidaryme. Antraštės, parašytos „GT Walsheim Medium“ šriftu, su griežtais 0,8–1,1 eilutės tarpais ir agresyviais neigiamais raidžių tarpais (-0,04em ties 54 pikseliais), sukuria glaustą, dekoratyvų šriftą, kuris labiau išsikiša į priekį, nei tvarkingai guli puslapyje. Viena elektrinė mėlyna spalva (#0099ff) suteikia visus funkcinius akcentus – rėmelius, švytėjimą, piktogramas, aktyvias būsenas, o likusi sąsajos dalis išlieka achromatinė, pasikliaujanti subtiliais pilkais perėjimais (#111, #171717, #242424), kad iš grynos juodos spalvos būtų sukurtas gylis. Komponentai atrodo labiau apgalvoti nei dekoratyvūs: suapvalinti 8–25 pikselių spinduliai, plonos 1 pikselio rėmeliai, minimalūs šešėlių kritimai ir permatomi paviršiai, leidžiantys prasiskverbti tuštumai.
Viso pločio sekcijos tęsiasi už juodos drobės ribų, o turinio plotis ribojamas iki ~1200 pikselių ir jis centruojamas sekcijos viduje. Pagrindinėje sekcijoje yra kairėje lygiuota antraštė ir vienas raginimo veikti (CTA) mygtukas, o dešinė pusė sąmoningai palikta tuščia – asimetriškai, ne centruotai. Sekcijos kaitaliojasi tarp tik teksto išdėstymų (didelė antraštė + potekstė) ir produkto ekrano kopijų. Sekcijoje „Comes with Framer“ naudojama logotipo siena 4 stulpelių tinklelyje. Bendruomenės sekcijoje produkto ekrano kopija patalpinta centruotame, viso pločio konteineryje su užapvalintais kampais. Navigacija minimali – plona viršutinė juosta su logotipu kairėje ir nuorodomis sulygiuotomis dešinėje, be matomų valdiklių. Sekcijų ritmas: dideli 80 pikselių vertikalūs tarpai tarp sekcijų, sukuriantys atskiras turinio salas, plūduriuojančias tuštumoje.
Dominuoja produkto vartotojo sąsajos ekrano nuotraukos – įrėmintos chromo spalvos langu su šviesoforo taškais, o įterptos programėlės ekrano nuotraukos tampa pagrindiniu vaizdu. Logotipai, tarnaujantys kaip kokybės įrodymas, pateikiami baltomis raidėmis juodame fone su plačiais tarpais. Nenaudojamos jokios nuotraukos, iliustracijos ar abstrakčios grafikos – vizualinė kalba yra pats produktas, rodomas kaip gyva sąsaja. Piktogramų stilius: minimalistinis, su kontūrais, vienspalvis ir baltas, mažais dydžiais. Teksto tankis: daugiausia tekstas, su retkarčiais dideliais fragmentais produkto ekrano kopijų pavidalu. Vizualinis erdvės balansas aiškiai pirmenybę teikia tipografijai, o ne vaizdams.
Paletė
Prekės ženklas
- Vivid Violet
#0066ff— Pagrindinis veiksmo mygtukas yra vienintelė vieta sąsajoje, kur rodomas vientisos spalvos mygtuko fonas.
Neutralus
- Bone
#ffffff— Pagrindinės antraštės, pagrindinis tekstas tamsiame fone, mygtukų fonas yra vienintelis šviesos šaltinis. - Void
#000000— Puslapio drobė, naršymo fonas, kortelių paviršiai, piktogramų užpildymas – visa tai yra begalinė juoda spalva, sugerianti visą nebūtiną turinį. - Graphite
#111111— Pakelti kortelių paviršiai yra laiptelis virš tuštumos – didelės funkcinės kortelės ir modaliniai konteineriai. - Obsidian
#171717— Tarpinis paviršius mygtukams, papildomoms kortelėms, vartotojo sąsajos užpildams – atskiria interaktyvius elementus nuo drobės. - Slate
#242424— Užvedus pelės žymeklį, įvesties laukai ir įtrauktos panelės prieš perjungiant į teksto formatą yra ryškiausio neutralaus atspalvio. - Ash
#333333— Gilus užpildymas neaktyviems fono paveikslėliams ir struktūriniams elementams.
Tipografija
nuo 12 iki 68 pikselių · 8 žingsniai
- sans-serif — pakeitimas: Inter · kontūrai 400 · be serifų – randamas išgautuose duomenyse, bet dirbtinis intelektas jo neaprašo.
- GT Walsheim — pakeitimas: Inter Tight · kontūrai 500 · Antraščių ir pavadinimų šriftas yra firminis. Jis agresyviai sutankintas, eilučių tarpai yra 0,8–1,1, o raidžių tarpai – nuo -0,04em iki -0,05em, o formatas – 44–68 pikseliai. Tai nėra dekoratyvinis elementas; „GT Walsheim“ geometrinis šiluma kartu su griežtais rodikliais sukuria sistemos įvaizdį – užtikrintą, kompaktišką ir šiek tiek futuristinį. Panašiai geometrinei išraiškai pasiekti apsvarstykite „Inter Tight“ arba „Space Grotesk Bold“.
- Inter Variable — pakeitimas: Inter · kontūrai 400 · Pagrindinis tekstas, navigacija ir antrinės antraštės yra pagrindiniai veiksniai. „Inter Variable“ ašis leidžia sklandžiai interpoliuoti svorius. Sekimas siaurėja didėjant dydžiui: nuo -0,001 em iki 18 pikselių ir nuo -0,027 em iki 22 pikselių. Kintama versija leidžia sklandžiai atkurti svetainės mikroanimaciją. Pakeitimas: „Inter“ ( Google) – praktiškai identiškas atsarginis variantas.
Intervalai ir forma
| Tikslas | Reikšmė |
|---|---|
| Tankis | vidutinis |
| Pagrindinis žingsnis | 10px |
| Mygtuko spindulys | 9999px |
| Kortelės spindulys | 20px |
| Šešėliai | ne – rėmeliai vietoj šešėlių |
| Tarp sekcijų | 80px |
| Puslapio plotis | 1200px |
Dirbtinis intelektas sukurs jūsų svetainę Framer 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
- Auros — Abisalinis terminalas su bioliuminescenciniais duomenų kamuoliais
- Origin Financial — Vidurnakčio ramios prabangos galerija. Tyli, beveik tamsi patalpa, kurioje dideli serifiniai šriftai ir kelios apšviestos spalvotos plokštės sukuria įspūdį, kad finansai yra kruopščiai kuruotas meno kūrinys.
- Raycast — Vidurnakčio komandų centras, Koralų Neonas
- Dimension — prieblandoje apšviesta darbo vieta su matinio stiklo plokštėmis
- Reflect Notes — Žvaigždėta violetinė erdvė yra tamsi observatorija, kurioje natos sklando tarsi žvaigždynai beveik juodos indigo tuštumos fone.
- Ameba — Valdymo kambarys vidurnaktį – elektrinė mėlyna šviesa matinio stiklo plokštėse
- Branding — Juoda galerijos siena, kruvini raudonumo akcentai – dideli balti šriftai plūduriuoja ant tamsios drobės, primenančios tuštumą, kurią pertraukia vienas ryškiai raudonas akcentas ir ryškūs dekoratyviniai elementai, labiau panašūs į galerijos iškabą nei į žiniatinklio sąsają.
- Harness — Misijos valdymo centras vidurnaktį su fosforescuojančiomis žaliomis detalėmis
- Koto — Obsidianų galerija vidurnaktį. Beveik aklinai juoda scena, kurioje vienintelis šiltas šviesos šaltinis yra vienas geltonas žymeklis, o sutankintas šriftas plūduriuoja didžiulėje negatyvo erdvėje tarsi parodų plakatai.
- Ohzi — Švytintis kubas, pakibęs tamsioje galerijoje
- Depot — Tamsus serverio terminalas. Beveik juoda kūrėjo konsolė su vienu žaliu šviesos diodu, signalizuojančiu apie darbo pradžią, o likusi vartotojo sąsajos dalis rodoma grafitu.
- Maciej Zadykowicz — „Vidurnakčio galerija“ su kaleidoskopine freska yra beveik juoda studijos siena, kur vienas ryškus, spalvingas tipografinis meno kūrinys traukia dėmesį, o visa kita išlieka tyli ir apgalvota.