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

უპირველესი: დაგეგმვა

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

დასაწყისისთვის, საჭიროა გასცეთ მოცემულ კითხვებს პასუხი:

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

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

შექმენით იერსახის მონახაზი

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

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

ვებშემმუშავებელთა გუნდებში, ხშირად ჰყავთ როგორც გრაფიკული იერსახის შემმუშავებელი, ასევე ცალკე სამომხმარებლო გარემოს იერსახის (user-experience – UX) შემმუშავებელიც. პირველი ზრუნავს საიტის ზოგადი იერსახის შექმნაზე, ხოლო მეორე ცდილობს ეს იერსახე გახადოს მომხმარებელზე უკეთ მორგებული და გამოსაყენებლად მეტად მოსახერხებელი.

შეარჩიეთ საჭირო მასალები

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

ტექსტი

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

ფერები გაფორმებისთვის

გამოიყენეთ ფერის შესარჩევი ხელსაწყო და აარჩიეთ სასურველი. ფერზე დაწკაპებისას, იხილავთ უცნაური სახის, ექვსსიმბოლოიან კოდს, მაგალითად #660066. ამ კოდს ეწოდება „თექვსმეტობითი“ (ინგლ. hex(adecimal)) ჩანაწერი და აღნიშნავს ფერს. მისი ასლი დროებით გადაინახეთ.

სურათები

სურათის შესარჩევად, გადადით Google-ის სურათების საძიებოში და მონახეთ რამე შესაფერისი.

  1. როდესაც იპოვით, დაწკაპეთ სურათზე.
  2. ვინაიდან სურათის სრული ზომით ნახვის შესაძლებლობა (View image) ამოღებულია, სურათზე მარჯვენა წკაპით (Ctrl + წკაპი Mac-ზე) გამოსულ მენიუში პირდაპირ აირჩიეთ Save Image As... (სურათის შენახვა, როგორც...) და ჩამოტვირთეთ უსაფრთხო ადგილას. სანაცვლოდ, შეგიძლიათ უბრალოდ სურათის მისამართის ასლი გადაინახოთ.

შენიშვნა 1: სურათების უმეტესობა ინტერნეტში, მათ შორის Google-ის სურათებიც დაცულია საავტორო უფლებებით. კანონის დარღვევის ასარიდებლად, გამოიყენეთ Google-ის ლიცენზიის ფილტრი. უბრალოდ 1) დაწკაპეთ Search tools (ხელსაწყოებზე) და 2) ჩამოშალეთ Usage rights (გამოყენების უფლებები):

შენიშვნა 2: ვინაიდან, 2018 წლის 15 თებერვლიდან, Google-მა მოაცილა სურათის ნახვის (View Image) შესაძლებლობა (იხილეთ ინგ. https://twitter.com/searchliaison/status/964226180776845312/photo/1), სანაცვლოდ სხვა საძიებო სისტემების გამოყენებაც შეგიძლიათ, როგორიცაა Duckduckgo-ს სურათები (ასევე მსგავსი შედეგები აქვს Bing/Yahoo-ს). განსხვავებული შედეგები შეიძლება გააჩნდეს Baidu-ს ან Yandex-ს.

 

შრიფტი

შრიფტის ასარჩევად:

  1. გადადით Google-ის შრიფტებზე (ქართულისთვის იხილეთ Noto-შრიფტები) და დაათვალიერეთ, სანამ სასურველს არ იპოვით. აგრეთვე შეგიძლიათ გამოიყენოთ დამატებითი ფილტრები, მორგებული შედეგების მოსაძიებლად.
  2. დაწკაპეთ „პლუსის“ (დამატების) ნიშანს, სასურველი შრიფტის გვერდით.
  3. დაწკაპეთ გვერდის ქვემოთ, შრიფტების შერჩეული კრებულის არეზე „* Family Selected“ (* შერჩეული შრიფტების რაოდენობა).
  4. ამომხტარ ჩარჩოში იხილავთ კოდებს, რომლებსაც Google მოგცემთ და გადაინახეთ ტექსტურ რედაქტორში ჩასმით (ქართული Noto-შრიფტების შემთხვევაში, პირდაპირ არის მოცემული საჭირო კოდი).

 

 

მოცემულ მოდულში

დოკუმენტების ჭდეები და წვლილის შემტანები

ამ გვერდის შექმნაში, წვლილის შემტანები: G12r
ბოლო განახლების ავტორი: G12r,