Kako izraditi vodič za stil web stranice za svoj brand

Saznajte kako stilski vodič može održavati vašu marku vizualno i tonalno u skladu s rastom vaše web stranice.


Izrada vodiča za stil web mjesta

Slikajmo scenarij ovdje. Recite da vaša web stranica brzo raste kako u obimu sadržaja, tako i u broju ljudi koje trebate dovesti na brod da biste je održavali. Angažirali ste dizajnere, programere, autore reklama, menadžere društvenih medija – cijeli shebang. Svaka osoba dolazi i odlazi, doprinoseći svom komadu cjelokupnom grandioznom planu – ali dosljednost vaše marke napredovala je. Neke su veze gumba plave; drugi su zeleni. Jedan podbroj je veličine 26 piksela; drugi podbroj je 24px. Vaš logotip ima previše napunjenosti oko njega na jednoj stranici, a previše slabljenja na drugoj stranici…

Kao vlasnik vaše web stranice već imate previše na tanjuru, pa kako možete očekivati ​​da će stotine pravila dizajna za vašu marku biti zatvorene unutar glave? Kako se sjećate da novozaposlenom dizajneru kažete svako pravilo stila koje je vaš prethodni dizajner već uspostavio? Vjerojatno je da jednostavno ne možete.

Tu dolazi vodič za stil.

Što je vodič za stil i zašto mi je posao potreban?

Vodič za stil je objedinjeni resurs koji definira marku kroz dosljedno korištenje dizajna, tona, glasa i identiteta.

Vodič za dobar stil poslužit će kao krajnja referenca za vašu marku. To je nacrt. Ona definira pravila tipografije, boja, izgleda, upotrebe logotipa, tona glasa, smjernice za sadržaj, korisničko iskustvo i prilično sve sve aspekte javne interakcije s vašom markom..

Koncept vodiča za stil (ili biblija marke) nije ništa novo, iako je njihova primjena za web stranice novije vruća tema. Svaka velika novina, koja se obično nalazi u svijetu tiska, zadržava stilski vodič kako bi održala dosljednost oblikovanja. Za velike korporacije, gdje prepoznatljive boje branda moraju odgovarati točnim specifikacijama bilo čega, od televizijskih reklama do strana poluvoznih vozila, sveobuhvatni vodič za stil apsolutna je nužnost – i to može postati ravno masivno u veličini!

Šanse su da ako ovo čitate onda vaše poslovanje još nije doseglo ljestvicu na kojoj će vam trebati cijeli marketinški odjel da biste kormili identitet svog branda. Međutim, nikad nije prerano stvoriti vodič za stil. Učvršćivanje načela vašeg brenda sada će vas spasiti od potencijalnog nereda niz put kada vaše poslovanje preraste u više nego što sami možete pratiti.

Kada je vrijeme za stvaranje vodiča za stil

Kladim se da već možete zamisliti posljedice ne imati stilski vodič. Bez unaprijed definiranih smjernica o tome kako se vaš brend treba i ne smije izražavati, svaki dizajner ili programer kojeg unajmite može dodati svoj osobni dodir ili interpretaciju na vašu web stranicu, što će na kraju stvoriti stilsko blato, a ne kohezivnu cjelinu.

Vaše će mrežno poslovanje imati koristi od vodiča za stil ako i kada:

  • Počinjete delegirati zadatke članovima tima ili trećim stranama. Vodič za stil zadržavat će sve na istoj stranici i osigurati da se doprinosi standardiziraju.
  • Vaša web stranica postala je prilično velika (i dezorganizirana u procesu), a vaša CSS datoteka prerasla je kontrolu nad dodavanjem novih stilova koji će zamijeniti već postojeće one koje ste zaboravili.
  • Trebate pojednostaviti postupak ažuriranja svoje web stranice. Uspostavom smjernica za povrat novih jamstava kako će se novi dodaci brzo implementirati i uskladiti s markom.

Vaš vodič za stil postoji unutar vaše web stranice

Prije nego što započnete s izradom svog stilskog vodiča, morat ćete odrediti gdje postoji. Najbolja praksa je dodijeliti vlastiti prostor unutar vaše web stranice, bilo kao direktorij (www.yourdomain.com/styleguide) ili kao poddomena (styleguide.yourdomain.com).

BRZO NAPOMENA: Imajte na umu da vaš stilski vodič mora dijeliti istu CSS datoteku kao i ostatak vaše web stranice. To osigurava da će se ažuriranja dizajna unutar jedne odmah odraziti u drugoj, održavajući sve ujednačeno i dosljedno.

Vaš stilski vodič ima vlastiti izgled

Izbacimo ovo sa puta: stvaranje vašeg vodiča za stil će potrajati. Ali razmislite o energiji koju uložite u nju kao ulaganje koje će vam dugoročno uštedjeti više vremena (i novca).

