Dub
Link-iň mat tüwi kagyzynyň dolandyryş paneli
Dubyň wizual ulgamynda çäklendirilen, diýen ýaly redaksiýa SaaS estetikasy bar: çykyp duran elementleriň ýerine inçe çäkler bilen birleşdirilen ak reňkli tuwal, gurluş goldawyny üpjün edýän dykyz monohrom tipografiýa we bir açyk gök reňk (#2563eb) beýan edýär. Ilkinji garaýyşda ýüzler tekiz we çarçuwasyz galýar, ýöne her bir konteýnerde çap edilen resminamanyň duýgusyny döredýän 1px #e5e5e5 gyrasy bar. Şahsyýet neýtral palitranyň üstünde ýüzýän kiçi reňkli "tabletka" aksentleri (mämişi, ýaşyl, gyrmyzy) we göze ilmeýän, özüne ynamly we döwrebap duýulýan başlyklar arkaly gazanylýar. Komponentler ykjam we dykyz: 8px turbajyklar, 12px kart radiusy, 9999px-de tabletka şekilli ýazgylar we agyr, doldurylan düwmeleriň ýerine görünmeýän dolandyryşlar.
Sahypa iň ýokary ini takmynan 1200 piksel bolan merkezleşdirilen düzüliş esasynda guruldy. Esasy element uly önüm düzülişiniň üstünde gorizontal ýerleşdirilen üç sany ýüzýän elementi (Hyzmatdaşlyk Programmalary, Öwrüliş Analitikasy, Gysga Baglanyşyklar) bolan merkezleşdirilen tekst blokydyr. Bölümler ak kanwas we #f5f5f5 kagyz dumanynyň arasynda çalşyp, yzygiderli 64 piksellik oýuklar bilen dikligine ýerleşdirilip, tonal bölmek üçin ulanylýar. Aşakdaky bölümde Z görnüşli düzüliş ulanylýar: redaksiýa teksti ortaky üçden bir böleginde merkezleşdirilen we ýüzýän UI kartlary çep we sag gyralara berkidilip, assimetrik, žurnal ýaly ritm döredýär. Logotip buluty sahypanyň merkezinde ýerleşýän ýönekeý 5x2 ölçegli tordur. Nawigasiýa minimalist ýokarky paneldir - çepde logotip, merkezde nawigasiýa, sagda iki düwmäniň topary (arwah "Giriş" düwmesi + doldurylan "Hasaba al" düwmesi) - berk ýa-da mega-menýusyz. Esasy görnüşiň dolandyryş paneliniň düzülişi nusgawy iki sütünli programmanyň düzülişini görkezýär: üýtgewsiz gapdal panel (240 piksele meňzeş) + myhmanlar üçin aýlanyp başlamazdan öň önüm maglumatynyň dykyzlygyny kesgitleýän mazmun meýdany.
Görseller durmuş ýörelgesine däl-de, önüme gönükdirilendir. Baş sahypanyň merkezi panelde uly ekran suraty bolup, gapdal panel nawigasiýasy, maglumat tablisasy we ak kanwanyň üstünde tekiz panel hökmünde ýerleşdirilen hakyky dünýä önüminiň maketini görkezýär. Müşderi logotipleri sosial mediada işleýändiklerini ykrar etmek üçin doýmadyk çal reňkli torda (beehiv, supergüýç, Chatbase we ş.m.) görkezilýär, sahypanyň ýeke gök aksentiniň agalyk etmegine mümkinçilik bermek üçin reňki aýrylýar. Suzýan hyzmatdaş kartlary (kiçi profiller we girdeji/töleg maglumatlary bolan plitkalar) aşaky bölekde redaksiýa tekstiniň bloklarynyň töwereginde hereket edýär we tekstiň özünde kölegeleri ulanmazdan çuňluk duýgusyny döredýär. Nokatly tor fon nagyşlary özboluşly aýratynlykdyr: gaty pes açyklygy bolan inçe nokatlar teksturany we dizaýn ulgamynyň/çyzgy ýüzüniň duýgusyny döredýär, saýtyň "häzirki zaman baglanyşyk atribut platformasy" hökmünde ýerleşýändigini nygtaýar. Ikonografiýa minimal, konturlar we doldurmalar bilen we aýratynlyk bellikleri üçin aksent palitrasyny (mandarin mämişi, lawanda gyrmyzy, ýalpyz ýaşyl) ulanýar. Hiç hili suratlar, illýustrasiýalar ýa-da 3D modeller ulanylmaýar — önümiň ulanyjy interfeýsi özi wizual dildir.
Palitra
Brend
- Electric Blue
#2563eb— Esasy brend reňki — logotip, baglanyşyklar, esasy görkezijiler, işjeň ýagdaýlar we nyşan aksentleri — ulanylýar. Ak fonda baý gök reňk ulgamyň ýeke-täk wizual gözelligini döredýär. - Deep Sapphire
#1e40af— Hereket düwmesiniň esasy fony, herekete çagyryşyň goýy reňki — hereketi aňladýan ýeke-täk reňk — üns çekmek üçin seýrek ulanylýar.
Neýtral
- Canvas White
#ffffff— Sahypanyň fony, kartoçkanyň ýüzi, açylýan paneller her ekranyň esasyny düzýär. - Paper Mist
#f5f5f5— Içki kartlar, goşmaça paneller we doldurmalar üçin awataryň reňk üýtgeşmeleri inçe. - Ash
#e5e5e5— Kartlaryň, giriş birleşdirijileriniň we bölüjileriň inçe çäkleri ulgamy bilelikde saklaýan gurluş çyzygydyr. - Smoke
#d4d4d4— Saýlanan konteýnerler we goşmaça düwme konturlary üçin has aýdyň serhetler. - Pebble
#c8c8c8— Orta kontrastly serhetler, gözegçilik konturlary we gurluş bölüjileri. Bu reňk herekete çagyryşlar üçin esasy reňk hökmünde ulanylmaly däldir. - Midnight Ink
#0a0a0a— Düwmeleriň esasy teksti, bellenen düwmeler we nawigasiýa teksti iň ýokary kontrast üçin diýen ýaly gara reňkde.
Tipografiýa
11-den 48 piksele çenli · 9 ädim
- Satoshi — çalyşmak: Inter (weight 500 · konturlar 500 · Görkezilýän sözbaşylar – diňe 36–48 piksel setirlerde sözbaşylar we bölüm sözbaşylary üçin ulanylýar. Şriftiň agramy – 500 (orta, galyň däl): sözbaşylar ynamly we döwrebap görünýär, ýöne hiç haçan güýçli däl. Satoşiniň geometrik proporsiýalary şrifte Interiň esasy nusgasynyň gaýtalap bilmejek derejede redaksiýa, döwrebap duýgy berýär.
- Inter — çalyşmak: Inter (native) · konturlar 400, 500, 600 · Esasy nusga, UI bellikleri, nawigasiýa, kiçi sözbaşylar we kiçi sözbaşylar. Inter esasy iş aty bolup, 11px mikro-belliklerden 30px ikinji sözbaşylara çenli ähli zady işläp düzýär. Esasy nusga üçin 400 agramy, aýratynlandyrylan elementler we düwme bellikleri üçin 500 agramy we möhüm UI bellikleri üçin 600 agramy saklanýar. Setir beýikligi 1,5 bolan 16px iň köp duş gelýän bir ädimli ölçegdir (1220 gezek gaýtalanýar), bu bolsa 16px-iň kanonik esasy nusga ölçegidigini tassyklaýar.
- Geist Mono — çalyşmak: JetBrains Mono or IBM Plex Mono · konturlar 400, 500 · Kod bölekleri, tehniki metamaglumatlar we içine goýlan bir aralykly tokenler 12–14 piksel ölçegli kod bloklarynda we 24 piksel ölçegli uly kod görkezme elementlerinde ulanylýar. Bu bolsa, Dub-yň önüm pozisiýasyna laýyk gelýän işläp düzüji guralynyň ygtybarlylygyny üpjün edýär.
Aralyklar we görnüş
| Maksat | Manysy |
|---|---|
| Dykyzlyk | ortaça |
| Esasy ädim | 8px |
| Düwme radiusy | 8px |
| Kart radiusy | 12px |
| Kölegeler | kölegeleriň ýerine serhetler ýok |
| Bölümleriň arasynda | 64px |
| Sahypanyň giňligi | 1200px |
Süni intellekt web sahypaňyzy Dub stilinde gurar we ony doldurar
- Instagram, TikTok, Facebook salgylary arkaly önümler we ýazgylar bilen dolduryň.
- Köne saýtyňyzdan mazmuny göçüriň — diňe salgyny görkeziň.
- Iň gowy motorda döwrebap dizaýn: React ( Next.js) serwer renderi we SEO optimizasiýasy bilen gyssagly ýagdaýda.
- Gözleg netijeleri we neýron tor maslahatlary üçin doly awtomatlaşdyrylan SEO optimizasiýasy.
Meňzeş stiller
- ElevenLabs — Ýumşak krem reňkli we inçe sözbaşyly suratly esse. Bauhaus stilindäki depderçe — ýumurtga gabygy reňkli kagyz, gara syýa we önümi görkezmek üçin ýekeje gyrmyzy we mämişi reňkli bezeg.
- Awesomic — Konfeti ýadyňa salýan mämişi punktuasiýa belgileri bolan redaksiýa sink tor
- Monad — ýyly pergamentde redaksiýa tehniki žurnaly
- Seline Analytics — Ýyly kagyzyň üstünde sessiz analitiki stol
- Notion — Günortan güneşinde ýyly kagyz depder
- Anthropic — Ýyly pergament barada ylmy meýdan žurnaly — pil süňküniň asuda ýüzleri, serif redaksiýa sözbaşylary we diňe hereket gerek bolanda peýda bolýan ýekeje palçyk aksenti.
- Calendly — Sowuk mermeriň üstünde gara gök syýa
- Augen Pro — Apple-iň ak görnüşi monohrom giňişlikde ýeke-täk aksent hökmünde kliniki, agramsyz, elektrik gök reňki öz içine alýar.
- Antimetal — Kremli kagyzdaky redaksiýa hronikasy — ylmy žurnalda asuda ertir, bu ýerde öz-özüňi saklamak ynamy aňladýar, serifler bolsa agyr işleri ýerine ýetirýär.
- Perk — Gyzgyn pergament kagyzynda elektrik laýmy
- Ditto — Gün şöhlesi düşýän ussahanada ýabany gülleriň nusgalaryny döredýär. Ýyly krem reňkli ýüzler, açyk sary esasy reňk, goýy gök reňkli syýalar, eseriň arkasynda açylýan organiki reňkli görnüşler.
- Officevibe — Krem reňkli kagyzda ýazylan redaksiýa žurnaly. HR dolandyryşy barada oýlanyşykly oçerk göz öňüne getiriň, ol önüm hökmünde hödürlenýär — häzirki zaman gök interfeýs arkaly pyşyrdaýan kursiw serif şrifti.