
Subframe
Pergamino epel batean egindako marrazki grafikoa. Diseinatzaile-papera, non trazu bakoitza grafitozkoa edo borragomazkoa den, ez da inoiz margotzen —sakontasuna lerroaren lodieraren eta serifa urrikoen bidez lortzen da.
Subframe diseinatzaile monokromo baten lan-eremua da: mihise epel eta krematsua, tinta grafito-beltza eta azentu kromatikoen erabateko gabezia. Interfaze osoa material bakar gisa hautematen da —papera, arkatza eta itzala— ukitu tipografiko ausart batekin: serif findu bat (Instrument Serif) sans-serif sistematiko baten (Inter) aurrean jarrita, tituluei grabitate editoriala emanez. Gainazalak lauak eta markoztatuak dira, altxatu beharrean; sakontasuna lortzen da #e5e7eb koloreko banatzaile meheen bidez eta itzalen ordez kontrol ilunetan txertatutako nabarmentzen bidez. Dentsitatea eskuzabala da: erritmo bertikal zabala (48-64px atalen arteko hutsuneak), erdiko diseinu zabalera osokoak eta testuaren inguruko espazio zuri zabala. Kolore bakarra ia zuriaren eta ia beltzaren arteko kontrastea da, botoi iluna orrialde bakoitzeko elementu deigarriena bihurtuz, eta bazkideen marken logotipoen zerrenda tonu grisetan elementu bisual apaingarri bakarra.
Diseinu zentratuak, zabalera osokoak (1200px), erritmo bertikal eskuzabal batekin. Elementu nagusia bloke zentratu bakarra da: kontrol segmentatu ilun bat goialdean, "Inter" izenburu handi bat, azpititulu lerro bakarreko bat eta bi botoi elkarren ondoan (beteak + zeharrargiak) — alboko irudirik ez, diseinuaren banaketarik ez. Elementu nagusiaren azpian, logotipoaren eskala griseko marra zentratu bat dago. Ondorengo atal bakoitzak eredu bera jarraitzen du: ezkerrean lerrokatutako izenburu eta azpititulu bloke bat, eta gero produktuaren erakusleiho marko zabal bat, atalen artean 48-64px-ko tartearekin. Nabigazioa minimoa da: goiko barra bat, erdian estekak eta eskuinean lerrokatutako ekintzak dituena, alboko barrarik ez, mega-menurik ez. Orria goitik behera irakurtzen da adierazpen zentratuen serie gisa, bakoitzari leku zabala emanez — diseinuak produktu orrialde bete bat baino erredakzio-zorro baten antza handiagoa du.
Diseinu bisuala minimalista eta funtzionala da. Sistemak bi modu bisual erabiltzen ditu: (1) produktuen pantaila-argazki markoztatuak eta UI maketak 24px-ko erradioko markoetan sartuta —benetako interfazearen osagaiak (taulak, botoiak, formularioak) paleta monokromo berean errendatuta erakusten dituzte, pantaila-argazkiak orrialdean ezin hobeto integratuta ager daitezen; (2) bazkideen logotipo grisen zerrenda bakarra froga sozial gisa balio du, laua, kolorerik edo ontzirik gabe errendatuta. Ez dago bizimodu argazkirik, gradiente abstrakturik edo 3D errendatzerik. Elementu ilustratibo bakarra produktuaren "teila" ilun bat da, marka ikono batekin atzeko plano gris bero batean zentratuta —produktuaren erakustaldi gisa hautematen da, ez apaingarri gisa. Irudi guztiek testuan oinarritutako diseinu bat hartzen dute, non pisu bisuala testuak daraman.
Paleta
Neutroa
- Page Canvas
#fafafa— Orriaren atzeko planoa, mihise gaineko postala, gainazal ilunetan dagoen testu argia – sistema monokromo osoaren oinarrian dagoen kolore zuri beroa. - Hairline Border
#e5e7eb— Zatitzaileak, txartelen ertzak, irudien markoak, ikonoen eskemak - sisteman gehien erabiltzen den eskema mota, egitura espaziala definitzen du. - Card Surface
#ededed— Txartelentzako atzeko plano altxatua, gainazal gehigarri bat - mihisearen gainetik maila bat dago, itzalik gabeko multzo bat sortuz. - Divider Mid
#dadada— Tonu ertaineko banatzaileak eta atalen arteko trantsizioak - Graphite
#242424— Kontraste handiko betegarri neutroa gainazal argietako botoi nagusietarako. - Ink Black
#171717— Gorputz-testua, goiburuak, ikonoen eskemak - Graphite baino freskoagoak, gainazaletarako baino tipografiarako erabiltzen dira.
Tipografia
12tik 128px-ra · 7 urrats
- Inter — ordezkapena: Inter (Google Fonts) · eskemak 500, 600, 700 · Sans-serif sistemaren interfazea: nabigazioa, testu-gorputza, botoiak, azpitituluak eta atal-izenburuak. Pisua: 500 testu-gorputza eta kontroletarako, 600 azpitituluetarako eta nabigazio-azentuetarako, eta 700 atal-izenburuetarako. Letra-tarte negatibo sendoak edozein tamainatako forma geometrikoak konprimitzen ditu, interfazeari itxura tekniko eta trinkotua emanez.
- Instrument Serif — ordezkapena: Playfair Display · eskemak 400 · Tituluetarako eta eduki editorialetarako esklusiboki diseinatutako serif letra-tipoa. Bere 400 pisuak eta -0.025em-ko letren arteko tarteak itxura dotore eta etzana sortzen dute, Inter-en geometria industrialarekin kontrastatzen duena; teknika bereizgarria da: serif hitz edo esaldi bakarra sans-serif orrialde batean, puntuazio bisual gisa balio duena, tituluen estilo gisa baino gehiago.
- Fragment Mono — ordezkapena: JetBrains Mono · eskemak 400 · Azentu monoa lerroko kode itxurako elementuetarako, etiketa-etiketetarako eta dei teknikoetarako. Neurrian erabilia, funtzio-zerrendetan eta lerroko oharpenetan agertzen da, diseinu-tresnak "hau makinaren irteera da" adierazi nahi duen lekuetan.
Tarteak eta forma
| Helburua | Esanahia |
|---|---|
| Dentsitatea | batez bestekoa |
| Oinarrizko urratsa | 8px |
| Botoiaren erradioa | 16px |
| Txartelaren erradioa | 24px |
| Itzalak | ez - itzalen ordez ertzak |
| Atalen artean | 64px |
| Orriaren zabalera | 1200px |
Adimen artifizialak zure webgunea Subframe estiloan eraikiko du eta beteko du
- Bete produktu eta argitalpenekin estekaren bidez - Instagram, TikTok, Facebook.
- Transferitu edukia zure gune zaharretik: zehaztu helbidea.
- Diseinu modernoa motor onenean: React ( Next.js) zerbitzariaren errendatzearekin eta SEO optimizazioarekin hasieratik.
- Bilaketa-emaitzetarako eta sare neuronalen gomendioetarako SEO optimizazio guztiz automatizatua.
Estilo antzekoak
- monopo saigon — Argitalpen-isiltasunaren atzean distira likido eta irideszente bat —argi urtuan flotatzen ari den galeria editorial monokromo bat
- Hyer Aviation — Ilunabarra kabinan pergaminoaren gainean. Egunsentiko zeru zurbila fuselajearen tamainako serifa logotipoarekin bat egiten du, eta buztinezko azentu epel bakar batek hausten du monokromoaren neurritasuna.
- OFF+BRAND. — Esfera irideszentea pergamino epelaren gainean
- Seed — organismo bizidun bat laborategiko beiraren azpian
- Eindhoven Design District — Paper zurian dagoen editorial basakeria udal-diseinuaren manifestu bat da, letra handietan egina, argazki gutxirekin eta erabateko neurritasunarekin.
- Miranda — Krema argiko atzealde batean formatu zabaleko letra-tipo klasikoa: aro digitalerako egunkari-editorial bat
- Monocle — Krema koloreko paperean idatzitako kalitate handiko egunkari formatu handikoa. Arreta handiz zaindutako editoriala, non zutabe bakoitzak bere lekua merezi duen, eta orrialdean kolore esanguratsu bakarra agertzen den.
- Agencja brandingowa — Tinta beltzez egindako tipografiarekin tonu zuriko galeria editoriala
- Websmith Studio — Goizeko argia krema-paperean
- Aspelin Reitan — Arkitektura Artxiboa Kandelen Argipean - Orrialdeak eraikitako espazioen zorro baten itxura du, krema koloreko horma epel bati itsatsita, irudi bakoitzaren gainean testu zuri lerro bakarrarekin orrialdearen zabalera osoan zehar.
- Public — Marmol hotzean idatzitako editorial monokromo bat —ia mihise monokromo bat, 300 puntuko serif letra-tipoarekin eta kolore-lan guztia azentu more bakarrarekin.
- Motto — Monolito tipografiko bat paperean – ahots bakar eta ziur batek bere burua elur-zuri paperean aldarrikatzen du