Dub
Paneli ya kudhibiti karatasi ya mchele isiyong'aa ya Link
Mfumo wa kuona wa Dub una urembo wa SaaS uliozuiliwa, karibu wa uhariri: turubai karibu nyeupe iliyoshikiliwa pamoja na mipaka nyembamba badala ya vipengele vinavyojitokeza, huku uchapaji mnene wa monochrome ukitoa usaidizi wa kimuundo na rangi moja angavu ya bluu (#2563eb) ikitoa taarifa. Nyuso hubaki tambarare na zisizo na fremu mwanzoni, lakini kila chombo kina ukingo wa 1px #e5e5e5, unaoibua hisia ya hati iliyochapishwa. Utu hupatikana kupitia seti ndogo ya lafudhi za "kidonge" zenye rangi (chungwa, kijani kibichi, zambarau) zinazoelea juu ya rangi isiyo na rangi, na vichwa vya habari vinavyohisi kujiamini na vya kisasa bila kuwa vya kung'aa. Vipengele ni vidogo na vizito: mifereji ya maji ya 8px, kipenyo cha kadi ya 12px, lebo zenye umbo la kidonge kwenye 9999px, na vidhibiti visivyoonekana badala ya vifungo vizito, vilivyojazwa.
Ukurasa umejengwa juu ya mpangilio unaozingatia katikati wenye upana wa juu wa takriban pikseli 1200. Kipengele kikuu ni kizuizi cha maandishi kinachozingatia katikati chenye vipengele vitatu vinavyoelea (Programu za Ushirika, Uchanganuzi wa Ubadilishaji, Viungo Vifupi) vilivyowekwa mlalo juu ya mpangilio mkubwa wa bidhaa. Sehemu zimepangwa wima na mifereji thabiti ya pikseli 64, zikibadilishana kati ya turubai nyeupe na ukungu wa karatasi #f5f5f5 kwa ajili ya kutenganisha toni. Sehemu ya chini hutumia mpangilio wenye umbo la Z: maandishi ya uhariri yamezingatia katikati ya theluthi ya kati, na kadi za UI zinazoelea zimeunganishwa kwenye pembezoni mwa kushoto na kulia, na kuunda mdundo usio na ulinganifu, kama wa gazeti. Wingu la nembo ni gridi rahisi ya 5x2, inayozingatia katikati ya ukurasa. Urambazaji ni upau wa juu mdogo—nembo upande wa kushoto, urambazaji katikati, kundi la vitufe viwili (kitufe cha "Ingia" cha roho + kitufe cha "Jisajili" kilichojazwa) upande wa kulia—bila menyu isiyobadilika au kubwa. Mpangilio wa dashibodi wa dirisha kuu unaonyesha mpangilio wa kawaida wa programu wenye safu mbili: upau wa pembeni usiobadilika (sawa na pikseli 240) + eneo la maudhui linalofafanua msongamano wa taarifa za bidhaa kwa wageni kabla ya kuanza kusogeza.
Picha zinalenga bidhaa, si mtindo wa maisha. Skrini kuu imejikita katikati ya picha kubwa ya dashibodi, inayowakilisha mfano halisi wa bidhaa wenye urambazaji wa pembeni, jedwali la data, na vipengele vya kiolesura vinavyoelea, vilivyowekwa kama paneli tambarare kwenye turubai nyeupe. Nembo za mteja zinaonyeshwa kwenye gridi ya kijivu isiyojaa (beehiv, nguvu kubwa, Chatbase, n.k.) ili kutambua utendaji wao wa mitandao ya kijamii, zimeondolewa rangi ili kuruhusu lafudhi moja ya bluu ya ukurasa kubaki kubwa. Kadi za washirika zinazoelea (wasifu mdogo na vigae vyenye data ya mapato/malipo) huzunguka vipande vya maandishi ya uhariri chini, na kuunda hisia ya kina bila kutumia vivuli kwenye maandishi yenyewe. Muundo wa mandharinyuma wa gridi yenye nukta ni sifa ya saini: safu nyembamba ya nukta ndogo zenye mwanga mdogo sana huunda umbile na hisia ya mfumo wa muundo/uso wa kuchora, ikisisitiza nafasi ya tovuti kama "jukwaa la kisasa la sifa za viungo." Aikoni ni ndogo, ikiwa na muhtasari na kujaza, na hutumia rangi ya lafudhi (machungwa ya tangerine, zambarau ya lavender, kijani kibichi cha mnanaa) kwa vitambulisho vya vipengele. Hakuna picha, vielelezo, au mifumo ya 3D inayotumika—kiolesura cha mtumiaji cha bidhaa yenyewe ni lugha inayoonekana.
Paleti
Chapa
- Electric Blue
#2563eb— Rangi kuu ya chapa—nembo, viungo, viashiria muhimu vya utendaji, hali zinazotumika, na lafudhi za aikoni—hutumika. Bluu iliyokolea kwenye mandhari nyeupe huunda mvuto pekee wa kuona wa mfumo. - Deep Sapphire
#1e40af— Mandharinyuma kuu ya kitufe cha kitendo, ujazo mzito wa wito wa kitendo—rangi pekee inayoashiria kitendo—hutumika kwa kiasi kidogo kuvutia umakini.
Isiyoegemea upande wowote
- Canvas White
#ffffff— Mandharinyuma ya ukurasa, uso wa kadi, paneli ibukizi ndio msingi kamili wa kila skrini. - Paper Mist
#f5f5f5— Mabadiliko madogo ya rangi ya kuelea kwa kadi zilizowekwa kwenye viota, paneli za ziada, na vijazaji. - Ash
#e5e5e5— Mipaka nyembamba kwenye kadi, viunganishi vya kuingiza na vigawanyio ni mstari wa kimuundo unaoshikilia mfumo pamoja. - Smoke
#d4d4d4— Mipaka mikali zaidi kwa vyombo vilivyochaguliwa na mihtasari ya vitufe vya ziada. - Pebble
#c8c8c8— Mipaka, mihtasari ya udhibiti, na vigawanyiko vya kimuundo vyenye utofautishaji wa wastani. Rangi hii haipaswi kutumika kama rangi kuu ya wito wa kuchukua hatua. - Midnight Ink
#0a0a0a— Maandishi makuu ya vitufe, vitufe vilivyoangaziwa, na maandishi ya urambazaji ni karibu meusi kwa utofautishaji wa hali ya juu.
Uchapaji
kutoka pikseli 11 hadi 48 · hatua 9
- Satoshi — mbadala: Inter (weight 500 · mihtasari 500 · Vichwa vya Maonyesho - vinatumika tu katika mistari ya pikseli 36–48 kwa vichwa vya habari na vichwa vya sehemu. Uzito wa fonti - 500 (wastani, sio nzito): Vichwa vya habari vinaonekana kuwa vya kujiamini na vya kisasa, lakini havijawahi kuwa na nguvu nyingi. Uwiano wa kijiometri wa Satoshi huipa herufi hisia ya kisasa kidogo ya uhariri ambayo nakala ya mwili wa Inter haiwezi kuiga.
- Inter — mbadala: Inter (native) · mihtasari 400, 500, 600 · Nakala ya mwili, lebo za UI, urambazaji, vichwa vidogo, na vichwa vidogo. Inter ndiyo kazi kuu, inayoshughulikia kila kitu kuanzia lebo ndogo za pikseli 11 hadi vichwa vya pili vya pikseli 30. Uzito wa 400 ndio chaguo-msingi la nakala ya mwili, 500 kwa vipengele vilivyoangaziwa na lebo za vitufe, na 600 imehifadhiwa kwa lebo muhimu za UI. 16px yenye urefu wa mstari wa 1.5 ndiyo saizi ya hatua moja inayopatikana mara nyingi zaidi (matukio 1220), ikithibitisha kwamba 16px ni saizi ya nakala ya mwili ya kisheria.
- Geist Mono — mbadala: JetBrains Mono or IBM Plex Mono · mihtasari 400, 500 · Vijisehemu vya msimbo, metadata ya kiufundi, na tokeni zilizopachikwa zenye nafasi moja hutumika katika vizuizi vya msimbo kwa pikseli 12–14 na katika vipengele vikubwa vya kuonyesha msimbo kwa pikseli 24. Hii inahakikisha uaminifu wa kifaa cha msanidi programu, sambamba na uwekaji wa bidhaa wa Dub.
Vipindi na umbo
| Kusudi | Maana |
|---|---|
| Uzito | wastani |
| Hatua ya msingi | 8px |
| Kipenyo cha kitufe | 8px |
| Redi ya kadi | 12px |
| Vivuli | hapana - mipaka badala ya vivuli |
| Kati ya sehemu | 64px |
| Upana wa ukurasa | 1200px |
AI itaunda tovuti yako kwa mtindo wa Dub na kuijaza
- Jaza bidhaa na machapisho kupitia kiungo - Instagram, TikTok, Facebook.
- Hamisha maudhui kutoka kwa tovuti yako ya zamani—taja tu anwani.
- Muundo wa kisasa kwenye injini bora: React ( Next.js) yenye utoaji wa seva na uboreshaji wa SEO bila kuchelewa.
- Uboreshaji wa SEO kiotomatiki kikamilifu kwa matokeo ya utafutaji na mapendekezo ya mtandao wa neva.
Mitindo inayofanana
- ElevenLabs — Insha ya picha katika rangi ya krimu yenye umbo la kuvutia na vichwa vya habari hafifu. Daftari la mtindo wa Bauhaus—karatasi yenye rangi ya ganda la yai, wino mweusi, na lafudhi moja ya zambarau na chungwa kwa ajili ya kuonyesha bidhaa.
- Awesomic — Matundu ya zinki ya uhariri yenye alama za uakifishaji za rangi ya chungwa zinazokumbusha confetti
- Monad — jarida la kiufundi la uhariri kuhusu ngozi ya joto
- Seline Analytics — Jedwali la uchanganuzi tulivu kwenye karatasi ya joto
- Notion — Daftari la karatasi lenye joto kwenye jua la mchana
- Anthropic — Jarida la kisayansi kuhusu vellum yenye joto—nyuso tulivu za pembe za ndovu, vichwa vya habari vya uhariri vilivyoandikwa kwa ufupi, na lafudhi moja ya udongo inayoonekana tu wakati hatua inahitajika.
- Calendly — Wino wa bluu nyeusi kwenye marumaru baridi
- Augen Pro — Uwasilishaji mweupe wa Apple una rangi ya bluu ya umeme isiyo na uzito kama lafudhi pekee katika nafasi ya monochrome.
- Antimetal — Hadithi ya uhariri kwenye karatasi ya krimu—asubuhi tulivu katika jarida la kisayansi, ambapo kujizuia huonyesha kujiamini na masheikh hufanya kazi nzito
- Perk — Chokaa cha umeme kwenye karatasi ya ngozi yenye joto
- Ditto — Warsha yenye mwanga wa jua inayounda sampuli za maua ya porini. Nyuso zenye joto za krimu, rangi ya msingi ya manjano inayong'aa, wino wa bluu ya bluu iliyokolea, maumbo ya rangi ya kikaboni yakichanua nyuma ya kipande hicho.
- Officevibe — Jarida la uhariri kuhusu karatasi ya rangi ya krimu. Hebu fikiria insha yenye mawazo kuhusu usimamizi wa rasilimali watu, iliyowasilishwa kama bidhaa—fonti ya serif yenye mkunjo ikinong'ona kupitia kiolesura cha kisasa cha bluu.