დიზაინის სისტემა: საიტის ერთიანი სტილი ყველა გვერდზე

მთავარ გვერდზე ღილაკი ლურჯია და მომრგვალებული, მომსახურების გვერდზე — იისფერი და კუთხოვანი, საკონტაქტო ფორმაში კი სულ სხვა ზომა აქვს. ცალ-ცალკე სამივე გვერდი შეიძლება მოგწონდეთ. ერთად ნახვისას კი იკარგება განცდა, რომ ერთსა და იმავე საიტზე ხართ.

საიტის ზრდასთან ერთად ასეთი განსხვავებები ხშირად შეუმჩნევლად გროვდება: ემატება ახალი გვერდი, იცვლება ტექსტი, ფორმაზე სხვა დეველოპერი მუშაობს. დიზაინის სისტემა არის შეთანხმებული წესებისა და მრავალჯერ გამოსაყენებელი ელემენტების ერთობლიობა, რომელიც საიტს ერთიანი სტილისა და ქცევის შენარჩუნებაში ეხმარება. ამისთვის დიდ კომპანიად ქცევის ლოდინი საჭირო არ არის.

დიზაინის სისტემა ლოგოსა და ფერებზე მეტს მოიცავს

ბრენდის ვიზუალური წესები გვიხსნის, როგორი უნდა იყოს მისი სახე. ვებსაიტს დამატებით სჭირდება პასუხები პრაქტიკულ კითხვებზე: რომელი ღილაკი აღნიშნავს მთავარ მოქმედებას, როგორ ჩანს შეცდომა ფორმაში, რა იცვლება მობილურზე და როგორ იქცევა კომპონენტი გრძელი ტექსტის შემთხვევაში.

GOV.UK-ის დიზაინის სისტემის დოკუმენტაცია ერთმანეთთან აკავშირებს სტილებს, კომპონენტებს, გამოყენების წესებსა და მაგალითებს. ბიზნესის საიტზეც სწორედ ეს კავშირია გამოსადეგი: გუნდს უნდა ესმოდეს როგორც ელემენტის გარეგნობა, ისე მისი დანიშნულება.

• ვიზუალური საფუძველი: ფერები, შრიფტები, ტექსტის ზომები, დაშორებები და კუთხეების მომრგვალება.
• კომპონენტები: ღილაკები, ველები, ბარათები, ენის გადამრთველი და ნავიგაცია.
• განმეორებადი სცენარები: მოთხოვნის გაგზავნა, ძიება, შეცდომის გამოსწორება ან შეკვეთის დადასტურება.
• გამოყენების წესები: როდის რომელი ელემენტი გვჭირდება და რა უნდა გადავამოწმოთ ცვლილებისას.

ტოკენები: ფერსა და დაშორებას თავისი სახელი აქვს

დიზაინის ტოკენი დასახელებული მნიშვნელობაა. მაგალითად, „მთავარი მოქმედების ფერი“ აღნიშნავს ყველა შესაბამის ღილაკში გამოსაყენებელ ფერს. მისი შეცვლისას ვაახლებთ შესაბამის ტოკენს და ვამოწმებთ, როგორ აისახა ცვლილება მასთან დაკავშირებულ ელემენტებზე. ასე უფრო ადვილია გააზრებული ცვლილების შეტანა, ვიდრე ათეულობით გვერდზე მსგავსი ლურჯი ფერების ცალ-ცალკე მოძებნა.

ასეთივე სახელები შეიძლება ჰქონდეს ტექსტის ფერს, ველებს შორის დაშორებას ან ბარათის კუთხის მომრგვალებას. სახელდება დანიშნულებასაც უნდა ასახავდეს: შეცდომის ფერსა და დეკორატიულ აქცენტს განსხვავებული როლი აქვთ, თუნდაც საწყის მაკეტში ერთმანეთს ჰგავდნენ.

2025 წლის 28 ოქტომბერს გამოქვეყნდა Design Tokens Community Group-ის ფორმატის სტაბილური ვერსია 2025.10. ის აღწერს ტოკენების მონაცემების გაცვლის ფორმატს. ეს სათემო ჯგუფის სპეციფიკაციაა და არა W3C-ის სტანდარტი; ფორმატის არსებობა ხელსაწყოებს შორის ავტომატურ სინქრონიზაციას თავისთავად არ უზრუნველყოფს.

ღილაკს რამდენიმე მდგომარეობა სჭირდება

მაკეტზე ხშირად ღილაკის მხოლოდ საწყისი სახე ჩანს. რეალურ საიტზე ის შეიძლება კლავიატურით იყოს მონიშნული, მოთხოვნას აგზავნიდეს ან მოქმედების შედეგს აჩვენებდეს. ეს მდგომარეობები წინასწარ უნდა დაიგეგმოს, რომ დეველოპერს მათი მოფიქრება უკვე აწყობისას არ მოუწიოს.

• ჩვეულებრივი მდგომარეობა: წარწერა მკაფიოდ ამბობს, რა მოხდება დაჭერისას.
• კლავიატურით მონიშვნა: ხილული ფოკუსის მაჩვენებელი გვაგებინებს, რომელი ელემენტია არჩეული.
• მიმდინარე მოქმედება: გასაგებია, რომ მოთხოვნა მუშავდება და განმეორებითი დაჭერა საჭირო არ არის.
• შედეგი ან შეცდომა: მომხმარებელი ხედავს, დასრულდა თუ არა მოქმედება და რა შეუძლია შემდეგ გააკეთოს.

