რატომ იმარჯვებს Bento grid
მთავარი გვერდები, რომლებიც აგებულია ერთი hero-ბლოკითა და სამი თანაბარი სვეტით, ერთმანეთის მსგავსი გახდა – სილუეტით ვერ გაარჩევთ, რომელი SaaS პროდუქტია. Bento grid განზრახ არღვევს ამ სიმეტრიას. სხვადასხვა ზომის მოდულები ქმნის ვიზუალურ იერარქიას: ყველაზე დიდი ბარათი ატარებს მთავარ შეთავაზებას, პატარები – დამხმარე არგუმენტებს, ხოლო თვალს აქვს ნათელი მარშრუტი.
სახელი მოდის იაპონური bento ყუთებიდან – სხვადასხვა ზომის განყოფილებები, თითოეული ერთი ნივთისთვის, ისე დალაგებული, რომ მთელი უჯრა ერთიან კომპოზიციად აღიქმება. ეს იგივე ამოცანაა თანამედროვე ვებ სექციისთვისაც: არცერთმა ბლოკმა არ უნდა იჩხუბოს მეზობელთან ყურადღებისთვის.
მუშა grid-ის ანატომია
ჩვენი Bento განლაგებების უმეტესობა აგებულია 12-სვეტიან საფუძველზე, სადაც ორი-სამი ბარათი რამდენიმე სვეტს იკავებს, დანარჩენები – თითო უჯრას. ხრიკი სვეტების მათემატიკაში არ არის – არამედ იმაში, რომ პიქსელების განთავსებამდე გადაწყვიტოთ, რა ერთი მთავარი მესიჯი სჭირდება სექციას და მისცეთ მას ყველაზე დიდი ბლოკი.
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(220px, auto);
.card--featured {
grid-column: span 2;
grid-row: span 1;
}გჭირდებათ დახმარება ამის თქვენს პროექტში დანერგვაში?
მოგვიყევით თქვენს პროექტზე – დანარჩენს ჩვენ მოვაგვარებთ.
Grid არის გადაწყვეტილება იმაზე, თუ რა არის ყველაზე მნიშვნელოვანი – დანარჩენი უბრალოდ დარჩენილი უჯრების შევსებაა.
კინეტიკური ტიპოგრაფია გადატვირთვის გარეშე
სათაურის სიტყვა-სიტყვად გამოჩენა დღეს თითქმის ყველგანაა, ამიტომ თავად ეფექტი აღარ იკითხება პრემიუმად – პრემიუმად მას მისი ირგვლივ არსებული სიმარტივე აქცევს. სიტყვებს შორის დაახლოებით 60ms დაყოვნებას ვაწესებთ, მთელ გამოჩენას წამზე ნაკლებში ვათავსებთ და ერთსა და იმავე გვერდზე ძირითად ტექსტს ორჯერ ერთნაირად არასდროს ვაანიმირებთ.
როგორ ვიყენებთ ამას კლიენტების პროექტებში
- ერთი დომინანტი ბარათი სექციაზე – არასდროს ორი, რომლებიც ერთსა და იმავე ვიზუალურ წონაზე კონკურენციას უწევენ.
- ანიმაცია ირთვება სქროლისას ხედვის არეში მოხვედრისას, არა გვერდის ჩატვირთვისას – ასე ეფექტი განმეორებით ვიზიტზეც გააზრებული რჩება.
- Hover მდგომარეობებს აქვთ რეალური სიგნალი (ნათება, აწევა, ჩარჩოს ფერი) – მხოლოდ დეკორატიული hover დაკარგული კონვერსიის შანსია.
- Bento grid იშლება ერთ სვეტად 640px-ზე დაბლა – რეალურ მოწყობილობებზე დაშლილი დიაგონალური ხრიკების გარეშე.
ამათგან არცერთი არ ანაცვლებს მკაფიო ღირებულების შეთავაზებას. Bento grid უბრალოდ ძლიერ შეთავაზებას ერთნაირი ბარათების კედელზე უკეთეს ადგილს აძლევს.