ისწავლე UI დიზაინი ჩემთან ერთად— ასლის შექმნა

6 min readApr 12, 2020

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

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

მაგალითად, რისი სწავლა შეიძლება airbnb.com-ის ასლის შექმნით?

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

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

საიდან დავიწყოთ ან მოვბრუნდეთ

1. შეარჩიე ეფექტური ხელსაწყო

UI დიზაინერის ხელსაწყოების არჩევანი არცისე მწირია — Figma, Sketch, Adobe XD, Invision Studio, Framer, UXpin და სხვა, თუმცა გადაწყვეტილების მისაღებად ბევრი დროის დახარჯვა არ ღირს, ვინაიდან ამ ეტაპისათვის სამუშაოდ აუცილებელ საჭირო ელემენტები და მეტწილად მიდგომებიც ყველას ერთი აქვს. პირადად მე, რეკომენდაციას ვუწევ Figma-ს. სურვილისამებრ, გაეცანით ვებ-გვერდის საიტზე ან YouTube ჩენელზე.

ზუსტი და დეტალური გადახატვისათვის აუცილებელია Chrome-ის ბრაიუზერი, რომელსაც აქვს ხელსაწყო “Inspect element”. ის საშუალებას გვაძლევს ზუსტი და დეტალური ინფორმაცია გავიგოთ ვებ-გვერდიზე გამოყენებული ელემენტების შესახებ — პოზიცია, ფერი, დაშორება თუ სხვა.

მეტი თვალსაჩინოებისათვის, ჩავწერე ვიდეო სადაც გასწავლით თუ როგორ შევქმნათ ერთი კომპონენტის ასლი Figma & Instpect elementის დახმარებით.

2. შეარჩიე ნამუშევარი

Airbnb, Wolt, WeWork, Uber, Squarespace, Coinbase, Intercom — გადადით თითოეულზე და დააკვირდით,როგორც ახერხებს ბრენდი კომუნიკაციას ტიპოგრაფიით, ფერითა და დაშორებების რითმით. მნიშვნელოვანია შეაფასოთ, როგორ არის ინფორმაცია გადანაწილებული თემატურად, როგორ მიდგომებსა და პატერნებს იყენებს ბრენდი ამ ინფორმაციის წარმოსაჩენად. ალბათ, ამის ობიექტური შეფასებისთვის, საჭიროა ბევრი პრაქტიკული სამუშაო — ასლის შექმნა ხედვის გასაუმჯობესებლად.

[screens of pages mobile and desctop]

ნამუშევრის შერჩევისას აუცილებლია გავიაზროთ, რისი სწავლა გვინდა და რა მიზანი გვაქვს. ზოგადად,

მნიშვნელოვანია ერთმანეთისაგან გავმიჯნოთ ციფრული სერვისები, კამპანიის არაციფურლი სერვისების ვებ-გვერდებისგან —შეადარეთ, https://www.awwwards.com/-ზე არსბეული ვებ-გვერდები თავდაპირველად ჩამოთვლილ ვებ-გვერდებს. ორი სხვადასხვა ინდუსტრია, რადიკალურად განსხვავებული უნარ-ჩვევების საჭიროებით.
ონლაინ მაღაზია? ფინანსების მენეჯმენტი? ვებგვერდის ანალიტიკა? მარაგების მართვა? … ყველა ინდუსტრიის ვებ-გვერდს აქვს თავისი უნიკალური ქცევითი პატერნი და საკომუნიკაციო ხაზი, თთოეულში დახელოვნება ძალიან შრომატევადია.

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

3. შექმენი ყველა კომპონენტის ასლი

Inspect element-ის გამოყენებით შექმენით კომპონენტების ზუსტი ასლი და გამოაცალკევეთ პრიმიტივები. მიღებული კომპონენტებით შეგიძლიათ შექმნათ დიზაინ სისტემა.

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

კონკრეტულად კი ისინი ქმნიან ფუნდამენტს, რომელთა დაკავშირებით იქმნება ვებგვერდის კომპონენტები. მაგალითად, “რეგისტრაცია” 16 პიქსელიანი ფონტითა და ფერით #484848, 64x16-ის მართკუთხედითა (8ის ჯერადი პრინციპით) და შევსებული ფერით (#FF5A5F) მიიღება ღილაკი. 16 პიქსელიანი ტექსტი ასევე სხვა ფერით გამოიყენება აპარტამენტის შეფასებების კომპონენტებში. პრიმიტივებისა და პრინციპების გასაზღვრა წარმოადგენს სტანდარტების განსაზღვრას ვებ-გვერდის დიზან ენის სისტემაში, რომლის შეცვლით შესაძლებელია ყველა სხვაგან გამოყენებული ეს პრინციპი ერთიანად შევცვალოთ.

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

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

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

პრიმიტივები და პრიციპების განსაზღვრა

კომპონენტების და ასეტების შექმნა

რა ვისწავლე ასლის შექმნისას

ბევრი, მაგრამ გამოვყოფ მნიშვნელოვან მიგნებებს.

