Jak vytvořit průvodce stylem webových stránek pro vaši značku

Zjistěte, jak může průvodce stylem udržet vaši značku vizuálně a tonálně konzistentní s růstem vašich webových stránek.


Vytvoření průvodce stylem webových stránek

Zde nakreslíme scénář. Řekněme, že vaše webové stránky rychle rostou, a to jak v oblasti obsahu, tak v počtu lidí, které potřebujete přivést na palubu, aby je udržovali. Najali jste designéry, vývojáře, copywritery, manažery sociálních médií – celý shebang. Každý člověk přichází a odchází a přispívá svým dílem k celkovému velkolepému schématu – konzistence vaší značky však stále roste. Některé odkazy na tlačítka jsou modré; ostatní jsou zelené. Jedna podpoložka má velikost 26px; další podpoložka je 24px. Vaše logo obsahuje příliš mnoho výplní na jedné stránce, ale příliš malé výplně na jiné …

Jako vlastník svého webu již máte na vaší desce příliš mnoho, takže jak můžete očekávat, že všechny stovky návrhových pravidel pro vaši značku zůstanou v hlavě? Jak si vzpomínáte říct nově najatému designérovi každé pravidlo stylu, které již dříve vytvořil váš předchozí návrhář? Je pravděpodobné, že prostě nemůžete.

Zde přichází průvodce stylem.

Co je průvodce stylem a proč ho moje firma potřebuje??

Průvodce stylem je jednotný zdroj, který definuje značku prostřednictvím důsledného používání designu, tónu, hlasu a identity.

Průvodce dobrým stylem bude sloužit jako konečný odkaz pro vaši značku. Je to plán. Definuje pravidla typografie, barev, rozvržení, použití loga, tónu hlasu, obsahových pokynů, uživatelského dojmu a téměř všech aspektů veřejné interakce s vaší značkou..

Koncept průvodců stylem (nebo značkových biblů) není ničím novým, ačkoli jejich aplikace pro webové stránky je novějším aktuálním tématem. Všechny hlavní noviny, které se běžně vyskytují v tiskovém světě, si zachovávají průvodce stylem, aby zachovaly konzistentnost formátování. U velkých společností, kde musí výrazné barvy značky odpovídat přesným specifikacím v cokoli, od televizních reklam po boky návěsů, je komplexní průvodce stylem naprosto nezbytný – a může se stát vyloženě masivní ve velikosti!

Je pravděpodobné, že pokud to čtete, vaše firma ještě nedosáhla měřítka, kde byste potřebovali celou marketingovou divizi, která by pomohla udržet identitu vaší značky. nicméně, nikdy není příliš brzy na vytvoření průvodce stylem. Upevnění principů vaší značky vás nyní zachrání před možným chaosem na cestě, když se vaše firma rozroste na víc, než vy sami dokážete sledovat.

Kdy je čas vytvořit průvodce stylem

Vsadím se, že si už dokážete představit důsledky toho, že nemáte průvodce stylem. Bez předdefinovaných pokynů o tom, jak by měla a neměla být vaše značka vyjádřena, mohl jakýkoli návrhář nebo vývojář, kterého si najmete, přidat na svůj web svůj osobní dotek nebo interpretaci, což nakonec nakonec vytvoří stylové bahno místo soudržného celku..

Váš online obchod bude těžit z průvodce stylem, pokud a kdy:

  • Začnete delegovat úkoly na členy týmu nebo třetí strany. Průvodce stylem udrží každého na stejné stránce a zajistí standardizaci příspěvků.
  • Vaše webové stránky se staly poměrně rozsáhlými (a v tomto procesu byly dezorganizovány) a váš soubor CSS se vymkl z kontroly přidáním nových stylů, které nahradí již existující styly, na které jste zapomněli..
  • Je třeba zefektivnit proces aktualizace vašich webových stránek. Po zavedení pokynů pro zpětné odkazy se zajistí, že nové doplňky budou rychle implementovány a v souladu se značkou.

Váš průvodce stylem existuje na vašem webu

Než začnete vytvářet průvodce stylem, budete muset určit, kde existuje. Doporučenou praxí je přidělit na svém webu vlastní oblast, buď jako adresář (www.yourdomain.com/styleguide) nebo jako subdoména (styleguide.yourdomain.com).

RYCHLÁ POZNÁMKA: Pamatujte, že váš průvodce stylem musí sdílet stejný soubor CSS jako zbytek vašeho webu. Tím je zajištěno, že aktualizace návrhů v rámci jedné se okamžitě projeví ve druhé, přičemž vše zůstane jednotné a konzistentní.

Váš průvodce stylem má své vlastní rozvržení

