Dub
Link matt rizspapír kezelőpanelje
A Dub vizuális rendszere visszafogott, szinte szerkesztői SaaS esztétikát mutat: egy közel fehér vászon, amelyet vékony szegélyek, nem pedig kiálló elemek tartanak össze, sűrű monokróm tipográfiával, amely strukturális támaszt nyújt, és egyetlen élénk kék színnel (#2563eb), amely hangsúlyossá teszi a megjelenést. A felületek első pillantásra síkok és keret nélküliek maradnak, de minden konténer 1px-es #e5e5e5 margóval rendelkezik, amely nyomtatott dokumentum érzetét kelti. Az egyéniséget a semleges paletta felett lebegő színes "pirula" díszítések (narancssárga, zöld, lila) kis halmaza, valamint a magabiztos és modern, anélkül, hogy hivalkodó lenne a fejléc. Az összetevők kompaktak és sűrűek: 8px-es ereszcsatornák, 12px-es kártyasugár, 9999px-es pirula alakú címkék és láthatatlan vezérlők a nehéz, kitöltött gombok helyett.
Az oldal középre igazított elrendezésű, maximális szélessége körülbelül 1200 képpont. A fő elem egy középre igazított szövegblokk, amelyben három lebegő elem (Partnerprogramok, Konverzióanalitika, Rövid linkek) vízszintesen helyezkednek el egy nagyméretű termékelrendezés felett. A szakaszok függőlegesen vannak elrendezve, egységes 64 képpontos kötőtűkkel, a tónusok elkülönítése érdekében fehér vászon és #f5f5f5 papír homályosítás között váltakozva. Az alsó rész Z alakú elrendezést használ: a szerkesztői szöveg a középső harmadban középre igazított, a lebegő felhasználói felület kártyák pedig a bal és jobb margóhoz vannak rögzítve, aszimmetrikus, magazinszerű ritmust hozva létre. A logófelhő egy egyszerű 5x2-es rács, az oldal közepén. A navigáció egy minimalista felső sáv – a logó bal oldalon, a navigáció középen, két gombból álló csoport (egy szellem "Bejelentkezés" gomb + egy kitöltött "Regisztráció" gomb) a jobb oldalon – fix vagy mega-menü nélkül. A főablak irányítópultjának elrendezése egy klasszikus kétoszlopos alkalmazáselrendezést mutat be: egy fix oldalsáv (hasonló a 240px-eshez) + egy tartalomterület, amely meghatározza a termékinformációk sűrűségét a látogatók számára, mielőtt elkezdenének görgetni.
A vizuális elemek termék-, nem pedig életstílus-központúak. A főképernyő középpontjában egy nagyméretű irányítópult képernyőképe látható, amely egy valós termékmodellképet ábrázol oldalsávos navigációval, adattáblával és lebegő felhasználói felület elemekkel, fehér vászonra helyezve, sík panelként. Az ügyféllogók telítetlen szürkeárnyalatos rácsban (méhkaptár, szupererő, Chatbase stb.) jelennek meg, elismerve közösségi médiás teljesítményüket, színtelenítve, hogy az oldal egyetlen kék akcentusa továbbra is domináns maradjon. A lebegő partnerkártyák (kis profilok és csempék bevételi/fizetési adatokkal) az alsó szerkesztői szövegblokkok között mozognak, mélységérzetet keltve anélkül, hogy árnyékot vetnének magán a szövegen. A pontozott rácsos háttérminta egy jellegzetes jellemző: egy vékony sor apró pont, nagyon alacsony átlátszósággal, textúrát és egy tervezési rendszer/rajzfelület érzetét kelti, hangsúlyozva a webhely "modern linkattribúciós platformként" való pozicionálását. Az ikonográfia minimális, körvonalakkal és kitöltésekkel, és egy hangsúlypalettát (mandarin narancs, levendula lila, menta zöld) használ a funkciócímkékhez. Nem használnak fényképeket, illusztrációkat vagy 3D modelleket – maga a termék felhasználói felülete egy vizuális nyelv.
Paletta
Márka
- Electric Blue
#2563eb— A rendszer az elsődleges márkaszínt – a logót, a linkeket, a fő teljesítménymutatókat, az aktív állapotokat és az ikonkiemelést – használja. A rendszer egyetlen vizuális vonzerejét egy fehér alapon előállított gazdag kék szín adja. - Deep Sapphire
#1e40af— A műveletgomb fő hátterét, a cselekvésre ösztönzés félkövér kitöltését – az egyetlen színt, amely a műveletet jelöli – takarékosan használják a figyelemfelkeltés érdekében.
Semleges
- Canvas White
#ffffff— Az oldal háttere, a kártya felülete és a felugró panelek minden képernyő abszolút alapját képezik. - Paper Mist
#f5f5f5— Finom felületi színváltozások a beágyazott kártyáknál, a további paneleknél és a kitöltésnél az egérmutatóval történő kiemeléskor. - Ash
#e5e5e5— A kártyák, bemeneti csatlakozók és elválasztók vékony szegélyei alkotják a rendszert összetartó szerkezeti vonalat. - Smoke
#d4d4d4— Élesebb szegélyek a kiválasztott tárolókhoz és további gombkörvonalak. - Pebble
#c8c8c8— Közepes kontrasztú szegélyek, vezérlő körvonalak és szerkezeti elválasztók. Ez a szín nem használható elsődleges színként cselekvésre ösztönzésekhez. - Midnight Ink
#0a0a0a— A gombok fő szövege, a kiemelt gombok és a navigációs szöveg szinte fekete a maximális kontraszt érdekében.
Tipográfia
11-től 48 képpontig · 9 lépésben
- Satoshi — csere: Inter (weight 500 · körvonalak 500 · Címsorok megjelenítése – csak 36–48 képpontos sorokban használatos címsorokhoz és szakaszcímekhez. Betűvastagság – 500 (közepes, nem félkövér): A címsorok magabiztosnak és modernnek tűnnek, de soha nem túlzóak. Satoshi geometriai arányai enyhén szerkesztői, modern érzetet kölcsönöznek a betűtípusnak, amit az Inter törzsszövege nem tud reprodukálni.
- Inter — csere: Inter (native) · körvonalak 400, 500, 600 · Törzsszöveg, felhasználói felület címkéi, navigáció, alcímek és mellékcímsorok. Az Inter az elsődleges munkagép, amely mindent kezel a 11 képpontos mikrocímkéktől a 30 képpontos másodlagos címsorokig. A törzsszöveghez 400-as súly az alapértelmezett, a kiemelt elemekhez és gombcímkékhez 500-as, a fontos felhasználói felület címkéihez pedig 600-as súly van fenntartva. A leggyakrabban előforduló egylépéses méret 16 képpont (1220 előfordulás), ami megerősíti, hogy a 16 képpont a törzsszöveg kanonikus mérete.
- Geist Mono — csere: JetBrains Mono or IBM Plex Mono · körvonalak 400, 500 · A kódrészleteket, a technikai metaadatokat és a beágyazott, azonos szélességű tokeneket 12–14 képpontos kódblokkokban és 24 képpontos nagyméretű kódmegjelenítési elemekben használják. Ez biztosítja a fejlesztői eszköz hitelességét, összhangban a Dub termékpozicionálásával.
Intervallumok és forma
| Cél | Jelentés |
|---|---|
| Sűrűség | átlagos |
| Alapvető lépés | 8px |
| Gomb sugara | 8px |
| Kártya sugara | 12px |
| Árnyékok | nincs - szegélyek árnyékok helyett |
| Szakaszok között | 64px |
| Oldal szélessége | 1200px |
A mesterséges intelligencia Dub stílusban fogja elkészíteni a weboldaladat, és kitölti azt.
- Töltsd fel termékeidet és posztjaidat a linkeken keresztül - Instagram, TikTok, Facebook.
- Tartalom átvitele régi webhelyéről – csak adja meg a címet.
- Modern dizájn a legjobb keresőmotoron: React ( Next.js) szerveralapú rendereléssel és SEO optimalizálással, azonnal használható formában.
- Teljesen automatizált SEO optimalizálás a keresési eredményekhez és a neurális hálózati ajánlásokhoz.
Hasonló stílusok
- ElevenLabs — Meleg krémszínű fotóesszé visszafogott címekkel. Bauhaus stílusú jegyzetfüzet – tojáshéjszínű papír, fekete tinta és egyetlen lila és narancssárga díszítőelem a termékek bemutatásához.
- Awesomic — Szerkesztői cinkháló narancssárga írásjelekkel, konfettire emlékeztetve
- Monad — szerkesztőségi műszaki folyóirat meleg pergamenen
- Seline Analytics — Egy csendes elemző asztal meleg papíron
- Notion — Egy meleg papírfüzet a déli napsütésben
- Anthropic — Tudományos terepnapló meleg pergamenen – nyugodt elefántcsont felületek, csíkos szerkesztői címsorok és egyetlen agyagdísz, amely csak akkor jelenik meg, ha cselekvésre van szükség.
- Calendly — Sötétkék tinta hideg márványon
- Augen Pro — Az Apple fehér prezentációjában a klinikai, súlytalan, elektromos kék szín az egyetlen hangsúly a monokróm térben.
- Antimetal — Krémszínű papíron szerkesztett krónika – egy csendes reggel egy tudományos folyóiratban, ahol a visszafogottság magabiztosságot sugall, és a betűsarok végzi a nehéz munkát.
- Perk — Elektromos lime meleg pergamenpapíron
- Ditto — Egy napsütötte műhely, ahol vadvirágmintákat készítenek. Meleg krémszínű felületek, élénk sárga alapszín, mély sötétkék tinták, organikus színformák virágoznak a darab mögött.
- Officevibe — Egy meleg krémszínű papíron megjelenő vezércikk. Képzeljen el egy elgondolkodtató esszét a HR-menedzsmentről, amelyet termékként mutat be – egy modern kék kezelőfelületen suttogó, talpas, folyóírással írt betűtípus.