Paano Gumawa ng Gabay sa Estilo ng Website para sa Iyong Tatak

Alamin kung paano mapapanatili ng isang gabay na istilo ang iyong tatak nang biswal at tonally pare-pareho habang lumalaki ang iyong website.


Paglikha ng isang gabay sa estilo ng website

Ipinta ang isang senaryo dito. Sabihin ang iyong website ay mabilis na lumalaki kapwa sa saklaw ng nilalaman at sa bilang ng mga tao na kailangan mong magdala ng onboard upang mapanatili ito. Nagtrabaho ka ng mga taga-disenyo, developer, copywriter, tagapamahala ng social media — ang buong shebang. Ang bawat tao ay darating at napupunta, na nag-aambag ng kanilang piraso sa pangkalahatang engrandeng iskema – gayon pa man ang pagkakapare-pareho ng iyong tatak ay tumakbo sa amok. Ang ilang mga link na pindutan ay asul; ang iba ay berde. Ang isang subheading ay 26px ang laki; ang isa pang subheading ay 24px. Ang iyong logo ay masyadong maraming padding sa paligid nito sa isang pahina pa masyadong maliit na padding sa isa pa …

Bilang may-ari ng iyong website mayroon ka nang labis sa iyong plato, kung paano maaari mong asahan na mapanatili ang daan-daang mga panuntunan sa disenyo para sa iyong tatak lahat ay naka-lock sa loob ng iyong ulo? Paano mo naaalala na sabihin sa isang bagong upa na taga-disenyo ng bawat solong istilo ng estilo na naitatag na ng dati mong taga-disenyo? Malamang na hindi ka lang makakaya.

Iyon ay kung saan pumapasok ang isang gabay sa estilo.

Ano ang Isang Gabay sa Estilo at Bakit Kinakailangan ang Aking Negosyo?

Ang isang gabay sa estilo ay isang pinag-isang mapagkukunan na tumutukoy sa isang tatak sa pamamagitan ng pare-pareho ang paggamit ng disenyo, tono, boses, at pagkakakilanlan.

Ang isang mahusay na gabay sa estilo ay kikilos bilang pangwakas na sanggunian para sa iyong tatak. Ito ay isang blueprint. Tinutukoy nito ang mga patakaran ng palalimbagan, kulay, layout, paggamit ng logo, tono ng boses, mga gabay sa nilalaman, karanasan ng gumagamit, at halos lahat ng mga aspeto ng pakikipag-ugnayan sa publiko sa iyong tatak.

Ang konsepto ng mga gabay sa estilo (o mga bibliya ng tatak) ay walang bago, bagaman ang kanilang aplikasyon para sa mga website ay isang mas kamakailang mainit na paksa. Karaniwang natagpuan sa mundo ng pag-print, ang bawat pangunahing pahayagan ay mananatili ng isang gabay sa estilo upang mapanatili ang pagkakapareho ng pag-format. Para sa mga malalaking korporasyon, kung saan ang mga natatanging kulay ng isang tatak ay dapat tumugma sa eksaktong mga pagtutukoy sa anuman mula sa mga komersyal sa telebisyon hanggang sa mga gilid ng semi trucks, ang isang kumpletong gabay sa istilo ay isang ganap na pangangailangan — at maaari itong maging napakalaking napakalaking sa laki!

Ang mga posibilidad ay kung babasahin mo ito pagkatapos ang iyong negosyo ay hindi pa naabot ang isang scale kung saan kailangan mo ng isang buong bahagi ng marketing upang maipahiwatig ang pagkakakilanlan ng iyong tatak. Gayunpaman, hindi masyadong maaga upang lumikha ng isang gabay na istilo. Ang paglutas ng mga alituntunin ng iyong tatak ay magse-save sa iyo mula sa mga potensyal na labanan sa kalsada kapag ang iyong negosyo ay lumalaki sa higit sa ikaw lamang ang maaaring masubaybayan.