Pojďme to z cesty: vytvoření průvodce stylem bude nějakou dobu trvat. Ale považujte energii, kterou do ní vložíte, za investici, která vám v dlouhodobém horizontu ušetří více času (a peněz).

Stejně jako vaše webové stránky, i váš průvodce stylem zohledňuje uživatelské prostředí s přehledným rozložením. Funguje to v podstatě jako samostatný web, často s navigační menu který uvádí každý prvek vašeho webu v logickém průběhu důležitosti. Tyto prvky jsou prezentovány a stylizovány stejně, jako by byly na hlavní webové stránce, ovšem pouze s kontextuálními pokyny a důvody, proč jsou věci stylizovány tak, jak jsou.

ZOBRAZIT V AKCI: Patří k nejpopulárnějším a nejobsáhlejším průvodcům stylem Starbucks. Podívejte se na jejich, pokud potřebujete inspiraci pro získání něčeho základního.

Style Guides Vs. Knihovny vzorů

Pojmy „průvodce stylem“ a „knihovna vzorů“ se často používají zaměnitelně a pro zjednodušení budu odkazovat na příklady obou a jako „průvodce stylem“. Existují však důležité rozdíly mezi těmito dvěma, o kterých byste měli vědět.

Knihovny vzorů jednoduše představí návrhové prvky bez vysvětlení, jak by se měly používat na webu nebo v aplikaci. Průvodci stylem vhodně vás seznámí s osvědčenými postupy používání zvolených konstrukčních parametrů a vysvětlí, proč existují určitá pravidla, která je třeba dodržovat při prezentaci značky.

V podstatě, s knihovnou vzorů vám mohou být nabídnuty možnosti stylu pro značky H2; Co však chybí, je to, co poskytuje průvodce stylem: návod, v jakém kontextu by měla být použita každá konkrétní značka H2.

Jak vytvořit průvodce stylem

Chcete-li vytvořit průvodce stylem, který zaškrtne všechna políčka, postupujte takto:

Krok 1. Definujte podstatu vaší značky

Udělejte si čas na prozkoumání a přemýšlení o definujících charakteristikách vaší značky a poté vše zahřejte do jednoho nebo dvou odstavců. Poskytněte sdělení mise, informace o vašich hodnotách a několik klíčová slova to položí základy pro všechny příspěvky v oblasti designu a obsahu. Velký obrázek může také pomoci snadno zjistit tón a charakter vaší značky.

Krok 2. Nastavte pravidla vašeho loga

Velikost, umístění a barvy vašeho loga jsou v odrazu vaší značky prvořadé. Zde se také často uvidíte Pro a proti což jasně ukazuje, jak by měla být vaše společnost vizuálně představena světu.

Příklad průvodce logem TwitteruCvrlikání neponechává žádný prostor pro chyby s jejich rozsáhlými pravidly ohledně správného používání jeho loga.

Krok 3. Vytvořte typografii

Typografie zobrazuje velmi hmatatelný smysl pro vaši značku. Různé velikosti vašich nadpisů, velikost mezer mezi nimi a styl písma umožňují vašemu webu zvláštní tónovou kvalitu. Další informace o založení typografie vaší značky.

Příklad průvodce BBC typografiíBBC sdílí označení a rozvržení jejich typografických prvků – nutnost velké zpravodajské organizace, která používá mnoho různých titulků různého významu.

Krok 4. Rozhodněte se na paletě barev

Barva může být více než jen vizuální reprezentace vaší značky – může to ovlivnit psychologii vašich uživatelů. Určitý odstín červené by mohl být dokonce méně barevný a více podvědomý určitý nealkoholický nápoj.

Příklad barevného průvodce MozillaMozilla udržuje svou značku konzistentní definováním barevné palety svého softwaru. Je důležité zahrnout barevné kódy do HEX, Pantone, HSB, CMYK a RGB; Pokud dojde k příležitosti, že vaše značka musí existovat mimo obrazovku počítače, budete na ni připraveni!

Krok 5. Určete správnou ikonografii

Ikony vaří nápad do okamžitě dostupné grafiky. Není co skrývat; pokud je ikona dokonce mírně mimo kilter, zabije zamýšlený efekt. Některé ikony jsou náročnější na design než jiné; to neznamená, že jeden styl je lepší než ten druhý, ale musí být konzistentní. Vyvarujte se nepřiměřené ikonografie.

Příklad průvodce stylem ikon IBMIBM knihovna ikon poskytuje kontextové akce pro jejich ikonografii. Všimněte si, jak všichni postupují podobným stylem, který je monochromatický, plochý a zjednodušující.

Krok 6. Určete správné snímky