Kao i vaše web mjesto, vaš stilski vodič uzima u obzir korisničko iskustvo s izgledom koji je lako pratiti. U osnovi će funkcionirati kao samostalna web stranica, često s navigacijski izbornik koji navodi svaki element vaše web lokacije u logičnom napredovanju od važnosti. Ti su elementi predstavljeni i oblikovani onako kako bi bili na glavnoj web stranici, samo naravno uz kontekstualne smjernice i razloge zbog kojih su stvari oblikovane onako kako jesu..

POGLEDAJTE U AKCIJI: Pripada jedan od najpopularnijih i sveobuhvatnih vodiča za stil Starbucks. Pogledajte njihovo ako vam treba inspiracija za postizanje nečeg osnovnog.

Stilski vodiči vs. Knjižnice uzoraka

Pojmovi „stilski vodič“ i „knjižnica uzoraka“ često se upotrebljavaju naizmjenično, a radi jednostavnosti navest ću ih i pružiti primjere kao „vodiča za stil“. Međutim, postoje važne razlike između njih dvije koje biste trebali imati na umu.

Biblioteke uzoraka jednostavno će predstaviti elemente dizajna bez objašnjenja kako ih treba koristiti unutar web lokacije ili aplikacije. Stilski vodiči prikladno će vas voditi prema najboljim praksama korištenja odabranih dizajnerskih parametara, objašnjavajući zašto postoje neka pravila koja treba slijediti prilikom predstavljanja branda.

U osnovi, s bibliotekom uzoraka možda će vam se prikazati opcije stila za H2 oznake; međutim, ono što nedostaje je ono što pruža vodič za stil: upute o tome u kojem kontekstu se treba koristiti svaku oznaku H2.

Kako stvoriti vodič za stil

Sastavite vodič za stilove koji označava sve okvire, evo nekoliko koraka koje ćete poduzeti:

Korak 1. Odredite suštinu svoje robne marke

Odvojite vrijeme za istraživanje i razmislite o definirajućim karakteristikama vašeg branda, a zatim sve to svedite u jedan ili dva stavka. Navedite izjavu o misiji, podatke o svojim vrijednostima i nekoliko njih ključne riječi koji će postaviti temelje za sve doprinose dizajna i sadržaja koji slijede. Sjajno slika može vam pomoći i da lako utvrdite ton i karakter vaše marke.

Korak 2. Postavite pravila svog logotipa

Veličina, položaj i boje vašeg logotipa najvažniji su u odrazu vašeg branda. Ovdje ćete također često vidjeti Što se smije i ne smije koji čine vrlo jasnim kako vaša tvrtka treba vizualno predstaviti svijetu.

Primjer vodiča Twitter logotipaCvrkut ne ostavlja prostora za pogreške svojim opsežnim pravilima o pravilnom korištenju njegovog logotipa.

Korak 3. Uspostavite tipografiju

Tipografija prikazuje vrlo opipljiv osjećaj karaktera za vašu marku. Različite veličine vaših Naslova, količina razmaka između njih i stil pisaćeg teksta daju posebnu kvalitetu tona vašoj web stranici. Možete saznati više o uspostavljanju tipografije marke.

Primjer vodiča za tipografiju BBC-aBBC dijeli oznaku i izgled njihovih tipografskih elemenata – nužnost velike novinske organizacije koja koristi mnogo različitih naslova različitog značenja.

Korak 4. Odlučite se za svoju paletu boja

Boja može biti više od vizualnog prikaza vašeg branda – može utjecati na psihologiju vaših korisnika. Određena nijansa crvene čak bi mogla postati manje boja i više podsvjesna veza određeno bezalkoholno piće.

Primjer vodiča u boji MozillaMozilla drži svoju marku dosljednom definirajući paletu boja njihovog softvera. Važno je da uvrstite kodove boja u HEX, Pantone, HSB, CMYK i RGB; u slučaju da vaš brand mora postojati izvan zaslona računala, bit ćete spremni za to!

Korak 5. Odredite pravu ikonografiju

Ikone svode ideju na grafiku koja je odmah dostupna. Ne može se sakriti puno iza sebe; ako je ikona malo lagana, to će ubiti namjeravani efekt. Neke su ikone teže dizajnerske od drugih; to ne čini jedan stil boljim od drugog, već samo oni trebaju biti dosljedni. Izbjegavajte nepristranu ikonografiju.

Primjer IBM-ovog stila ikonaIBM knjižnica ikona daje kontekstne radnje za njihovu ikonografiju. Primijetite kako svi slijede sličan stil koji je jednobojan, ravan i pojednostavljen.

Korak 6. Odredite ispravnu sliku

