Cum să creați un Ghid de stil de site pentru brandul dvs.

Aflați cum un ghid de stil vă poate menține brandul coerent vizual și tonal pe măsură ce site-ul dvs. web crește.


Crearea unui ghid de stil de site web

Să pictăm un scenariu aici. Spuneți că site-ul dvs. web crește rapid, atât în ​​ceea ce privește conținutul său, cât și în numărul de persoane pe care trebuie să le aduceți la bord pentru a-l menține. Sunteți angajați designeri, dezvoltatori, redactori, manageri de social media – întregul shebang. Fiecare persoană vine și pleacă, contribuind cu piesa lor la schema de ansamblu – cu toate acestea, consistența brandului tău a funcționat amok. Unele butoane sunt albastre; altele sunt verzi. O subpoziție are dimensiunea de 26px; o altă subpoziție este 24px. Logo-ul dvs. are prea multe captusețe în jurul acesteia pe o pagină, dar prea puțin capitonare pe o altă …

În calitate de proprietar al site-ului dvs. web aveți deja prea multe lucruri pe plăcuță, atunci cum vă puteți aștepta să păstrați sutele de reguli de design pentru marca dvs. toate blocate în interiorul capului dvs.? Cum vă amintiți să spuneți unui designer nou angajat fiecare regulă unică pe care deja a stabilit-o designerul anterior? Este foarte probabil să nu poți.

Acolo vine un ghid de stil.

Ce este un ghid de stil și de ce are nevoie afacerea mea?

Un ghid de stil este o resursă unificată care definește o marcă prin utilizarea constantă a designului, tonului, vocii și identității.

Un ghid de stil bun va acționa ca referință finală pentru marca dvs. Este un model. Definește regulile tipografiei, culorile, aspectul, utilizarea logo-ului, tonul vocii, ghidurile de conținut, experiența utilizatorului și aproape toate aspectele interacțiunii publice cu marca dvs..

Conceptul de ghiduri de stil (sau biblii de marcă) nu este nimic nou, deși aplicația lor pentru site-uri web este un subiect mai recent. Întâlnit frecvent în lumea tipăritului, fiecare ziar major păstrează un ghid de stil pentru a menține consecvența formatării. Pentru corporațiile mari, în care culorile distinctive ale unei mărci trebuie să corespundă specificațiilor exacte din orice, de la reclame de televiziune până la părțile laterale ale camioanelor, un ghid complet de stil este o necesitate absolută – și poate deveni destul de masiv in marime!

Și există șanse dacă citiți acest lucru, atunci afacerea dvs. nu a atins încă o scară în care aveți nevoie de o întreagă divizie de marketing pentru a identifica identitatea mărcii dvs. in orice caz, nu este niciodată prea devreme pentru a crea un ghid de stil. Solidificarea principiilor brandului dvs. acum vă va salva de potențialele provocări în situația în care afacerea dvs. va crește cu mai mult decât puteți urmări singuri.

Când este timpul să creăm un ghid de stil

Pariez că vă puteți imagina deja consecințele neavând un ghid de stil. Fără linii directoare predefinite cu privire la modul în care ar trebui și nu trebuie exprimat brandul dvs., orice designer sau dezvoltator pe care îl angajați ar putea să adauge propria lor atingere sau interpretare personală site-ului dvs. web, care în cele din urmă va ajunge să creeze nămol stilistic, mai degrabă decât un întreg coeziv.

Afacerile dvs. online vor beneficia de un ghid de stil dacă și când:

  • Începeți delegarea sarcinilor către membrii echipei sau terți. Un ghid de stil îi va ține pe toți pe aceeași pagină și va asigura că contribuțiile sunt standardizate.
  • Site-ul dvs. a devenit destul de mare (și a fost dezorganizat în acest proces), iar fișierul dvs. CSS a scăpat de sub control, adăugând noi stiluri pentru a înlocui cele deja existente pe care le-ați uitat că ați fost acolo.
  • Trebuie să eficientizați procesul de actualizare a site-ului dvs. web. După ce am stabilit linii directoare pentru a ne referi pentru a ne asigura că noi completări sunt implementate rapid și aliniate cu marca.

Ghidul dvs. de stil există în site-ul dvs. Web

Înainte de a începe construirea ghidului dvs. de stil, va trebui să desemnați unde există. Cea mai bună practică este să alocați propria sa zonă pe site-ul dvs. web, fie ca director (www.yourdomain.com/styleguide) sau ca subdomeniu (styleguide.yourdomain.com).

NOTĂ RAPIDĂ: Nu uitați că ghidul dvs. de stil trebuie să partajeze același fișier CSS ca restul site-ului dvs. web. Acest lucru asigură că actualizările de proiectare în cadrul unuia se vor reflecta imediat în cealaltă, păstrând totul unificat și consecvent.

Ghidul dvs. de stil are propriul aspect

Haideți să scoatem acest lucru din cale: crearea ghidului dvs. de stil va avea nevoie de timp. Însă considerați energia pe care o puneți în ea ca o investiție care vă va economisi mai mult timp (și bani) pe termen lung.

