Hoe u ‘n webstylgids vir u handelsmerk kan skep

Lees hoe ‘n stylgids u handelsmerk visueel en toon konsekwent kan hou namate u webwerf groei.


Skep 'n gids vir webstylstyle

Laat ons ‘n scenario hier skilder. Gestel u webwerf groei vinnig, beide in die omvang van die inhoud en in die aantal mense wat u aan boord moet bring om dit te onderhou. U het ontwerpers, ontwikkelaars, kopieskrywers, sosiale mediabestuurders gehuur – die hele kollig. Elke persoon kom en gaan en dra hul stuk by tot die algehele grootskema – en tog is die konsekwentheid van u handelsmerk amok. Sommige knoppie-skakels is blou; ander is groen. Een subopskrif is 26px groot; ‘n ander subopskrif is 24 px. U logo het te veel opvulling op een bladsy, maar te min opvulling op ‘n ander bladsy …

As die eienaar van u webwerf het u al te veel op u bord, so hoe kan u verwag om die honderde ontwerpreëls vir u handelsmerk in u kop te hou? Hoe kan u onthou om elke stylreël wat u vorige ontwerper reeds gevestig het aan ‘n nuut gehuurde ontwerper te vertel? Dit is waarskynlik dat u dit nie kan doen nie.

Dit is waar ‘n stylgids inkom.

Wat is ‘n stylgids en waarom het my besigheid een nodig??

‘N Stylgids is ‘n verenigde hulpbron wat ‘n handelsmerk definieer deur ‘n konstante gebruik van ontwerp, toon, stem en identiteit.

‘N Goeie stylgids sal die uiteindelike verwysing vir u handelsmerk wees. Dit is ‘n bloudruk. Dit definieer die reëls van tipografie, kleure, uitleg, logo-gebruik, stemtoon, inhoudsriglyne, gebruikerservaring, en amper alle aspekte van openbare interaksie met u handelsmerk..

Die konsep van stylgidse (of handelsmerkbybels) is niks nuuts nie, hoewel hul toepassing op webwerwe ‘n meer onlangse onderwerp is. Elke groot koerant, wat algemeen in die gedrukte wêreld voorkom, behou ‘n stylgids om die formatering konsekwent te hou. ‘N Omvattende stylgids is ‘n absolute noodsaaklikheid vir groot ondernemings, waar die kenmerkende kleure van ‘n handelsmerk moet ooreenstem met die presiese spesifikasies in alles van televisie-advertensies tot aan die kante van semi-vragmotors, en dit kan reguit massief in grootte!

Die kans is goed dat u dit lees, dan het u onderneming nog nie ‘n skaal bereik nie, waar u ‘n volledige bemarkingsafdeling nodig het om u handelsmerk se identiteit aan te wakker. Maar, dit is nooit te vroeg om ‘n stylgids te skep nie. As u die beginsels van u handelsmerk nou versterk, sal u u red van moontlike chaos op die pad wanneer u besigheid groei in meer as wat u alleen kan dophou.

Wanneer dit tyd is om ‘n stylgids te skep

Ek is seker jy kan jou al voorstel wat die gevolge daarvan is as jy nie ‘n stylgids het nie. Sonder vooraf gedefinieerde riglyne oor hoe u handelsnaam behoort en nie uitgespreek moet word nie, kan enige ontwerper of ontwikkelaar wat u huur hul eie persoonlike aanraking of interpretasie op u webwerf voeg, wat uiteindelik stilistiese modder sal skep eerder as ‘n samehangende geheel..

U aanlynbesigheid sal baat vind by ‘n stylgids indien en wanneer:

  • U begin take delegeer aan spanlede of derde partye. ‘N Stylgids hou almal op dieselfde bladsy en verseker dat bydraes gestandaardiseer word.
  • U webwerf het redelik groot geword (en ongeorganiseerd in die proses), en u CSS-lêer het buite beheer geraak deur nuwe style by te voeg om die bestaande te vervang wat u reeds vergeet het..
  • U moet die proses van opdatering van u webwerf stroomlyn. Met gevestigde riglyne om terug te verwys, verseker dat nuwe toevoegings vinnig geïmplementeer word en in lyn met die handelsmerk.

U stylgids bestaan ​​binne u webwerf

Voordat u met u stylgids begin bou, moet u aanwys waar dit bestaan. Die beste praktyk is om ‘n eie area op u webwerf toe te ken, hetsy as ‘n gids (www.yourdomain.com/styleguide) of as ‘n subdomein (styleguide.yourdomain.com).

VINNIGE OPMERKING: Onthou dat u stylgids dieselfde CSS-lêer as die res van u webwerf moet deel. Dit verseker dat ontwerpopdaterings binne die een onmiddellik weerkaats in die ander, en alles verenig en konsekwent hou.

Jou stylgids het sy eie uitleg

Kom ons haal dit uit die weg: Dit sal tyd neem om jou stylgids te skep. Maar beskou die energie wat u daarin belê as ‘n belegging wat u op die lange duur meer tyd (en geld) sal bespaar.

