Framer
Neon Galerie an der Void
De Framer funktionéiert wéi bal total Däischtert - eng schwaarz Leinwand, wou den Inhalt wéi e Neonreklamm bei enger Galerie-Ouverture schweeft. Iwwerschrëften, déi a GT Walsheim Medium mat engem enge Zeilenofstand vun 0,8–1,1 an engem aggressiven negativen Buschtawenofstand (-0,04em bei 54px) agestallt sinn, kreéieren eng kondenséiert, dekorativ Schrëft, déi no vir dréckt anstatt propper op der Säit ze sëtzen. En eenzegt elektrescht Blo (#0099ff) suergt fir all déi funktionell Akzenter - Ränner, Liicht, Ikonen, aktiv Zoustänn - während de Rescht vun der Interface achromatesch bleift a sech op subtile gro Iwwergäng (#111, #171717, #242424) baséiert, fir Déift aus purem Schwaarz ze kreéieren. Komponenten fille sech éischter iwwerluecht wéi dekorativ un: gerundete Radien vun 8–25px, dënn 1px Ränner, minimal Dropshatten an duerchscheinend Uewerflächen, déi et der Eidelkeet erlaben, duerchzestrahlen.
Sektiounen a voller Breet ginn iwwer déi schwaarz Leinwand eraus, mat engem Inhalt deen op eng maximal Breet vun ~1200px limitéiert ass a bannent dem Zentrum läit. Den Haaptdeel huet en lénks-ausgeriichteten Header an een eenzege Call-to-Action (CTA) Knäppchen, woubäi déi riets Säit absichtlech eidel gelooss gëtt - asymmetresch, net zentréiert. D'Sektiounen wiesselen tëscht Text-nëmmen-Layouten (groussen Header + Subtext) a Produkt-Screenshots. D'Sektioun "Comes with Framer" benotzt eng Logo-Mauer an engem Raster mat 4 Kolonnen. An der Community-Sektioun gëtt e Produkt-Screenshot an engem zentréierte Container a voller Breet mat ofgerundeten Ecker placéiert. D'Navigatioun ass minimal - eng dënn iewescht Leescht mam Logo lénks a Linken, déi op riets ausgeriicht sinn, ouni siichtbar Kontrollen. Sektiounsrhythmus: bedeitend 80px vertikal Lücken tëscht de Sektiounen, wouduerch verschidde Insele vun Inhalt am Eidel schwiewen.
Screenshots vun der Benotzerinterface vum Produkt dominéieren - agekaden vun engem chromähnleche Fënster mat Ampelpunkten, ginn agebette Screenshots vun der App zum Haaptbild. Logoen, déi als Beweis fir Qualitéit déngen, ginn a wäisser Buschtawen op engem schwaarzen Hannergrond mat groussem Ofstand presentéiert. Et gi keng Fotoen, Illustratiounen oder abstrakt Grafiken benotzt - déi visuell Sprooch ass d'Produkt selwer, dat als lieweg Interface ugewise gëtt. Ikonstil: minimalistesch, konturéiert, monochrom a wäiss a klenge Gréissten. Textdichte: iwwerwiegend Text, mat heiansdo grousse Fragmenter a Form vu Produktscreenshots. Déi visuell Gläichgewiicht vum Raum favoriséiert kloer Typographie iwwer Biller.
Palette
Mark
- Vivid Violet
#0066ff— De primäre Aktiounsknäppchen ass déi eenzeg Plaz an der Interface, wou en eenheetleche faarwegen Hannergrond vum Knäppchen ugewise gëtt.
Neutral
- Bone
#ffffff— Haaptiwwerschrëften, Haapttext op engem donkelen Hannergrond, Knäppchenhannergrond ass déi eenzeg Liichtquell. - Void
#000000— D'Säite-Leinwand, den Navigatiounshannergrond, d'Kaarteflächen, d'Ikonfëllung – all sinn eng endlos schwaarz Faarf, déi all net-essentiellen Inhalt absorbéiert. - Graphite
#111111— Erhuewe Kaarteflächen sinn e Schrëtt iwwer dem Void - grouss funktionell Kaarten a modal Behälter. - Obsidian
#171717— Zwëschenuewerfläch fir Knäppercher, zousätzlech Kaarten, UI-Fëllungen - trennt interaktiv Elementer vun der Leinwand. - Slate
#242424— Beim Mauszeechen sinn d'Inputfelder an déi agedeckelt Panelen déi hellst neutral Faarf, ier se op den Textformat wiesselen. - Ash
#333333— Déif Fëllung fir inaktiv Hannergrondbiller a strukturell Elementer.
Typographie
vun 12 bis 68px · 8 Schrëtt
- sans-serif — Ersatz: Inter · Konturen 400 · sans-serif - an den extrahéierten Donnéeën fonnt, awer net vun der KI beschriwwen.
- GT Walsheim — Ersatz: Inter Tight · Konturen 500 · D'Schrëft fir Iwwerschrëften an Titelen ass d'Schrëft vun der Mark. Si ass aggressiv kondenséiert, mat engem Zeilenofstand vun 0,8–1,1 an engem Buschtawenofstand vun -0,04em bis -0,05em am Beräich vun 44–68px. Et ass kee dekorativen Element; déi geometresch Wäermt vum GT Walsheim, kombinéiert mat strikte Metriken, kreéiert d'Stëmm vum System – selbstsécher, kompakt a liicht futuristesch. Fir en ähnlechen geometreschen Ausdrock, betruecht Inter Tight oder Space Grotesk Bold.
- Inter Variable — Ersatz: Inter · Konturen 400 · Den Haapttext, d'Navigatioun an d'Nieweniwwerschrëften sinn d'Aarbechtspäerd. D'Inter Variable Achs erlaabt eng reibungslos Interpolatioun vu Gewiichter. D'Verfolgung gëtt méi kleng mat der Gréisst: vun -0,001em op 18px an op -0,027em op 22px. Déi variabel Versioun erlaabt reibungslos Mikroanimatioune vun der Säit. Ersatz: Inter ( Google) – e bal identesche Fallback.
Intervaller a Form
| Zweck | Bedeitung |
|---|---|
| Dicht | duerchschnëttlech |
| Basis Schrëtt | 10px |
| Knäppchenradius | 9999px |
| Kaarteradius | 20px |
| Schied | keng Grenzen amplaz vu Schied |
| Tëscht de Sektiounen | 80px |
| Säitebreet | 1200px |
KI baut Är Websäit am Stil vun Framer op a fëllt se aus
- Fëllt mat Produkter a Posts iwwer de Link aus - Instagram, TikTok, Facebook.
- Inhalt vun Ärer aler Säit transferéieren - gitt einfach d'Adress un.
- Modernen Design op der beschter Engine: React ( Next.js) mat Serverrendering an SEO Optimiséierung direkt aus der Këscht.
- Vollautomatesch SEO-Optimiséierung fir Sichresultater an Empfehlungen fir neuronal Netzwierker.
Ähnlech Stiler
- Auros — Abyssal Terminal mat biolumineszenten Datenkugelen
- Origin Financial — Eng Mëtternuechtsgalerie vu roueger Opulenz. E rouegen, bal däischteren Zëmmer, wou grouss Schrëften mat Serifen an e puer beliichte faarweg Paneele d'Gefill kreéieren, datt Finanzen e suergfälteg kuréiert Konschtwierk sinn.
- Raycast — Mëtternuechtskommandozentrum, Coral Neon
- Dimension — eng Aarbechtsplaz mat mattéierte Glaspanneauen, déi bei Dämmerung beliicht sinn
- Reflect Notes — De stärekleiege violette Raum ass en däischtert Observatoire, wou Noten wéi Stärebiller virun engem Hannergrond vun bal schwaarzer indigoer Eidelkeet schwiewen.
- Ameba — D'Kontrollraum ëm Mëtternuecht – en elektresche bloe Puls an de matte Glaspanneauen
- Branding — Schwaarz Galeriemauer, bluttrout Akzenter - Grouss wäiss Schrëften schwiewen op enger donkeler Leinwand, déi enger Eidelkeet gläicht, ënnerbrach vun engem eenzegen hellrouden Akzent an opfällegen dekorativen Elementer, déi éischter wéi Galerieschëlder wéi eng Webinterface ausgesinn.
- Harness — Missiounskontroll ëm Mëtternuecht mat phosphoreszenten gréngen Akzenter
- Koto — D'Obsidian Galerie um Mëtternuecht. Eng bal stockdäischter Bün, wou déi eenzeg waarm Liichtquell eng eenzeg giel Marker ass, a kondenséiert Schrëften am risegen Negativraum schwiewen wéi Ausstellungsplakater.
- Ohzi — E glühende Kubus, deen an enger donkeler Galerie hänkt
- Depot — En donkelen Serverterminal. Eng bal schwaarz Entwécklerkonsole, mat enger eenzeger grénger LED, déi den Ufank vun der Aarbecht signaliséiert, an dem Rescht vun der Benotzeroberfläche, déi a Graphit ugewise gëtt.
- Maciej Zadykowicz — D'Midnight Gallery mat hirem kaleidoskopesche Wandbild ass eng bal schwaarz Ateliermauer, wou een liewegt, faarwegt typografescht Konschtwierk d'Opmierksamkeet op sech zitt, während alles anescht roueg a bewosst bleift.