Brendiniz üçün bir veb sayt tərzi bələdçisini necə yaratmaq olar

Bir üslub bələdçisinin markanızı vizual olaraq necə saxlaya biləcəyini və veb saytınız böyüdükcə tonik olaraq ardıcıl qalacağını öyrənin.


Bir veb tərzi bələdçisi yaratmaq

Burada bir ssenari çəkək. Veb saytınızın həm məzmunu baxımından, həm də onu qorumaq üçün təyyarəyə gətirməli olduğunuz insanların sayında sürətlə böyüdüyünü söyləyin. Dizaynerlər, tərtibatçılar, kopirayterlər, sosial media menecerləri – bütün shebang-ləri işə götürdünüz. Hər kəs gəlir və gedir, ümumi sxemə öz töhfələrini verir – hələ də markanızın ardıcıllığı amok oldu. Bəzi düymə bağlantısı mavidir; digərləri yaşıldır. Bir alt başlıq 26px ölçüdə; başqa bir alt başlıq 24px. Loqotipinizin bir səhifədə çox həddindən artıq padding var, digərində isə çox az padding var …

Veb saytınızın sahibi olaraq artıq lövhənizdə çox şey var, beləliklə marka üçün yüzlərlə dizayn qaydalarının hamısını başınızın içərisində gizli saxlamağı necə gözləmək olar? Yeni işə götürülmüş bir dizaynerə əvvəlki dizaynerinizin artıq qurduğu hər bir stil qaydasını necə söyləməyi xatırlayırsınız? Sadəcə edə bilməyəcəyiniz ehtimal olunur.

Bir stil bələdçisi gəlir.

Bir Stil Bələdçisi nədir və Niyə mənim işim birinə lazımdır?

Bir üslub bələdçisi dizayn, ton, səs və şəxsiyyətin ardıcıl istifadəsi ilə markanı müəyyənləşdirən vahid bir mənbədir.

Yaxşı bir üslub bələdçisi, markanız üçün son istinad kimi çıxış edəcəkdir. Bu bir plandır. Mətbəə qaydaları, rənglər, tərtibat, loqotip istifadəsi, səs tonu, məzmun qaydaları, istifadəçi təcrübəsi və markanızla ictimai qarşılıqlı əlaqələrin bütün istiqamətlərini müəyyənləşdirir..

Üslub bələdçiləri (və ya marka kitabları) anlayışı yeni bir şey deyil, baxmayaraq ki, veb saytlar üçün tətbiqi daha son isti mövzudur. Çap dünyasında tez-tez rast gəlinən, hər bir böyük qəzet biçimlendirme ardıcıllığını qorumaq üçün bir üslub bələdçisi saxlayır. Bir markanın fərqli rənglərinin televiziya reklamlarından tutmuş yarı yük maşınlarına qədər olan hər bir şeyin dəqiq spesifikasiyalara uyğun olduğu böyük korporasiyalar üçün hərtərəfli stil bələdçi mütləq bir zərurətdir və bu da ola bilər açıq kütləvi ölçüdə!

Bunu oxuduğunuz təqdirdə, işiniz hələ bir miqyasa çatmamış, markanın şəxsiyyətini dəstəkləmək üçün bütün marketinq bölməsinə ehtiyacınız olacaqdır. Lakin, üslub bələdçisi yaratmaq üçün heç vaxt tez deyil. Artıq markanızın prinsiplərini həll etmək, işiniz yalnız özünüzdən daha çox inkişaf etdikdə sizi potensial bəlalardan xilas edəcəkdir.

Üslub bələdçisi yaratmaq vaxtı gələndə

Ümid edirəm bir stil bələdçisinin olmamasının nəticələrini artıq təsəvvür edə bilərsiniz. Brendinizin necə ifadə ediləcəyi və ifadə edilməməsi barədə əvvəlcədən müəyyən edilmiş qaydalar olmadan, işə götürdüyünüz hər hansı bir dizayner və ya inkişaf etdirici veb saytınıza öz fərdi toxunuşlarını və ya şərhlərini əlavə edə bilər, nəticədə bir yerdə bütöv deyil, stilistik palçıq yaradacaqdır..