La fel ca site-ul dvs. web, ghidul dvs. de stil ia în considerare experiența utilizatorului cu un aspect ușor de urmărit. Acesta va funcționa în esență ca un site web independent, adesea cu un meniu de navigare care listează fiecare element al site-ului dvs. într-o progresie logică de importanță. Aceste elemente sunt prezentate și concepute la fel cum ar fi pe site-ul principal, numai bineînțeles, cu ghiduri contextuale și motive pentru care lucrurile sunt concepute așa cum sunt.

Vedeți-l în acțiune: Unul dintre cele mai populare și cuprinzătoare ghiduri de stil pentru referință aparține Starbucks. Aruncați o privire la a lor dacă aveți nevoie de inspirație pentru a obține ceva de bază.

Ghiduri de stil Vs. Biblioteci de model

Termenii „ghid de stil” și „bibliotecă de modele” sunt adesea folosiți în mod interschimbabil și, din simplitate, mă voi referi și voi oferi exemple atât ca „ghid de stil”. Cu toate acestea, există diferențe importante între cele două de care ar trebui să fiți conștienți.

Biblioteci de model va prezenta pur și simplu elementele de proiectare fără explicații despre modul în care ar trebui utilizate în cadrul site-ului sau al aplicației. Ghiduri de stil vă va îndruma, în mod adecvat, asupra celor mai bune practici de utilizare a parametrilor de design aleși, explicând de ce există anumite reguli de urmat atunci când prezentați marca.

În esență, cu o bibliotecă de modele, vi se poate oferi opțiuni de stil pentru etichetele H2; cu toate acestea, ceea ce lipsește este ceea ce oferă un ghid de stil: instrucțiuni în ce context ar trebui folosită fiecare etichetă H2.

Cum se creează un ghid de stil

Pentru a crea un ghid de stil care bifează toate casetele, iată pașii pe care îi urmați:

Pasul 1. Definiți esența mărcii dvs.

Faceți timp pentru a cerceta și a reflecta caracteristicile definitorii ale mărcii dvs., apoi fierbeți-o în unul sau două paragrafe. Furnizați o declarație de misiune, informații despre valorile dvs. și câteva Cuvinte cheie care va pune bazele tuturor contribuțiilor de proiectare și conținut. Un minunat imagine vă poate ajuta, de asemenea, să stabiliți cu ușurință tonul și caracterul mărcii dvs..

Pasul 2. Setați regulile logo-ului dvs.

Mărimea, plasarea și culorile logo-ului dvs. sunt esențiale în reflectarea mărcii dvs. Aici este locul în care veți vedea adesea Ce să faci și ce să nu faci asta face foarte clar modul în care compania dvs. trebuie prezentată vizual lumii.

Exemplu de ghid cu logo-ul TwitterStare de nervozitate nu lasă loc de greșeală cu regulile lor ample privind utilizarea corectă a logo-ului său.

Pasul 3. Stabilirea tipografiei

Tipografia prezintă un simț al caracterului foarte tangibil pentru marca dvs. Diferitele dimensiuni ale titlurilor dvs., cantitatea de spațiu între ele și stilul tipografiei oferă o anumită calitate tonală site-ului dvs. web. Puteți afla mai multe despre stabilirea tipografiei mărcii dvs..

Exemplu de ghid de tipografie BBCBBC împărtășește marcajul și aspectul elementelor lor tipografice – o necesitate pentru o organizație de știri mare, care folosește multe titluri diferite, cu semnificații diferite.

Pasul 4. Decideți paleta dvs. de culori

Culoarea poate fi mai mult decât o simplă reprezentare vizuală a mărcii dvs., poate influența psihologia utilizatorilor. O anumită nuanță de roșu ar putea deveni chiar mai puțin o culoare și mai mult o legătură subconștientă o anumită băutură răcoritoare.

Exemplu de ghid de culoare MozillaMozilla își menține brandul consecvent prin definirea paletei de culori a software-ului lor. Este important să includeți coduri de culoare în HEX, Pantone, HSB, CMYK și RGB; în cazul în care apare ocazia că marca dvs. trebuie să existe dincolo de ecranul computerului, veți fi gata pentru aceasta!

Pasul 5. Determinați iconografia corectă

Icoanele scot o idee în grafice imediat accesibile. Nu este prea mult de ascuns în urmă; dacă o icoană este chiar ușor depășită, aceasta va ucide efectul dorit. Unele icoane sunt mai grele de design decât altele; acest lucru nu face un stil mai bun decât celălalt, ci trebuie doar să fie consecvent. Evitați iconografia incongruente.

Exemplu de ghid de stil pictogramă IBMIBM biblioteca de iconuri oferă acțiuni bazate pe context pentru iconografia lor. Observați cum urmează cu toții un stil similar monocrom, plat și simplist.

Pasul 6. Determinați imaginea potrivită