Net soos u webwerf, neem u stylgids gebruikerservaring in ag met ‘n uitleg wat maklik is om te volg. Dit sal in wese funksioneer as ‘n selfstandige webwerf, dikwels met ‘n navigasie menu wat elke element van u webwerf in ‘n logiese progressie van belang lys. Hierdie elemente word aangebied en gestileer net soos op die hoofwebwerf, slegs natuurlik met kontekstuele riglyne en redes waarom dinge so gestileer is.

SIEN DIT IN AKSIE: Een van die gewildste en omvattendste stylgidse vir verwysing behoort aan Starbucks. Kyk na hulle as u inspirasie benodig om iets basies op te doen.

Stylgidse vs. Patroonbiblioteke

Die terme “stylgids” en “patroonbiblioteek” word gereeld uitruilbaar gebruik, en ter wille van die eenvoud sal ek verwys na voorbeelde van beide ‘n “stylgids”. Daar is egter belangrike onderskeid tussen die twee wat u bewus moet wees.

Patroonbiblioteke sal eenvoudig die ontwerpelemente aanbied sonder om te verduidelik hoe dit op die webwerf of app gebruik moet word. Stylgidse sal u gepas lei oor die beste praktyke om die gekose ontwerpparameters te gebruik en te verduidelik hoekom daar sekere reëls moet volg by die aanbieding van die handelsmerk.

In wese kan u met ‘n patroonbiblioteek stylopsies vir H2-etikette aangebied word; wat egter ontbreek, is wat ‘n stylgids bied: instruksies in watter konteks elke H2-etiket gebruik moet word.

Hoe om ‘n stylgids te skep

Hier is die stappe wat u sal neem om ‘n stylgids te maak wat al die vakkies regmerk:

Stap 1. Definieer die essensie van u handelsmerk

Neem die tyd om na te dink oor die kenmerkende eienskappe van u handelsmerk, en kook dit dan in een of twee paragrawe. Verskaf ‘n missiestelling, inligting oor u waardes en enkele sleutelwoorde wat die grondslag sal lê vir alle bydraes rakende ontwerp en inhoud. N wonderlike prent dit kan ook help om die toon en karakter van u handelsmerk maklik te bepaal.

Stap 2. Stel die reëls van u logo op

Die grootte, plasing en kleure van u logo is uiters belangrik in die weerspieëling van u handelsmerk. Hier is waar u ook gereeld sal sien Moets en moenies wat dit baie duidelik maak hoe u onderneming visueel aan die wêreld voorgehou moet word.

Voorbeeld van Twitter-logoTwitter laat geen ruimte vir foute met hul uitgebreide reëls rakende die korrekte gebruik van die logo nie.

Stap 3. Stel die tipografie vas

Tipografie beeld ‘n baie tasbare karaktergevoel uit vir jou handelsmerk. Die verskillende groottes van u opskrifte, die hoeveelheid afstand tussen hulle en die styl van die lettertipe gee almal ‘n spesifieke tonale kwaliteit aan u webwerf. U kan meer te wete kom oor die opstel van die tipografie van u handelsmerk.

Voorbeeld van die BBC-tipografiehandleidingBBC deel die opsomming en uitleg van hul tipografiese elemente —’n noodsaaklikheid vir ‘n groot nuusorganisasie wat baie verskillende opskrifte van verskillende betekenis gebruik.

Stap 4. Besluit op u kleurpalet

Kleur kan meer wees as net ‘n visuele voorstelling van u handelsmerk – dit kan die sielkunde van u gebruikers beïnvloed. ‘N Sekere rooi skakering kan selfs minder ‘n kleur word en meer ‘n onderbewuste skakel ‘n sekere koeldrank.

Voorbeeld van Mozilla-kleurgidsMozilla hou die handelsmerk konsekwent deur die kleurpalet van hul sagteware te definieer. Dit is belangrik dat u kleurkodes in HEX, Pantone, HSB, CMYK en RGB insluit; sou die geleentheid ontstaan ​​dat u handelsmerk buite ‘n rekenaarskerm moet bestaan, is u gereed daarvoor!

Stap 5. Bepaal die regte ikonografie

Ikone kook ‘n idee af tot onmiddellik toeganklike grafika. Daar is nie veel om agter te steek nie; as ‘n ikoon selfs effens buite die kilter is, sal dit die beoogde effek doodmaak. Sommige ikone is meer ontwerp-swaar as ander; dit maak nie die een styl beter as die ander nie, maar hulle moet net konsekwent wees. Vermy verkeerde ikonografie.

Voorbeeld van IBM-ikoonstylgidsIBM se ikoonbiblioteek bied konteksgebaseerde aksies vir hul ikonografie. Let op hoe almal ‘n soortgelyke styl is wat monochroom, plat en simplisties is.

Stap 6. Bepaal die regte beeldmateriaal

