Subframe
Un dibuix gràfic sobre pergamí calent. Paper de disseny, on cada traç és de grafit o goma d'esborrar, mai pintura: la profunditat s'aconsegueix mitjançant el gruix de la línia i les serifes disperses.
Subframe és l'espai de treball d'un dissenyador monocrom: un llenç càlid i cremós, tinta negra grafit i una absència completa d'accents cromàtics. Tota la interfície es percep com un sol material —paper, llapis i ombra— amb un toc tipogràfic atrevit: una serif refinada (Instrument Serif) contraposada a una sans-serif sistemàtica (Inter), que dóna gravetat editorial als titulars. Les superfícies són planes i emmarcades en lloc de relleu; la profunditat s'aconsegueix mitjançant divisors prims en #e5e7eb i ressaltats inserits en controls foscos en lloc d'ombres. La densitat és generosa: un ritme vertical ampli (48–64 px de espais entre seccions), dissenys centrats d'amplada completa i un espai en blanc generós al voltant del text. L'únic color és el contrast entre el gairebé blanc i el gairebé negre, cosa que fa que el botó fosc sigui l'element més cridaner de cada pàgina, i la franja de logotips de marques associades en tons grisos sigui l'únic element visual decoratiu.
Dissenys centrats d'amplada completa (1200 px) amb un ritme vertical generós. L'element principal és un únic bloc centrat: un control fosc i segmentat a la part superior, un encapçalament "Inter" gran, un subencapçalament d'una sola línia i dos botons adjacents (omplert + translúcid): sense imatge lateral, sense interrupció del disseny. A sota de l'element principal hi ha una franja de logotip centrada en escala de grisos. Cada secció posterior segueix el mateix patró: un bloc de títol i subencapçalament alineat a l'esquerra, i després un marc de presentació de productes d'amplada completa amb 48–64 px d'espai entre seccions. La navegació és mínima: una barra superior amb enllaços centrats i accions alineades a la dreta, sense barra lateral, sense megamenú. La pàgina es llegeix de dalt a baix com una sèrie d'instruccions centrades, cadascuna amb un espai ampli; el disseny sembla més un portafoli editorial que una pàgina de producte plena de feina.
El disseny visual és minimalista i funcional. El sistema utilitza dos modes visuals: (1) captures de pantalla de productes emmarcades i maquetes d'IU incloses en marcs de radi de 24 px, que mostren components reals de la interfície (taules, botons, formularis) renderitzats a la mateixa paleta monocroma, fent que les captures de pantalla apareguin perfectament integrades a la pàgina; (2) una sola tira de logotips de socis en escala de grisos serveix com a prova social, renderitzada plana, sense color ni contenidors. No hi ha fotos d'estil de vida, gradients abstractes ni renderitzacions en 3D. L'únic element il·lustratiu és una "rajola" fosca del producte, centrada en un fons gris càlid amb una icona de marca; es percep com una demostració del producte, no com una decoració. Totes les imatges ocupen un disseny basat en text, on el pes visual el porta el text.
Paleta
Neutral
- Page Canvas
#fafafa— El fons de la pàgina, la postal sobre tela, el text clar sobre superfícies fosques: un color blanc càlid que subjau a tot el sistema monocrom. - Hairline Border
#e5e7eb— Divisors, vores de targetes, marcs d'imatges, contorns d'icones: el tipus de contorn més utilitzat en el sistema, defineix l'estructura espacial. - Card Surface
#ededed— Fons en relleu per a cartes, una superfície addicional, situada un pas per sobre del llenç, creant una agrupació sense ombres. - Divider Mid
#dadada— Divisors de tons mitjans i transicions entre seccions - Graphite
#242424— Farciment neutre d'alt contrast per a botons principals en superfícies clares. - Ink Black
#171717— Text del cos, encapçalaments, contorns d'icones: una mica més modern que el Graphite, utilitzat per a la tipografia en lloc de superfícies.
Tipografia
de 12 a 128 px · 7 passos
- Inter — reemplaçament: Inter (Google Fonts) · esquemes 500, 600, 700 · Una interfície de sistema sans-serif: navegació, text del cos, botons, subtítols i encapçalaments de secció. Pes: 500 per al text del cos i els controls, 600 per als subtítols i els accents de navegació i 700 per als encapçalaments de secció. L'espaiat negatiu fort entre lletres comprimeix les formes geomètriques de qualsevol mida, donant a la interfície un aspecte condensat i tècnic.
- Instrument Serif — reemplaçament: Playfair Display · esquemes 400 · Una tipografia serif dissenyada exclusivament per a titulars i contingut editorial. El seu gruix de 400 i l'espaiat entre lletres de -0,025 em creen un aspecte elegant i en cursiva que contrasta amb la geometria industrial d'Inter, una tècnica característica: una sola paraula o frase serif dins d'una pàgina sans-serif, que serveix com a puntuació visual en lloc d'un estil de titular.
- Fragment Mono — reemplaçament: JetBrains Mono · esquemes 400 · Accentu mono per a elements semblants a codi en línia, etiquetes i crides tècniques. S'utilitza amb moderació, apareix a les llistes de funcions i anotacions en línia on l'eina de disseny vol indicar que "aquesta és la sortida de la màquina".
Intervals i forma
| Propòsit | Significat |
|---|---|
| Densitat | mitjana |
| Pas bàsic | 8px |
| Radi del botó | 16px |
| Radi de la targeta | 24px |
| Ombres | sense vores en comptes d'ombres |
| Entre seccions | 64px |
| Amplada de la pàgina | 1200px |
La IA crearà el vostre lloc web a l'estil Subframe i l'omplirà.
- Omple amb productes i publicacions a través de l'enllaç: Instagram, TikTok, Facebook.
- Transfereix contingut del teu lloc web antic; només cal que especifiquis l'adreça.
- Disseny modern en el millor motor: React ( Next.js) amb renderització de servidor i optimització SEO des del primer moment.
- Optimització SEO totalment automatitzada per a resultats de cerca i recomanacions de xarxes neuronals.
Estils similars
- monopo saigon — Una resplendor líquida i iridescent darrere del silenci editorial: una galeria editorial monocroma flotant sobre llum fosa
- Hyer Aviation — Crepuscle a la cabina sobre pergamí. El cel pàl·lid de l'alba es troba amb el logotip serif de la mida del fuselatge, i un únic detall d'argila càlida trenca la contenció monocromàtica.
- OFF+BRAND. — Esfera iridescent sobre pergamí càlid
- Seed — un organisme viu sota vidre de laboratori
- Eindhoven Design District — El brutalisme editorial sobre paper blanc és un manifest de disseny municipal, executat en lletra gran, amb una fotografia mínima i una contenció absoluta.
- Miranda — Tipografia clàssica de format ample sobre un fons crema clar: un editorial de diari per a l'era digital
- Monocle — Un diari de gran format i alta qualitat en paper de color crema. Un editorial acuradament seleccionat, on cada columna mereix el seu lloc i només apareix un color significatiu a la pàgina.
- Agencja brandingowa — Una galeria editorial en tons blancs amb tipografia feta amb tinta negra
- Websmith Studio — Llum del matí sobre paper crema
- Aspelin Reitan — Arxiu arquitectònic a la llum de les espelmes: la pàgina sembla un portafoli d'espais construïts, enganxat a una paret de color crema càlid, amb una sola línia de text blanc flotant per sobre de cada imatge a tota l'amplada de la pàgina.
- Public — Un editorial monocrom sobre marbre fred, gairebé un llenç monocrom, amb una font serif de 300 punts i un únic detall morat que fa tota la feina de color.
- Motto — Un monòlit tipogràfic sobre paper: una veu única i segura que es declara sobre paper blanc com la neu