Dub
Linkova nadzorna plošča z mat riževim papirjem
Dubov vizualni sistem ima zadržano, skoraj uredniško SaaS estetiko: skoraj belo platno, ki ga držijo skupaj tanki robovi in ne štrleči elementi, z gosto enobarvno tipografijo, ki zagotavlja strukturno podporo, in eno samo svetlo modro barvo (#2563eb), ki daje vtis. Površine na prvi pogled ostajajo ravne in brez okvirja, vendar ima vsaka posoda rob 1px #e5e5e5, kar vzbuja občutek tiskanega dokumenta. Osebnost je dosežena z majhnim naborom barvnih "tabletk" poudarkov (oranžna, zelena, vijolična), ki lebdijo nad nevtralno paleto, in glavami, ki delujejo samozavestno in moderno, ne da bi bile kričeče. Komponente so kompaktne in goste: 8px žlebovi, 12px polmer kartice, nalepke v obliki tablet z 9999px in nevidni kontrolniki namesto težkih, napolnjenih gumbov.
Stran je zgrajena na centrirani postavitvi z največjo širino približno 1200 slikovnih pik. Glavni element je centriran besedilni blok s tremi plavajočimi elementi (Partnerski programi, Analitika konverzij, Kratke povezave), ki so postavljeni vodoravno nad veliko postavitvijo izdelka. Razdelki so razporejeni navpično z enakomernimi 64 slikovnimi pikami širokimi robovi, ki se izmenjujejo med belim platnom in papirnato meglico #f5f5f5 za tonsko ločitev. Spodnji razdelek uporablja postavitev v obliki črke Z: uredniško besedilo je centrirano v srednji tretjini, plavajoče kartice uporabniškega vmesnika pa so zasidrane na levi in desni rob, kar ustvarja asimetričen ritem, podoben reviji. Oblak logotipa je preprosta mreža 5x2, centrirana na strani. Navigacija je minimalistična zgornja vrstica – logotip na levi, navigacija na sredini, skupina dveh gumbov (duhovni gumb»Prijava« + zapolnjen gumb»Registracija«) na desni – brez fiksnega ali mega menija. Postavitev nadzorne plošče glavnega okna prikazuje klasično postavitev aplikacije z dvema stolpcema: fiksna stranska vrstica (podobna 240px) + območje z vsebino, ki določa gostoto informacij o izdelku za obiskovalce, preden začnejo drseti.
Vizualni elementi so osredotočeni na izdelek, ne na življenjski slog. Glavni zaslon je osredotočen na velik posnetek zaslona nadzorne plošče, ki predstavlja maketo izdelka iz resničnega sveta s stransko navigacijo, podatkovno tabelo in plavajočimi elementi uporabniškega vmesnika, razporejenimi kot ravna plošča na belem platnu. Logotipi strank so prikazani v nenasičeni mreži sivin (beehiv, superpower, Chatbase itd.), da bi se potrdila njihova uspešnost na družbenih omrežjih, brez barv, da bi ostal dominanten en sam modri poudarek strani. Plavajoče kartice partnerjev (majhni profili in ploščice s podatki o prihodkih/plačilih) se premikajo po blokih uredniškega besedila na dnu, kar ustvarja občutek globine brez uporabe senc na samem besedilu. Vzorec pikčaste mreže na ozadju je značilna značilnost: tanka vrsta majhnih pik z zelo nizko motnostjo ustvarja teksturo in občutek oblikovalskega sistema/površine za risanje, kar poudarja pozicioniranje spletnega mesta kot "sodobne platforme za pripisovanje povezav". Ikonografija je minimalistična, z obrisi in polnili, za oznake funkcij pa uporablja paleto poudarkov (mandarinsko oranžna, sivkino vijolična, metino zelena). Ne uporabljajo se fotografije, ilustracije ali 3D-modeli – uporabniški vmesnik izdelka je sam po sebi vizualni jezik.
Paleta
Blagovna znamka
- Electric Blue
#2563eb— Uporabljena je primarna barva blagovne znamke – logotip, povezave, ključni kazalniki uspešnosti, aktivna stanja in poudarki ikon. Bogata modra barva na belem ozadju ustvarja edino vizualno privlačnost sistema. - Deep Sapphire
#1e40af— Glavno ozadje gumba za dejanje, krepko zapolnitev poziva k dejanju – edina barva, ki označuje dejanje – se uporablja redko za pritegnitev pozornosti.
Nevtralno
- Canvas White
#ffffff— Ozadje strani, površina kartice in pojavna okna so absolutni temelj vsakega zaslona. - Paper Mist
#f5f5f5— Subtilne spremembe barv pri lebdenju za ugnezdene kartice, dodatne plošče in polnila. - Ash
#e5e5e5— Tanke obrobe na karticah, vhodnih priključkih in razdelilnikih so strukturna linija, ki drži sistem skupaj. - Smoke
#d4d4d4— Ostrejše obrobe za izbrane vsebnike in dodatni obrisi gumbov. - Pebble
#c8c8c8— Obrobe, obrisi kontrolnikov in strukturni razdelilniki s srednjim kontrastom. Te barve se ne sme uporabljati kot primarne barve za pozive k dejanju. - Midnight Ink
#0a0a0a— Glavno besedilo gumbov, označeni gumbi in navigacijsko besedilo so za maksimalen kontrast skoraj črni.
Tipografija
od 11 do 48 slikovnih pik · 9 korakov
- Satoshi — zamenjava: Inter (weight 500 · obrisi 500 · Prikaz naslovov – uporablja se samo v vrsticah velikosti 36–48 slikovnih pik za naslove in naslove razdelkov. Težina pisave – 500 (srednja, ne krepka): Naslovi so videti samozavestni in moderni, vendar nikoli preveč vpadljivi. Satoshijeva geometrijska razmerja dajejo pisavi rahlo uredniški, sodoben občutek, ki ga Interjevo besedilo ne more ponoviti.
- Inter — zamenjava: Inter (native) · obrisi 400, 500, 600 · Telo besedila, oznake uporabniškega vmesnika, navigacija, podnaslovi in manjši naslovi. Inter je glavni delovni konj, ki obvladuje vse od 11px mikronaslovov do 30px sekundarnih naslovov. Privzeta teža za besedilo telesa je 400, za označene elemente in oznake gumbov 500, za pomembne oznake uporabniškega vmesnika pa je rezerviranih 600. Najpogostejša velikost za en korak je 16px z višino vrstice 1,5 (1220 pojavitev), kar potrjuje, da je 16px kanonična velikost besedila telesa.
- Geist Mono — zamenjava: JetBrains Mono or IBM Plex Mono · obrisi 400, 500 · Delčki kode, tehnični metapodatki in vdelani žetoni z enorazporeditvijo se uporabljajo v blokih kode z velikostjo 12–14 slikovnih pik in v velikih elementih za prikaz kode z velikostjo 24 slikovnih pik. To zagotavlja verodostojnost orodja za razvijalce, kar je skladno s pozicioniranjem izdelka Dub.
Intervali in oblika
| Namen | Pomen |
|---|---|
| Gostota | povprečje |
| Osnovni korak | 8px |
| Polmer gumba | 8px |
| Polmer kartice | 12px |
| Sence | ne - obrobe namesto senc |
| Med odseki | 64px |
| Širina strani | 1200px |
Umetna inteligenca bo zgradila vašo spletno stran v slogu Dub in jo napolnila
- Polnite z izdelki in objavami prek povezave - Instagram, TikTok, Facebook.
- Prenesite vsebino s starega spletnega mesta – samo navedite naslov.
- Sodoben dizajn na najboljšem iskalniku: React ( Next.js) z vnaprej pripravljenim upodabljanjem na strežniku in optimizacijo za SEO.
- Popolnoma avtomatizirana SEO optimizacija za rezultate iskanja in priporočila nevronskih mrež.
Podobni slogi
- ElevenLabs — Foto esej v toplih kremnih tonih z nežnimi naslovi. Zvezek v slogu Bauhausa – papir barve jajčne lupine, črno črnilo in en sam vijolično-oranžen poudarek za predstavitev izdelka.
- Awesomic — Uredniška cinkova mreža z oranžnimi ločili, ki spominjajo na konfete
- Monad — uredniška tehnična revija na toplem pergamentu
- Seline Analytics — Tiha analitična miza na toplem papirju
- Notion — Topel papirnat zvezek na opoldanskem soncu
- Anthropic — Znanstvena terenska revija o toplem pergamentu – mirne slonokoščene površine, serifirani uvodniški naslovi in en sam glineni naglas, ki se pojavi le, ko je potrebno ukrepanje.
- Calendly — Temno modro črnilo na hladnem marmorju
- Augen Pro — Applova bela predstavitev ima klinično, breztežno, električno modro barvo kot edini poudarek v enobarvnem prostoru.
- Antimetal — Uredniška kronika na krem papirju – mirno jutro v znanstveni reviji, kjer zadržanost izraža samozavest, serifi pa opravljajo težko delo.
- Perk — Električna apna na toplem pergamentnem papirju
- Ditto — S soncem obsijana delavnica ustvarjanja vzorcev divjih rož. Tople kremne površine, živahna rumena osnovna barva, temno temno modra črnila, organske barvne oblike, ki cvetijo za delom.
- Officevibe — Uredniška revija na toplem kremnem papirju. Predstavljajte si premišljen esej o upravljanju s človeškimi viri, predstavljen kot izdelek – kurzivna serifna pisava, ki šepeta skozi sodoben moder vmesnik.