Ինչպես ստեղծել կայքի ոճի ուղեցույց ձեր ապրանքանիշի համար

Իմացեք, թե ինչպես ոճային ուղեցույցը կարող է ձեր ապրանքանիշը տեսողական և տոնայնորեն հետևողական պահել ձեր կայքն աճելիս.


Վեբ կայքի ոճի ուղեցույց ստեղծելը

Եկեք սցենար նկարենք այստեղ: Ասեք, որ ձեր վեբ կայքը արագորեն աճում է ինչպես իր բովանդակության շրջանակներում, այնպես էլ այն մարդկանց թվաքանակով, որոնք դուք պետք է ներս բերեք այն պահպանելու համար: Դուք վարձել եք դիզայներներ, ծրագրավորողներ, հեղինակների խմբագրում, սոցիալական մեդիայի մենեջերներ. Յուրաքանչյուր մարդ գալիս և գնում է ՝ իր կտորը նպաստելով ընդհանուր գրանշային սխեմային. Այնուամենայնիվ ձեր ապրանքանիշի հետևողականությունն առաջացել է ամոկ: Կոճակի որոշ հղումներ կապույտ են; մյուսները կանաչ են: Մեկ ենթավերնաչափ չափը 26px է; մեկ այլ ենթավերնագիր 24px: Ձեր լոգոն չափազանց շատ լցված է դրա շուրջը, մի էջում, բայց մեկ այլ էջում չափազանց փոքր քանակությամբ լեցուն…

Որպես ձեր կայքի սեփականատեր, դուք արդեն շատ եք ձեր ափսեի մեջ, ուստի ինչպե՞ս կարող եք ակնկալել, որ ձեր ապրանքանիշի համար նախատեսված հարյուրավոր դիզայնի կանոններ պահեք ձեր գլխի ներսում փակված բոլոր ապրանքանիշերի համար: Ինչպե՞ս եք հիշում նոր վարձու դիզայներներին պատմել յուրաքանչյուր ոճային կանոն, որը արդեն հաստատել է ձեր նախորդ դիզայները: Հավանական է, որ դուք պարզապես չեք կարող.

Ահա, երբ գալիս է ոճային ուղեցույց.

Ո՞րն է ոճի ուղեցույցը և ինչու՞ է պետք իմ բիզնեսին մեկը?

Ոճային ուղեցույցը միասնական ռեսուրս է, որը սահմանում է ապրանքանիշը ձևավորման, տոնայնության, ձայնի և ինքնության հետևողական օգտագործման միջոցով.

Լավ ոճի ուղեցույցը կգործի որպես ձեր ապրանքանիշի վերջնական հղում: Դա նախագիծ է: Այն սահմանում է տպագրության կանոնները, գույները, դասավորությունը, պատկերանշանի օգտագործումը, ձայնի տոնայնությունը, բովանդակության ուղեցույցը, օգտագործողի փորձը և ձեր ապրանքանիշի հետ հանրային շփման գրեթե բոլոր կողմերը:.

Ոճային ուղեցույցների գաղափարը (կամ ապրանքանիշերի գրքերը) նորություն չէ, չնայած կայքերի համար նրանց դիմումը ավելի թեժ թեմա է: Տպագիր աշխարհում, ընդհանուր առմամբ, յուրաքանչյուր գլխավոր թերթ պահպանում է ոճային ուղեցույց ՝ ձևաչափման հետևողականությունը պահպանելու համար: Խոշոր կորպորացիաների համար, որտեղ ապրանքանիշի տարբեր գույները պետք է ունենան ճշգրիտ բնութագրեր որևէ բան `հեռուստատեսային գովազդներից մինչև կիսամյակային բեռնատարների կողմերը, համապարփակ ոճի ուղեցույցը բացարձակ անհրաժեշտություն է և այն կարող է դառնալ շիտակ զանգված չափի մեջ!

Հնարավորությունն այն է, որ եթե դուք կարդում եք դա, ապա ձեր բիզնեսը դեռ չի հասել այնպիսի մասշտաբի, որտեղ ձեզ հարկավոր է ամբողջ մարկետինգային բաժին `ձեր ապրանքանիշի ինքնությունը պաշտպանելու համար: Սակայն, երբեք ո՛չ վաղ է ոճային ուղեցույց ստեղծելը. Այժմ ձեր ապրանքանիշի սկզբունքների հիմնավորումը ձեզ կփրկի հնարավոր ճահճից, երբ ձեր բիզնեսը վերաճի ավելի շատերի, քան դուք միայնակ կարող եք հետևել.

