If you're seeing this message, it means we're having trouble loading external resources on our website.

თუ ვებფილტრს იყენებთ, დარწმუნდით, რომ *.kastatic.org და *.kasandbox.org დომენები არ არის დაბლოკილი.

ძირითადი მასალა

ვებ–გვერდის დიზაინი

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

კარგი შრიფტების შერჩევა

თუ სხვაგვარად არ მიუთითებთ, ბრაუზერები ვებგვერდებს ემსახურებიან სტანდარტული ბეჭდვითი შრიფტის ოჯახით, რომელიც გვერდს შედარებით ფორმალურ ელფერს აძლევს. შეგიძლიათ, იგი შეცვალოთ არაბეჭდვითი შრფიტის ოჯახით, ან მიუთითოთ კონკრეტული შრფიტის ოჯახი, რომელიც მომხმარებელთა კომპიუტერების უმრავლესობაზე აყენია, მაგალითად, Garamond ან Helvetica.
თქვენი ვებგვერდისათვის უფრო გამოკვეთილი ვიზუალის მისაცემად შეგიძლიათ, გამოიყენოთ პერსონალიზებული ვებშრიფტი. მაგალითად, ხანის აკადემია იყენებს Lato-ს ჩვენს ყველა გვერდზე, მშვენიერი sans-serif შრიფტს:
ხანის აკადემიის ვებგვერდის სათაურის ეკრანის ანაბეჭდი
როდესაც იყენებთ ვებ ფონტს, ამით მომხმარებლის ბრაუზერს გადმოაწერინებთ ფონტის ფაილს მომხმარებლის კომპიუტერში, რათა შემდეგ ამ ფონტს მიმართოთ CSS-იდან. ეს არის დამატებითი გადმოწერა ბრაუზერისათვის, ამიტომ ძალიან ბევრი არ უნდა გამოიყენოთ. აგრეთვე, არ უნდა მოათავსოთ ისეთი ფონტები, რომელთა გამოყენებასაც არ გეგმავთ. ვებ ფონტების ერთ-ერთი კარგი წყარო არის გუგლის ვებ ფონტები. იხილეთ ეს ვებგვერდის მაგალითი ხანის აკადემიაზე, რომელიც იყენებს გუგლის ორ ვებ ფონტს.
საიდანაც არ უნდა იღებდეთ შრიფტებს, ყოველთვის ეცადეთ, ბევრი ფონტით არ გადატვირთოთ გვერდი. ზოგადად, ერთ გვერდზე მაქსიმუმ ორი ან სამი შრიფტის ოჯახი უნდა გამოიყენოთ, თქვენი შრიფტები კარგად უნდა ეხამებოდეს ერთმანეთს. აი, დამხმარე ვებგვერდი, რომელიც გაძლევთ Google-ის ვებ შრიფტების მაგალითებს, რომლებიც ერთმანთს კარგად ეხამება.

კარგი ფერების შერჩევა

ვებგვერდის დიზაინის დროს შეგიძლიათ, გამოიყენოთ ფერთა პალიტრა—ფერთა ჯგუფი, რომლებიც ერთმანეთს კარგად ეხამება და რომელთა გამოყენებაც თქვენი ვებგვერდის სხვადასხვა ადგილში შეიძლება. ეს ფერები შეიძლება, დაეფუძნოს თქვენი კომპანიის ლოგოს, შეიძლება ამით ის დაუკავშირდეს თქვენი გვერდის დეკორაციას, ან, უბრალოდ, კარგად გამოჩნდეს მასთან ერთად.
პალიტრის არჩევაში დახმარება გჭირდებათ? თუ უკვე იცით, რა ფერებზე გსურთ პალიტრის დაფუძნება, შეგიძლიათ, გადახვიდეთ პალეტონზე, იარაღი, რომელიც სხვადასხვა ტიპის პალიტრის ვიზუალიზაციის საშუალებას გაძლევთ: მონოქრომატულის, სამკუთხა ვიზუალის, მოსაზღვრე ფერებისა და ოთხკუთხა ვიზუალის.
მწვანე ფერთა პალიტრის ეკრანის ანაბეჭდი
თუ ნულიდან იწყებთ, შეგიძლიათ, გადახედოთ ფერთა პალიტრას აქ COLOURLovers. ეს ფერების მოყვარულ ადამიანთა საზოგადოებაა, რომელშიც ისინი უსასყიდლოდ გასცემენ ფერების, ფერთა პალიტრებისა და გამოსახულებების იდეებს. აი, ფერთა პალიტრა, რომელსაც ეწოდება Giant Goldfish:
ნარინჯისფერი და ლურჯი ფერთა პალიტრის ეკრანის ანაბეჭდი
პალიტრის შერჩევის შემდეგ მოდის რთული ნაწილი: თქვენი ვებგვერდის ნაწილებისთვის კონკრეტული ფერების შერჩევის პროცესი. რა ფერის უნდა იყოს სათაური? ბმულები? ტექსტი? ფონი? პალეტონის ერთ-ერთი უპირატესობაა ამ პალიტრის მქონე ვებგვერდი, რომელსაც გაძლევენ სანიმუშოდ:
ვებგვერდის მაგალითის ეკრანის ანაბეჭდი, რომელიც იყენებს მწვანე პალიტრას
სანამ გადაწყვეტდეთ, თუ როგორ გადაითარგმნოს თქვენი ფერთა პალიტრა CSS-ში, გაითვალისწინეთ რამდენიმე ფაქტორი:
  • თუ ბმულების ნაგულისხმევ სტილს ძალიან განსხვავებულით შეცვლით, შესაძლოა, მომხმარებლებმა ვეღარ გაიგონ, რომ ისინი ბმულები არიან.
  • წინა/უკანა ფონების ტექსტები საკმარისად უნდა განსხვავდებოდეს ერთმანეთისაგან, რათა მომხმარებლები არ დააბნიოს. შეამოწმეთ თქვენი ფერები კონტრასტის ამ შემმოწმებელში.
  • ბევრი ადამიანი არის ფერების სიბრმავით დაავადებული. ფერთა ზოგიერთ კომბინაციას არ ექნება მათთვის საკმარისი კონტრასტი. შეამოწმეთ თქვენი ფერები ფერთა სიბრმავის ამ სიმულატორში.
