Superlist
Mərcan közləri ilə bəzədilmiş gecə iş sahəsi — hər hərəkəti siqnal edən tək bir isti narıncı qığılcımın olduğu sakit badımcan tətbiq səthi
Superlist gecə yarısı bənövşəyi tonlarında məhsuldarlıq dilindən istifadə edir: tünd badımcan, yeganə əsas rəng kimi isti mərcan və bütün atmosferi əks etdirən böyük sans-serif başlıqlar. İnterfeys gecə vaxtı diqqət mərkəzində olan iş hissini oyadır - sakit, çoxqatlı və inamlı, rəng yalnız hərəkətə çağırışlar, aktiv vəziyyətlər və əsas məqamlarda funksional durğu işarələri kimi istifadə olunur. Səthlər bənövşəyi alt tonla (#181824 → #26253b) incə tünd tonlarda, dərinliyin steril deyil, isti hiss olunmasını təmin etmək üçün saf qara rəngdən çəkinərək qatlanır. Komponentlər geniş dairəvi formalara (20 piksel kartlar, həb düymələri), yumşaq kölgələrə və sıx şəbəkələr əvəzinə rahat 10-16 piksel boşluqlardan "nəfəs almağa" malikdir. Başlığın səsi hər şeydir: -0.02em sıx hərf aralığı ilə 70-88 piksellik 600 ballıq çəki mətni UI-dən daha çox tipoqrafik hesab edir - SaaS-dan daha çox redaksiya mətninə daha yaxındır.
Tünd hissələr səhifənin bütün enini əhatə edir və mərkəzləşdirilmiş, maksimum enli məzmun konteynerləri ilə təchiz olunub. Əsas hissə şaquli mərkəzləşdirilmişdir və başlıq, alt mətn və hərəkətə çağırış (CTA) ehtiva edir, ardınca növbəti hissənin üst-üstə düşdüyü böyük bir məhsul ekran görüntüsü gəlir. Sonrakı hissələr mərkəzləşdirilmiş mətn blokları və kart şəbəkələri arasında növbələşir. Rəylər bölməsində rəy kartları və 16 nov olan üç sütunlu şəbəkə istifadə olunur. Naviqasiya solda loqotip, sağda mərkəzləşdirilmiş keçidlər və giriş hərəkətləri olan tək bir üst paneldir - sabit yan panel və ya meqa-menyu yoxdur. Bölmələr arasındakı novlar genişdir (16 nov), sıx bir məhsul şəbəkəsi əvəzinə geniş, redaksiya ritmi yaradır.
Vizual məkanda məhsul ekran görüntüləri üstünlük təşkil edir — əsas və ikinci dərəcəli bölmələri dolduran yuvarlaq küncləri olan böyük bir çərçivə, tətbiqin əsl interfeysini göstərir. Şəkillər minimaldır, yalnız istifadəçi avatarları və ya tətbiqdaxili medianın önizləmələri kimi istifadə olunur (məsələn, məhsul maketinin sağ panelindəki konsert şəkli). Etibar panelindəki loqotiplər düz, səssiz ağ mətn simvollarıdır. Dekorativ illüstrasiyalar, mücərrəd qrafika, 3D renderlər yoxdur. Vizual strategiya məhsulu miqyasda nümayiş etdirmək, tipoqrafiyanın emosional işi görməsinə icazə vermək və mərcan rəngindən yeganə vurğu rəngi kimi istifadə etməkdir.
Palitra
Brend
- Coral Ember
#ff4a36— Narıncı rəng dekorativ detallar üçün ikinci dərəcəli vurğu və nadir hallarda rast gəlinən işarələri vurğulamaq üçün istifadə olunur. Hərəkətə çağırışlar üçün əsas rəng kimi istifadə edilməməlidir.
Neytral
- Aubergine Canvas
#181824— Əsas kətan olan səhifə fonu, təmiz qara rəngi əvəz edən isti, tünd bir çalardır və istifadəçi interfeysini düz deyil, qatlı göstərir. - Elevated Plum
#26253b— Kart səthləri, giriş sahələri, naviqasiya konteynerləri — görünən sərhəd olmadan dərinlik yaratmaq kətandan bir addım daha asandır. - Pure White
#ffffff— Əsas başlıqlar, düymə mətni və işarə konturları — tünd rəngli kətan üzərində maksimum kontrast. - Fog Text
#696f81— Əsas mətn, ikinci dərəcəli başlıqlar və səssiz haşiyələr badımcan rəngli fonda rahat oxumaq üçün 7:1 kontrast nisbətinə malikdir. - Ash Text
#8e8da0— İkinci dərəcəli UI elementləri, bölücülər və səssiz etiketlər üçün neytral rəng dəstəklənir. Hərəkətə çağırışlar üçün əsas rəng kimi istifadə edilməməlidir. - Mist Highlight
#a3a3a7— İncə haşiyələr, bölücülər və qeyri-aktiv naviqasiya elementləri kətan fonunda hələ də fərqlənən incə neytral bir ton yaradır.
Tipoqrafiya
12-dən 88 pikselə qədər · 9 addım
- sans-serif — əvəzetmə: Inter · konturlar 400 · sans-serif - çıxarılan məlumatlarda tapılır, lakin süni intellekt tərəfindən təsvir edilmir.
- Haffer XH SemiBold — əvəzetmə: Inter Tight · konturlar 400, 600 · Ekran və başlıqlar üçün əsas şrift. Hərflər arası -0.02em və çəkisi 600 olan qəhrəman başlıqları üçün 70–88 piksel ölçüsündə istifadə olunur. Dar hərf aralığı və böyük hərf hündürlüyü başlıqlara redaksiya çəkisi verir və qaranlıq interfeysi idarəetmə panelindən daha çox jurnal üz qabığına bənzədir. Qalın şriftlə Inter Tight və ya General Sans ilə əvəz edin.
- Jersey 10 — əvəzetmə: Anybody · konturlar 400 · Vurğu rəqəmləri və işıqlandırmalar üçün böyük, dekorativ şrift. Tipoqrafik vurğular yaratmaq üçün çox böyük ölçülərdə az istifadə olunur. Anybody və ya Cabinet Grotesk ilə əvəz edilə bilər.
İntervallar və forma
| Məqsəd | Mənası |
|---|---|
| Sıxlıq | orta |
| Əsas addım | 10-16px |
| Düymə radiusu | 100px |
| Kart radiusu | 20px |
| Kölgələr | yumşaq kölgələr |
| Bölmələr arasında | 80px |
| Səhifə eni | 1200px |
Süni intellekt veb saytınızı Superlist ü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
- DNA — Gecəyarısı Rəsədxanası hissəcik linzasından görünür
- Abetterlou — Yəhər Dərisində Qığılcımlar - səhifəyə basılmış isti metal kimi hiss olunan kəhrəba-qızılı düymələri olan tünd qəhvəyi qara fonda parlayan isti krem rəngli şrift.
- Galileo-ft — Elektrikli mavi siqnalları olan dərin kosmik komanda göyərtəsi
- Decide AI — Gecəyarısı Rəsədxanası - nanə siqnalı
- Redis Agency — İş saatlarından sonra açıq olan redaksiya emalatxanası, bütün brendinq işlərinin serif şriftlər və tək qırmızı turpla görüldüyü qaranlıq bir yerdir.
- Spellbook — Mərcan mürəkkəbi ilə işıqlandırılmış gecəyarısı məhkəmə zalı — yalnız isti narıncı qələm vuruşunun səsləndiyi qaranlıq bir redaksiya səthi
- Linear — gecə yarısı dəqiq alət
- Origin Financial — Sakit dəbdəbənin gecə yarısı qalereyası. Böyük serif şriftlərin və bir neçə işıqlı rəngli panelin maliyyənin diqqətlə seçilmiş bir sənət əsəri olduğu hissini yaratdığı sakit, demək olar ki, qaranlıq bir otaq.
- Hyperstudio — Dizayn obsidian rəngində cızıqlarla cızılıb. Mətn və incə xətlər ağ boşluğu təmiz qara rəngdə çərçivəyə alır və ara sıra yolu göstərən qızılı kompas işarələri var.
- Air — "Gecəyarısı Şüşədən Səma" heykəli
- Raycast — Gecəyarısı Komandanlıq Mərkəzi, Mərcan Neon
- dope.security — Bənövşəyi mayaklarla gecəyarısı terminalı