Kapag Panahon na Gumawa ng Gabay sa Estilo

Taya ko na maaari mong isipin ang mga kahihinatnan ng hindi pagkakaroon ng isang gabay sa estilo. Kung walang mga paunang natukoy na mga alituntunin sa kung paano dapat at hindi dapat ipahiwatig ang iyong tatak, ang anumang taga-disenyo o developer na iyong inuupahan ay maaaring magdagdag ng kanilang sariling personal na ugnay o pagpapakahulugan sa iyong website, na sa kalaunan ay magtatapos sa paglikha ng mga pangkulay na putik sa halip na isang cohesive buong.

Makikinabang ang iyong online na negosyo mula sa isang gabay sa estilo kung at kailan:

  • Sinimulan mo ang pagbibigay ng mga gawain sa mga kasapi ng koponan o mga third party. Ang isang gabay sa estilo ay panatilihin ang lahat sa parehong pahina at matiyak na ang pamantayan ay ang pamantayan.
  • Ang iyong website ay naging lubos na malaki (at hindi naayos sa proseso), at ang iyong CSS file ay lumaki nang walang kontrol mula sa pagdaragdag ng mga bagong istilo upang mapalitan ang mga mayroon nang nakalimutan na mayroon ka.
  • Kailangan mong i-streamline ang proseso ng paggawa ng mga update sa iyong website. Ang pagkakaroon ng itinatag na mga alituntunin upang sumangguni pabalik upang matiyak ang mga bagong karagdagan ay mabilis na naipatupad at alignment sa tatak.

Ang Iyong Gabay sa Estilo ay Nasa loob ng Iyong Website

Bago mo simulan ang pagbuo ng iyong gabay sa estilo kailangan mong italaga kung saan ito umiiral. Ang pinakamahusay na kasanayan ay ang maglaan ng sariling lugar sa loob ng iyong website, alinman bilang isang direktoryo (www.yourdomain.com/styleguide) o bilang isang subdomain (styleguide.yourdomain.com).

Mabilis na TANDAAN: Tandaan na ang iyong gabay sa estilo ay dapat magbahagi ng parehong CSS file bilang ang natitirang bahagi ng iyong website. Tinitiyak nito na ang mga pag-update ng disenyo sa loob ng isa ay agad na sumasalamin sa iba pa, na pinapanatili ang lahat na nagkakaisa at pare-pareho.

Ang Iyong Patnubay sa Estilo ay May sariling Pagsasaayos

Alisin natin ito: ang paglikha ng iyong gabay sa estilo ay aabutin ng oras. Ngunit isaalang-alang ang enerhiya na inilagay mo bilang isang pamumuhunan na makatipid sa iyo ng mas maraming oras (at pera) sa katagalan.

Tulad ng iyong website, isinasaalang-alang ng iyong gabay sa estilo ang karanasan ng gumagamit sa pagsasaalang-alang sa isang madaling-sundin na layout. Ito ay gumagana nang mahalagang bilang isang nakapag-iisang website, madalas sa isang menu ng pag-navigate na naglilista ng bawat elemento ng iyong site sa isang lohikal na pag-unlad ng kahalagahan. Ang mga sangkap na ito ay ipinakita at naka-istilong tulad ng magiging sa pangunahing website, siyempre sa mga patnubay sa konteksto at mga dahilan kung bakit ang mga bagay ay naka-istilong paraan nila.

TINGNAN NITO SA GAWAIN: Ang isa sa mga pinakatanyag at komprehensibong gabay sa estilo para sa sanggunian ay nabibilang Starbucks. Tingnan ang mga ito kung kailangan mo ng inspirasyon sa pagkuha ng isang bagay na pangunahing.

Mga Gabay sa Estilo vs. Mga Aklatan ng Mga pattern

