Dub
Linki matt riisipaberist juhtpaneel
Dubi visuaalsel süsteemil on vaoshoitud, peaaegu toimetuslik SaaS-esteetika: peaaegu valge lõuend, mida hoiavad koos õhukesed äärised, mitte väljaulatuvad elemendid, kusjuures tihe monokroomne tüpograafia pakub struktuurilist tuge ja üks erk sinine värv (#2563eb) annab märku. Pinnad jäävad esmapilgul tasaseks ja raamita, kuid igal konteineril on 1px #e5e5e5 veeris, mis tekitab trükitud dokumendi tunde. Isikupära saavutatakse väikese värviliste "pilli" aktsentide (oranž, roheline, lilla) komplekti abil, mis hõljuvad neutraalse paleti kohal, ja päiste abil, mis tunduvad enesekindlad ja moodsad, ilma et oleksid toretsevad. Komponendid on kompaktsed ja tihedad: 8px äärised, 12px kaardiraadius, pillikujulised sildid 9999px juures ja nähtamatud juhtnupud raskete, täidetud nuppude asemel.
Leht on tsentreeritud paigutusega, mille maksimaalne laius on umbes 1200 pikslit. Põhielement on tsentreeritud tekstiplokk, millel on kolm ujuvat elementi (partnerlusprogrammid, konversioonianalüüs, lühikesed lingid), mis on paigutatud horisontaalselt suure tootepaigutuse kohale. Sektsioonid on paigutatud vertikaalselt ühtlaste 64-px ääristega, vaheldumisi valge lõuendi ja #f5f5f5 paberi hägususega toonide eraldamiseks. Alumine osa kasutab Z-kujulist paigutust: juhtkiri on tsentreeritud keskmises kolmandikus ja ujuvad kasutajaliidese kaardid on ankurdatud vasakule ja paremale veerisele, luues asümmeetrilise, ajakirjalaadse rütmi. Logopilv on lihtne 5x2 ruudustik, mis on lehe keskel. Navigeerimine on minimalistlik ülemine riba – logo vasakul, navigeerimine keskel, kahe nupu rühm (kummitusnupp "Logi sisse" + täidetud nupp "Registreeru") paremal – ilma fikseeritud või megamenüüta. Põhiakna armatuurlaua paigutus esitleb klassikalist kaheveerulist rakenduse paigutust: fikseeritud külgriba (sarnane 240px-ga) + sisuala, mis määrab külastajatele enne kerimise alustamist tooteteabe tiheduse.
Visuaalid on tootekesksed, mitte elustiilikesksed. Põhiekraani keskel on suur armatuurlaua ekraanipilt, mis kujutab reaalse maailma toote maketti koos külgriba navigatsiooni, andmetabeli ja ujuvate kasutajaliidese elementidega, mis on paigutatud lameda paneelina valgele lõuendile. Klientide logod kuvatakse küllastumata halltoonides ruudustikus (mesitaru, supervõime, Chatbase jne), et tunnustada nende sotsiaalmeedia edukust, värvidest puhastatuna, et lehe üksainus sinine aktsent jääks domineerivaks. Ujuvad partnerkaardid (väikesed profiilid ja paanid tulude/maksete andmetega) liiguvad allosas olevate toimetuslike tekstiplokkide vahel, luues sügavustunde ilma teksti enda varjudeta. Punktiirruudustiku taustamuster on signatuurfunktsioon: õhuke rida väikeseid täppe, millel on väga madal läbipaistmatus, loob tekstuuri ja disainisüsteemi/joonistuspinna tunde, rõhutades saidi positsioneerimist "kaasaegse linkide omistamise platvormina". Ikonograafia on minimaalne, kontuuride ja täitega ning funktsioonisiltide jaoks kasutatakse aktsentpaletti (mandariinioranž, lavendlililla, mündiroheline). Fotosid, illustratsioone ega 3D-mudeleid ei kasutata – toote kasutajaliides ise on visuaalne keel.
Palett
Bränd
- Electric Blue
#2563eb— Kasutusel on brändi põhivärv – logo, lingid, peamised tulemusnäitajad, aktiivsed olekud ja ikooniaktsendid. Süsteemi ainsa visuaalse atraktiivsuse loob rikkalik sinine valgel taustal. - Deep Sapphire
#1e40af— Toimingunupu peamist tausta, tegevusele kutsuva üleskutse paksu kirja – ainsat värvi, mis tegevust tähistab – kasutatakse tähelepanu köitmiseks säästlikult.
Neutraalne
- Canvas White
#ffffff— Lehe taust, kaardi pind ja hüpikaknad on iga ekraani absoluutne alus. - Paper Mist
#f5f5f5— Pesastatud kaartide, lisapaneelide ja täitematerjalide puhul kursori hõljumise teel tekkivad peened värvimuutused. - Ash
#e5e5e5— Kaartide, sisendühenduste ja vaheseinte õhukesed äärised on konstruktsioonijoon, mis hoiab süsteemi koos. - Smoke
#d4d4d4— Valitud konteinerite teravamad äärised ja täiendavad nuppude kontuure. - Pebble
#c8c8c8— Keskmise kontrastsusega äärised, juhtkontuurid ja struktuurilised eraldajad. Seda värvi ei tohiks kasutada tegevusele kutsuvate tekstide põhivärvina. - Midnight Ink
#0a0a0a— Nuppude põhitekst, esiletõstetud nupud ja navigeerimistekst on maksimaalse kontrastsuse saavutamiseks peaaegu mustad.
Tüpograafia
11 kuni 48 pikslit · 9 sammu
- Satoshi — asendamine: Inter (weight 500 · kontuurid 500 · Kuva pealkirjad – kasutatakse ainult 36–48 piksli suurustel ridadel pealkirjade ja jaotiste pealkirjade jaoks. Fondi paksus – 500 (keskmine, mitte paks): Pealkirjad näevad välja enesekindlad ja moodsad, kuid mitte kunagi liiga pealetükkivad. Satoshi geomeetrilised proportsioonid annavad kirjatüübile kergelt toimetuseliku ja moodsa tunde, mida Interi põhitekst ei suuda korrata.
- Inter — asendamine: Inter (native) · kontuurid 400, 500, 600 · Põhitekst, kasutajaliidese sildid, navigeerimine, alapealkirjad ja väiksemad pealkirjad. Inter on peamine tööhobune, mis tegeleb kõigega alates 11-px mikrosiltidest kuni 30-px sekundaarsete pealkirjadeni. Põhiteksti kaal on vaikimisi 400, esiletõstetud elementide ja nuppude siltide kaal 500 ning oluliste kasutajaliidese siltide kaal 600. 16px rea kõrgusega 1,5 on kõige sagedamini esinev üheastmeline suurus (1220 esinemist), mis kinnitab, et 16px on põhiteksti kanooniline suurus.
- Geist Mono — asendamine: JetBrains Mono or IBM Plex Mono · kontuurid 400, 500 · Koodilõike, tehnilisi metaandmeid ja manustatud ühesuunalisi märke kasutatakse koodiplokkides 12–14 piksli ja suurtes koodi kuvamise elementides 24 piksli juures. See tagab arendustööriista usaldusväärsuse, mis on kooskõlas Dubi toote positsioneerimisega.
Intervallid ja vorm
| Eesmärk | Tähendus |
|---|---|
| Tihedus | keskmine |
| Põhisamm | 8px |
| Nupu raadius | 8px |
| Kaardi raadius | 12px |
| Varjud | ei - varjude asemel äärised |
| Sektsioonide vahel | 64px |
| Lehe laius | 1200px |
Tehisintellekt loob teie veebisaidi Dub stiilis ja täidab selle
- Täida toodete ja postitustega lingi kaudu - Instagram, TikTok, Facebook.
- Kanna sisu oma vanalt saidilt üle – täpsusta lihtsalt aadress.
- Moodne disain parimal mootoril: React ( Next.js) koos serveri renderdamise ja SEO optimeerimisega koheselt.
- Täisautomaatne SEO optimeerimine otsingutulemuste ja närvivõrgu soovituste jaoks.
Sarnased stiilid
- ElevenLabs — Soojades kreemikates toonides fotoessee peenete pealkirjadega. Bauhausi stiilis märkmik – munakoorekarva paber, must tint ja üks lilla ja oranž aktsent toote väljapanekuks.
- Awesomic — Toimetuse tsinkvõrk oranžide konfetti meenutavate kirjavahemärkidega
- Monad — toimetuse tehniline ajakiri soojal pärgamendil
- Seline Analytics — Vaikne analüütiline laud soojal paberil
- Notion — Soe paberist märkmik keskpäevapäikeses
- Anthropic — Teaduslik väliajakiri soojal pärgamendil – rahulikud elevandiluu pinnad, seriifidega pealkirjad ja üks saviaktsent, mis ilmub ainult siis, kui on vaja tegutseda.
- Calendly — Tumesinine tint külmal marmoril
- Augen Pro — Apple'i valge esitlus kasutab monokroomse ruumi ainsa aktsendina kliinilist, kaalutut ja elektrilist sinist.
- Antimetal — Kreemikas paberil toimetuse kroonika – vaikne hommik teadusajakirjas, kus vaoshoitus annab edasi enesekindlust ja serifid teevad raske töö ära.
- Perk — Elektriline laim soojal pärgamentpaberil
- Ditto — Päikesepaisteline töötuba, kus luuakse metslillede näidiseid. Soojad kreemikad pinnad, erk kollane põhivärv, sügavad tumesinised tindid, teose taga õitsevad orgaanilised värvivormid.
- Officevibe — Toimetuse ajakiri soojal kreemikal paberil. Kujutage ette läbimõeldud esseed personalijuhtimisest, mis on esitletud tootena – kursiivis serif-font sosistab läbi moodsa sinise liidese.