İnternet işiniz bir stil bələdçisindən və nə vaxt:

  • Komanda üzvlərinə və ya üçüncü tərəflərə tapşırıqlar verməyə başlayırsınız. Bir üslub bələdçisi hər kəsi eyni səhifədə saxlayacaq və töhfələrin standart olmasını təmin edəcəkdir.
  • Veb saytınız olduqca böyüdü (və prosesdə tənzimlənməmiş) və CSS faylı unutduğunuz onsuz da mövcud olanları əvəz etmək üçün yeni üslub əlavə etməkdən daha çox böyüdü..
  • Veb saytınıza yeniliklər etmək prosesini nizamlamalısınız. Yenidən əlavələrin tez bir zamanda həyata keçirilməsini və marka ilə uyğunlaşdırılmasını təmin etmək üçün geri qayıtmaq üçün təlimatlar hazırlayır.

Üslub bələdçiniz veb saytınızda mövcuddur

Üslub bələdçinizi qurmağa başlamazdan əvvəl mövcud olduğu yeri təyin etməlisiniz. Ən yaxşı təcrübə veb saytınızda ya da bir kataloq olaraq öz ərazisini ayırmaqdır (www.yourdomain.com/styleguide) və ya subdomain olaraq (styleguide.yourdomain.com).

SİZ DİQQƏT: Unutmayın ki, stil bələdçiniz veb saytınızın qalan hissəsi ilə eyni CSS faylını bölüşməlidir. Bu, dizayn daxilindəki yeniləmələrin hər şeyi vahid və ardıcıl tutaraq dərhal digərində əks olunmasını təmin edir.

Stil Bələdçinizin Öz Layihəsi var

Bunu yoldan çıxartaq: stil bələdçinizi yaratmaq vaxt aparacaq. Ancaq içinizə qoyduğunuz enerjini uzun müddətə (və pula) qənaət edəcək bir investisiya kimi düşünün.

Yalnız veb saytınızda olduğu kimi, stil bələdçiniz asanlıqla izlənilən bir nizamla istifadəçi təcrübəsini nəzərə alır. Əsasən müstəqil bir veb saytı olaraq işləyəcək, tez-tez bir ilə naviqasiya menyusu saytınızın hər elementini vacib bir məntiqi irəliləyişdə sadalayır. Bu elementlər əsas veb saytında olacağı kimi təqdim olunur və səciyyələndirilir, əlbəttə ki, kontekstual qaydalar və əşyaların necə tərtib edilməsinin səbəbləri ilə..

AKSİYADA GÖR: İstinad üçün ən populyar və hərtərəfli üslub bələdçilərindən biridir Starbucks. Əsas bir şey əldə etmək üçün ilhama ehtiyacınız varsa, onlara baxın.

Stil bələdçiləri və s. Nümunə kitabxanaları

“Stil bələdçisi” və “naxış kitabxanası” ifadələri tez-tez bir-birinin ardınca istifadə olunur və sadəliyi üçün “üslub bələdçisi” olaraq müraciət edib nümunələri təqdim edəcəyəm. Ancaq bunların fərqində olmağınız lazım olan ikisi arasında vacib fərqlər var.

Nümunə kitabxanaları sadəcə dizayn elementlərini sayt və ya tətbiq daxilində necə istifadə ediləcəyini izah etmədən təqdim edəcəkdir. Stil bələdçiləri marka təqdim edərkən niyə qaydalara riayət etdiyinizi izah edərək seçilmiş dizayn parametrlərindən istifadənin ən yaxşı təcrübələrini sizə istiqamətləndirəcəkdir.

Əsasən, bir nümunə kitabxanası ilə H2 etiketləri üçün stil seçimləri təqdim oluna bilər; Bununla birlikdə, bir üslub bələdçisinin nəyi əskikdir: hər bir H2 etiketinin hansı kontekstdə istifadə edilməsinə dair təlimat.

Stil bələdçisi necə yaradılır

Bütün qutuları seçən bir üslub bələdçisi hazırlamaq üçün aşağıdakı addımları sadalayın:

Addım 1. Brendinizin mahiyyətini müəyyənləşdirin

Tədqiqat üçün vaxt ayırın və markanın müəyyən xüsusiyyətlərini düşünün və sonra hamısını bir və ya iki abzas halına gətirin. Bir missiya bəyanatı, dəyərləriniz haqqında məlumat və bir neçə məlumat verin açar sözlər bütün dizayn və məzmun töhfələrinin təqib edilməsi üçün zəmin hazırlayacaqdır. Böyük şəkil eyni zamanda markanın tonunu və xarakterini asanlıqla müəyyənləşdirməyə kömək edə bilər.

Addım 2. Loqotipinizin qaydalarını təyin edin