თუ ზუსტად არ იცით, სწორად იყენებთ ფერთა პალიტრას თუ არა, გაუგზავნეთ ის რამდენიმე მეგობარს და სთხოვეთ, გულახდილად გითხრან თავიანთი აზრი. ყველაფრის წაკითხვა შეუძლიათ? იციან, რაზე დაწკუპუნებაა შესაძლებელი? რომელიმე ფერი თვალში ცუდად ხომ არ ხვდებათ? რა ფერები მოსწონთ?

თეთრი სივრცის კარგად გამოყენება

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

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

შესაძლოა, ამდენი დირექტივის კითხვის შემდეგ შეშინებულიყავით, განსაკუთრებით იმ შემთხვევაში, თუ დიზაინი არ გაინტერესებთ. ნუ ინერვიულებთ, ლამაზი ვიზუალის მქონე ვებგვერდის შესაქმნელად არ არის აუცილებელი, დიზაინის ექსპერტი იყოთ. ამის ნაცვლად შეგიძლიათ, დაიწყოთ შაბლონით ან სამუშაო გარსით და გამოიყენოთ სხვა დიზაინერების მიერ ამაში უკვე ჩადებული შრომა.
შაბლონი არის HTML და CSS, რომელიც უკვე ჰგავს სრულყოფილ ვებგვერდს. ხშირად მას გამოგონილი ინფორმაციით ავსებენ. შაბლონების ნახვა შეგიძლიათ OpenDesigns.org-ზე ან ინტერნეტში „free webpage templates"-ის მოძებნით—და იმედი გქონდეთ, რომ რასაც იპოვით, უფასო იქნება! როგორც კი შაბლონს გადმოწერთ, შეგიძლიათ, თქვენი შიგთავსი ჩასვათ და განაგრძოთ CSS-ის მოდიფიკაცია თქვენი საჭიროებისამებრ.
ორი ვებგვერდის შაბლონის ეკრანის ანაბეჭდი
CSS-ის სამუშაო გარსი არის CSS-ის წესების კოლექცია, რომელიც ჩინებულ დასაწყისს გაძლევთ მოქნილი ვებგვერდისათვის. არსებობს CSS-ის ბევრი პოპულარული სამუშაო გარსი, რომლებიც გაგიმარტივებთ ლამაზი სტილის მქონე ვებგვერდების შექმნას—Twitter Bootstrap, ZURB Foundation, Pure CSS, Topcoat და სხვები. შეგიძლიათ, იხილოთ Twitter Bootstrap-ისა და ZURB foundation-ის მაგალითები აქ, ხანის აკადემიაზე.
როგორც კი CSS-ის სამუშაო გარსს გადმოიწერთ, შეგიძლიათ, იხილოთ დოკუმენტაცია მაგალითების საპოვნელად—მათ ხშირად აქვთ შაბლონებიც!—და გაარკვიოთ, CSS-ის რომელი კლასის სახელები მიგიყვანთ სასურველ ვიზუალამდე.
როდესაც იყენებთ შაბლონებს ან სამუშაო გარსებს, თქვენი ვებგვერდი შეიძლება, ზუსტად დაემსგავსოს სხვა ვებგვერდს და, შესაბამისად, თქვენი მომხმარებლისათვის თვალში გამორჩეული არ იყოს. ამის თავიდან ასარიდებლად დაამატეთ თქვენი საკუთარი ლოგო და შეცვალეთ მნიშვნელოვანი ელემენტები, როგორიცაა შრიფტის ოჯახი ან ფონის ფერი.

გსურთ, შეუერთდეთ დისკუსიას?

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