Framer
neona galerija tukšumā
Framer darbojas kā gandrīz pilnīga tumsa — melns audekls, uz kura saturs lidinās kā neona zīme galerijas atklāšanā. Virsraksti, kas veidoti GT Walsheim Medium krāsā ar ciešu rindstarpu 0,8–1,1 un agresīvu negatīvu burtu atstarpi (-0,04em pie 54 pikseļiem), rada koncentrētu, dekoratīvu fontu, kas drīzāk virzās uz priekšu, nevis glīti atrodas lapā. Viena elektriskā zilā krāsa (#0099ff) nodrošina visus funkcionālos akcentus — apmales, spīdumu, ikonas, aktīvos stāvokļus —, savukārt pārējā saskarne paliek ahromatiska, paļaujoties uz smalkām pelēkām pārejām (#111, #171717, #242424), lai radītu dziļumu no tīras melnas krāsas. Komponenti šķiet pārdomāti, nevis dekoratīvi: noapaļoti rādiusi 8–25 pikseļi, plānas 1 pikseļa apmales, minimālas ēnas un caurspīdīgas virsmas, kas ļauj tukšumam spīdēt cauri.
Pilna platuma sadaļas sniedzas ārpus melnā audekla, un satura maksimālais platums ir ierobežots līdz ~1200 pikseļiem un tas ir centrēts iekšpusē. Galvenajā sadaļā ir pa kreisi izlīdzināta galvene un viena aicinājuma uz darbību (CTA) poga, kuras labā puse ir apzināti atstāta tukša — asimetriski, nevis centrēta. Sadaļas mainās starp tikai teksta izkārtojumiem (liela galvene + apakšteksts) un produktu ekrānuzņēmumiem. Sadaļā “Comes with Framer” tiek izmantota logotipa siena 4 kolonnu režģī. Kopienas sadaļā produkta ekrānuzņēmums ir ievietots centrētā, pilna platuma konteinerā ar noapaļotiem stūriem. Navigācija ir minimāla — plāna augšējā josla ar logotipu kreisajā pusē un saitēm, kas izlīdzinātas labajā pusē, bez redzamām vadīklām. Sadaļu ritms: ievērojamas 80 pikseļu vertikālas atstarpes starp sadaļām, radot atšķirīgas satura salas, kas peld tukšumā.
Dominē produkta lietotāja saskarnes ekrānuzņēmumi — hromam līdzīga loga ar luksofora punktiem ierāmēti, iegultie lietotnes ekrānuzņēmumi kļūst par galveno attēlu. Logotipi, kas kalpo kā kvalitātes apliecinājums, ir attēloti ar baltiem burtiem uz melna fona ar platām atstarpēm. Netiek izmantotas fotogrāfijas, ilustrācijas vai abstrakta grafika — vizuālā valoda ir pats produkts, kas attēlots kā dzīva saskarne. Ikonu stils: minimālistisks, ar kontūrām, vienkrāsains un balts mazos izmēros. Teksta blīvums: pārsvarā teksts, ar neregulāriem lieliem fragmentiem produkta ekrānuzņēmumu veidā. Telpas vizuālais līdzsvars nepārprotami dod priekšroku tipogrāfijai, nevis attēliem.
Palete
Zīmols
- Vivid Violet
#0066ff— Galvenās darbības poga ir vienīgā vieta saskarnē, kur tiek parādīts vienkrāsains pogas fons.
Neitrāls
- Bone
#ffffff— Galvenie virsraksti, galvenais teksts uz tumša fona, pogu fons ir vienīgais gaismas avots. - Void
#000000— Lapas audekls, navigācijas fons, karšu virsmas, ikonu aizpildījums — tas viss ir bezgalīgi melns, kas absorbē visu nebūtisko saturu. - Graphite
#111111— Paceltas karšu virsmas ir pakāpienu virs tukšuma — lielas funkcionālās kartes un modālie konteineri. - Obsidian
#171717— Starpvirsma pogām, papildu kartēm, lietotāja interfeisa aizpildījumiem — atdala interaktīvos elementus no audekla. - Slate
#242424— Virzot kursoru, ievades lauki un ievilktie paneļi pirms pārslēgšanās uz teksta formātu ir spilgtākajā neitrālajā tonī. - Ash
#333333— Dziļš aizpildījums neaktīviem fona attēliem un strukturāliem elementiem.
Tipogrāfija
no 12 līdz 68 pikseļiem · 8 soļi
- sans-serif — nomaiņa: Inter · kontūras 400 · sans-serif — atrodams iegūtajos datos, bet mākslīgais intelekts to nav aprakstījis.
- GT Walsheim — nomaiņa: Inter Tight · kontūras 500 · Virsrakstu un nosaukumu fonts ir zīmola fonts. Tas ir agresīvi saspiests, ar rindu atstarpi 0,8–1,1 un burtu atstarpi no -0,04em līdz -0,05em 44–68 pikseļu diapazonā. Tas nav dekoratīvs elements; GT Walsheim ģeometriskais siltums apvienojumā ar stingriem rādītājiem rada sistēmas balsi — pārliecinātu, kompaktu un nedaudz futūristisku. Līdzīgai ģeometriskai izteiksmei apsveriet Inter Tight vai Space Grotesk Bold.
- Inter Variable — nomaiņa: Inter · kontūras 400 · Galvenais teksts, navigācija un sekundārie virsraksti ir darba zirgs. Inter Variable ass nodrošina vienmērīgu svaru interpolāciju. Izsekošana sašaurinās, palielinoties izmēram: no -0,001em līdz 18 pikseļiem un no -0,027em līdz 22 pikseļiem. Mainīgā versija nodrošina vienmērīgas vietnes mikroanimācijas. Aizstāšana: Inter ( Google) – praktiski identisks rezerves variants.
Intervāli un forma
| Mērķis | Nozīme |
|---|---|
| Blīvums | vidēji |
| Pamata solis | 10px |
| Pogas rādiuss | 9999px |
| Kartes rādiuss | 20px |
| Ēnas | nē — robežas ēnu vietā |
| Starp sekcijām | 80px |
| Lapas platums | 1200px |
Mākslīgais intelekts izveidos jūsu vietni Framer stilā un aizpildīs to
- Aizpildiet ar produktiem un ierakstiem, izmantojot saiti — Instagram, TikTok, Facebook.
- Pārsūtiet saturu no savas vecās vietnes — vienkārši norādiet adresi.
- Moderns dizains uz labākā dzinēja: React ( Next.js) ar servera renderēšanu un SEO optimizāciju uzreiz pēc instalēšanas.
- Pilnībā automatizēta SEO optimizācija meklēšanas rezultātiem un neironu tīkla ieteikumiem.
Līdzīgi stili
- Auros — Abesāla terminālis ar bioluminiscējošām datu bumbām
- Origin Financial — Pusnakts galerija, kurā valda klusa greznība. Klusa, gandrīz tumša telpa, kur lieli serif fonti un daži izgaismoti krāsaini paneļi rada sajūtu, ka finanses ir rūpīgi veidots mākslas darbs.
- Raycast — Pusnakts komandcentrs, Koraļļu neons
- Dimension — krēslā apgaismota darbstacija ar matēta stikla paneļiem
- Reflect Notes — Zvaigžņotā violetā telpa ir tumša observatorija, kur notis peld kā zvaigznāji uz gandrīz melna indigo tukšuma fona.
- Ameba — Vadības telpa pusnaktī – elektriski zils pulss matēta stikla paneļos
- Branding — Melna galerijas siena, asinssarkani akcenti — lieli balti fonti peld uz tumša audekla, kas atgādina tukšumu, ko pārtrauc viens spilgti sarkans akcents un pārsteidzoši dekoratīvi elementi, kas vairāk izskatās pēc galerijas izkārtnēm nekā tīmekļa saskarnes.
- Harness — Misijas vadības centrs pusnaktī ar fosforescējošiem zaļiem akcentiem
- Koto — Obsidiāna galerija pusnaktī. Gandrīz piķa melna skatuve, kur vienīgais siltās gaismas avots ir viens dzeltens marķieris, un plašajā negatīvajā telpā kā izstāžu plakāti peld blīvēts burtu teksts.
- Ohzi — Kvēlojošs kubs, kas karājas tumšā galerijā
- Depot — Tumšs servera terminālis. Gandrīz melna izstrādātāja konsole ar vienu zaļu gaismas diodi, kas signalizē par darba sākšanu, un pārējā lietotāja saskarne ir attēlota grafītā.
- Maciej Zadykowicz — Pusnakts galerija ar savu kaleidoskopisko sienas gleznojumu ir gandrīz melna studijas siena, kur uzmanību piesaista viens spilgts, krāsains tipogrāfisks mākslas darbs, kamēr viss pārējais paliek kluss un apzināts.