Երբ ժամանակն է ստեղծել ոճի ուղեցույց

Ես գրազ եմ, որ դուք արդեն կարող եք պատկերացնել ոճային ուղեցույց չունենալու հետևանքները: Առանց նախանշված ցուցումների, թե ինչպես պետք է և չպետք է արտահայտվի ձեր ապրանքանիշը, ձեր վարձած ցանկացած դիզայներ կամ ծրագրավորող կարող է ավելացնել ձեր անձնական հպումն կամ մեկնաբանությունը ձեր վեբ կայքին, որը, ի վերջո, կավարտվի ոճային ցեխի ստեղծման, այլ ոչ թե համախմբված ամբողջության:.

Ձեր առցանց բիզնեսը կօգտվի ոճային ուղեցույցից, եթե և երբ.

  • Դուք սկսում եք խնդիրների հանձնում թիմի անդամներին կամ երրորդ անձանց: Ոճային ուղեցույցը բոլորին կպահպանի նույն էջում և կապահովի ներդրումների ստանդարտացումը.
  • Ձեր կայքը դարձել է բավականին մեծ (և գործընթացում անօրինականացված է), և ձեր CSS ֆայլը դուրս է եկել վերահսկողությունից `նոր ոճեր ավելացնելուց` արդեն իսկ գոյություն ունեցողները փոխարինելու համար:.
  • Դուք պետք է պարզեցնեք ձեր վեբ կայքում թարմացումներ կատարելու գործընթացը: Նոր լրացումներն ապահովելու համար նոր ուղեցույցներ հաստատելով ՝ արագորեն իրականացվում և ապրանքանիշի հետ համահունչ են.

Ձեր ոճի ուղեցույցը գոյություն ունի ձեր կայքում

Նախքան սկսեք ձեր ոճային ուղեցույցը կառուցելը, ձեզ հարկավոր է նշանակել այնտեղ, որտեղ այն գոյություն ունի: Լավագույն փորձը ձեր կայքի ներսում սեփական տարածքի տեղաբաշխումն է ՝ կամ որպես գրացուցակ (www.yourdomain.com/styleguide) կամ որպես ենթադոմեյն (styleguide.yourdomain.com).

ՀԱՄԱՐ ՆՇՈՒՄ. Հիշեք, որ ձեր ոճի ուղեցույցը պետք է համօգտագործի նույն CSS ֆայլը, ինչպես ձեր կայքի մնացած մասը: Սա ապահովում է, որ դիզայնի թարմացումները մեկի ներսում անմիջապես արտացոլվեն մյուսում ՝ ամեն ինչ պահպանելով միասնական և հետևողական.

Ձեր ոճի ուղեցույցն ունի իր սեփական դասավորությունը

Եկեք դուրս գանք այս ճանապարհից. ձեր ոճային ուղեցույց ստեղծելը ժամանակ է պահանջում. Բայց հաշվի առեք ձեր ներդրած էներգիան որպես ներդրում, որը ձեզ կփրկի ավելի շատ ժամանակ (և գումար) երկարաժամկետ հեռանկարում.

Ձեր կայքի նման, ձեր ոճային ուղեցույցը հաշվի է առնում օգտագործողի փորձը `հեշտությամբ հետևելու դասավորությանը: Այն ըստ էության գործելու է որպես ինքնուրույն կայք, հաճախ `ա նավարկության ընտրացանկ որ թվարկում է ձեր կայքի յուրաքանչյուր տարր ՝ կարևորության տրամաբանական առաջընթացով: Այս տարրերը ներկայացվում և ձևավորվում են ճիշտ այնպես, ինչպես դրանք կլինեին հիմնական կայքում, իհարկե, միայն համատեքստային ուղեցույցներով և պատճառներով, թե ինչու են իրերը ձևավորվում այնպես, ինչպես կան:.

ԱՅՍՏԵՂ ԱԿՏԻՎՈՒՄ Հղման համար ամենատարածված և համապարփակ ոճային ուղեցույցներից մեկը պատկանում է Starbucks- ը. Նայեք նրանց, եթե ձեզ հարկավոր է ոգեշնչում հիմնական ինչ-որ բան ձեռք բերելու համար.

Ոճերի ուղեցույցներ ընդդեմ Նախշերով գրադարաններ

