Dub
Link-in mat düyü kağızı idarəetmə paneli
Dub-un vizual sistemi təmkinli, demək olar ki, redaksiya SaaS estetikasına malikdir: çıxıntılı elementlər əvəzinə nazik haşiyələrlə bir-birinə yapışdırılmış, sıx monoxrom tipoqrafiya struktur dəstəyi təmin edir və tək parlaq mavi rəng (#2563eb) ifadə edir. Səthlər ilk baxışdan düz və çərçivəsiz qalır, lakin hər konteynerdə çap olunmuş sənəd hissini oyadan 1px #e5e5e5 haşiyə var. Şəxsiyyət neytral palitranın üzərində üzən kiçik bir rəngli "həb" vurğuları (narıncı, yaşıl, bənövşəyi) və dəbdəbəli olmadan özünəinamlı və müasir hiss edən başlıqlar vasitəsilə əldə edilir. Komponentlər kompakt və sıxdır: 8px novlar, 12px kart radiusu, 9999px-də həb formalı etiketlər və ağır, dolu düymələr əvəzinə görünməz idarəetmə elementləri.
Səhifə, maksimum eni təxminən 1200 piksel olan mərkəzləşdirilmiş bir tərtibat üzərində qurulub. Əsas element, böyük bir məhsul tərtibatının üzərində üfüqi olaraq yerləşdirilmiş üç üzən elementdən (Tərəfdaş Proqramları, Çevrilmə Analitikası, Qısa Keçidlər) ibarət mərkəzləşdirilmiş mətn blokudur. Bölmələr, ağ kətan və tonal ayırma üçün #f5f5f5 kağız dumanları arasında növbələşən ardıcıl 64 piksellik novlarla şaquli olaraq düzülmüşdür. Alt hissə Z formalı tərtibatdan istifadə edir: redaksiya mətni orta üçdə bir hissədə mərkəzləşdirilib və üzən UI kartları sol və sağ kənarlara bərkidilir və asimmetrik, jurnala bənzər bir ritm yaradır. Loqo buludu səhifənin mərkəzində yerləşən sadə 5x2 ölçülü bir şəbəkədir. Naviqasiya minimalist üst paneldir - solda loqo, mərkəzdə naviqasiya, sağda iki düymədən ibarət bir qrup (xəyalət "Giriş" düyməsi + doldurulmuş "Qeydiyyat" düyməsi) - sabit və ya meqa-menyu olmadan. Əsas pəncərənin idarəetmə paneli düzeni klassik iki sütunlu tətbiq düzenini nümayiş etdirir: sabit yan panel (240 pikselə bənzər) + ziyarətçilər sürüşdürməyə başlamazdan əvvəl məhsul məlumatlarının sıxlığını təyin edən məzmun sahəsi.
Vizual görüntülər həyat tərzinə deyil, məhsula yönəlib. Əsas ekran böyük bir tablosun ekran görüntüsündə mərkəzləşib və yan panel naviqasiyası, məlumat cədvəli və üzən UI elementləri ilə real dünya məhsul maketini təmsil edir və ağ kətan üzərində düz panel kimi yerləşdirilib. Müştəri loqotipləri sosial media performanslarını qeyd etmək üçün doymamış boz rəngli şəbəkədə (beehiv, supergüc, Chatbase və s.) göstərilir, səhifənin tək mavi vurğusunun dominant qalmasına imkan vermək üçün rəngləri soyulur. Üzən tərəfdaş kartları (kiçik profillər və gəlir/ödəniş məlumatları olan plitələr) alt hissədəki redaksiya mətni blokları ətrafında hərəkət edir və mətnin özündə kölgələrdən istifadə etmədən dərinlik hissi yaradır. Nöqtəli şəbəkə fon naxışı imza xüsusiyyətidir: çox aşağı qeyri-şəffaflığa malik nazik bir sıra kiçik nöqtələr tekstura və dizayn sisteminin/rəsm səthinin hissini yaradır, saytın "müasir link atributu platforması" kimi mövqeyini vurğulayır. İkonoqrafiya minimaldır, konturlar və doldurmalarla və xüsusiyyət etiketləri üçün vurğu palitrasından (narıncı narıncı, lavanda bənövşəyi, nanə yaşılı) istifadə edir. Heç bir fotoşəkil, illüstrasiya və ya 3D model istifadə edilmir — məhsulun istifadəçi interfeysi özü vizual dildir.
Palitra
Brend
- Electric Blue
#2563eb— Əsas brend rəngi — loqotip, keçidlər, əsas performans göstəriciləri, aktiv vəziyyətlər və işarə vurğuları — istifadə olunur. Ağ fonda zəngin mavi rəng sistemin yeganə vizual cazibəsini yaradır. - Deep Sapphire
#1e40af— Hərəkət düyməsinin əsas fonu, hərəkətə çağırışın qalın rəngi — hərəkəti bildirən yeganə rəng — diqqəti cəlb etmək üçün nadir hallarda istifadə olunur.
Neytral
- Canvas White
#ffffff— Səhifənin arxa planı, kart səthi, açılan panellər hər ekranın mütləq təməlidir. - Paper Mist
#f5f5f5— Daxili kartlar, əlavə panellər və doldurmalar üçün incə hover rəng dəyişiklikləri. - Ash
#e5e5e5— Kartlardakı nazik sərhədlər, giriş konnektorları və bölücülər sistemi bir yerdə saxlayan struktur xətti təşkil edir. - Smoke
#d4d4d4— Seçilmiş konteynerlər və əlavə düymə konturları üçün daha kəskin sərhədlər. - Pebble
#c8c8c8— Orta kontrastlı sərhədlər, idarəetmə konturları və struktur bölücülər. Bu rəng hərəkətə çağırışlar üçün əsas rəng kimi istifadə edilməməlidir. - Midnight Ink
#0a0a0a— Maksimum kontrast üçün düymələrin əsas mətni, vurğulanmış düymələr və naviqasiya mətni demək olar ki, qara rəngdədir.
Tipoqrafiya
11-dən 48 pikselə qədər · 9 addım
- Satoshi — əvəzetmə: Inter (weight 500 · konturlar 500 · Başlıqları Göstər – yalnız başlıq və bölmə başlıqları üçün 36–48 piksel sətirlərdə istifadə olunur. Şrift qalınlığı – 500 (orta, qalın deyil): Başlıqlar inamlı və müasir görünür, lakin heç vaxt həddindən artıq güclü deyil. Satoşinin həndəsi proporsiyaları şriftə Inter-in əsas mətninin təkrarlaya bilmədiyi bir qədər redaksiya, müasir bir hiss verir.
- Inter — əvəzetmə: Inter (native) · konturlar 400, 500, 600 · Əsas mətn, UI etiketləri, naviqasiya, alt başlıqlar və ikinci dərəcəli başlıqlar. Inter, 11 piksellik mikro etiketlərdən 30 piksellik ikinci dərəcəli başlıqlara qədər hər şeyi idarə edən əsas iş atıdır. Əsas mətn üçün standart çəki 400, vurğulanmış elementlər və düymə etiketləri üçün 500 və vacib UI etiketləri üçün 600 saxlanılır. Sətir hündürlüyü 1,5 olan 16 piksel ən çox rast gəlinən tək addımlı ölçüdür (1220 təkrar), bu da 16 pikselin kanonik əsas mətn ölçüsü olduğunu təsdiqləyir.
- Geist Mono — əvəzetmə: JetBrains Mono or IBM Plex Mono · konturlar 400, 500 · Kod parçaları, texniki metaməlumatlar və daxil edilmiş monospace tokenləri 12-14 piksellik kod bloklarında və 24 piksellik böyük kod ekran elementlərində istifadə olunur. Bu, Dub-un məhsul mövqeyinə uyğun olaraq geliştirici alətinin etibarlılığını təmin edir.
İntervallar və forma
| Məqsəd | Mənası |
|---|---|
| Sıxlıq | orta |
| Əsas addım | 8px |
| Düymə radiusu | 8px |
| Kart radiusu | 12px |
| Kölgələr | kölgələr əvəzinə sərhədlər yoxdur |
| Bölmələr arasında | 64px |
| Səhifə eni | 1200px |
Süni intellekt veb saytınızı Dub üslubunda quracaq və onu dolduracaq
- Məhsullar və paylaşımlar ilə Instagram, TikTok, Facebook linkləri vasitəsilə tanış olun.
- Köhnə saytınızdan məzmunu köçürün — sadəcə ünvanı göstərin.
- Ən yaxşı mühərrikdə müasir dizayn: Server render və SEO optimallaşdırması ilə React ( Next.js).
- Axtarış nəticələri və neyron şəbəkə tövsiyələri üçün tam avtomatlaşdırılmış SEO optimallaşdırması.
Oxşar üslublar
- ElevenLabs — İsti krem tonlarında incə başlıqlarla yazılmış foto esse. Bauhaus üslubunda dəftər — yumurta qabığı rəngli kağız, qara mürəkkəb və məhsul nümayişi üçün tək bənövşəyi və narıncı vurğu.
- Awesomic — Konfeti xatırladan narıncı durğu işarələri olan redaksiya sink tor
- Monad — isti perqament üzərində redaksiya texniki jurnalı
- Seline Analytics — İsti kağız üzərində sakit analitik masa
- Notion — Günorta günəşində isti kağız dəftər
- Anthropic — İsti perqament haqqında elmi sahə jurnalı - sakit fil sümüyü səthləri, serif redaksiya başlıqları və yalnız hərəkətə ehtiyac olduqda görünən tək bir gil vurğu.
- Calendly — Soyuq mərmər üzərində tünd mavi mürəkkəb
- Augen Pro — Apple-ın ağ təqdimatı monoxrom məkanda yeganə vurğu kimi klinik, çəkisiz, elektrik mavisinə malikdir.
- Antimetal — Kremli kağız üzərində redaksiya xronikası — elmi jurnalda sakit bir səhər, burada təmkin özünəinam ifadə edir və seriflər ağır işi yerinə yetirir
- Perk — İsti perqament kağızı üzərində elektrik əhəng
- Ditto — Günəş işığı altında vəhşi çiçək nümunələri yaradan emalatxana. İsti krem səthlər, canlı sarı əsas rəng, tünd tünd göy mürəkkəblər, əsərin arxasında çiçəklənən üzvi rəng formaları.
- Officevibe — İsti krem rəngli kağız üzərində redaksiya jurnalı. Müasir mavi interfeys vasitəsilə pıçıldayan kursiv serif şrift kimi təqdim olunan, məhsul kimi təqdim olunan, HR idarəetməsi haqqında düşünülmüş bir esse təsəvvür edin.