Loqotipinizin ölçüsü, yerləşdirilməsi və rəngləri markanın əks olunmasında əsas yer tutur. Burada da tez-tez görəcəyiniz yerdir Etməli və etməməli olduğun şeylər bu, şirkətinizin dünyaya vizual olaraq necə təqdim olunacağını çox aydın göstərir.

Twitter logo bələdçi nümunəsiTwitter loqotipindən düzgün istifadə ilə bağlı geniş qaydaları ilə səhv etməyə yer qoymur.

Addım 3. Tipoqrafiya qurun

Tipoqrafiya, markanız üçün çox aydın bir xarakter duyğusunu təsvir edir. Başlıqların fərqli ölçüləri, aralarındakı boşluq miqdarı və yazı tipinin tərzi hamısı veb saytınıza müəyyən tonal keyfiyyət verir. Brendinizin mətbəə quruluşu haqqında daha çox məlumat əldə edə bilərsiniz.

BBC mətbəə bələdçisi nümunəsiBBC tipografik elementlərinin işarələnməsini və düzülüşünü bölüşür – müxtəlif mənalı müxtəlif başlıqlardan istifadə edən böyük bir xəbər təşkilatı üçün zərurət..

Addım 4. Rəng palitrasında qərar verin

Rəng yalnız markanızın vizual bir təmsilindən daha çox ola bilər – istifadəçilərinizin psixologiyasına təsir edə bilər. Qırmızı rəngin müəyyən bir kölgəsi daha az rəng və bilinçaltı bir əlaqə ola bilər müəyyən bir yumşaq içki.

Mozilla rəng bələdçisi nümunəsiMozilla proqramlarının rəng palitrasını təyin edərək markasını ardıcıl saxlayır. Rəng kodlarını HEX, Pantone, HSB, CMYK və RGB daxil etməyiniz vacibdir; markanızın kompüter ekranından kənarda olması lazım gəlsə, buna hazır olacaqsınız!

Addım 5. Doğru İkonoqrafiyanı təyin edin

Nişanlar dərhal əldə edilə bilən qrafiklərə bir fikir qaynatır. Arxasında gizlədiləcək çox şey yoxdur; bir nişan hətta kilterdən bir qədər kənarda olsa, nəzərdə tutulan effekti öldürəcəkdir. Bəzi nişanlar digərlərinə nisbətən daha dizaynlıdır; bu bir stili digərindən yaxşı hala gətirmir, sadəcə ardıcıl olmaları lazımdır. Qeyri-adi ikonoqrafiyadan çəkinin.

IBM icon stil bələdçi nümunəsiIBM-in icon kitabxana öz ikonoqrafiyası üçün kontekstə əsaslanan tədbirlər təqdim edir. Onların hamısının monoxrom, düz və sadə bir oxşar üsluba necə əməl etdiyinə diqqət yetirin.

Addım 6. Doğru görüntünü təyin edin

Marka, canlı mənzərə fotoşəkili və ya əl ilə çəkilmiş cizgi filmi hansı görüntüləri ən yaxşı dəstəkləyir? Şirkətinizi stok fotoşəkilləri ilə təmsil edəcəksiniz, yoxsa bənzərsiz bir şey çatdırmaq üçün bir fotoqraf işə götürəcəksiniz? Vəziyyətiniz üçün ən yaxşı nə varsa, düşünün duyğu markanızın ünsiyyət qurmaq istədiyini söylədi.

Addım 7: Layout və Grid Sistemini yaradın

Bu, planlaşdırmağınızın mütləq ödəyəcəyi yerdir, çünki arayış olmadan gələcək səhifə planlarını yaratmağa çalışmaq ümumiyyətlə gülünc vaxt tələb edir. Layihəni saxlamağı unutmayın maye çox ekran ölçüləri üçün.

MailChimp-in grid bələdçisi nümunəsiMailChimp əsas məzmunlarının bir şəbəkədə necə qurulduğunu izah edir. Tıxac və boşluq üçün xüsusi piksel miqdarı, istifadəçinin ekran ölçüsündən asılı olmayaraq, gridin doğru olduğunu təmin edir.

Addım 8: Elementləri tərtib edin

Veb saytınızın əhatəsindən asılı olaraq, videolardan bloq şərhlərinə qədər e-ticarət maddələrinə qədər yüzlərlə ayrı elementə sahib ola bilərsiniz. Şübhəsiz ki, hər hansı bir veb saytında yer almayacaq ən yaygın olanlar bunlardır:

Formalar