«Ոճային ուղեցույց» և «օրինակ գրադարան» տերմինները հաճախ օգտագործվում են փոխանակելի, և հանուն պարզության ես կանդրադառնամ և կներկայացնեմ երկուսն էլ որպես «ոճի ուղեցույց»: Այնուամենայնիվ, երկուսի միջև կան կարևոր տարբերություններ, որոնց մասին պետք է տեղյակ լինեք.

Նախշերով գրադարաններ պարզապես կներկայացնի դիզայնի տարրերը `առանց բացատրության, թե ինչպես դրանք պետք է օգտագործվեն կայքի կամ ծրագրի մեջ. Ոճերի ուղեցույցներ պատշաճ կերպով կուղեկցի ձեզ ընտրված դիզայնի պարամետրերի օգտագործման լավագույն փորձի վերաբերյալ `բացատրելով, թե ինչու են ապրանքանիշը ներկայացնելիս պետք է պահպանել որոշակի կանոններ.

Ըստ էության, օրինակելի գրադարանով ձեզ կարող են ներկայացվել H2 պիտակների ոճային տարբերակներ. Այնուամենայնիվ, այն, ինչ բացակայում է, այն է, ինչ տալիս է ոճի ուղեցույցը. հրահանգ ՝ ինչ համատեքստում պետք է օգտագործվի յուրաքանչյուր հատուկ H2 հատկորոշիչ.

Ինչպես ստեղծել ոճային ուղեցույց

Բոլոր տուփերը շոշափող ոճային ուղեցույց պատրաստելու համար ահա այն քայլերը, որոնք դուք կձեռնարկեք.

Քայլ 1. Սահմանեք ձեր ապրանքանիշի էությունը

Ժամանակ առեք ուսումնասիրելու և խորհելու ձեր ապրանքանիշի բնութագրիչ բնութագրերը, այնուհետև այն եռացրեք մեկ կամ երկու պարբերությունների մեջ: Ներկայացրեք առաքելության հայտարարություն, տեղեկատվություն ձեր արժեքների վերաբերյալ և մի քանիսը հիմնական բառեր դա հիմք կդնի նախագծման և բովանդակության բոլոր ներդրումների համար, որոնք պետք է հետևեն: Մեծ նկար կարող է նաև օգնել հեշտությամբ հաստատել ձեր ապրանքանիշի երանգն ու բնավորությունը.

Քայլ 2. Սահմանեք ձեր պատկերանշանի կանոնները

Ձեր պատկերանշանի չափը, տեղադրումը և գույները կարևոր նշանակություն ունեն ձեր ապրանքանիշի արտացոլման մեջ: Ահա, որտեղ դուք նույնպես հաճախ կտեսնեք Դոս և Դոն որոնք շատ պարզ են դարձնում, թե ինչպես պետք է ձեր ընկերությունը տեսողականորեն ներկայացվի աշխարհին.

Twitter լոգոյի ուղեցույցի օրինակTwitter- ը Սխալների տեղ չի թողնում իրենց լոգոյի պատշաճ օգտագործման հետ կապված իրենց լայն կանոններով.

Քայլ 3. Ստեղծեք տպագրությունը

Տպագրությունը պատկերում է ձեր ապրանքանիշի համար բնավորության շատ շոշափելի զգացողություն: Ձեր Վերնագրերի տարբեր չափսերը, դրանց միջև եղած տարածության քանակը և մուտքի ձևի ոճը, բոլորը առանձնահատուկ տոնային որակ են հաղորդում ձեր կայքին: Դուք կարող եք ավելին իմանալ ձեր ապրանքանիշի տպագրությունը սահմանելու մասին.

BBC տպագրության ուղեցույցի օրինակBBC- ն կիսում է դրանց տպագրական տարրերի մակնշումը և դասավորությունը. անհրաժեշտություն մեծ լրատվական կազմակերպության համար, որն օգտագործում է տարբեր նշանակության տարբեր խորագրեր.

Քայլ 4. Որոշեք ձեր գունային գունապնակը

Գույնը կարող է լինել ավելին, քան պարզապես ձեր ապրանքանիշի վիզուալ ներկայացումը. Այն կարող է ազդել ձեր օգտագործողների հոգեբանության վրա: Կարմիրի որոշակի ստվեր նույնիսկ կարող էր դառնալ ավելի քիչ գույն և ավելի ենթագիտակցական հղում որոշակի փափուկ ըմպելիք.