ფერებთან ერთად ტექსტიც მნიშვნელოვანია. მაგალითად, ფორმის ველთან მხოლოდ წითელი ჩარჩო ვერ ხსნის, რა უნდა გასწორდეს. WCAG 2.2-ის შეცდომის იდენტიფიცირების კრიტერიუმი ავტომატურად აღმოჩენილი შეცდომისას შესაბამისი ველის მითითებასა და შეცდომის ტექსტურად აღწერას მოითხოვს.

ქართული და ინგლისური ტექსტი ერთსა და იმავე კომპონენტებში გამოსცადეთ

ინგლისური მოკლე წარწერის ნაცვლად ქართულად შეიძლება უფრო გრძელი ტექსტი დაგვჭირდეს. იცვლება სტრიქონების რაოდენობა, ბარათის სიმაღლე და ღილაკის სიგანე. ამიტომ ერთი ენის მოწესრიგებული მაკეტი მეორე ენის მზა დიზაინად ვერ ჩაითვლება.

კომპონენტს უნდა ჰქონდეს შეთანხმებული ქცევა: სად გადადის ტექსტი ახალ ხაზზე, რა ემართება მეზობელ ელემენტებს და როგორ ნაწილდება სივრცე ვიწრო ეკრანზე. სათაური, ფასი ან აუცილებელი პირობა უბრალოდ მოსაჭრელი ტექსტი არ არის. შემოწმებისთვის გამოიყენეთ რეალური ქართული და ინგლისური წარწერები, არა მხოლოდ მოკლე საცდელი სიტყვები.

ტექსტის ზომასთან ერთად ფონსა და ტექსტს შორის კონტრასტიც შეამოწმეთ. WCAG 2.2-ის AA დონის კრიტერიუმით, ჩვეულებრივი ტექსტისთვის მინიმალური თანაფარდობა ზოგადად 4.5:1-ია, დიდი ზომის ტექსტისთვის — 3:1. კრიტერიუმს გამონაკლისებიც აქვს; ეს რიცხვები მთელი საიტის ხელმისაწვდომობის შეფასებას არ ცვლის.

Figma-ს ფაილი და სამუშაო კოდი ერთად განაახლეთ

დიზაინში დასახელებულ წესებს კოდშიც შესაბამისი ადგილი სჭირდება. Figma-მ ცვლადები 2023 წელს წარადგინა: ფერებისა და სხვა მნიშვნელობების მრავალჯერ გამოყენება და ერთმანეთთან დაკავშირება დიზაინში ცვლილებების მართვას ეხმარება. მაგრამ ცვლადის შექმნა არ ნიშნავს, რომ საიტის კოდშიც ყველაფერი ავტომატურად განახლდა.

გუნდმა უნდა შეთანხმდეს, სად ინახება საბოლოო წესი, როგორ უკავშირდება დიზაინის კომპონენტი კოდში არსებულს და ვინ ამოწმებს ცვლილებას. მცირე პროექტში ეს შეიძლება იყოს მოკლე დოკუმენტი და კომპონენტების რამდენიმე სამუშაო მაგალითი. მთავარია, საიტზე გამოყენებული ვერსია და დიზაინში ნაჩვენები ვერსია ერთმანეთს შეესაბამებოდეს.

ეს AI ინსტრუმენტებით მუშაობის დროსაც გამოსადეგია: ახალ გვერდს შეიძლება მივუთითოთ არსებული კომპონენტები და წესები. მიღებული შედეგი მაინც შესამოწმებელია — სახელის დამთხვევა ერთნაირი გარეგნობისა და ქცევის გარანტია არ არის.

დაიწყეთ იმით, რაც საიტზე ხშირად მეორდება

სრული ბიბლიოთეკის წინასწარ შექმნა ყველა პროექტს არ სჭირდება. საწყისად აირჩიეთ მთავარი, მომსახურების, კატეგორიისა და საკონტაქტო გვერდები. შეადარეთ ღილაკები, სათაურები, ველები და შეტყობინებები. ჯერ გააერთიანეთ მნიშვნელოვანი განმეორებადი ელემენტები, შემდეგ კი საჭიროების მიხედვით დაამატეთ ახალი კომპონენტები.

საერთო სისტემა გვერდების განსხვავებულ კომპოზიციასაც იტევს. პორტფოლიოს გალერეას, სტატიასა და შეკვეთის ფორმას თავისი ამოცანა აქვს. ერთიანი რჩება ვიზუალური ენა და მოქმედების ლოგიკა, განლაგება კი შინაარსს ერგება.

რა უნდა შედიოდეს ჩასაბარებელ მასალაში

1. ფერების, ტიპოგრაფიისა და დაშორებების დასახელებული წესები და მათი გამოყენების მაგალითები.
2. ძირითადი კომპონენტები ყველა საჭირო მდგომარეობით, მათ შორის შეცდომითა და კლავიატურის ფოკუსით.
3. ქართული და ინგლისური ვერსიების მაგალითები ტელეფონის, პლანშეტისა და დესკტოპის ეკრანებისთვის.
4. კოდში მოქმედი კომპონენტები და მითითება, როგორ უნდა გამოიყენოს ისინი გუნდმა ახალ გვერდზე.
5. ცვლილებების მოკლე ისტორია და პასუხისმგებელი პირი, რომელიც დიზაინისა და კოდის შესაბამისობას გადაამოწმებს.

თუ საიტის UI/UX დიზაინს გეგმავთ, თავიდანვე მოითხოვეთ განმეორებადი ელემენტებისა და მათი ქცევის აღწერა. შემდეგი ნაბიჯია მათი გამოცდა რეალურ გვერდებსა და მომხმარებლის მოქმედებებზე. დიზაინის ხარისხის უფრო ზოგად საკითხებზე წაიკითხავთ სტატიაში კარგი ვებდიზაინის პრინციპები.