Ce imagini susțin cel mai bine marca dvs., fotografia peisajului vibrant sau desenul animat desenat manual? Îți vei reprezenta compania prin fotografii de stoc sau vei angaja un fotograf pentru a livra ceva unic? Orice este cel mai bun pentru situația ta, ia în considerare emoţie că marca dvs. dorește să comunice.

Pasul 7: Construiți sistemul Layout și Grila

Acesta este unul în care planificarea dvs. va plăti cu siguranță, deoarece încercarea de a crea viitoare machete de pagină fără o referință necesită de obicei un timp ridicol. Nu uitați să păstrați aspectul fluid pentru mai multe dimensiuni de ecran.

Exemplu de ghid grilă MailChimpMailChimp stabilește modul în care conținutul lor principal este structurat într-o grilă. Cantitățile specifice de pixeli pentru jgheab și garnitură asigură că grila rămâne adevărată indiferent de dimensiunea ecranului utilizatorului.

Pasul 8: Stilează elementele

În funcție de sfera site-ului dvs. web, este posibil să aveți în vedere sute de elemente separate, de la videoclipuri la comentarii pe blog și la articole de comerț electronic. Iată câteva dintre cele mai comune, care fără îndoială vor fi incluse pe orice site web:

Formulare

Nu este vorba doar despre culoarea și dimensiunea câmpurilor și etichetelor de intrare; ar trebui să includeți, de asemenea, textul care va fi afișat în cazul trimiterii cu succes a formularului, a erorilor sau a mesajelor de alertă.

Butoane

Paleta de culori și tipografia dvs. vor avea grijă de multe dintre acestea. Culoarea și dimensiunea butoanelor dvs. pot semnifica diverse lucruri: există link-uri pentru butoane, butoane de trimitere, butoane CTA, butoane de anulare, butoane de meniu, etc..

Meniuri

Din nou, o mare parte din ceea ce ați stabilit deja vă va aduce cea mai mare parte aici. Spațiul și alinierea textului sunt stiluri majore de specificat. Sigla dvs. va acționa ca buton Acasă? Îți ștergi „icoana hamburgerului” familiară pentru ceva mai creativ?

modals

Un ghid de stil bun nu va afișa doar designul modalelor (sau pop-up-urile), dar va stabili și condițiile pentru apariția lor. Ce acțiuni trebuie să întreprindă un utilizator pentru a vedea modalitatea? Cum este modalitatea de a convinge acțiunea utilizatorului?

Efecte de interacțiune și animație

Credeți sau nu, brandul dvs. poate fi exprimat în detalii chiar și în minutul în care milisecundele de efect plutesc. O legătură text cu valoarea {animație: 500ms ușurință; } transmite o personalitate diferită și un sentiment de urgență în comparație cu {animație: 100ms liniară; }.

O nepotrivire a calendarului de animație între diferitele link-uri de pe site-ul dvs. web poate împiedica experiența utilizatorului, așa că luați-vă timpul pentru a planifica ce mesaj transmite animațiile și interacțiunile dvs. și respectați aceste reguli..

Nu uita de conținut

Atrag o atenție deosebită asupra acestui aspect, deoarece includerea conținutului și a copiei în ghidurile de stil este la fel de importantă, dar adesea trecute cu vederea. Așa cum ai mai auzit, conţinut este cea mai mare forță motrice din spatele succesului site-ului dvs. web. Conținutul util, original și bine scris va răsplăti utilizatorilor o satisfacție mult mai profundă decât butoanele frumoase sau meniurile fanteziste. Acesta este motivul pentru care este esențial să oferiți ghiduri de marcă redactorilor dvs. pe lângă designeri.

Conținutul mare nu este numai bine scris, ci trebuie să comunice voce și ton a mărcii dvs. printr-un stil de scriere consecvent. Aceste două cuvinte cheie sunt atât de importante de capturat, MailChimp chiar și-a numit desemnat ghid de stil de conținut dupa ei.

Din acest exemplu, puteți vedea modul în care MailChimp îndreaptă redactorii lor pentru a formula o formulare care să se alinieze caracterului mărcii lor, luând în considerare emoții a utilizatorilor lor la un moment dat.

Ghidurile de stil de conținut pot fi destul de exhaustive, inclusiv reguli gramaticale pe care le-ați aștepta de la un profesor de engleză. Ghidul pentru tuts+ face doar asta. (Ghidul lor de conținut îmi spune chiar să-l scriu ca „Tuts +” și nu „Tutsplus”!)

Concluzie

Ghidurile de stil elimină convingerile din extinderea afacerii tale online. Cu această resursă vitală în vigoare, nu veți mai scăpa de noi pentru a prinde noi membri ai echipei pentru a lua viteza în conformitate cu regulile mărcii dvs..

Există milioane de afaceri acolo, dar există doar unul dintre voi. Protejați valoarea unicității dvs. prin a fi ferm cu modul în care sunteți prezentat. Utilizați acum un ghid de stil pentru un brand care să fie recunoscut în viitor.

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