Mozilla գույնի ուղեցույցի օրինակՄոզիլա պահպանում է իր ապրանքանիշը հետևողական ՝ որոշելով իրենց ծրագրաշարի գունային պալիտրա: Կարևոր է, որ գունային կոդերը ներառեք HEX, Pantone, HSB, CMYK և RGB; եթե առիթ լինի, որ ձեր ապրանքանիշը գոյություն ունենա համակարգչային էկրանից այն կողմ, դուք պատրաստ կլինեք դրան!

Քայլ 5. Որոշեք ճիշտ պատկերապատումը

Սրբապատկերները գաղափարը եռացնում են անմիջապես հասանելի գրաֆիկայի մեջ: Թաքնվելը շատ բան չունի: եթե պատկերակը նույնիսկ փոքր-ինչ հեռու լինի, դա կսպանի նախատեսված էֆեկտը: Որոշ սրբապատկերներ շատ ավելի դիզայներական են, քան մյուսները; սա չի ստեղծում մի ոճ ավելի լավ, քան մյուսը, բայց դրանք պարզապես պետք է հետևողական լինեն: Խուսափեք անհարկի պատկերապատումից.

IBM պատկերակի ոճի ուղեցույցի օրինակIBM- ն է պատկերասրահը նրանց պատկերապատման համար ապահովում է համատեքստում հիմնված գործողություններ: Ուշադրություն դարձրեք, թե ինչպես են նրանք բոլորը հետևում նմանատիպ ոճին, որը մոնոխրոմ է, հարթ և պարզունակ.

Քայլ 6. Որոշեք ճիշտ պատկերները

Ո՞ր պատկերներն են լավագույնս պաշտպանում ձեր ապրանքանիշը, լանդշաֆտի վառ լուսանկարը կամ ձեռքի գծապատկերային մուլտֆիլմը: Դուք կներկայացնեք ձեր ընկերությունը ֆոնդային լուսանկարների միջոցով, կամ վարձելու եք լուսանկարիչ `եզակի ինչ-որ բան մատուցելու համար: Ինչ էլ որ լավ լինի ձեր իրավիճակի համար, հաշվի առեք հույզ որ ձեր ապրանքանիշը ցանկանում է շփվել.

Քայլ 7. Կառուցեք դասավորությունը և ցանցային համակարգը

Սա այն դեպքում, երբ ձեր պլանավորումն անպայման կվճարի, քանի որ առանց հղման ապագա էջերի դասավորություններ ստեղծելը, սովորաբար, ծիծաղելի ժամանակ է պահանջում: Մի մոռացեք պահպանել դասավորությունը հեղուկ բազմաթիվ էկրանի չափերի համար.

MailChimp- ի ցանցային ուղեցույցի օրինակMailChimp սահմանում է, թե ինչպես է դրանց հիմնական բովանդակությունը կառուցվածքային ցանցում: Gանցի և լիցքաթափման համար հատուկ պիքսելային քանակները ապահովում են, որ ցանցը մնում է իրական, անկախ նրանից `օգտագործողի էկրանի չափը.

Քայլ 8. Ոճը տարրերը

Կախված ձեր կայքի շրջանակից, կարող եք հաշվի առնել հարյուրավոր առանձին տարրեր ՝ տեսանյութերից մինչև բլոգի մեկնաբանություններ մինչև էլեկտրոնային առևտրի առարկաներ: Ահա ամենատարածվածները, որոնք, անկասկած, կներառվեն ցանկացած կայքում.

Ձևաթղթեր

Խոսքը միայն ձեր մուտքային դաշտերի և պիտակների գույնի և չափի մասին չէ. Դուք նաև պետք է ներառեք այն տեքստը, որը պետք է ցուցադրվի հաջող ձև ներկայացնելու, սխալի կամ ազդանշանային հաղորդագրությունների դեպքում.

Կոճակները

Ձեր գունապնակը և տպագրությունը հոգ կտանեն դրանցից շատերի մասին: Ձեր կոճակների գույնը և չափը կարող են նշանակել տարբեր բաներ. Կան կոճակի հղումներ, ներկայացնել կոճակներ, CTA կոճակներ, կոճակները չեղյալ հայտարարելը, ընտրացանկի կոճակները և այլն:.

Ընտրացանկեր

Կրկին, ձեր արդեն հաստատած մեծ մասը ձեզ ամենաշատ ճանապարհ կստանա այստեղ: Տարածությունը և տեքստի դասավորվածությունը ճշգրտման հիմնական ոճերն են: Արդյո՞ք ձեր պատկերանշանը հանդես կգա որպես Գլխավոր կոճակ: Դուք խճճում եք ծանոթ «համբուրգերի պատկերակը» ՝ ավելի ստեղծագործ ստեղծագործելու համար?