Ang mga salitang “gabay ng istilo” at “pattern library” ay madalas na ginagamit nang magkakapalit, at para sa pagiging simple ay sasangguni ko at bibigyan ng mga halimbawa ng pareho bilang isang “gabay sa estilo”. Gayunpaman, mayroong mahahalagang pagkakaiba sa pagitan ng dalawa na dapat mong malaman.

Mga aklatan ng pattern ipapakita lamang ang mga elemento ng disenyo nang walang paliwanag ng kung paano sila dapat gamitin sa loob ng site o app. Mga Gabay sa Estilo ay, naaangkop, gagabay sa iyo sa pinakamahusay na kasanayan ng paggamit ng mga napiling mga parameter ng disenyo, na nagpapaliwanag kung bakit may mga tiyak na mga patakaran na dapat sundin kapag ipinakita ang tatak.

Mahalaga, na may isang library ng pattern maaari kang iharap sa mga pagpipilian sa estilo para sa mga H2 tag; gayunpaman, kung ano ang nawawala ay kung ano ang ibinibigay ng gabay sa estilo: pagtuturo sa ilalim ng kung ano ang konteksto ng bawat partikular na tag na H2.

Paano Gumawa ng isang Gabay sa Estilo

Upang likhain ang isang gabay na istilo na tumutuya sa lahat ng mga kahon, narito ang mga hakbang na gagawin mo:

Hakbang 1. Tukuyin ang Kahulugan ng Iyong Tatak

Maglaan ng oras upang magsaliksik at pag-isipan ang pagtukoy ng mga katangian ng iyong tatak, at pagkatapos ay pakuluan ito ng buo sa isa o dalawang talata. Magbigay ng isang pahayag sa misyon, impormasyon tungkol sa iyong mga halaga, at iilan mga pangunahing salita ilalagay nito ang saligan para sa lahat ng mga kontribusyon sa disenyo at nilalaman na sundin. Isang mahusay larawan maaari ring makatulong na madaling maitaguyod ang tono at katangian ng iyong tatak.

Ang laki, pagkakalagay, at kulay ng iyong logo ay pinakamahalaga sa pagmuni-muni ng iyong tatak. Narito kung saan mo rin madalas makita Dos at Don malinaw na malinaw kung paano dapat ipakita ang iyong kumpanya sa biswal na ipinakita sa mundo.

Halimbawa ng gabay sa logo ng TwitterTwitter hindi nag-iiwan ng silid para sa error sa kanilang malawak na mga patakaran tungkol sa tamang paggamit ng logo nito.

Hakbang 3. Itaguyod ang Talambuhay

Ang typography ay naglalarawan ng isang napaka nasasalat na kahulugan ng pagkatao para sa iyong tatak. Ang iba’t ibang mga sukat ng iyong mga heading, ang halaga ng puwang sa pagitan nila, at ang estilo ng typeface lahat ay nagpapahiram ng isang partikular na kalidad ng tonal sa iyong website. Maaari kang matuto nang higit pa tungkol sa pagtaguyod ng palalimbag ng iyong tatak.

Halimbawa ng gabay sa tipograpiya ng BBCBBC nagbabahagi ng markup at layout ng kanilang mga typograpical elemento – isang pangangailangan para sa isang malaking samahan ng balita na gumagamit ng maraming magkakaibang mga ulo ng balita na may iba’t ibang kabuluhan.

Hakbang 4. Magpasya sa Iyong Palette ng Kulay

Ang kulay ay maaaring higit pa sa isang visual na representasyon ng iyong tatak – maaari itong maimpluwensyahan ang sikolohiya ng iyong mga gumagamit. Ang isang tiyak na lilim ng pula ay maaaring maging mas kaunti ng isang kulay at higit pa sa hindi malay na link sa isang tiyak na malambot na inumin.