ასლის შექმნისას Shift + cmd +C შენი საყვარელი შორთქათი ხდება.
ყოველთვის შექმენი კომპონენტები და დიზაინ ასეტები. შემდეგში, როცა დიზაინში ცვლილებას გადაწყვეტ და ეს აუცილებლად მოგიწევს, შეცვლი მხოლოდ master component-ს. ყოველთვის.
დეველოპერთან საკომუნიკაციო ენა. ერთ-ერთი ყველაზე მნიშვნელოვანი უნარი დეველოპერთან საკომუნიკაციო ენის ცოდნაა. ჩვენი ყოველი პროექტი ფუნქციური უნდა გახდეს და საქმე დეველოპერებთან მიდის. არასისტემული, დაულაგებელი ფონტის, აიქონის თუ ნებიმიერი ელემენტის სახელი დეველოპერს ბევრ პრობლემას შეუქმნის. Inpect element-ის გამოყენებით გავიაზრე ინფორმაციის გადანაწილება და კომპონენტების დაჯგუფება.
ინფორმაციის მარტივად სკანირებისა და კითხვადობის მიღწევისათვის მნიშვნელოვანია ინფორმაციის ეფექტურად წარმოჩენა და გადანაწილება. Airbnbის ერთ-ერთი ქარდის მაგალითზე კარგად ჩანს, როგორ მიირწევა ეს ყოველივე ფონტის განსხვავებული ზომებით, ფერით, დაშორებითა და ვექტორული ელემენტებით.

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

მნიშვნელოვანი ფილტრი — ფასი — წერია Bold-ით.
Plus ბეჯი, მკვეთრი ფერითა და მაღლი ტექსტით, აპარტამენტს გამოარჩევს სხვებისაგან.
მდებარეობა, რომელიც მეორეული ხარისხის ინფორმაცია არის წარმოდგენილია მცირე ფონტითა და მკრთალი ფერით.
შეფასება გატანილია მარჯვენა კუთხეში, ფერად ვარსკვლავთან ერთად, რომელზეც ხალხი მიჩვეულია რომ ხარისხის მაჩვენებელა. ამსთან, შეფასება მარჯვენა მხარეეს დატოვებულ ცარიელ სივრცეს ავსებს.
პატარა წერტილი Entire house-სა და 2 bed-ს შორის, აჯგუფებს იმ ინფორმაციებს რომლებიც გადაწყვეიტლების მიღებისას ასევე მნიშვნელოვანია, ვიდრე აპარატმენტის სრულ გვერდზე გადავალათ.

შემდეგში, როცა ვრცელი ინფორმაციის მცირე სივრეში გადანაწილება დამჭირდება, შემიძლია გამოვიყენო ეს მიდგომები.

5. CSS Box Model. Padding და Margin ავსებს სივრცეს კონტენტს შორის, ეს იქნება ტექსტი, ფოტო, ილუსტრაცია ლოგო თუ სხვა რომელიმე ელემენტი. CSS box model-ზე დაკვირვებით ხდება სწორი დაშორებების განსაზღვრა, რისი ნახვაც Inspect elemet-ის საშუალებით შეგიძლიათ.

მაგალითად Airbnb-ს ყველა გვერდზე “მინდორი” (Padding) 24px-ია. Margin კი ძირითად კონტეინტს შორის 36px.

375–24–24=327(რა ზომაში ექცევა ძირითადი ინფორმაცია)

6. 8x spaceing. კონტენტს შორის სივრცის სწორი განაწილება დიზაინერის ერთ-ერთი მთავარი საზრუნავია. სწორად განსაზღვრული დაშორებების გარეშე ელემენტების ვიზულაურ იერარქია წარმოუდგენელია. სტანდარტულად მიღებულია 8-ის ჯერადი დაშორებები კონტენტს შორის. ასლის შექმნისას Airbnb-ს მაგალითზეც 8px / 16px / 24px / 32px / 40px / 48px / 56px დაშორებები მივიღე.

7. Line height ერთ-ერთი მნიშვნელოვანი კომპონენტია ტექსტის კითხვადობის გასაზრდელად. ყველაზე ხშირად “ლაინ ჰეითის” კოეფიციენტად 1.5 (line height= 1.5 x font size) გამოიყენება, თუმცა ზოგიერთი საიტი მას მცირედი სხვაობით (1.3–1.58) იყენებს.

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

არ დავმალავ ზუსტი გრადიენტის Inspect elementi-დან გადმოტანა ძალიან გამიჭირდა. ამ სტატიაში არის ახსნილი CSS გრადიენტები, სადაც ჩაშლილია თუ ქვემოთმოცემული ინფორმაცია რას ნიშნავს.

ქვემოთ ნაჩვენებია გრადიენტის შექმნის 3 საფეხური.

9. SVG პირდაპირ სამუშაო ფაილში. თუ Google inspect element-ში დააკოპირებთ შესაბამის SVG (აიქონს, ლოგოს ან ნებისმიერ რამეს, რაც ამ ფორმატში იქნება) ის პირდაპირ შეგიძლიათ გადაიტანოთ Figma-ს სამუშაო ფაილში.