Մոդալներ

Լավ ոճի ուղեցույցը ոչ միայն ցույց կտա ձեր մոդալների (կամ թռուցիկների) ձևավորումը, այլև կսահմանի դրանց արտաքին տեսքի պայմանները: Ինչ գործողություններ պետք է ձեռնարկի օգտագործողը `մոդալը տեսնելու համար: Ինչպե՞ս է մոդալը պատրաստվում համոզել գործողությունները օգտվողի կողմից?

Փոխազդեցության և անիմացիոն էֆեկտներ

Հավատացեք, թե ոչ, ձեր ապրանքանիշը կարող է մանրամասնորեն արտահայտվել նույնքան րոպե, որքան սավառնի էֆեկտի միլիսեկեկները: Տեքստի հղում արժեքի {անիմացիայի հետ. 500ms հեշտությամբ; } փոխանցում է տարբեր անհատականություն և հրատապության զգացում `համեմատած ation անիմացիայի. 100ms գծային; }.

Ձեր կայքի տարբեր հղումների միջև անիմացիայի ժամանակի անհամապատասխանությունը կարող է խառնել օգտագործողի փորձը, այնպես որ ժամանակ վերցրեք պլանավորելու, թե ինչ հաղորդագրություն է ձեր անիմացիաներն ու փոխազդեցությունները փոխանցում և մնում այդ կանոններին:.

Մի մոռացեք բովանդակության մասին

Հատուկ ուշադրություն եմ դարձնում այս մեկին, քանի որ բովանդակության և պատճենների ներառումը ոճային ուղեցույցներում նույնքան կարևոր է, բայց հաճախ անտեսվում է: Ինչպես նախկինում լսել եք, բովանդակություն ձեր կայքի հաջողությունների միակ ամենամեծ շարժիչ ուժն է: Օգտակար, օրիգինալ և լավ գրված բովանդակությունը օգտվողներին ավելի խորը գոհունակություն կբերի, քան գեղեցիկ կոճակները կամ ֆանտաստիկ ընտրացանկերը: Այդ իսկ պատճառով խիստ կարևոր է ապրանքային նշանների ուղեցույցներ փոխանցել ձեր հեղինակների հեղինակներին ՝ բացի ձեր դիզայներներից.

Մեծ բովանդակությունը ոչ միայն լավ գրված է, այլև պետք է հաղորդակցվի ձայն և տոնով ձեր ապրանքանիշի ՝ գրելու հետևողական ոճով: Այս երկու հիմնական բառերը շատ կարևոր են գրավելու համար, MailChimp- ը նույնիսկ անվանեց իրենց նշանակվածը բովանդակության ոճի ուղեցույց նրանցից հետո.

Այս օրինակից դուք կարող եք տեսնել, թե ինչպես MailChimp- ը ուղղորդում է իրենց հեղինակների հեղինակներին ձևակերպելու այնպիսի ձևակերպումներ, որոնք համահունչ են իրենց ապրանքանիշի կերպարին `հաշվի առնելով հույզեր ցանկացած պահի իրենց օգտագործողների կողմից.

Բովանդակության ոճի ուղեցույցները կարող են լինել բավականին սպառիչ, նույնիսկ ներառյալ քերականական կանոնները, որոնք կսպասեիք անգլիացի պրոֆեսորի կողմից: Ուղեցույց Կտրուկներ+ անում է հենց դա: (Նրանց բովանդակության ուղեցույցը նույնիսկ ինձ ասում է, որ այն գրեք որպես «Tuts +» և ոչ թե «Tutsplus»:)

Եզրակացություն

Ոճային ուղեցույցները կռահում են ձեր առցանց բիզնեսի մասշտաբից: Այս կենսական կարևոր ռեսուրսի միջոցով այլևս չեք մագլցեք թիմի նոր անդամներին արագորեն բռնելու ձեր ապրանքանիշի կանոնները.

Այստեղ կան միլիոնավոր բիզնեսներ, բայց դու միայն մեկը կա: Պաշտպանեք ձեր եզակիության արժեքը `ամուր լինելով ձեր ներկայացրածի հետ: Ներկայացրեք ոճային ուղեցույց այժմ այն ​​բրենդի համար, որը ճանաչելի կմնա ապագայում.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me