Halimbawa ng gabay sa kulay ng MozillaMozilla pinapanatili ang pare-pareho ng tatak sa pamamagitan ng pagtukoy ng color palette ng kanilang software. Mahalaga na isama mo ang mga code ng kulay sa HEX, Pantone, HSB, CMYK, at RGB; dapat na lumitaw ang okasyon na dapat na umiiral ang iyong tatak na lampas sa isang screen ng computer, handa ka na para dito!

Hakbang 5. Alamin ang Tamang Iconograpiya

Ang mga icon ay kumulo ng isang ideya hanggang sa agad na mai-access na mga graphics. Hindi gaanong itago sa likuran; kung ang isang icon ay kahit na bahagyang wala sa kilter papatayin nito ang nais na epekto. Ang ilang mga icon ay mas disenyo-mabigat kaysa sa iba; hindi ito gagawing mas mahusay sa isang istilo kaysa sa iba pa, ngunit kailangan lamang nilang maging pare-pareho. Iwasan ang hindi kapani-paniwala iconography.

Halimbawa ng gabay sa estilo ng IBM iconIBM Nagbibigay ang icon ng icon ng mga aksyon na batay sa konteksto para sa kanilang iconography. Pansinin kung paano sila sumusunod sa isang katulad na istilo na monochrome, flat at simple.

Hakbang 6. Alamin ang Tamang Imahe

Anong imahe ang pinakamahusay na sumusuporta sa iyong tatak, ang makulay na larawan ng landscape o ang iginuhit na cartoon? Kinakatawan mo ba ang iyong kumpanya sa pamamagitan ng mga larawan ng stock, o uupa ka ba ng litratista upang maghatid ng isang bagay na natatangi? Anuman ang pinakamahusay para sa iyong sitwasyon, isaalang-alang ang damdamin na nais mong makipag-usap ang iyong tatak.

Hakbang 7: Buuin ang Layout at Grid System

Ito ang isa kung saan ang iyong pagpaplano ay tiyak na magbabayad, dahil sinusubukan mong lumikha ng mga layout ng pahina sa hinaharap nang walang isang sanggunian ay karaniwang kumukuha ng isang nakakatawa na oras. Tandaan na panatilihin ang layout likido para sa maramihang mga laki ng screen.

Halimbawa ng gabay ng gridChimpMailChimp isinalin kung paano ang kanilang pangunahing nilalaman ay nakabalangkas sa isang grid. Tiyak na halaga ng pixel para sa kanal at padding matiyak na ang grid ay mananatiling totoo kahit na ang laki ng screen ng gumagamit.

Hakbang 8: Estilo ang Mga Elemento

Depende sa saklaw ng iyong website, maaari kang magkaroon ng daan-daang hiwalay na mga elemento upang isaalang-alang, mula sa mga video sa mga komento sa blog hanggang sa mga item na e-commerce. Narito ang ilan sa mga pinaka-karaniwang mga bago, na walang alinlangan na isasama sa anumang website:

Mga form

Hindi lamang tungkol sa kulay at laki ng iyong mga patlang at etiketa sa pag-input; dapat mo ring isama ang teksto na ipapakita sa kaso ng matagumpay na pagsusumite ng form, error, o mga alerto na mensahe.

Mga pindutan

Ang iyong paleta ng kulay at palalimbagan ay mag-aalaga ng marami sa mga ito. Ang kulay at laki ng iyong mga pindutan ay maaaring tukuyin ang iba’t ibang mga bagay: may mga pindutan na link, isumite ang mga pindutan, mga pindutan ng CTA, kanselahin ang mga pindutan, mga pindutan ng menu, at iba pa.

Mga menu

Muli, ang karamihan sa iyong naitatag na ay makakakuha sa iyo ng halos lahat ng paraan dito. Ang spacing at pag-align ng teksto ay mga pangunahing istilo upang tukuyin. Makikilos ba ang iyong logo bilang isang pindutan ng Home? Nasusuklian mo ba ang pamilyar na “icon ng hamburger” para sa isang mas malikhain?

