როგორ შევქმნათ ვებგვერდის სტილის სახელმძღვანელო თქვენი ბრენდისთვის

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


ვებსაიტის სტილის სახელმძღვანელოს შექმნა

მოდით, აქ დავხატოთ სცენარი. ამბობენ, რომ თქვენი ვებ – გვერდი სწრაფად იზრდება როგორც შინაარსის მასშტაბით, ასევე იმ რაოდენობის რიცხვში, რომლის შესანარჩუნებლად გჭირდებათ ბორტზე მიყვანა. თქვენ დაქირავებული დიზაინერები, დეველოპერები, საავტორო უფლებების შემსრულებლები, სოციალური მედიის მენეჯერები – მთელი სამკერვალო. თითოეული ადამიანი მოდის და მიდის, თავისი წვლილი შეაქვს საერთო გრანდიოზულ სქემაში, მაგრამ თქვენი ბრენდის თანმიმდევრულობა ამოიწურა. რამდენიმე ღილაკის ბმული არის ლურჯი; სხვები მწვანეა. ერთი ქვესათაური ზომაა 26px; მეორე ქვეთავი 24px. თქვენს ლოგოს აქვს ზედმეტი გადახურვა მის გარშემო ერთ გვერდზე, მაგრამ მეორეზე ძალიან მცირე ზომის გადახურვა…

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

სწორედ აქ მოდის სტილის სახელმძღვანელო.

Contents

რა არის სტილის სახელმძღვანელო და რატომ სჭირდება ჩემს ბიზნესს ერთი?

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

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

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

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

როდესაც დროა შექმნათ სტილის სახელმძღვანელო

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

თქვენი ონლაინ ბიზნესი ისარგებლებს სტილის სახელმძღვანელოთ, თუ და როდის:

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

თქვენი სტილის სახელმძღვანელო თქვენს ვებსაიტში არსებობს

სანამ დაიწყებთ თქვენი სტილის სახელმძღვანელოს შექმნას, თქვენ უნდა დანიშნოთ იქ, სადაც ის არსებობს. საუკეთესო პრაქტიკაა საკუთარი ვებსაიტის განთავსება თქვენს ვებსაიტში, ან როგორც დირექტორიაში (www.yourdomain.com/styleguide) ან როგორც ქვემდებარე (styleguide.yourdomain.com).

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

თქვენი სტილის სახელმძღვანელო აქვს საკუთარი განლაგება

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

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

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

სტილი გიდები წინააღმდეგ შაბლონის ბიბლიოთეკები

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

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

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

როგორ შევქმნათ სტილის სახელმძღვანელო

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

ნაბიჯი 1. განსაზღვრეთ თქვენი ბრენდის არსი

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

ნაბიჯი 2. დააყენეთ თქვენი ლოგოს წესები

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

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

ნაბიჯი 3. ჩამოყალიბდეს ტიპოგრაფია

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

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

ნაბიჯი 4. გადაწყვიტეთ თქვენი ფერის პალიტრა

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

Mozilla ფერის სახელმძღვანელო მაგალითიმოზილა ინარჩუნებს თავის ბრენდს თანმიმდევრული მათი პროგრამული პალიტრების განსაზღვრით. მნიშვნელოვანია, რომ შეიტანოთ ფერის კოდები HEX, Pantone, HSB, CMYK და RGB; თუ შეიქმნება შემთხვევა, რომ თქვენი ბრენდი უნდა არსებობდეს კომპიუტერის ეკრანის მიღმა, თქვენ მზად იქნებით ამისთვის!

ნაბიჯი 5. სწორი იკონოგრაფიის განსაზღვრა

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

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

ნაბიჯი 6. სწორი გამოსახულების განსაზღვრა

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

ნაბიჯი 7: შექმენით განლაგება და ქსელის სისტემა

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

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

ნაბიჯი 8: ელემენტები სტილი

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

ფორმები

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

ღილაკები

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

მენიუები

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

მოდულები

კარგი სტილის სახელმძღვანელო არა მხოლოდ თქვენი მოდულების (ან pop-ups) დიზაინს აჩვენებს, არამედ ასევე ითვალისწინებს მათი გარეგნობის პირობებს. რა ქმედებები უნდა განახორციელოს მომხმარებელმა, რომ ნახოს მოდალი? როგორ აპირებს მოდალი დაარწმუნოს მოქმედება მომხმარებლისგან?

ურთიერთქმედება და ანიმაციური ეფექტები

გჯეროდეთ თუ არა, თქვენი ბრენდი დეტალებით შეიძლება გამოხატავდეს, როგორც წუთში წამსვლელ ეფექტს. ტექსტური ბმული ღირებულებასთან {ანიმაციით: 500ms მარტივია; } გადმოსცემს განსხვავებულ პიროვნებას და გადაუდებლობის გრძნობას compared ანიმაციასთან შედარებით: 100ms წრფივი; }.

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

არ დაივიწყოთ შინაარსი

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

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

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

შინაარსის სტილის სახელმძღვანელო შეიძლება საკმაოდ ამომწურავი იყოს, თუნდაც გრამატიკული წესების ჩათვლით, რასაც ინგლისელი პროფესორისგან მოელით. სახელმძღვანელო ტუტები+ მხოლოდ ის აკეთებს (მათი შინაარსის სახელმძღვანელო კი მეუბნება, რომ დავწერო, როგორც “Tuts +” და არა “Tutsplus”!)

დასკვნა

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map