თუ გსურთ შექმნათ ვებ - გვერდები, ეს პროცესი ბევრად უფრო ადვილი იქნება, თუ წინასწარ დაგეგმავთ. დაგეგმვის ფაზაში დიზაინერს და კლიენტს შეუძლიათ ერთად იმუშაონ, რათა იპოვონ ფორმატი და განლაგება, რომელიც მათ საჭიროებებს შეესაბამება. დაგეგმვის პროცესი გავლენას ახდენს საიტის სტილსა თუ სტილზე, შეიძლება ითქვას, რომ ეს არის ყველაზე მნიშვნელოვანი ასპექტი ვებ დიზაინში, მით უმეტეს, თუ ის საქმიანი მიზნებისთვისაა.
ნაბიჯი
ნაწილი 1 4 -დან: ძირითადი სტრუქტურის შექმნა
ნაბიჯი 1. განსაზღვრეთ ვებგვერდის ფუნქცია
თუ თქვენ ქმნით პირად საიტს, თქვენ ალბათ უკვე იცით პასუხი. ამასთან, თუ თქვენ ქმნით საიტს სხვა ორგანიზაციის, კომპანიის ან პირისათვის, თქვენ უნდა გაარკვიოთ რა სურთ მათ და საიტის ფუნქციონირება. ყველაფერი, რასაც აქ მიუთითებთ, ძალაში შევა ვებ გვერდის დასრულებისთანავე.
- მოითხოვს ვებსაიტს Storefront? უნდა გაკეთდეს მომხმარებლის კომენტარები? საჭიროებს თუ არა მომხმარებელს ანგარიშის შექმნა მოგვიანებით? ვებგვერდის სტატია ორიენტირებულია? ან გამოსახულებაზე ორიენტირებული? ყველა ეს და სხვა შეკითხვა დაგეხმარებათ საიტის დიზაინსა და დიზაინში.
- ეს დაგეგმვის პროცესი შეიძლება ჩაითვალოს ნახატში, განსაკუთრებით იმ შემთხვევაში, თუ ეს არის დიდი კომპანიისათვის და ბევრი ადამიანია ჩართული ამ პროექტის შექმნაში.
ნაბიჯი 2. შექმენით საიტის რუქის დიაგრამა (საიტის რუკა)
საიტის რუქის დიაგრამა მსგავსია ნაკადის დიაგრამისა, რომელიც გვიჩვენებს, თუ როგორ გადადიან მომხმარებლები ერთი გვერდიდან მეორეზე. თქვენ არ გჭირდებათ ვებ გვერდი ამ ეტაპზე, მხოლოდ კონცეფციების ზოგადი ნაკადი. თქვენ შეგიძლიათ გამოიყენოთ კომპიუტერული პროგრამა დიაგრამების შესაქმნელად ან საკუთარი თავის ესკიზზე ქაღალდზე. გამოიყენეთ ეს დიაგრამა იერარქიული მოწყობისა და ვებ გვერდების კავშირის ცნებების საჩვენებლად.
ნაბიჯი 3. სცადეთ ბარათის შედგენის მეთოდი
ჯგუფური ვებ განვითარების ერთ -ერთი პოპულარული მეთოდია გამოიყენოს მრავალი ბარათი, რათა გაარკვიოს ყველას მოლოდინი. აიღეთ რამოდენიმე შენიშვნის ბარათი და ჩაწერეთ ვებ გვერდის ძირითადი შინაარსი თითოეულზე ინდივიდუალურად. მოაწყეთ ეს ბარათები თქვენს გუნდთან ერთად, რათა იპოვოთ საუკეთესო კონცეფცია. ეს მეთოდი შესაფერისია გამოსაყენებლად, როდესაც თქვენ თანამშრომლობთ სხვებთან ვებ გვერდების შესაქმნელად.
ნაბიჯი 4. გამოიყენეთ ქაღალდი და საინფორმაციო დაფა, ან დაფა
ეს არის დაგეგმვის ორიგინალური მეთოდი მცირე ბიუჯეტზე, თქვენ შეგიძლიათ სწრაფად წაშალოთ ან გადაიტანოთ შინაარსი და შეცვალოთ ნაკადი. დახაზეთ თქვენი ვებ დიზაინი ქაღალდზე, შემდეგ დააკავშირეთ ფურცლები ძაფით, ან დახაზეთ დაფები დაფაზე. ეს მეთოდი ძალიან შესაფერისია გონებრივი იერიშის სესიებში გამოსაყენებლად.
ნაბიჯი 5. შექმენით შინაარსის ინვენტარი
სინამდვილეში, უფრო მიზანშეწონილია გამოიყენოთ ქსელების გადაკეთებისას, ვიდრე ახალი ვებ დიზაინებში. ჩადეთ თითოეული დასრულებული შინაარსი ან ვებ გვერდი ცხრილში. გააკეთეთ ჩანაწერი შინაარსის ან გვერდის თითოეული ნაწილის დანიშნულებისამებრ, ამ სიის გამოყენებით განსაზღვრეთ რა ამოიღოთ და რა შეინახოთ. თქვენ შეგიძლიათ გაამარტივოთ ვებ -გვერდის სტრუქტურა და გაამარტივოთ შემდგომი დიზაინის პროცესი.
ნაწილი 4 მეოთხედან: ძირითადი HTML მონახაზის შექმნა
ნაბიჯი 1. შექმენით მავთულის ჩარჩო ვებ გვერდის იერარქიის დასადგენად
ძირითადი HTML შაბლონი არის იმ საიტის გეგმა, რომელსაც თქვენ ააშენებთ, იყენებს მხოლოდ ყველაზე ძირითად ტეგებს და ნიმუშის (ბლოკები/შაბლონები) შინაარსს. ეს ჩარჩო პასუხობს კითხვას, "რა ჩანს ინტერნეტში და სად?" ფორმატირება და სტილი არ არის საჭირო ამ მონახაზის შექმნისას.
- თქვენ შეგიძლიათ ნახოთ შინაარსის სტრუქტურა და დიაგრამა ძირითადი კონტურით, სანამ სტილის პარამეტრს აირჩევთ.
- ძირითადი HTML შაბლონები არ არის სტატიკური, როგორც PDF– ები ან სურათები, თქვენ შეგიძლიათ სწრაფად გადაფურცლოთ შინაარსის ნიმუში ახალი სტრუქტურების შესაქმნელად.
- ძირითადი ჩარჩო არის ინტერაქტიული, რაც სარგებელს მოუტანს როგორც ვებ დეველოპერებს, ასევე კლიენტებს. ვინაიდან ეს ძირითადი ჩარჩო დაწერილია მარტივი HTML კოდით, თქვენ მაინც შეგიძლიათ იაროთ მასში და იცოდეთ როგორ მუშაობს ვებ გვერდის გადართვა. ეს არ შეიძლება გაკეთდეს PDF– ით.
ნაბიჯი 2. სცადეთ ნაცრისფერი ყუთის მეთოდი
დაბლოკეთ ან მონიშნეთ თქვენი ვებ გვერდის შინაარსი ნაცრისფერ ყუთში, ყველაზე მნიშვნელოვანი შინაარსი თავზეა. დაალაგეთ შინაარსი ერთ სვეტში. მაგალითად, თუ გვერდი არის "კომპანიის შესახებ", მაშინ კომპანიის შესახებ არის დეტალური ინფორმაცია, შემდეგ მოდის პერსონალის სია, შემდეგ საკონტაქტო ინფორმაცია და ა.
ეს არ შეიცავს სათაურებს და ქვედა კოლონტიტულებს. ნაცრისფერი ყუთი არის შინაარსის ვიზუალური წარმოდგენა, რომელიც გამოჩნდება ინტერნეტში
ნაბიჯი 3. სცადეთ ძირითადი მონახაზი შემქმნელი პროგრამა
არსებობს სხვადასხვა პროგრამა, რომელიც შეგიძლიათ გამოიყენოთ ძირითადი ვებ ჩარჩოს შექმნის პროცესში. ვებ პროგრამირების კოდის ოდენობა (ენა), რომელიც უნდა დაეუფლონ, განსხვავებულია თითოეული პროგრამისთვის. ზოგიერთი საკმაოდ პოპულარული პროგრამა მოიცავს:
- ნიმუშის ლაბორატორია. ეს საიტი ეძღვნება "ატომურ დიზაინს", თითოეული შინაარსი ითვლება "მოლეკულად", რომელიც ქმნის უფრო დიდ ვებ გვერდს.
- ჯამპჩარტები. ეს ვებ გვერდი გთავაზობთ ვებ დაფუძნებულ დაგეგმვისა და ჩარჩოების მომსახურებას. ეს საიტები ფასიანია და მოითხოვს ხელმოწერას, მაგრამ თქვენ შეგიძლიათ სწრაფად შექმნათ ვებ ჩარჩოები ვებ პროგრამირების კოდის დაუფლების გარეშე.
- Wirefy. Wirefy არის კიდევ ერთი საიტი, რომელიც გთავაზობთ "ატომურ დიზაინს". ვებ დეველოპერებს შეუძლიათ მიიღონ ინსტრუმენტი უფასოდ.
ნაბიჯი 4. გამოიყენეთ მარტივი HTML მარკირება
კარგი ძირითადი შაბლონი ადვილად გადაიქცევა საწყის საიტზე. ამ შაბლონის შექმნის პროცესში ძალიან ნუ იფიქრებთ ვებ სტილზე. გამოიყენეთ მარკირება, რომლის გაგება და შეცვლა შესაძლებელია.
მარტივი ძირითადი ჩარჩო ბევრად უკეთესია. მარკირების შექმნის მიზანია სტრუქტურის აგება. ვიზუალური გარეგნობის რეგულირება შესაძლებელია მოგვიანებით CSS და გაფართოებული მარკირებით
ნაბიჯი 5. შექმენით ძირითადი მონახაზი თითოეული ვებ გვერდისათვის
თქვენ შეიძლება ცდუნდეთ, გაუტოლდეთ ყველა ვებ გვერდს ერთი ძირითადი მონახაზი. სინამდვილეში, ეს მხოლოდ თქვენს საიტს გახდის უბრალო და მოსაწყენი. შექმენით განსხვავებული მონახაზი თითოეული გვერდისთვის, მიხვდებით, რომ თითოეულ გვერდს სჭირდება საკუთარი დიზაინი.
ნაწილი 3 მეოთხედან: შინაარსის შექმნა
ნაბიჯი 1. ვებ გვერდის შექმნამდე მოამზადეთ შინაარსი
გაცილებით გაგიადვილდებათ თქვენი ვებგვერდის გადახედვა, თუ თქვენ უკვე გაქვთ რეალური შინაარსი, ნაცვლად იმისა, რომ გამოიყენოთ ნიმუშები ან ადგილის შემცველები. თქვენ არ გჭირდებათ ძალიან ბევრი შინაარსი, მაგრამ თქვენი იმიტირებული ბევრად უკეთესი იქნება თუ თქვენ იყენებთ ორიგინალური სურათის ასლს.
თქვენ არ გჭირდებათ სტატიის ყველა მასალა, მაგრამ ყოველ შემთხვევაში მას უნდა ჰქონდეს ნამდვილი სათაური
ნაბიჯი 2. გახსოვდეთ, რომ დიდი შინაარსი არ არის მხოლოდ ტექსტი
ინტერნეტი ბევრად უფრო რთულია, ვიდრე ტექსტის უბრალო ვებ გვერდი. თქვენ გჭირდებათ მრავალფეროვანი შინაარსი, რათა შექმნათ შესანიშნავი ვებ – გვერდი ვიზიტორების მოსაზიდად და მოსაწვევად. Მაგალითად:
- Სურათი.
- ხმა
- ვიდეოები.
- ვებ გადაცემა ან ვებ სტრიმი (Twitter)
- ფეისბუქ ინტეგრაცია
- RSS
- ვებ არხი
ნაბიჯი 3. სთხოვეთ პროფესიონალ ფოტოგრაფს დახმარება
თუ გსურთ თქვენს საიტზე განათავსოთ ფოტოები, პირველი შთაბეჭდილება, რასაც თქვენ მიიღებთ თქვენი ვებგვერდიდან, იქნება ბევრად უკეთესი, თუ ის სავსე იქნება პროფესიონალური ფოტოგრაფიით. ერთი კარგი ფოტო ოცზე მეტი დაბალი ხარისხის ფოტოზე ღირს.
მოძებნეთ ფოტოგრაფიის ხელოვნების ახალი კურსდამთავრებული, როგორც იაფი გამოსავალი, ვიდრე პროფესიონალი ფოტოგრაფი, რომელიც დიდი ხანია ბიზნესშია
ნაბიჯი 4. დაწერეთ ხარისხიანი სტატიები
ვებ გვერდზე დაწერილი შინაარსი განსაზღვრავს თქვენი ვებ ტრაფიკის რაოდენობას. მიუხედავად იმისა, რომ თქვენ არ გჭირდებათ ძალიან ინერვიულოთ ამ დიზაინის პროცესში შინაარსის შექმნაზე, არ გტკივათ მასზე ფიქრის დაწყება, რადგან თქვენ ასევე დაგჭირდებათ შინაარსი რეგულარულად, როდესაც თქვენი საიტი ამოქმედდება.
სტატიის შინაარსის გარდა, არის წერილობითი მასალა, რომელიც თქვენ ასევე უნდა გქონდეთ ვებ გვერდის შედგენის პროცესში. მაგალითად საკონტაქტო ინფორმაცია, კომპანიის სახელი ან სხვა რამ, რაც მრავალჯერ იქნება გამოყენებული საიტზე
ნაწილი 4 მეოთხედან: კონცეფციების გადაქცევა ვებსაიტებზე
ნაბიჯი 1. ძირითადი ელემენტების მოწყობა
ელემენტების ეს განლაგება ვრცელდება თქვენი საიტის ყველა გვერდზე, როგორიცაა სათაურები, სქოლიოები და სანავიგაციო მენიუები. დააყენეთ იგი ძალიან მარტივ სტილში, ასე რომ თქვენ შეგიძლიათ შეამოწმოთ როგორ გამოიყურება ყველა გვერდი. ეს განსაკუთრებით სასარგებლოა, როდესაც თქვენ პროგრესირებთ ვებ განლაგების პროცესში.
ძალიან ნუ ინერვიულებთ დეტალებზე, შეეცადეთ გადახედოთ (გადახედოთ) როგორ გამოიყურება სათაური
ნაბიჯი 2. შექმენით მარტივი განლაგება
დაიწყეთ საათის პოზიციის გადატანით ძირითადი მონახაზის სვეტიდან გვერდზე არსებულ რეალურ მდებარეობაზე. მაგალითად, შეიძლება დაგჭირდეთ ნავიგაციის მენიუს გადატანა გვერდის მარცხნივ და სათაურების სია მარჯვნივ.
განაგრძეთ ექსპერიმენტები ვებგვერდის განლაგებასთან დაკავშირებით, სანამ გადახვალთ შემდეგ საფეხურზე. ნება მიეცით სხვებს, შეხედონ მას, რომ ნახოთ თუ არა თქვენს მიერ შექმნილი განლაგება ცოცხალია
ნაბიჯი 3. შექმენით მაკეტი
გამოიყენეთ პროგრამა, როგორიცაა Photoshop, თქვენი ვებსაიტის იმიტირებული გვერდების შესაქმნელად. გამოიყენეთ თქვენს მიერ შედგენილი განლაგება, როგორც სახელმძღვანელო. თქვენ შეგიძლიათ გააკეთოთ მაკეტები უფრო სწრაფად და მიიღოთ სასურველი შედეგები სურათის დამუშავების პროგრამით. ამ სურათების შედეგები მოგვიანებით შეიძლება გამოყენებულ იქნას როგორც მითითება ვებ პროგრამირების კოდის წერის პროცესში.
განათავსეთ რეალური შინაარსი მაკეტში, რათა ის კარგად გამოიყურებოდეს
ნაბიჯი 4. შეცვალეთ ნიმუშის კონცეფცია ორიგინალური შინაარსით
დაამატეთ შინაარსი და ელემენტები ვებ გვერდებს. ნუ გაოფლიანებთ ვებ სტილის პარამეტრებს ახლავე, უბრალოდ დაალაგეთ ყველაფერი სწორ ადგილას. ეს დაგეხმარებათ გადახედოთ ვებ სტილის ცვლილებებს, რომელსაც მოგვიანებით განახორციელებთ.
ნაბიჯი 5. შექმენით ვებ სტილის სახელმძღვანელო
ძალზე მნიშვნელოვანია სტილის ნაზავის შენარჩუნება, განსაკუთრებით დიდი საიტებისთვის. თუ საიტი განკუთვნილია ბიზნეს მიზნებისთვის და უკვე აქვს საკუთარი ბრენდი ან სტილი, ეს უნდა იყოს ინტეგრირებული საიტის დიზაინში. რა უნდა გაითვალისწინოთ ვებ გვერდის სტილის სახელმძღვანელოს შექმნისას:
- ნავიგაცია
- ხელმძღვანელის შენიშვნა
- პარაგრაფი
- დახრილი ხასიათი
- თამამი ხასიათი
- ბმულები (აქტიური, არააქტიური, დარტყმა)
- სურათის გამოყენება
- Ხატი
- სახელური
- სია
ნაბიჯი 6. გამოიყენეთ ვებ სტილი
მას შემდეგ რაც იპოვით სწორ სტილს და დიზაინს, განახორციელეთ იგი. CSS არის ერთ -ერთი ყველაზე მარტივი გზა სტილის დანერგვისთვის ვებ გვერდზე ან მთელ საიტზე. იხილეთ შემდეგი ინსტრუქციები CSS– ის გამოყენების დეტალების უკეთ გასაგებად.
