Seline Analytics
O masă analitică liniștită pe hârtie caldă
Seline este amplasată pe un fundal cald de piatră (#fafaf9) cu un singur accent albastru vibrant - toate celelalte culori sunt neutre și extrase din paleta de culori a pietrei Tailwind. Titlurile sunt redate cu un font sans-serif geometric personalizat (roobert), cu o grosime de 400 și o spațiere îngustă a literelor negative, conferind textului o încredere relaxată, aproape șoptită, care contrastează cu stilul SaaS tipic zgomotos. Suprafețele interfeței utilizator sunt cartonașe albe plate, plutind deasupra fundalului cald, cu o singură estompare moale de 16px; marginile sunt create cu linii subțiri, de 1px, în nuanțe de piatră, utilizate generos ca element structural principal în locul divizoarelor sau panourilor grele. Aspectul este inspirat: conținut pe toată lățimea centrat pe un ritm vertical generos, cu comenzi interactive în formă de pastilă, o ilustrație a mascotei pentru personalitate și capturi de ecran ale tabloului de bord ca dovadă a produsului. Impresia generală este analitică din punct de vedere editorial: calmă, monocromă, încrezătoare, îndemnul la acțiune albastru fiind cel mai izbitor element de pe pagină, datorită reținerii deliberate a tuturor celorlalte elemente.
Pagina are lățime maximă, centrată la aproximativ 1200px, cu mult spațiu vertical. Elementul principal este un bloc de text pe două rânduri, aliniat la stânga, cu o singură frază evidențiată („simplu și eficient”) în albastru, urmată de un rând cu două îndemnuri la acțiune (pastilă albastră + pastilă fantomă), apoi un rând de logo-uri de parteneri în tonuri de gri, apoi un rând de evaluări de încredere și apoi o previzualizare plutitoare pe toată lățimea unui tablou de bord, care se suprapune ușor peste următoarea secțiune. Sub marginea de îndoire se află rânduri alternante de testimoniale într-o grilă cu o singură coloană, urmate de secțiuni pe toată lățimea cu descrieri ale caracteristicilor, text aliniat la stânga și elemente vizuale centrate ale produselor. Navigarea este o bară superioară minimalistă - logo-ul în stânga, link-uri de navigare centrate, autentificare + îndemn la acțiune albastru în dreapta - cu un grup plutitor de avatare în mijlocul navigării, care servește drept verificare a identității. Spațiile dintre secțiuni sunt largi (96px) pentru a crea un ritm editorial, mai degrabă decât o amestecătură densă de informații.
Limbajul vizual este dominat de capturi de ecran ale interfeței utilizator a produsului — previzualizarea tabloului de bord este o fotografie redată cu un filtru de contrast în tonuri de gri (1) (0,94), care reduce culorile datelor la o nuanță monocromă. Singura figură umană este un autocolant liniar cu o mascotă (un personaj cu glugă), desenat în stil SVG, doar cu contururi, plasat o dată pe secțiune ca un contrapunct jucăuș la conținutul analitic, cu o umbră delicată pentru a crea un efect de profunzime asemănător unui autocolant. Logo-ul și glifele mărcii sunt mici scântei/flăcări negre. Nu există fotografii — nici fotografii cu stilul de viață, nici fotografii cu echipa, nici imagini cu mediul înconjurător. Obiectul (tabloul de bord) este protagonistul. Toate pictogramele decorative sunt în stil contur de 1px, fie în #0c0a09, fie în #3ba6f1, niciodată umplute.
Paletă
Marca
- Cyan Signal
#3ba6f1— Principalul îndemn la acțiune, linkurile active și conturul pictogramelor mărcii sunt singurele accente de culoare de pe pagină, folosite cu moderație pentru a atrage atenția asupra acțiunii. - Cyan Edge
#3398e1— Albastrul este folosit pentru a evidenția contururile acțiunilor, etichetele linkurilor și elementele interactive. Nu ar trebui folosit ca și culoare principală pentru îndemnurile la acțiune.
Neutru
- Ink Black
#0c0a09— Titlurile principale, textul evidențiat și pictogramele expresive sunt într-o culoare caldă, aproape neagră. - Stone Canvas
#fafaf9— Fundalul paginii este o nuanță caldă, cremoasă, care se simte mai degrabă ca hârtia decât ca albul unui ecran. - Pure White
#ffffff— Suprafețele hărții, panourile proeminente și umplerile câmpurilor de introducere sunt plate și fără umbre în mod implicit. - Stone Border
#e8e6e5— Chenarele subțiri de pe carduri, navigare și câmpuri de introducere a datelor sunt elementul structural principal, nu separatoarele. - Stone Muted
#d6d3d1— Rame suplimentare, nuanțe subtile de fundal, separatoare decorative. - Ash Gray
#a8a29e— Text de ajutor, contururi de pictograme, stări dezactivate - lizibile, dar inactive.
Tipografie
de la 10 la 52px · 5 pași
- Roobert — înlocuire: Inter Tight or Satoshi · contururi 400, 500 · Fontul pentru titluri și aspectul textului este un sans-serif geometric unic, cu o spațiere minimă între litere (-0,025em la 32px, -0,021em la 52px). Grosimea de 400 x 52px este semnătura fontului: neconvențional, subtil, dar autoritar, dar discret. Titlurile își ocupă locul fără a fi arogante.
- Inter — înlocuire: Inter · contururi 400, 500, 600 · Fontul principal pentru textul din spate, navigare, interfață utilizator și titluri este un font neutru, universal, pentru tot textul din afara ecranului. Dimensiunea predominantă pentru textul din spate este de 14 px, cu o grosime de 400 și o spațiere între rânduri de 1,64 (frecvență 1174). Spațierea pozitivă între litere (0,004 em) la dimensiuni mici asigură lizibilitatea unei interfețe utilizator dense.
Intervale și formă
| Scop | Sens |
|---|---|
| Densitate | spațios |
| Pasul de bază | 8px |
| Raza butonului | 9999px |
| Raza cardului | 10px |
| Umbre | umbre moi |
| Între secțiuni | 96px |
| Lățimea paginii | 1200px |
Inteligența artificială vă va construi site-ul web în stilul Seline Analytics ș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
- Dub — Panoul de control din hârtie de orez mată al lui Link
- 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