Jaké snímky nejlépe podporují vaši značku, živé fotografie krajiny nebo ručně kreslenou karikaturu? Zastoupíte svou společnost prostřednictvím fotografií, nebo najmete fotografa, který vám dodá něco jedinečného? Ať už je pro vaši situaci to nejlepší, zvažte emoce že vaše značka chce komunikovat.

Krok 7: Vytvořte systém rozložení a mřížky

Toto je místo, kde se vaše plánování určitě vyplatí, protože pokus o vytvoření budoucího rozvržení stránky bez odkazu obvykle zabere směšné množství času. Nezapomeňte zachovat rozvržení tekutina pro více velikostí obrazovky.

Příklad mřížky průvodce MailChimpMailChimp stanoví, jak je jejich hlavní obsah strukturován v mřížce. Konkrétní množství pixelů pro okapy a výplně zajišťují, že mřížka zůstane pravdivá bez ohledu na velikost obrazovky uživatele.

Krok 8: Upravte prvky

V závislosti na rozsahu vašich webových stránek můžete mít na paměti stovky samostatných prvků, od videí přes komentáře blogů až po položky elektronického obchodování. Zde jsou některé z nejběžnějších, které budou bezpochyby zahrnuty na jakékoli webové stránce:

formuláře

Nejde jen o barvu a velikost vstupních polí a štítků; měli byste také zahrnout text, který se má zobrazit v případě úspěšného odeslání formuláře, chybových zpráv nebo výstražných zpráv.

Tlačítka

Vaše barevná paleta a typografie se o ně postarají. Barva a velikost vašich tlačítek může znamenat různé věci: existují odkazy na tlačítka, tlačítka pro odeslání, tlačítka CTA, tlačítka pro zrušení, tlačítka nabídky atd..

Nabídky

Opět platí, že většina z toho, co jste již vytvořili, vás sem dostane nejvíce. Mezery a zarovnání textu jsou hlavní styly, které je třeba určit. Bude vaše logo fungovat jako tlačítko Domů? Vykopáváte známou „hamburgerovou ikonu“ pro něco kreativnějšího?

Modals

Dobrý průvodce stylem nebude jen zobrazovat design vašich způsobů (nebo vyskakovacích oken), ale také stanoví podmínky pro jejich vzhled. Jaké akce musí uživatel provést, aby viděl modální? Jak bude modální přesvědčovat uživatele o akci?

Interakční a animační efekty

Věřte tomu nebo ne, vaše značka může být vyjádřena v detailech dokonce i za minutu v milisekundách efektu přechodu. Textový odkaz s hodnotou {animation: 500ms easy-in; } má jinou osobnost a pocit naléhavosti než {animation: 100ms linear; }.

Neshoda v načasování animace mezi různými odkazy na vašem webu může narušit uživatelský dojem, takže si udělejte čas na plánování, jakou zprávu vaše animace a interakce předávají, a dodržujte tato pravidla..

Nezapomeňte na obsah

Zvláštní pozornost tomu věnuji, protože zařazení obsahu a kopie do průvodců stylem je stejně důležité, ale často přehlížené. Jak jste to už slyšeli, obsah je největší hnací silou úspěchu vašeho webu. Užitečný, originální a dobře napsaný obsah bude uživatelům odměňovat mnohem hlubší uspokojení než pěkná tlačítka nebo luxusní nabídky. To je důvod, proč je důležité, aby kromě textových návrhářů poskytovali kromě textových textů i pokyny pro značku svým textářům.

Skvělý obsah není jen dobře napsaný, ale musí komunikovat hlas a tón vaší značky prostřednictvím konzistentního stylu psaní. Tato dvě klíčová slova jsou tak důležitá pro zachycení, MailChimp dokonce pojmenoval své určené průvodce stylem obsahu po nich.

Z tohoto příkladu můžete vidět, jak MailChimp nasměruje jejich copywritery k formulaci formulace, která je v souladu s charakterem jejich značky, přičemž bere v úvahu emoce uživatelů kdykoli.

Průvodci stylem obsahu mohou být docela vyčerpávající, dokonce včetně gramatických pravidel, která byste očekávali od anglického profesora. Průvodce pro Tuts+ dělá to jen. (Jejich průvodce obsahem mi dokonce říká, abych to napsal jako „Tuts +“, nikoli „Tutsplus“!)

Závěr

Průvodce stylů vylučuje odhady ze škálování vašeho online obchodu. Díky tomuto životně důležitému zdroji již nebudete bojovat o to, abyste dohnali nové členy týmu až k rychlosti na pravidlech vaší značky.

Existují miliony firem – ale existuje jen jeden. Chraňte hodnotu své jedinečnosti tím, že budete pevně s tím, jak jste prezentováni. Zaměstnejte nyní průvodce stylem pro značku, která zůstává rozpoznatelná i do budoucna.

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