Mga Modal

Ang isang mahusay na gabay sa estilo ay hindi lamang ipakita ang disenyo ng iyong mga mode (o mga pop-up), ngunit itatakda din nito ang mga kondisyon para sa kanilang hitsura. Anong mga aksyon ang dapat gawin ng isang gumagamit upang makita ang modal? Paano ang modyul upang mapanghikayat ang pagkilos mula sa gumagamit?

Mga Epekto ng Pakikipag-ugnay at Animasyon

Maniwala ka man o hindi, ang iyong tatak ay maipahayag sa mga detalye kahit na isang minuto bilang millisecond ng isang hover effect. Ang isang link na teksto na may halaga {animasyon: 500ms kadali; } nagbibigay ng ibang pagkatao at pakiramdam ng pagkadalian kumpara sa {animation: 100ms linear; }.

Ang isang pagkakamali sa tiyempo ng animation sa pagitan ng iba’t ibang mga link sa iyong website ay maaaring mapabagal ang karanasan ng gumagamit, kaya’t maglaan ng oras upang planuhin kung ano ang mensahe ng iyong mga animation at pakikipag-ugnay na relay at manatili sa mga patakaran.

Huwag Kalimutan ang Tungkol sa Nilalaman

Tumatawag ako ng partikular na atensyon sa isang ito, dahil ang pagsasama ng nilalaman at kopyahin sa mga gabay sa istilo ay mahalaga lamang ngunit madalas na hindi napapansin. Tulad ng narinig mo noon, nilalaman ay ang nag-iisang pinakamalaking puwersa sa pagmamaneho sa likod ng tagumpay ng iyong website. Ang kapaki-pakinabang, orihinal at mahusay na nakasulat na nilalaman ay gagantimpalaan ng isang mas malalim na kasiyahan sa mga gumagamit kaysa sa mga magagandang pindutan o magarbong mga menu. Iyon ang dahilan kung bakit kritikal na ibigay ang mga patnubay sa tatak sa iyong mga copywriter bilang karagdagan sa iyong mga taga-disenyo.

Ang mahusay na nilalaman ay hindi lamang mahusay na nakasulat, dapat itong makipag-usap sa boses at tono ng iyong tatak sa pamamagitan ng isang pare-pareho ang istilo ng pagsulat. Ang dalawang pangunahing mga salita ay napakahalaga upang makuha, pinangalanan pa ng MailChimp ang kanilang itinalaga gabay ng estilo ng nilalaman pagkatapos nila.

Mula sa halimbawang ito, makikita mo kung paano pinangungunahan ng MailChimp ang kanilang mga copywriters na magbalangkas ng mga salitang sumasabay sa katangian ng kanilang tatak habang isinasaalang-alang ang emosyon ng kanilang mga gumagamit sa anumang oras.

Ang mga gabay sa istilo ng nilalaman ay maaaring maging ganap na kumpleto, kahit na kasama ang mga patakaran sa gramatika na iyong inaasahan mula sa isang propesor sa Ingles. Ang gabay para sa Mga kalat+ ginagawa lang yun. (Sinasabi sa akin ng kanilang gabay sa nilalaman na isulat ito bilang “Tuts +” at hindi “Tutsplus”!)

Konklusyon

Ang mga gabay sa istilo ay nag-aalis ng hula sa iyong online na negosyo. Sa napakahalagang mapagkukunan na ito sa lugar, hindi ka na magkakagulo upang mahuli ang mga bagong miyembro ng koponan upang mapabilis ang mga patakaran ng iyong tatak.

Mayroong milyon-milyong mga negosyo sa labas – ngunit iisa lamang sa iyo. Protektahan ang halaga ng iyong natatangi sa pamamagitan ng pagiging matatag sa kung paano ka ipinakita. Trabaho ang isang gabay na istilo ngayon para sa isang tatak na mananatiling makikilala sa hinaharap.

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