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
- Studio — Hərəkətdə olan qalereya divarı. Hər ekran tipoqrafik materialların və üst-üstə düşən yaradıcı əsərlərin diqqət uğrunda yarışdığı sakit, boz sərgi səthini təmsil edir.
- Mollie — Kaşmir tezgahı, tünd rəngli bir dəftər. Qara mətnin ətrafında redaksiya dizaynı üçün kifayət qədər boş yer saxlayın, sonra məhsulla əlaqəli məqamları isti kremlər, espresso qəhvəyi qəhvəyi və faktiki ödəniş üsullarının toxunma fotoşəkilləri ilə gücləndirin.
- Basis Theory — Dizayn studiyasında ödəniş terminalları. Ağ texniki kağız, üst-üstə düşən şəffaf əməliyyat təbəqələri və tək firuzəyi idarəetmə elementi vizual istiqaməti müəyyən edir.
- CleanShot X — Mavi işıqlı masaüstü olan bir studiya. Kompakt qara mətnin ətrafında sakit bir ağ boşluq yaradın, sonra zəngin mavi idarəetmə elementlərinin və çoxqatlı Mac məhsul şəkillərinin mərkəzi səhnəni tutmasına icazə verin.
- Modern Treasury — Qrafik kağız üzərində xəzinə kitabı. Nağd pul axınlarının incə xətlərlə, etiketlənmiş qovşaqlarla və dəqiq, gizli idarəetmə elementləri ilə göstərildiyi, sakit, ağ əməliyyat vərəqinə bənzəyən səhifələr yaradın.
- Basha-Franklin — Ağ lintelin altındakı qalereya şəbəkəsi. Çap olunmuş memarlıq portfelinə bənzəyən fotoşəkillərə əsaslanan isti #f4ede6 çalarından, incə qara strukturdan və asimmetrik sütunlardan istifadə edin.
- Bajgart Office — Redaksiya qalereyası divarı. Xrom örtüklü interfeys elementlərindən daha çox vizual çəki daşıyan incə serif şriftlərin və portfolio fraqmentlərinin olduğu geniş ağ boşluqdan istifadə edin.
- Heptabase — Günəş işığı ilə işıqlandırılmış masa. İsti, kağıza bənzər səthlər, kömür rəngli idarəetmə elementləri və tədqiqat üçün üzən pəncərələr proqram təminatı idarəetmə paneli əvəzinə mütəşəkkil bir iş sahəsi hissi yaradır.
- Bejamas — Pijama — qara şüşədən keçən turşu əhəng. Səthdə bulanıq yaşıl işıq zolaqlarının kəsişdiyi yerlərdə cazibədar qara panellərlə kəsilmiş sakit, açıq boz redaksiya səhifələri yaradın.
- Baba — Qırmızı günəş işığında qayğı qeydləri. İnsanların fotoşəkillərindən emosional mərkəz kimi istifadə edərək, ağ, çəhrayı və krem rəngli məlumat səthlərinin ətrafında geniş qırmızı süjet zolaqları yaradın.
- Grafana Labs — Sunrise Siqnal Stansiyasının idarəetmə otağı. Sakit boz-ağ iş sahəsi geniş, dörd rəngli üfüq qradiyenti və dəqiq mavi interfeys siqnalları ilə birləşir.
- Kagi — Ayrı bir oxu zalı. Sülhü pozmaq üçün incə bənövşəyi vurğular və isti pastel səthlərdən istifadə edərək qalın qrafit mətninin ətrafında açıq ağ boşluq yaradın.