Setka tizimi: Shveytsariya uslubidan zamonaviy veb-dizaynga
Setka dizaynni qoliplarga solmaydi, aksincha, tartib beradi. Shveytsariya uslubining asosiy gʻoyalari va ularni veb-dizaynda qoʻllash boʻyicha amaliy maslahatlar.
Yaxshi dizaynga qarasangiz, undagi tartibni darrov sezasiz, garchi sababini aytib berolmasangiz ham. Koʻpincha bu tartibning ortida setka tizimi turadi. U XX asr oʻrtalarida Shveytsariya tipografik uslubi bilan keng tarqalgan, bugun esa veb va mobil interfeyslarning ham asosi hisoblanadi.
Shveytsariya uslubi nimaga tayangan
Bu uslubning markazida aniqlik, oʻqilishi oson matn va izchil joylashuv turadi. Dizaynerlar sahifani koʻrinmas ustunlar va qatorlarga boʻlib, har bir element — matn, rasm, sarlavha — shu chiziqlarga mos qoʻyilishini talab qilgan. Natijada sahifa ortiqcha bezaksiz ham tartibli va tushunarli chiqadi. Asosiy gʻoya oddiy: qaror har safar boshidan qabul qilinmasligi kerak, qoida bir marta belgilanadi va hamma joyda ishlaydi.
Setkaning asosiy qismlari
Veb-dizaynda setka uchta narsadan iborat:
- Ustunlar — kontent joylashadigan vertikal boʻlaklar. Odatda 12 ustun qulay, chunki u 2, 3, 4 va 6 ga boʻlinadi.
- Oraliqlar (gutter) — ustunlar orasidagi boʻsh joy.
- Chekkalar (margin) — sahifa chetidan kontentgacha boʻlgan masofa.
Bulardan tashqari gorizontal ritm ham bor: qatorlar va vertikal masofalar. Koʻpchilik jamoalar masofalar uchun bitta oʻlchov birligini, masalan 8 pikselni olib, barcha oraliqlarni unga karrali qiladi. Bu usul dizayn bilan dasturchi oʻrtasidagi kelishuvni ham osonlashtiradi.
Setka va tipografiya
Setka faqat rasm va bloklar uchun emas, matn uchun ham ishlaydi. Qator uzunligi oʻqish qulayligiga bevosita taʼsir qiladi: juda uzun qatorda koʻz adashadi, juda qisqasida matn boʻlinib ketadi. Asosiy matn uchun ustun kengligini bir qatorga taxminan 50–75 belgi sigʻadigan qilib tanlash yaxshi qoidadir.
Shrift tanlashda ham setkaga moslik muhim. Geometrik va toza sans shriftlar tartibli maketda yaxshi koʻrinadi. Masalan, [Montserrat](/fonts/montserrat) sarlavhalarda aniq struktura beradi, [Poppins](/fonts/poppins) interfeys elementlarida ravshan chiqadi, [Nunito Sans](/fonts/nunito-sans) esa uzun matnlarda yumshoqroq taassurot qoldiradi. Qatorlar oraligʻini (line-height) ham oʻlchov birligingizga karrali qilib olsangiz, matn ritmi buzilmaydi.
Zamonaviy veb uchun moslashuvchan setka
Shveytsariya setkalari bosma sahifa uchun moʻljallangan, veb esa har xil ekranda ochiladi. Shu sabab setka moslashuvchan boʻlishi kerak. Bugungi CSS Grid va Flexbox bunga imkon beradi. Amaliy maslahatlar:
- Mobil uchun 4 ustun, planshet uchun 8, kompyuter uchun 12 ustun bilan boshlang.
- Qattiq piksel oʻrniga nisbiy birliklardan foydalaning, ammo oraliqlarni izchil saqlang.
- Kontentning maksimal kengligini cheklang, shunda keng monitorda matn choʻzilib ketmaydi.
- Breakpoint larni qurilmalarga emas, maketingiz buzila boshlagan joyga qarab belgilang.
Setkani qachon buzish mumkin
Setka qonun emas, vosita. Maqsadli ravishda chiqib ketgan bitta element, masalan katta rasm yoki ajralib turuvchi sarlavha, eʼtiborni tortadi. Lekin buning taʼsiri faqat atrofda tartib boʻlgandagina seziladi. Avval qoidani oʻrganing, keyin nima uchun buzayotganingizni bilgan holda buzing.
Xulosa
Setka tizimi ijodni cheklamaydi, balki qarorlarni tezlashtiradi va maketga ishonch beradi. Keyingi loyihangizda oddiy 12 ustunli setka va bitta oʻlchov birligi bilan boshlab koʻring: farqni birinchi sahifadayoq sezasiz.