Koje slike najbolje podržavaju vašu marku, živopisnu fotografiju pejzaža ili ručno crtani crtić? Hoćete li predstavljati svoju tvrtku kroz fotografije dionica ili ćete angažirati fotografa da isporuči nešto jedinstveno? Što god najbolje bilo za vašu situaciju, razmislite o tome emocija da vaš brand želi komunicirati.

Korak 7: Izgradite sistem izgleda i mreže

Ovo je mjesto na kojem će se vaše planiranje definitivno isplatiti, jer pokušaj stvaranja budućih izgleda stranica bez reference obično zahtijeva smiješno vrijeme. Ne zaboravite zadržati izgled tekućina za više veličina zaslona.

Primjer vodiča za mrežnu poštu MailChimpMailChimp utvrđuje kako je njihov glavni sadržaj strukturiran u mrežu. Specifične količine piksela za oluk i podloge osiguravaju da mreža ostaje istinita bez obzira na korisničku veličinu zaslona.

Korak 8: Stilski elementi

Ovisno o opsegu vaše web stranice, možda ćete imati na stotine zasebnih elemenata koje ćete uzeti u obzir, od videozapisa, komentara na blogu, do stavki e-trgovine. Evo nekih od najčešćih koji će bez sumnje biti uključeni na bilo kojoj web stranici:

obrasci

Ne radi se samo o boji i veličini vaših polja za unos i oznakama; trebali biste također uključiti tekst koji će se prikazati u slučaju uspješne prijave, pogreške ili upozorenja o obrascu.

tipke

Vaša paleta boja i tipografija pobrinut će se za većinu njih. Boja i veličina vaših gumba mogu značiti razne stvari: postoje veze gumba, gumbi za slanje, gumbi CTA, gumbi za otkazivanje, gumbi na gumbima itd..

izbornici

Opet, većina onoga što ste već uspostavili stići će vas većim dijelom ovdje. Razmak i poravnavanje teksta glavni su stilovi koje treba odrediti. Hoće li vaš logo djelovati kao početni gumb? Odmažete li poznatu ikonu hamburgera za nešto kreativnije?

Modals

Vodič za dobar stil ne samo da će pokazati dizajn vaših modaliteta (ili skočnih prozora), već će odrediti i uvjete za njihov izgled. Koje radnje korisnik mora poduzeti kako bi vidio modalitet? Kako će modalitet uvjeriti radnju od korisnika?

Učinci interakcije i animacije

Vjerovali ili ne, vaš se brend može iskazati u pojedinostima čak i onoliko minuta koliko je milisekundi efekta lebdenja. Tekstualna veza sa vrijednosti {animacija: 500ms jednostavnost; } prenosi drugačiju osobnost i osjećaj hitnosti u odnosu na {animacija: 100ms linearno; }.

Neslaganje u vremenu animacije između različitih veza na vašoj web stranici može zbuniti korisničko iskustvo, pa odvojite vrijeme da isplanirate koju poruku prenose vaše animacije i interakcije i pridržavajte se tih pravila.

Ne zaboravite na sadržaj

Na ovo ću obratiti posebnu pozornost jer je uključivanje sadržaja i kopija u vodiče za stil jednako važno, ali često previdjeno. Kao što ste već čuli, sadržaj najveća je pokretačka snaga uspjeha vaše web lokacije. Korisni, originalni i dobro napisani sadržaj nagradit će mnogo dublje zadovoljstvo korisnika od lijepih gumba ili maštovitih izbornika. To je razlog zašto je presudno dati smjernice o robnim markama svojim autorskim autorima, osim dizajnerima.

Sjajni sadržaj nije samo dobro napisan, već mora komunicirati glas i ton vašeg brenda kroz dosljedan stil pisanja. Te su dvije ključne riječi toliko važne za snimanje, MailChimp ih je čak imenovao vodič za stil sadržaja nakon njih.

Iz ovog primjera možete vidjeti kako MailChimp usmjerava svoje autore tekstova da formulišu izraze koji se poklapaju s karakterom njihovog branda uzimajući u obzir emocije svojih korisnika u bilo kojem trenutku.

Vodiči za stil sadržaja mogu biti prilično iscrpni, čak uključuju gramatička pravila koja biste očekivali od profesora engleskog jezika. Vodič za tuts+ čini upravo to. (Njihov vodič za sadržaj čak mi nalaže da to napišem kao “Tuts +”, a ne “Tutsplus”!)

Zaključak

Stilski vodiči uzimaju nagađanja iz skaliranja vašeg mrežnog poslovanja. Uz ovaj vitalni resurs više se nećete boriti za hvatanje novih članova tima na brzinu prema pravilima vaše marke.

Tamo ima milijune tvrtki – ali postoji samo ti. Zaštitite vrijednost svoje jedinstvenosti tako što ćete biti čvrsti s predstavom. Upotrijebite stilski vodič sada za marku koja ostaje prepoznatljiva u budućnosti.

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