Watter beelde ondersteun u handelsmerk, die lewendige landskapfoto of die handgetekende tekenprent? Sal u u onderneming deur middel van voorraadfoto’s verteenwoordig, of sal u ‘n fotograaf huur om iets unieks te lewer? Wat die beste vir u situasie is, oorweeg die emosie dat u handelsmerk wil kommunikeer.

Stap 7: Bou die uitleg- en roosterstelsel

Dit is hier waar u beplanning beslis sal baat, aangesien dit probeer om ‘n belaglike tyd te neem om toekomstige bladsyuitlegte sonder verwysing te skep. Onthou om die uitleg te behou vloeistof vir verskeie skermgroottes.

MailChimp se roostergidsvoorbeeldMailChimp bepaal hoe hul hoofinhoud in ‘n raster gestruktureer is. Spesifieke pixelhoeveelhede vir die geut en opvulling verseker dat die rooster waar bly, ongeag die skermgrootte van die gebruiker.

Stap 8: Styl die elemente

Afhangend van die omvang van u webwerf, kan u honderde afsonderlike elemente hê om in ag te neem, van video’s tot blogopmerkings tot e-handelsitems. Hier is ‘n paar van die algemeenste, wat sonder twyfel op enige webwerf ingesluit sal word:

vorms

Dit gaan nie net oor die kleur en grootte van u invoervelde en etikette nie; moet u ook die teks insluit wat vertoon moet word in die geval van die indiening van vorms, foute of waarskuwingsboodskappe.

knoppies

U kleurpalet en tipografie sorg vir baie hiervan. Die kleur en die grootte van u knoppies kan verskillende dinge aandui: daar is knoppie-skakels, stuur knoppies, CTA-knoppies, kanselleer knoppies, menu-knoppies, ensovoorts.

spyskaarte

Weereens, baie van wat u reeds gevestig het, sal u die meeste van die pad hierheen kry. Spasiëring en teksbelyning is die belangrikste style om te spesifiseer. Sal u logo as ‘n tuisknoppie dien? Maak u die bekende ‘hamburger-ikoon’ weg vir iets meer kreatiefs?

hulpwerkwoorde

‘N Goeie stylgids wys nie net die ontwerp van u modelle (of pop-ups) nie, maar dit stel ook die voorwaardes vir die voorkoms daarvan. Watter aksies moet ‘n gebruiker neem om die modaal te sien? Hoe gaan die modale aksie van die gebruiker oorhaal??

Interaksie en animasie-effekte

Glo dit of nie, u handelsmerk kan in besonderhede uitgedruk word, selfs net so min as die millisekondes van ‘n hover-effek. ‘N Tekskakel met die waarde {animasie: 500ms gemak-in; } dra ‘n ander persoonlikheid en ‘n gevoel van dringendheid in vergelyking met {animasie: 100 ms lineêr; }.

As die animasie-tydsberekening tussen verskillende skakels op u webwerf nie ooreenstem nie, kan dit die gebruikerservaring verwar, dus neem die tyd om te beplan watter boodskap u animasies en interaksies oordra en hou by die reëls..

Moenie van inhoud vergeet nie

Ek gee veral aandag aan hierdie een, want die insluiting van inhoud en kopie in stylgidse is net so belangrik, maar dit word dikwels misgekyk. Soos u dit al voorheen gehoor het, inhoud is die grootste enkele dryfkrag agter u webwerf se sukses. Nuttige, oorspronklike en goedgeskrewe inhoud sal gebruikers ‘n baie dieper bevrediging beloon as mooi knoppies of spoggerige spyskaarte. Daarom is dit van kritieke belang om u kopieskrywers aan u kopieskrywers te gee, benewens u ontwerpers.

Goeie inhoud is nie net goed geskryf nie, dit moet die kommunikasie kommunikeer stem en toon van u handelsmerk deur ‘n konstante skryfstyl. Hierdie twee sleutelwoorde is so belangrik om vas te lê, en MailChimp het selfs hul aangewese name genoem gids vir inhoudstyl na hulle.

Uit hierdie voorbeeld kan u sien hoe MailChimp hul kopieskrywers opdrag gee om bewoording te formuleer wat in lyn is met die karakter van hul handelsmerk, met inagneming van die emosies van hul gebruikers op enige gegewe tydstip.

Handleiding vir inhoudstyl kan taamlik uitputtend wees, selfs die grammatikale reëls wat u van ‘n Engelse professor sou verwag, insluitend hulle. Die gids vir Tuts+ doen net dit. (Hul inhoudsgids sê selfs ek moet dit as “Tuts +” skryf en nie “Tutsplus” nie!)

Afsluiting

Stylgidse haal die raaiwerk uit as u aanlyn besigheid afskaal. Met hierdie lewensnoodsaaklike hulpbron, sal u nie meer probeer om nuwe spanlede vinniger te laat vang met die reëls van u handelsmerk nie.

Daar is miljoene besighede daar buite, maar daar is net een wat jy het. Beskerm die waarde van u uniekheid deur ferm te wees met die manier waarop u aangebied word. Gebruik nou ‘n stylgids vir ‘n handelsmerk wat in die toekoms herkenbaar bly.

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