Apple
Tək mavi açarı olan ağ otaq
Apple-ın dizaynı təmkin nümunəsidir: demək olar ki, ağ rəngli kətan, geniş ağ boşluq və hər hərəkəti düşünülmüş hiss etdirən tək, canlı mavi vurğu. Əsas diqqət tipoqrafiyaya yönəlib - ölçü artdıqca azalan mənfi hərf aralığına malik SF Pro, həddindən artıq ağır olmadan başlıqlara memarlıq aydınlığı verir. Məhsul dizayndır: böyük məhsul fotoşəkilləri və həyat tərzi şəkilləri üstünlük təşkil edir, xrom elementlər isə nazik çərçivələrə, şəffaf naviqasiyaya və incə xətlərə çevrilir. Bölmələr açıq boz fonda növbələşir və reklam materialları üçün tam rəngli bloklar dekorativ elementlər əvəzinə miqyas dəyişiklikləri ilə ritm yaradır.
Səhifə düzeni sabit maksimum konteyner eni olmayan tam enli bir səhifədir — bölmələr kənarlardan kənarlara uzanır, mətn blokları təxminən 980 piksel mərkəzdə yerləşir. Naviqasiya, hər bir məhsul üçün əlavə alt qovluq olan tək, sabit qlobal bir paneldir və bu paneldə görünür. Əsas düzən həmişə mərkəzdədir: böyük bir məhsul adı, tək sətirli şüar, iki düymə, sonra qalan görünüş sahəsini dolduran bir məhsul şəkli. Bölmələr şaquli olaraq geniş şaquli ritmlə (bölmələr arasında 64 piksel+), #f5f5f7 və rəngli fonları növbələşdirərək yığılır. Alt səhifə tam enli xidmət kartlarının (Apple TV+, Fitness+, Music, Arcade) tək bir üfüqi sırasıdır, hər biri üst-üstə düşən mətn və düymə olan foto blokdur. Yan panellər, çox sütunlu məzmun düzeni, asimmetrik kompozisiyalar yoxdur — hər şey mərkəzləşdirilmiş, yığılmış və simmetrikdir.
Fotoqrafiya dominant vizual dildir. Məhsul fotoşəkilləri heç bir kontekst olmadan təmiz ağ və ya yumşaq boz fonda çəkilir - cihaz ulduzdur, təcrid olunmuş və işıqlandırılmışdır. Həyat tərzi fotoşəkilləri tam enli bannerlərdə, tez-tez sıx şəkildə kəsilmiş obyektlərlə nümayiş olunur. Rəng qradiyentləri (pastel mavi, çəhrayı, yaşıl) məhsul bölmələri üçün bəzək kimi deyil, fon kimi xidmət edir. İkonoqrafiya minimalist və xətt əsaslıdır, 1-2 piksel qalınlığında, mətnlə eyni boz rəngdədir. Məhsul fotoşəkillərinin özləri istisna olmaqla, heç bir illüstrasiya, mücərrəd qrafika, 3D görüntüləmə yoxdur.
Palitra
Brend
- Apple Blue
#0071e3— Doldurulmuş hərəkət düymələri, seçilmiş vəziyyətlər - hər görünüşü mənalı etmək üçün az istifadə edilən yeganə interaktiv xromatik rəng. - Link Blue
#0066cc— Vurğulanmış hərəkət sərhədləri, daxil edilmiş keçidlər - doldurulmuş planşetin çox parlaq olacağı yerdə Apple Blue-dan daha doymuş rəng. - Signal Blue
#2997ff— Dekorativ çərçivələr, şəkil konturları, ikon sərhədləri - sistemdəki ən açıq mavi rəng, istifadəçi qarşılıqlı əlaqəsi üçün deyil, atmosfer üçün istifadə olunur.
Neytral
- Carbon
#1d1d1f— Əsas mətn, başlıq sərhədləri, naviqasiya xətləri, kart sərhədləri - üstünlük təşkil edən mürəkkəb rəngi demək olar ki, qara rəngdədir və bir az isti bir işarə var. - Frost
#f5f5f7— Səhifənin kətan hissəsi, əsas mətn fonu və altbilgi səthi Apple-ın özünəməxsus açıq boz rəngindədir, təmiz ağdan bir az daha sərindir. - Ice
#f4f8fb— İfadəli səth doldurmaları, incə çalarlar, tünd fonda düymə mətni — hissəni fərqləndirmədən onu canlandıran incə mavi çalar. - Smoke
#333333— İkinci dərəcəli mətn, naviqasiya doldurulması, düymə sərhədləri - Orta bozdan daha çox vurğu tələb edən sərhədlər və nişanlar üçün çox yönlü neytral rəng. - Graphite
#474747— Naviqasiya mətni, naviqasiya sərhədləri, keçid sərhədləri - element iyerarxiyasında Karbon və Tüstü arasında ara mövqe tutur. - Ash
#707070— Altbilgi mətni, siyahı sərhədləri, naviqasiya sərhədləri, səssiz əsas mətn - Mövcud olması lazım olan, lakin nəzərə çarpan olmayan məzmun üçün orta boz rəng.
Tipoqrafiya
12-dən 56 pikselə qədər · 8 addım
- SF Pro Display — əvəzetmə: Inter · konturlar 400, 600, 700 · Başlıqlar və böyük mətn — 40 pikseldən çox ölçüdə daha dar diafraqma və daha güclü neqativ izləmə üçün ekran formatından istifadə olunur; 700 reklam planları üçün, 400 isə redaksiya məzmunundakı məhsul adları üçün ayrılıb.
- SF Pro Text — əvəzetmə: Inter · konturlar 300, 400, 600 · Əsas mətn, naviqasiya, düymələr, alt başlıqlar — işlək şrift; Əsas mətn üçün 400, alt başlıqlar və ixtisaslı etiketlər üçün 300, naviqasiya elementləri və düymə mətni üçün 600; mənfi hərf aralığı ölçüyə mütənasib olaraq azalır (-0.022em-dən 12px-ə, -0.01em-dən 44px-ə).
İntervallar və forma
| Məqsəd | Mənası |
|---|---|
| Sıxlıq | orta |
| Əsas addım | 12px |
| Düymə radiusu | 980px |
| Kart radiusu | 8px |
| 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 | 1440px |
Süni intellekt veb saytınızı Apple ü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
- Ui — mat kağız üzərində klinik plan
- 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.
- monopo saigon — Redaksiya sükutunun arxasındakı maye, göy qurşağı parıltısı — ərimiş işıqda üzən monoxrom redaksiya qalereyası
- Awesomic — Konfeti xatırladan narıncı durğu işarələri olan redaksiya sink tor
- Monad — isti perqament üzərində redaksiya texniki jurnalı
- Dub — Link-in mat düyü kağızı idarəetmə paneli
- Seline Analytics — İsti kağız üzərində sakit analitik masa
- Ventriloc — İsti kağız üzərində məlumatların redaksiya müşahidə mərkəzi - monoxrom dəqiqliyi vurğulayan tək narıncı köz
- Duolingo — Ağ kağız üzərində oynaq sinif maskotu
- Stripe — Buzlu şüşə üzərində indigo mürəkkəbi ilə yazılmış mühasibat kitabı
- Notion — Günorta günəşində isti kağız dəftər
- Hyer Aviation — Perqament üzərində kabinədə qaranlıq çökür. Solğun şəfəq səması gövdə ölçülü serif loqotipi ilə qarşılaşır və tək bir isti gil vurğu monoxrom təmkinini pozur.