Giriş sahələrinizin və etiketlərin rəng və ölçüsü haqqında deyil; müvəffəqiyyətli forma göndərmə, səhv və ya xəbərdarlıq mesajları verildiyi təqdirdə göstəriləcək mətni də daxil etməlisiniz.

Düymələr

Rəng palitrası və mətbəə bunların çoxuna əhəmiyyət verəcəkdir. Düymələrinizin rəng və ölçülməsi müxtəlif şeyləri ifadə edə bilər: düymələr bağlantıları, təqdim düymələri, CTA düymələri, ləğv düymələri, menyu düymələri və s..

Menyular

Yenə də qurduğunuz şeylərin əksəriyyəti burada çox şey əldə edəcəkdir. Boşluq və mətn hizalanması müəyyənləşdirmək üçün əsas üslublardır. Loqotipiniz Ana səhifə düyməsi rolunu oynayacaqmı? Daha yaradıcı bir şey üçün tanış “hamburger simvolu” qazmısınız??

Modallar

Yaxşı bir üslub bələdçisi yalnız modallarınızın dizaynını (ya da pop-up) göstərməyəcək, həm də onların görünüşü üçün şərtləri də təmin edəcəkdir. Modalı görmək üçün istifadəçi hansı hərəkətləri etməlidir? Modal istifadəçi hərəkətini necə razı salacaq?

Qarşılıqlı əlaqə və animasiya effektləri

İnanın ya da inanmıram, markanız hover effektinin millisekundları qədər dəqiqələrlə də ifadə edilə bilər. Qiyməti olan bir mətn bağlantısı {animasiya: 500ms asanlıqla; } {animasiya ilə müqayisədə fərqli bir şəxsiyyət və aktuallıq hissi keçirir: 100ms xətti; }.

Veb saytınızdakı fərqli bağlantılar arasındakı animasiya vaxtı ilə uyğunsuzluq istifadəçi təcrübəsini qarışdıra bilər, buna görə də animasiyalarınızın və qarşılıqlı əlaqənizin hansı mesajı ötürdüyünü planlaşdırmağa və bu qaydalara sadiq olmağa vaxt ayırın..

Məzmunu unutma

Mən buna xüsusi diqqət yetirirəm, çünki məzmunun və surətin stil bələdçilərinə daxil edilməsi vacibdir, lakin çox vaxt gözdən yayınır. Daha əvvəl eşitdiyiniz kimi, məzmunu veb saytınızın uğurunun yeganə ən böyük hərəkətverici qüvvəsidir. Faydalı, orijinal və yaxşı yazılmış məzmun, istifadəçilər üçün olduqca düymələri və ya zövqlü menyulardan daha dərin məmnuniyyəti qazanacaqdır. Buna görə dizaynerlərinizə əlavə olaraq kopirayterlərinizə marka qaydalarını təqdim etmək çox vacibdir.

Böyük məzmun yalnız yaxşı yazılmır, ünsiyyət qurmalıdır səston ardıcıl bir yazı üslubu ilə markanızın. Bu iki əsas söz ələ keçirmək üçün çox vacibdir, MailChimp hətta təyin etdiklərini belə adlandırdı məzmun tərzi bələdçisi onlardan sonra.

Bu misaldan, MailChimp-in nüsxə müəlliflərini nəzərə alaraq markasının xarakterinə uyğun gələn yazı tərtib etmək üçün necə istiqamətləndirdiyini görə bilərsiniz. duyğular istənilən vaxt istifadəçilərindən.

Məzmun üslubu bələdçiləri bir İngilis professorundan gözlədiyiniz qrammatik qaydalar da daxil olmaqla olduqca mükəmməl ola bilər. Üçün bələdçi Tuts+ yalnız bunu edir. (Onların məzmun bələdçisi hətta mənə deyirlər ki, “Tutsplus” deyil, “Tuts +” kimi yaz!)

Nəticə

Stil bələdçiləri, onlayn işinizi genişləndirmək üçün fərziyyəni götürürlər. Yerdə olan bu vacib resursla, yeni marka üzvlərinizi markanızın qaydalarına uyğun sürətləndirmək üçün artıq çəkişməyəcəksiniz.

Xaricdə milyonlarla müəssisə var, ancaq sizin yalnız biriniz var. Təqdim edildiyinizə qəti olaraq, özünəməxsusluğunuzun dəyərini qoruyun. Gələcəkdə tanınacaq bir marka üçün indi bir stil bələdçisi işə götür.

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