Dub
Paneli i kontrollit të letrës orizi mat të Link
Sistemi vizual i Dub ka një estetikë SaaS të përmbajtur, pothuajse editoriale: një kanavacë pothuajse e bardhë e mbajtur së bashku nga kufij të hollë në vend të elementëve të spikatur, me tipografi të dendur monokrome që ofron mbështetje strukturore dhe një ngjyrë të vetme blu të ndritshme (#2563eb) që bën një deklaratë. Sipërfaqet mbeten të sheshta dhe pa kornizë në shikim të parë, por çdo kontejner ka një diferencë prej 1px #e5e5e5, duke evokuar ndjesinë e një dokumenti të shtypur. Personaliteti arrihet përmes një grupi të vogël theksesh me ngjyra "pilulash" (portokalli, jeshile, vjollcë) që notojnë mbi paletën neutrale, dhe titujve që ndihen të sigurt dhe modernë pa qenë të dukshëm. Komponentët janë kompaktë dhe të dendur: kanale 8px, rreze karte 12px, etiketa në formë pilule në 9999px, dhe kontrolle të padukshme në vend të butonave të rëndë e të mbushur.
Faqja është ndërtuar mbi një paraqitje të qendrës me një gjerësi maksimale prej afërsisht 1200px. Elementi kryesor është një bllok teksti i qendrës me tre elementë lundrues (Programe Filiale, Analitikë Konvertimi, Lidhje të Shkurtra) të pozicionuar horizontalisht mbi një paraqitje të madhe produkti. Seksionet janë rregulluar vertikalisht me kanale konsistente prej 64px, duke alternuar midis kanavacës së bardhë dhe mjegullës së letrës #f5f5f5 për ndarje tonale. Seksioni i poshtëm përdor një paraqitje në formë Z: teksti editorial është i qendruar në të tretën e mesme, dhe kartat lundruese të ndërfaqes së përdoruesit janë të ankoruara në kufijtë e majtë dhe të djathtë, duke krijuar një ritëm asimetrik, si në revistë. Reja e logos është një rrjetë e thjeshtë 5x2, e qendruar në faqe. Navigimi është një shirit minimalist i sipërm - logoja në të majtë, navigimi në qendër, një grup prej dy butonash (një buton fantazmë "Hyrje" + një buton i mbushur "Regjistrohu") në të djathtë - pa një menu fikse ose mega-menu. Paraqitja e panelit të dritares kryesore shfaq një paraqitje klasike të aplikacionit me dy kolona: një shirit anësor i fiksuar (i ngjashëm me 240px) + një zonë përmbajtjeje që përcakton dendësinë e informacionit të produktit për vizitorët përpara se të fillojnë të shfletojnë.
Pamjet janë të fokusuara te produkti, jo te stili i jetës. Ekrani kryesor është i përqendruar në një pamje të madhe të ekranit të panelit, që përfaqëson një maket produkti nga bota reale me një navigim anësor, tabelë të dhënash dhe elementë lundrues të ndërfaqes së përdoruesit, të vendosur si një panel i sheshtë në një kanavacë të bardhë. Logot e klientëve shfaqen në një rrjet gri të pangopur (beehiv, superperformance, Chatbase, etj.) për të njohur performancën e tyre në mediat sociale, të zhveshura nga ngjyra për të lejuar që theksi i vetëm blu i faqes të mbetet dominues. Kartat lundruese të partnerëve (profile të vogla dhe pllaka me të dhëna të të ardhurave/pagesave) lëvizin rreth blloqeve të tekstit editorial në fund, duke krijuar një ndjesi thellësie pa përdorimin e hijeve në vetë tekstin. Modeli i sfondit të rrjetit me pika është një tipar dallues: një rresht i hollë me pika të vogla me opacitet shumë të ulët krijon teksturë dhe ndjesinë e një sistemi dizajni/sipërfaqe vizatimi, duke theksuar pozicionimin e faqes si një "platformë moderne atribuimi të lidhjeve". Ikonografia është minimale, me skica dhe mbushje, dhe përdor një paletë theksi (portokalli mandarine, vjollcë livandoje, jeshile mente) për etiketat e veçorive. Nuk përdoren fotografi, ilustrime ose modele 3D—vetë ndërfaqja e përdoruesit e produktit është një gjuhë vizuale.
Paletë
Markë
- Electric Blue
#2563eb— Përdoret ngjyra kryesore e markës—logoja, lidhjet, treguesit kryesorë të performancës, gjendjet aktive dhe thekset e ikonave. Një blu e pasur në një sfond të bardhë krijon të vetmen tërheqje vizuale të sistemit. - Deep Sapphire
#1e40af— Sfondi kryesor i butonit të veprimit, mbushja me shkronja të trasha e thirrjes për veprim - e vetmja ngjyrë që tregon veprimin - përdoret me kursim për të tërhequr vëmendjen.
Neutral
- Canvas White
#ffffff— Sfondi i faqes, sipërfaqja e kartës, panelet që shfaqen janë themeli absolut i çdo ekrani. - Paper Mist
#f5f5f5— Ndryshime delikate të ngjyrës së sipërfaqes për kartat e ndërthurura, panelet shtesë dhe mbushjet kur mbani miun mbi të. - Ash
#e5e5e5— Kufijtë e hollë në karta, lidhësit e hyrjes dhe ndarësit janë vija strukturore që e mban sistemin të bashkuar. - Smoke
#d4d4d4— Kufij më të mprehtë për kontejnerët e zgjedhur dhe konture shtesë të butonave. - Pebble
#c8c8c8— Kufijtë, konturet e kontrollit dhe ndarësit strukturorë me kontrast mesatar. Kjo ngjyrë nuk duhet të përdoret si ngjyra kryesore për thirrjet për veprim. - Midnight Ink
#0a0a0a— Teksti kryesor i butonave, butonat e theksuar dhe teksti i navigimit janë pothuajse të zinj për kontrast maksimal.
Tipografi
nga 11 në 48px · 9 hapa
- Satoshi — zëvendësim: Inter (weight 500 · skica 500 · Titujt e Shfaqjes – përdoren vetëm në rreshta 36–48px për titujt e titujve dhe seksioneve. Pesha e shkronjave – 500 (mesatare, jo e trashë): Titujt duken të sigurt dhe modernë, por kurrë të tepruar. Përmasat gjeometrike të Satoshit i japin tipografisë një ndjesi paksa editoriale dhe moderne që teksti kryesor i Interit nuk mund ta kopjojë.
- Inter — zëvendësim: Inter (native) · skica 400, 500, 600 · Kopja e trupit, etiketat e ndërfaqes së përdoruesit, navigimi, nëntitujt dhe titujt dytësorë. Inter është elementi kryesor i punës, duke trajtuar gjithçka, nga mikro-etiketat 11px deri te titujt dytësorë 30px. Një peshë prej 400 është parazgjedhja për kopjen e trupit, 500 për elementët e theksuar dhe etiketat e butonave, dhe 600 është e rezervuar për etiketat e rëndësishme të ndërfaqes së përdoruesit. 16px me një lartësi rreshti prej 1.5 është madhësia më e shpeshtë me një hap të vetëm (1220 raste), duke konfirmuar se 16px është madhësia kanonike e kopjes së trupit.
- Geist Mono — zëvendësim: JetBrains Mono or IBM Plex Mono · skica 400, 500 · Fragmentet e kodit, meta të dhënat teknike dhe tokenët e integruar monospace përdoren në blloqet e kodit me madhësi 12–14px dhe në elementët e mëdhenj të shfaqjes së kodit me madhësi 24px. Kjo siguron besueshmërinë e mjetit të zhvilluesit, në përputhje me pozicionimin e produktit të Dub.
Intervalet dhe forma
| Qëllimi | Kuptimi |
|---|---|
| Dendësia | mesatare |
| Hapi bazë | 8px |
| Rrezja e butonit | 8px |
| Rrezja e kartës | 12px |
| Hijet | pa kufij në vend të hijeve |
| Midis seksioneve | 64px |
| Gjerësia e faqes | 1200px |
IA do ta ndërtojë faqen tuaj të internetit në stilin Dub dhe do ta mbushë atë
- Plotësoni me produkte dhe postime përmes linkut - Instagram, TikTok, Facebook.
- Transferoni përmbajtje nga faqja juaj e vjetër—thjesht specifikoni adresën.
- Dizajn modern në motorin më të mirë: React ( Next.js) me renderim të serverit dhe optimizim SEO që në fillim.
- Optimizim plotësisht i automatizuar i SEO-s për rezultatet e kërkimit dhe rekomandimet e rrjeteve nervore.
Stile të ngjashme
- ElevenLabs — Një ese me foto në tone të ngrohta krem me tituj delikatë. Një fletore në stilin Bauhaus - letër me ngjyrë lëvozhge veze, bojë e zezë dhe një theks i vetëm vjollcë dhe portokalli për shfaqjen e produktit.
- Awesomic — Rrjetë zinku editoriale me shenja pikësimi portokalli që të kujtojnë konfeti
- Monad — revistë teknike editoriale mbi pergamenë të ngrohtë
- Seline Analytics — Një tabelë analitike e qetë në letër të ngrohtë
- Notion — Një fletore e ngrohtë letre në diellin e mesditës
- Anthropic — Një revistë shkencore mbi pergamenën e ngrohtë - sipërfaqe të qeta ngjyrë fildishi, tituj editorialë të serifuar dhe një theks i vetëm argjile që shfaqet vetëm kur nevojitet veprim.
- Calendly — Bojë blu e errët mbi mermer të ftohtë
- Augen Pro — Prezantimi i bardhë i Apple paraqet një blu elektrike klinike, pa peshë, si theksin e vetëm në një hapësirë njëngjyrëshe.
- Antimetal — Një kronikë editoriale në letër kremoze—një mëngjes i qetë në një revistë shkencore, ku përmbajtja përcjell vetëbesim dhe serifetet bëjnë punën e rëndë.
- Perk — Limon elektrik në letër pergameni të ngrohtë
- Ditto — Një seminar i ndriçuar nga dielli që krijon mostra lulesh të egra. Sipërfaqe të ngrohta krem, një ngjyrë bazë e verdhë e gjallë, bojëra blu të errët të errët, forma ngjyrash organike që lulëzojnë pas veprës.
- Officevibe — Një revistë editoriale në letër të ngrohtë me ngjyrë krem. Imagjinoni një ese të menduar mirë mbi menaxhimin e burimeve njerëzore, të paraqitur si një produkt - një font serif me shkronja të pëshpëritura përmes një ndërfaqeje moderne blu.