Dub
Link matēta rīspapīra vadības panelis
Duba vizuālajai sistēmai ir atturīga, gandrīz redakcionāla SaaS estētika: gandrīz balts audekls, ko kopā satur plānas apmales, nevis izvirzīti elementi, ar blīvu melnbaltu tipogrāfijas dizainu, kas nodrošina strukturālu atbalstu, un vienu spilgti zilu krāsu (#2563eb), kas rada iespaidu. Virsmas no pirmā acu uzmetiena paliek plakanas un bez rāmja, taču katram konteineram ir 1 pikseļa #e5e5e5 apmale, kas rada drukāta dokumenta sajūtu. Personība tiek panākta, izmantojot nelielu krāsainu "tablešu" akcentu komplektu (oranžu, zaļu, violetu), kas peld virs neitrālās paletes, un galvenes, kas šķiet pārliecinātas un modernas, bet ne uzkrītošas. Komponenti ir kompakti un blīvi: 8 pikseļu iegremdēšanas joslas, 12 pikseļu kartes rādiuss, tabletei līdzīgas etiķetes ar izmēru 9999 pikseļi un neredzamas vadības ierīces smagu, aizpildītu pogu vietā.
Lapa ir veidota centrētā izkārtojumā ar maksimālo platumu aptuveni 1200 pikseļi. Galvenais elements ir centrēts teksta bloks ar trim peldošiem elementiem (Partnerprogrammas, Konversiju analītika, Īsās saites), kas horizontāli novietoti virs liela produkta izkārtojuma. Sadaļas ir izvietotas vertikāli ar vienādām 64 pikseļu iecirtuma līnijām, pārmaiņus starp baltu audeklu un #f5f5f5 papīra miglu toņu atdalīšanai. Apakšējā sadaļā izmantots Z formas izkārtojums: redakcionālais teksts ir centrēts vidējā trešdaļā, un peldošās lietotāja interfeisa kartītes ir piestiprinātas kreisajā un labajā malā, radot asimetrisku, žurnālam līdzīgu ritmu. Logotipa mākonis ir vienkāršs 5x2 režģis, kas centrēts lapā. Navigācija ir minimālistiska augšējā josla — logotips kreisajā pusē, navigācija centrā, divu pogu grupa (spogu poga "Pieteikties" + aizpildīta poga "Reģistrēties") labajā pusē — bez fiksētas vai mega izvēlnes. Galvenā loga informācijas paneļa izkārtojums demonstrē klasisku divu kolonnu lietotnes izkārtojumu: fiksēta sānu josla (līdzīga 240 pikseļiem) + satura apgabals, kas nosaka produkta informācijas blīvumu apmeklētājiem, pirms viņi sāk ritināt.
Vizuālie elementi ir vērsti uz produktu, nevis dzīvesveidu. Galvenais ekrāns ir centrēts uz lielu informācijas paneļa ekrānuzņēmumu, kas attēlo reālas pasaules produkta maketu ar sānu joslas navigāciju, datu tabulu un peldošiem lietotāja interfeisa elementiem, kas izvietoti kā plakans panelis uz balta audekla. Klientu logotipi tiek attēloti nepiesātinātā pelēktoņu režģī (bišu strops, superspēja, Chatbase utt.), lai atzīmētu viņu sniegumu sociālajos medijos, bez krāsas, lai lapas vienīgais zilais akcents paliktu dominējošs. Peldošās partneru kartītes (mazi profili un flīzes ar ieņēmumu/maksājumu datiem) pārvietojas pa redakcionālā teksta blokiem apakšā, radot dziļuma sajūtu, neizmantojot ēnas uz paša teksta. Punktētā režģa fona raksts ir raksturīga iezīme: plāna mazu punktu rinda ar ļoti zemu necaurredzamību rada tekstūru un dizaina sistēmas/zīmēšanas virsmas sajūtu, uzsverot vietnes pozicionējumu kā "modernu saišu atribūcijas platformu". Ikonogrāfija ir minimāla, ar kontūrām un aizpildījumiem, un funkciju tagiem tiek izmantota akcentu palete (mandarīna oranža, lavandas violeta, piparmētru zaļa). Netiek izmantotas fotogrāfijas, ilustrācijas vai 3D modeļi — produkta lietotāja saskarne pati par sevi ir vizuāla valoda.
Palete
Zīmols
- Electric Blue
#2563eb— Tiek izmantota galvenā zīmola krāsa — logotips, saites, galvenie veiktspējas rādītāji, aktīvie stāvokļi un ikonu akcenti. Piesātināti zila krāsa uz balta fona rada sistēmas vienīgo vizuālo pievilcību. - Deep Sapphire
#1e40af— Darbības pogas galvenais fons, aicinājuma uz darbību treknrakstā izmantotais aizpildījums — vienīgā krāsa, kas apzīmē darbību — tiek izmantots taupīgi, lai piesaistītu uzmanību.
Neitrāls
- Canvas White
#ffffff— Lapas fons, kartītes virsma, uznirstošie paneļi ir katra ekrāna absolūtais pamats. - Paper Mist
#f5f5f5— Nelielas virsmas krāsas izmaiņas ligzdotām kartītēm, papildu paneļiem un aizpildījumiem, virzot kursoru. - Ash
#e5e5e5— Plānās apmales uz kartēm, ieejas savienotājiem un sadalītājiem ir strukturālā līnija, kas satur sistēmu kopā. - Smoke
#d4d4d4— Asākas robežas atlasītajiem konteineriem un papildu pogu kontūras. - Pebble
#c8c8c8— Robežas, vadības kontūras un strukturālie atdalītāji ar vidēju kontrastu. Šo krāsu nedrīkst izmantot kā galveno krāsu aicinājumiem uz darbību. - Midnight Ink
#0a0a0a— Pogu galvenais teksts, iezīmētās pogas un navigācijas teksts ir gandrīz melns, lai nodrošinātu maksimālu kontrastu.
Tipogrāfija
no 11 līdz 48 pikseļiem · 9 soļi
- Satoshi — nomaiņa: Inter (weight 500 · kontūras 500 · Attēlot virsrakstus — izmanto tikai 36–48 pikseļu rindās virsrakstiem un sadaļu nosaukumiem. Fonta biezums — 500 (vidējs, nevis treknraksts): virsraksti izskatās pārliecinoši un moderni, taču nekad neuzkrītoši. Satoši ģeometriskās proporcijas piešķir burtveidolam nedaudz redakcionālu, modernu sajūtu, ko Inter pamatteksts nevar atkārtot.
- Inter — nomaiņa: Inter (native) · kontūras 400, 500, 600 · Pamatteksta teksts, lietotāja interfeisa etiķetes, navigācija, apakšvirsraksti un mazie virsraksti. Inter ir galvenais darba zirgs, kas apstrādā visu, sākot no 11 pikseļu mikroetiķetēm līdz 30 pikseļu sekundārajiem virsrakstiem. Pamatteksta noklusējuma svars ir 400, izcelto elementu un pogu etiķetēm — 500, bet svarīgām lietotāja interfeisa etiķetēm — 600. Visbiežāk sastopamais vienas pakāpes izmērs (1220 gadījumi) ir 16 pikseļi ar līnijas augstumu 1,5, kas apstiprina, ka 16 pikseļi ir kanoniskais pamatteksta kopijas izmērs.
- Geist Mono — nomaiņa: JetBrains Mono or IBM Plex Mono · kontūras 400, 500 · Koda fragmenti, tehniskie metadati un iegultie vienrindas tokeni tiek izmantoti koda blokos ar izmēru 12–14 pikseļi un lielos koda attēlošanas elementos ar izmēru 24 pikseļi. Tas nodrošina izstrādātāja rīka uzticamību atbilstoši Dub produkta pozicionēšanai.
Intervāli un forma
| Mērķis | Nozīme |
|---|---|
| Blīvums | vidēji |
| Pamata solis | 8px |
| Pogas rādiuss | 8px |
| Kartes rādiuss | 12px |
| Ēnas | nē — robežas ēnu vietā |
| Starp sekcijām | 64px |
| Lapas platums | 1200px |
Mākslīgais intelekts izveidos jūsu vietni Dub stilā un aizpildīs to
- Aizpildiet ar produktiem un ierakstiem, izmantojot saiti — Instagram, TikTok, Facebook.
- Pārsūtiet saturu no savas vecās vietnes — vienkārši norādiet adresi.
- Moderns dizains uz labākā dzinēja: React ( Next.js) ar servera renderēšanu un SEO optimizāciju uzreiz pēc instalēšanas.
- Pilnībā automatizēta SEO optimizācija meklēšanas rezultātiem un neironu tīkla ieteikumiem.
Līdzīgi stili
- ElevenLabs — Foto eseja siltos krēmkrāsas toņos ar neuzkrītošiem virsrakstiem. Bauhaus stila piezīmju grāmatiņa — olu čaumalas krāsas papīrs, melna tinte un viens violets un oranžs akcents produktu izvietošanai.
- Awesomic — Redakcijas cinka siets ar oranžām pieturzīmēm, kas atgādina konfeti
- Monad — redakcijas tehniskais žurnāls uz silta pergamenta
- Seline Analytics — Kluss analītisks galds uz silta papīra
- Notion — Silta papīra piezīmju grāmatiņa pusdienas saulē
- Anthropic — Zinātnisks lauka žurnāls uz silta pergamenta — mierīgas ziloņkaula virsmas, serifi raksta virsraksti un viens māla akcents, kas parādās tikai tad, kad nepieciešama rīcība.
- Calendly — Tumši zila tinte uz auksta marmora
- Augen Pro — Apple baltajā prezentācijā vienkrāsainā telpā kā vienīgais akcents ir klīnisks, viegls, elektriski zils tonis.
- Antimetal — Redakcijas hronika uz krēmkrāsas papīra — kluss rīts zinātniskā žurnālā, kur atturība pauž pārliecību un serifi veic smago darbu.
- Perk — Elektriskais laims uz silta pergamenta papīra
- Ditto — Saules apspīdēta darbnīca, kurā tiek radīti savvaļas ziedu paraugi. Silti krēmkrāsas virsmas, spilgti dzeltena pamatkrāsa, dziļi tumši zilas tintes, organiskas krāsu formas, kas plaukst aiz darba.
- Officevibe — Redakcijas žurnāls uz silta krēmkrāsas papīra. Iedomājieties pārdomātu eseju par personāla vadību, kas pasniegta kā produkts — kursīvs ar serif fontu, kas čukst cauri modernai zilai saskarnei.