როგორ მუშაობს ბლოკის განლაგება?

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

მაგალითად, ავიღოთ Photoshop– ში შექმნილი ვებ – გვერდის განლაგება. პირველ რიგში, ტექსტურ რედაქტორში, div- ის გამოყენებით, ჩვენ ვადგენთ მომავალი რესურსის სტრუქტურას და თითოეულ ფენას ვანიჭებთ საკუთარ id ამომრჩეველს. გამოდის შემდეგი სტრუქტურა:

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

თქვენ შეგიძლიათ შეიტყოთ მეტი ყველა css თვისების შესახებ ენის ტექნიკური დოკუმენტაციიდან.

ინდექსის სრული კოდი. Html მაგალითი:

Style.css ფაილის შინაარსი:

კორპუსი (ფონი: # f3f2f3; ფერი: # 000000; შრიფტი-ოჯახი: Trebuchet MS, Arial, Times New Roman; font-size: 12px;) #container (ფონი: # 99CC99; ზღვარი: 30px ავტომატი; სიგანე: 900px; სიმაღლე : 600px;) #header (ფონი: # 66CCCC; სიმაღლე: 100px; სიგანე: 900px;) # ნავიგაცია (ფონი: # FF9999; სიგანე: 900px; სიმაღლე: 20px;) # მენიუ (ფონი: # 99CC99; ათწილადი: მარცხნივ; სიგანე: 200px; სიმაღლე: 400px;) #შინაარსი (ფონი: #d2d0d2; float: მარჯვნივ; სიგანე: 700px; სიმაღლე: 400px;) #მკაფიო (გასაგები: ორივე;) #footer (ფონი: #0066FF; სიმაღლე: 80px; სიგანე: 900 პიქსელი;)

ასე გამოიყურება საიტის ბლოკის განლაგების ჩვენი მაგალითი ბრაუზერის ფანჯარაში:

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

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

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

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

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

დასკვნა

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

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

გამარჯობა, ამხანაგო მკითხველო!

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

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

მე შევაგროვე თქვენთვის ბლოკების 20 საილუსტრაციო მაგალითირომლებიც ასრულებენ კონკრეტულ ინფორმაციულ ფუნქციას. მაგალითები გამოგადგებათ თუ თქვენ და კომუნიკაციის გაადვილებათქვენი სადესანტო გვერდის დიზაინერთან და დიზაინერთან ერთად.

ამ პოსტში თქვენ გაეცნობით პირველ ნახევარს - 10 ბლოკს. დანარჩენი 10 მაგალითისთვის დაელოდეთ შემდეგ სტატიას აგვისტოში.

20 სადესანტო ბლოკი - აირჩიე შენი

1. პროდუქტის ბლოკის შემადგენელი ნაწილები, სრული ნაკრები;
2. ბლოკის გარანტიები (სამმაგი);
3. დაბლოკეთ თქვენი კომპანიის მიღწევების / უპირატესობების შესახებ;
4. ბლოკი კომპანიის თანამშრომლების შესახებ;
5. დაბლოკოს კომპანიის სერვისები / განყოფილებები;
6. ბლოკი პარტნიორების / კლიენტების შესახებ;
7. CTA (მოქმედებისკენ მოწოდება, მოქმედებისკენ მოწოდება);
8. კლიენტის ბლოკი-უპირატესობები თქვენი პროდუქტის გამოყენებისგან ("რატომ ჩვენ?");
9. დაბლოკოს მომსახურების გაწევის პროცესი (მიწოდება, გარიგების განხორციელების მეთოდი);
10. ბლოკ კალკულატორი;
11. დაბლოკვა სპეციალური შეთავაზებით + დროის შეზღუდვით;
12. დაბლოკოს საჩუქრით + საჩუქრის მიღების პირობები;
13. დაბლოკეთ კომპანიის ადგილმდებარეობის რუქით ("როგორ მივიდეთ იქ");
14. დაბლოკოს საკონტაქტო ინფორმაცია;
15. დაბლოკვის შედარების ცხრილი;
16. ბლოკის იდენტიფიკაცია "ვისთვის?";
17. ხშირად დასმული კითხვები.

* ბლოკის ნუმერაცია სავარაუდოა - სადესანტო გვერდზე ბლოკების რიგი დამოკიდებულია ნიშაზე. თქვენ შეგიძლიათ განსაზღვროთ ბლოკების თანმიმდევრობა Yandex Metrics– ის იგივე ინსტრუმენტების გამოყენებით (გადახვევის რუკა, სითბოს რუქა) ეს სტატია დაგეხმარებათ.

შეიცავს ძირითად ინფორმაციას სადესანტო გვერდის სტუმრისთვის, თქვენი კომპანიის USP. სასურველია, რომ ეს ინფორმაცია იყოს კონკურენტუნარიანიც. ნიშის მიხედვით, ასეთი ინფორმაცია შეიძლება იყოს: პროდუქტის ფასი (488 რუბლიდან 1 ცალიზე), მიწოდების დრო (მიწოდება 2 დღეში), წარმოების ადგილი (პირდაპირ გერმანიიდან). თქვენ შეგიძლიათ გაიგოთ მეტი წინა სტატიიდან.

Განკუთვნილია:საბითუმო თემები; ნიშები, სადაც მყიდველმა საკმარისად არ იცის პროდუქტის სარგებელი (ძირითადად პროდუქტი).

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

3. პროდუქტის ბლოკ-კომპონენტური ნაწილები, სრული ნაკრები

Განკუთვნილია:რთული სერვისების აღწერა; ნიშები დასასვენებელი ღონისძიებების ორგანიზებისთვის; საქონლის პაკეტის აღწერა.

თუ პროდუქტის მახასიათებლების შესახებ ბლოკი აჩვენებს პროდუქტს მთლიანად, მაშინ კომპონენტის ნაწილების ბლოკი ანგრევს პროდუქტს (პროდუქტს ან მომსახურებას).

4. ბლოკის გარანტიები (სამმაგი)

Განკუთვნილია:ნებისმიერი სადესანტო გვერდი.

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

5. დაბლოკეთ მიღწევების / სარგებლის შესახებ

Განკუთვნილია:ნებისმიერი სადესანტო გვერდი; ბრენდირებული პროდუქტი ცნობილი კომპანიისგან; განსაკუთრებით მნიშვნელოვანია მაღალ კონკურენტულ ნიშებში.

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

6. ბლოკი კომპანიის თანამშრომლების შესახებ

Განკუთვნილია:ნიშები მომსახურების გაწევაში

გამოყენება მიზანშეწონილია იმ სიტუაციაში, როდესაც ეს არ არის მნიშვნელოვანი ᲠᲐმყიდველი მიიღებს და ᲠᲝᲒᲝᲠშედეგი მიღწეული იქნება.

7. ბლოკი კომპანიის მომსახურების / განყოფილებების შესახებ

Განკუთვნილია:კომპლექსური სერვისების თემები; სადესანტო გვერდები მრავალი პროდუქტით ერთ განაცხადის არეალში.

8. ბლოკავს პარტნიორებს

Განკუთვნილია: ნებისმიერი სადესანტო გვერდი.

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

Განკუთვნილია:ინფო-ბიზნესი; მომსახურების სფერო; ადგილები, სადაც პროცესი მნიშვნელოვანია (ᲠᲝᲒᲝᲠ)შედეგის მიღება.

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

ნიშები, სადაც დემონსტრაცია მნიშვნელოვანია:

Გაგრძელება იქნება…

დღეს ჩვენ განვიხილეთ სადესანტო გვერდის პირველი 10 ბლოკი, უახლოეს მომავალში მეტს გამოვაქვეყნებთ - იყავით თვალყური!

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

საიტი მიმზიდველია ანიმაციური ფონით, ინტერაქტიული ეფექტებით

უფრო ლამაზი ტიპოგრაფია

გამარტივებულმა ინტერფეისებმა გზა გაუხსნა ლამაზი ტიპოგრაფიის იდეას (ისევე როგორც ადვილად გამოსაყენებელი ვებ ინსტრუმენტები, როგორიცაა Google Fonts და Adobe Typekit-განვითარების შესაძლებლობების გაფართოება უზარმაზარი ონლაინ ბიბლიოთეკებით). "კალიგრაფიის" კონცეფციის წარწერების სიმარტივე (წაკითხული და ადვილად გასაგები) ათავისუფლებს ადგილს სხვა ელემენტებისთვის. რისი დაკავშირებაც უნდა სცადოთ არის წაკითხული შრიფტი და ვარიანტების გასართობი სიახლე.

ქვეყნის სტილის რესტორნის ვებგვერდი: გაზომილი და აუჩქარებელი, აურზაურის გარეშე (მიმზიდველი კონტრასტები) კარგად შერჩეული ფერებითა და შრიფტებით. ქვეყნის სტილი (სოფლის სტილი) ბუნებასთან სიახლოვის განცდას იძლევა. ფრინველებთან დაკავშირებული ბრენდირება აისახება გრაფიკულად (ილუსტრაციები, ფონის ნახატები). ზოგადად, ეს არის იდენტობის ნაწილი - "Hawk and Hen", როგორც წარმატებული ნადირობის სიმბოლო

ილუსტრაციები და ნახატები

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

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

საიტს აქვს ლამაზი მიკროიტრაციები და ილუსტრაციები. და მთელი საიტის "ბავშვის სტილი" დიზაინს თამაშად აქცევს

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

განსხვავებები ბლოკისა და ცხრილის განლაგებას შორის

თუ ცხრილის განლაგება გულისხმობს, რომ გვერდის შინაარსი არის ტეგის შიგნით

ბლოკის განლაგება მოკლებულია ცხრილის განლაგების ნაკლოვანებებს - ის უკეთ ინდექსირდება საძიებო სისტემებით, მისი კოდი არც თუ ისე გაფანტულია და ბლოკები

საბოლოო HTML დოკუმენტი არის ბლოკების კრებული