Dub
Panoul de control din hârtie de orez mată al lui Link
Sistemul vizual al lui Dub are o estetică SaaS restrânsă, aproape editorială: o pânză aproape albă, ținută laolaltă de margini subțiri, mai degrabă decât de elemente proeminente, cu o tipografie monocromă densă care oferă suport structural și o singură culoare albastru strălucitor (#2563eb) care face o declarație. Suprafețele rămân plate și fără ramă la prima vedere, dar fiecare container are o margine #e5e5e5 de 1px, evocând senzația unui document tipărit. Personalitatea este obținută printr-un mic set de accente colorate de tip „pilulă” (portocaliu, verde, violet) care plutesc deasupra paletei neutre și anteturi care par încrezătoare și moderne, fără a fi stridente. Componentele sunt compacte și dense: margine de 8px, rază de card de 12px, etichete în formă de pilulă la 9999px și comenzi invizibile în loc de butoane grele și umplute.
Pagina este construită pe un layout centrat cu o lățime maximă de aproximativ 1200px. Elementul principal este un bloc de text centrat cu trei elemente plutitoare (Programe de afiliere, Analiză conversii, Linkuri scurte) poziționate orizontal deasupra unui layout mare de produs. Secțiunile sunt aranjate vertical cu margini consecvente de 64px, alternând între pânză albă și hârtie opacă #f5f5f5 pentru separarea tonală. Secțiunea de jos folosește un layout în formă de Z: textul editorial este centrat în treimea din mijloc, iar cardurile plutitoare cu interfață sunt ancorate la marginile stânga și dreapta, creând un ritm asimetric, asemănător unei reviste. Norul de logo este o grilă simplă de 5x2, centrată pe pagină. Navigarea este o bară superioară minimalistă - logo-ul în stânga, navigarea în centru, un grup de două butoane (un buton fantomă „Autentificare” + un buton umplut „Înregistrare”) în dreapta - fără un meniu fix sau mega. Aspectul tabloului de bord al ferestrei principale prezintă un aspect clasic al aplicației pe două coloane: o bară laterală fixă (similară cu 240px) + o zonă de conținut care definește densitatea informațiilor despre produs pentru vizitatori înainte ca aceștia să înceapă derularea.
Elementele vizuale sunt axate pe produs, nu pe stilul de viață. Ecranul principal este centrat pe o captură de ecran mare a tabloului de bord, reprezentând o machetă de produs din lumea reală, cu o bară laterală de navigare, un tabel de date și elemente de interfață plutitoare, dispuse ca un panou plat pe o pânză albă. Logo-urile clienților sunt afișate într-o grilă desaturată în tonuri de gri (beehiv, superpower, Chatbase etc.) pentru a recunoaște performanța lor pe rețelele sociale, lipsite de culoare pentru a permite accentului albastru unic al paginii să rămână dominant. Cardurile plutitoare ale partenerilor (profiluri mici și dale cu date despre venituri/plăți) se mișcă în jurul blocurilor de text editorial din partea de jos, creând o senzație de profunzime fără a utiliza umbre pe textul în sine. Modelul de fundal cu grilă punctată este o caracteristică emblematică: un rând subțire de puncte mici cu opacitate foarte scăzută creează textură și senzația unui sistem de design/suprafață de desen, subliniind poziționarea site-ului ca o „platformă modernă de atribuire a link-urilor”. Iconografia este minimalistă, cu contururi și umpluturi și folosește o paletă de accente (portocaliu mandarină, violet lavandă, verde mentă) pentru etichetele de caracteristici. Nu se folosesc fotografii, ilustrații sau modele 3D - interfața utilizator a produsului în sine este un limbaj vizual.
Paletă
Marca
- Electric Blue
#2563eb— Se folosește culoarea principală a mărcii — sigla, linkurile, indicatorii cheie de performanță, stările active și accentele pictogramelor. Un albastru intens pe fundal alb creează singurul aspect vizual atractiv al sistemului. - Deep Sapphire
#1e40af— Fundalul principal al butonului de acțiune, umplutura îngroșată a îndemnului la acțiune - singura culoare care denotă acțiunea - este folosită cu moderație pentru a atrage atenția.
Neutru
- Canvas White
#ffffff— Fundalul paginii, suprafața cardului, panourile pop-up sunt fundamentul absolut al fiecărui ecran. - Paper Mist
#f5f5f5— Modificări subtile de culoare la trecerea cursorului pentru carduri imbricate, panouri suplimentare și umpleri. - Ash
#e5e5e5— Marginile subțiri de pe plăci, conectorii de intrare și divizoare reprezintă linia structurală care ține sistemul laolaltă. - Smoke
#d4d4d4— Borduri mai clare pentru containerele selectate și contururi suplimentare pentru butoane. - Pebble
#c8c8c8— Borduri, contururi de control și separatoare structurale cu contrast mediu. Această culoare nu ar trebui utilizată ca și culoare principală pentru îndemnuri la acțiune. - Midnight Ink
#0a0a0a— Textul principal al butoanelor, butoanele evidențiate și textul de navigare sunt aproape negre pentru un contrast maxim.
Tipografie
de la 11 la 48px · 9 pași
- Satoshi — înlocuire: Inter (weight 500 · contururi 500 · Titluri afișate – utilizate doar pe linii de 36–48px pentru titlurile de titluri și secțiuni. Grosimea fontului – 500 (medie, nu îngroșată): Titlurile arată încrezător și modern, dar niciodată prea puternic. Proporțiile geometrice ale lui Satoshi conferă fontului un aspect ușor editorial, modern, pe care textul de la Inter nu îl poate reproduce.
- Inter — înlocuire: Inter (native) · contururi 400, 500, 600 · Textul corpului, etichetele interfeței utilizator, navigare, subtitluri și titluri minore. Inter este elementul principal, gestionând totul, de la micro-etichete de 11px la titluri secundare de 30px. O pondere de 400 este implicită pentru textul corpului, 500 pentru elementele evidențiate și etichetele butoanelor, iar 600 este rezervată pentru etichetele importante ale interfeței utilizator. 16px cu o înălțime a liniei de 1,5 este cea mai frecvent întâlnită dimensiune cu un singur pas (1220 de apariții), confirmând că 16px este dimensiunea canonică a textului corpului.
- Geist Mono — înlocuire: JetBrains Mono or IBM Plex Mono · contururi 400, 500 · Fragmente de cod, metadate tehnice și token-uri monospațiate încorporate sunt utilizate în blocuri de cod la 12–14px și în elemente mari de afișare a codului la 24px. Acest lucru asigură credibilitatea instrumentului pentru dezvoltatori, în concordanță cu poziționarea produsului Dub.
Intervale și formă
| Scop | Sens |
|---|---|
| Densitate | medie |
| Pasul de bază | 8px |
| Raza butonului | 8px |
| Raza cardului | 12px |
| Umbre | fără - margini în loc de umbre |
| Între secțiuni | 64px |
| Lățimea paginii | 1200px |
Inteligența artificială vă va construi site-ul web în stilul Dub și îl va completa
- Completează cu produse și postări prin link - Instagram, TikTok, Facebook.
- Transferați conținut de pe vechiul site - specificați doar adresa.
- Design modern pe cel mai bun motor: React ( Next.js) cu randare pe server și optimizare SEO gata de utilizare.
- Optimizare SEO complet automatizată pentru rezultatele căutării și recomandări de rețele neuronale.
Stiluri similare
- Mollie — Un ghișeu din cașmir, un registru închis la culoare. Lăsați suficient spațiu alb pentru design editorial în jurul textului negru, apoi consolidați punctele legate de produs cu creme calde, cafele espresso și fotografii tactile ale metodelor de plată reale.
- Kagi — O sală de lectură separată. Creați un spațiu alb deschis în jurul unui text grafit îndrăzneț, folosind accente subtile de violet și suprafețe pastelate calde pentru a întrerupe liniștea.
- Milanote — Milanote este un studio de creație dedicat. Creați pagini în stil galerie editorială folosind panouri vizuale plutitoare: pereți înrămați întunecați, spațiu de afișare alb și capturi de ecran care arată ca obiecte reale cu o profunzime delicată.
- Co2 — Un atlas climatic în lumina iernii. Creați pagini asemănătoare unui peisaj aerian al documentelor, unde titlurile cu serif, datele codificate pe categorii și imaginile înghețate evidențiază margini albe late.
- GitButler — Turcoaz la sfârșitul textului. O combinație de titluri serif cu contrast ridicat cu grile tehnice subtile, suprafețe calde de grafit și un accent turcoaz discret.
- ElevenLabs — Un eseu foto în tonuri calde de crem, cu titluri subtile. Un caiet în stil Bauhaus — hârtie de culoarea cojii de ou, cerneală neagră și un singur accent violet și portocaliu pentru prezentarea produsului.
- Awesomic — Plasă de zinc editorială cu semne de punctuație portocalii care amintesc de confetti
- Monad — revistă tehnică editorială pe pergament cald
- Seline Analytics — O masă analitică liniștită pe hârtie caldă
- Notion — Un caiet de hârtie cald în soarele de la amiază
- Anthropic — O revistă științifică de teren pe pergament cald — suprafețe calme de fildeș, titluri editoriale cu serife și un singur accent de lut care apare doar atunci când este nevoie de acțiune.
- Calendly — Cerneală albastru închis pe marmură rece