Framer
neongalerij in de leegte
Framer functioneert in bijna totale duisternis – een zwart canvas waarop de inhoud zweeft als een neonreclame bij een galerieopening. Kopteksten, gezet in GT Walsheim Medium met een krappe regelafstand van 0,8–1,1 en een agressieve negatieve letterafstand (-0,04em bij 54px), creëren een compact, decoratief lettertype dat naar voren komt in plaats van netjes op de pagina te staan. Een enkele elektrische blauwe tint (#0099ff) zorgt voor alle functionele accenten – randen, gloed, pictogrammen, actieve statussen – terwijl de rest van de interface achromatisch blijft en vertrouwt op subtiele grijstinten (#111, #171717, #242424) om diepte te creëren vanuit puur zwart. Componenten voelen doordacht aan in plaats van decoratief: afgeronde radii van 8–25px, dunne randen van 1px, minimale slagschaduwen en doorschijnende oppervlakken die de leegte erdoorheen laten schijnen.
Secties over de volledige breedte strekken zich uit buiten het zwarte canvas, waarbij de inhoud beperkt is tot een maximale breedte van ongeveer 1200px en gecentreerd is. De hoofdsectie heeft een links uitgelijnde koptekst en een enkele call-to-action (CTA) knop, waarbij de rechterkant opzettelijk leeg is gelaten – asymmetrisch, niet gecentreerd. Secties wisselen af tussen lay-outs met alleen tekst (grote koptekst + subtekst) en productscreenshots. De sectie "Wordt geleverd met Framer" maakt gebruik van een logo-wall in een raster van vier kolommen. In de community-sectie is een productscreenshot geplaatst in een gecentreerde container over de volledige breedte met afgeronde hoeken. De navigatie is minimaal: een dunne bovenbalk met het logo links en links rechts uitgelijnd, zonder zichtbare bedieningselementen. Sectieritme: aanzienlijke verticale tussenruimtes van 80px tussen secties, waardoor afzonderlijke eilanden van inhoud in de lege ruimte lijken te zweven.
Screenshots van de gebruikersinterface van het product domineren – ingekaderd door een chroomachtig venster met verkeerslichtstippen, vormen ingebedde screenshots van de app het belangrijkste beeld. Logo's, die dienen als kwaliteitsbewijs, worden weergegeven in witte letters op een zwarte achtergrond met ruime tussenruimte. Er worden geen foto's, illustraties of abstracte afbeeldingen gebruikt – de visuele taal is het product zelf, weergegeven als een levende interface. Iconenstijl: minimalistisch, omlijnd, monochroom en wit in kleine formaten. Tekstdichtheid: overwegend tekst, met af en toe grotere fragmenten in de vorm van productscreenshots. De visuele balans van de ruimte geeft duidelijk de voorkeur aan typografie boven afbeeldingen.
Palet
Merk
- Vivid Violet
#0066ff— De primaire actieknop is de enige plek in de interface waar een effen gekleurde achtergrond wordt weergegeven.
Neutrale
- Bone
#ffffff— Hoofdtitels, hoofdtekst op een donkere achtergrond, de achtergrond van de knop is de enige lichtbron. - Void
#000000— Het pagina-oppervlak, de navigatieachtergrond, de kaartoppervlakken, de pictogramvulling – alles is uitgevoerd in een oneindige zwarte kleur die alle niet-essentiële inhoud absorbeert. - Graphite
#111111— Kaartoppervlakken met reliëf zijn een stapje hoger dan de lege ruimte – grote, functionele kaarten en modale containers. - Obsidian
#171717— Tussenlaag voor knoppen, extra kaarten, UI-vullingen - scheidt interactieve elementen van het canvas. - Slate
#242424— Bij het hoveren met de muis worden invoervelden en ingesprongen panelen in de helderste neutrale tint weergegeven, voordat ze overschakelen naar tekstformaat. - Ash
#333333— Diep opvullen voor inactieve achtergrondafbeeldingen en structurele elementen.
Typografie
van 12 tot 68px · 8 stappen
- sans-serif — vervanging: Inter · overzichten 400 · sans-serif - gevonden in de geëxtraheerde gegevens, maar niet beschreven door de AI.
- GT Walsheim — vervanging: Inter Tight · overzichten 500 · Het lettertype voor koppen en titels is het merklettertype. Het is sterk gecondenseerd, met een regelafstand van 0,8–1,1 en een letterafstand van -0,04em tot -0,05em in het bereik van 44–68px. Het is geen decoratief element; de geometrische warmte van GT Walsheim, gecombineerd met strikte metrische waarden, creëert de eigen stijl van het systeem: zelfverzekerd, compact en een beetje futuristisch. Voor een vergelijkbare geometrische expressie kunt u Inter Tight of Space Grotesk Bold overwegen.
- Inter Variable — vervanging: Inter · overzichten 400 · De hoofdtekst, navigatie en secundaire koppen vormen de kern van de website. De Inter Variable-as maakt een vloeiende interpolatie van gewichten mogelijk. De tracking wordt smaller naarmate de grootte toeneemt: van -0,001em tot 18px en van -0,027em tot 22px. De variabele versie maakt vloeiende micro-animaties op de site mogelijk. Vervanging: Inter ( Google) – een vrijwel identiek alternatief.
Intervallen en vorm
| Doel | Betekenis |
|---|---|
| Dikte | gemiddeld |
| Basisstap | 10px |
| Knopradius | 9999px |
| Kaartradius | 20px |
| Schaduwen | geen randen in plaats van schaduwen |
| Tussen secties | 80px |
| Paginabreedte | 1200px |
AI bouwt je website in de stijl Framer en vult deze in.
- Vul het account aan met producten en berichten via de link - Instagram, TikTok, Facebook.
- Neem de inhoud van je oude website over; geef gewoon het adres op.
- Modern design op de beste engine: React ( Next.js) met server-side rendering en SEO-optimalisatie direct uit de doos.
- Volledig geautomatiseerde SEO-optimalisatie voor zoekresultaten en aanbevelingen op basis van neurale netwerken.
Vergelijkbare stijlen
- Auros — Abyssale terminal met bioluminescente databallen
- Origin Financial — Een nachtelijke galerij van ingetogen weelde. Een stille, bijna donkere ruimte waar grote schreefletters en een paar verlichte, gekleurde panelen de indruk wekken dat de financiële wereld een zorgvuldig samengesteld kunstwerk is.
- Raycast — Middernacht Commandocentrum, Koraal Neon
- Dimension — een bij schemering verlichte werkplek met panelen van matglas
- Reflect Notes — De paarse sterrenhemel is een donker observatorium waar noten als sterrenbeelden zweven tegen een achtergrond van bijna zwarte indigo leegte.
- Ameba — De controlekamer om middernacht – een elektrisch blauwe puls in de matglazen panelen.
- Branding — Zwarte galeriewand met bloedrode accenten - Grote witte letters zweven op een donker canvas dat op een leegte lijkt, onderbroken door een enkel felrood accent en opvallende decoratieve elementen die meer op galerieborden lijken dan op een webinterface.
- Harness — Mission Control om middernacht met fosforescerende groene accenten.
- Koto — De Obsidian Gallery om middernacht. Een bijna pikdonker podium, waar de enige warme lichtbron een enkele gele marker is, en gecondenseerde letters in de immense negatieve ruimte zweven als tentoonstellingsposters.
- Ohzi — Een gloeiende kubus, opgehangen in een donkere galerij.
- Depot — Een donkere serverterminal. Een bijna zwarte ontwikkelaarsconsole, met een enkele groene led die het begin van het werk aangeeft, en de rest van de gebruikersinterface weergegeven in grafiet.
- Maciej Zadykowicz — De Midnight Gallery, met zijn caleidoscopische muurschildering, is een bijna volledig zwarte studiowand waar één levendig, kleurrijk typografisch kunstwerk alle aandacht trekt, terwijl de rest van de ruimte rustig en weloverwogen blijft.