Sådan opretter du en webside-stilguide til dit brand

Lær hvordan en stilguide kan holde dit brand visuelt og tonalt konsistent, når dit websted vokser.


Oprettelse af en guide til webstilsstil

Lad os male et scenarie her. Lad os sige, at dit websted vokser hurtigt både i sit omfang af indhold og i antallet af mennesker, du har brug for at komme med ombord for at vedligeholde det. Du har ansat designere, udviklere, tekstforfattere, social media managers – hele shebang. Hver person kommer og går og bidrager med sit stykke til den overordnede store ordning – alligevel har dit brands konsistens kørt amok. Nogle knaplink er blå; andre er grønne. Én underoverskrift er 26px i størrelse; en anden underoverskrift er 24px. Dit logo har for meget polstring omkring det på en side, men alligevel for lidt polstring på en anden …

Som ejer af dit websted har du allerede for meget på din tallerken, så hvordan kan du muligvis forvente at holde de hundreder af designregler for dit brand alt sammen inde i dit hoved? Hvordan kan du huske at fortælle en nyansat designer hver enkelt stilregel, som din tidligere designer allerede har etableret? Det er sandsynligt, at du bare ikke kan.

Det er her en stilguide kommer ind.

Hvad er en stilguide, og hvorfor har min virksomhed brug for en?

En stilguide er en samlet ressource, der definerer et brand gennem konsekvent brug af design, tone, stemme og identitet.

En god stilguide fungerer som den ultimative reference for dit brand. Det er en plan. Den definerer reglerne for typografi, farver, layout, logo-brug, tone, indholdsretningslinjer, brugeroplevelse og stort set alle aspekter af offentlig interaktion med dit brand.

Begrebet stilguider (eller mærkebibler) er ikke noget nyt, selvom deres anvendelse til websteder er et nyere hott emne. Almindeligvis findes i den trykte verden, hver store avis bevarer en stilguide for at opretholde formateringskonsistensen. For store virksomheder, hvor et brands karakteristiske farver skal matche nøjagtige specifikationer i alt fra tv-reklamer til siderne af semi-lastbiler, er en omfattende stilguide en absolut nødvendighed – og det kan blive ligefrem massiv i størrelse!

Chancerne er, at hvis du læser dette, har din virksomhed endnu ikke nået en skala, hvor du har brug for en hel marketingafdeling for at styre dit brandets identitet. Imidlertid, det er aldrig for tidligt at oprette en stilguide. At styrke principperne for dit brand nu vil spare dig for potentielle uheldige veje, når din virksomhed vokser til mere, end du alene kan holde styr på.

Når det er tid til at oprette en stilguide

Jeg ved, at du allerede kan forestille dig konsekvenserne af ikke at have en stilguide. Uden foruddefinerede retningslinjer for, hvordan dit brand skal og ikke bør udtrykkes, kunne enhver designer eller udvikler, du ansætter, tilføje deres eget personlige præg eller fortolkning til dit websted, som til sidst ender med at skabe stilistisk mudder snarere end en sammenhængende helhed.

Din online forretning drager fordel af en stilguide, hvis og hvornår:

  • Du begynder at delegere opgaver til teammedlemmer eller tredjepart. En stilguide vil holde alle på samme side og sikre, at bidragene standardiseres.
  • Dit websted er blevet ret stort (og uorganiseret i processen), og din CSS-fil er vokset ud af kontrol fra at tilføje nye stilarter til at erstatte allerede eksisterende, som du har glemt var der.
  • Du skal strømline processen med opdatering af dit websted. At have etableret retningslinjer for at henvise tilbage til sikrer, at nye tilføjelser hurtigt implementeres og i overensstemmelse med mærket.

Din stilguide findes på dit websted

Før du begynder at opbygge din stilguide, skal du udpege, hvor den findes. Den bedste praksis er at allokere sit eget område på dit websted, enten som et bibliotek (www.yourdomain.com/styleguide) eller som et underdomæne (styleguide.yourdomain.com).

Hurtig note: Husk, at din stilguide skal dele den samme CSS-fil som resten af ​​dit websted. Dette sikrer, at designopdateringer inden for den ene straks reflekteres i den anden og holder alt sammen og konsistent.

Din stilguide har sit eget layout

Lad os få dette ud af vejen: det tager tid at oprette din stilguide. Men betragt den energi, du lægger i den, som en investering, der sparer dig mere tid (og penge) i det lange løb.

Ligesom dit websted tager din stilguide brugeroplevelse i betragtning med et let at følge layout. Det fungerer i det væsentlige som et selvstændigt websted, ofte med en navigationsmenu der viser hvert element på dit websted i en logisk udvikling af betydning. Disse elementer præsenteres og styles, ligesom de ville være på hovedwebstedet, kun selvfølgelig med kontekstuelle retningslinjer og grunde til, at tingene er stylet som de er.

SE DET I HANDLING: En af de mest populære og omfattende stilguider til reference hører til Starbucks. Se på deres, hvis du har brug for inspiration til at få noget grundlæggende op.

Style Guides Vs. Mønsterbiblioteker

Udtrykkene “stilguide” og “mønsterbibliotek” bruges ofte om hverandre, og for enkelhedens skyld vil jeg henvise til og give eksempler på begge som en “stilguide”. Der er dog vigtige sondringer mellem de to, som du skal være opmærksom på.

Mønsterbiblioteker vil simpelthen præsentere designelementerne uden forklaring på, hvordan de skal bruges på webstedet eller appen. Stilguider vil passende give dig vejledning i den bedste praksis ved anvendelse af de valgte designparametre og forklare hvorfor der er visse regler, der skal følges, når du præsenterer mærket.

I det væsentlige kan du med et mønsterbibliotek blive præsenteret for stilindstillinger for H2-tags; hvad der dog mangler er, hvad en stilguide giver: instruktion i hvilken kontekst hvert enkelt H2-tag skal bruges.

Sådan opretter du en stilguide

Hvis du vil lave en stilguide, der markerer alle felterne, er her de trin, du vil tage:

Trin 1. Definer dit brand’s essens

Tag dig tid til at undersøge og overveje de definerende egenskaber ved dit brand, og kog det derefter ned i et eller to afsnit. Giv en missionerklæring, oplysninger om dine værdier og et par få nøgleord der vil lægge grundlaget for alle design- og indholdsbidrag, der skal følges. En stor billede kan også hjælpe let med at fastlægge tonen og karakteren i dit brand.

Størrelsen, placeringen og farverne på dit logo er vigtig i afspejlingen af ​​dit brand. Her ser du ofte også Gør det ikke der gør det meget klart, hvordan din virksomhed visuelt skal præsenteres for verden.

Eksempel på Twitter-logo guideTwitter efterlader ikke plads til fejl med deres omfattende regler for korrekt brug af dets logo.

Trin 3. Opret typografien

Typografi skildrer en meget håndgribelig følelse af karakter for dit brand. De forskellige størrelser på dine overskrifter, størrelsen på afstanden mellem dem og stilen på skrifttypen giver alle en bestemt tonekvalitet til dit websted. Du kan lære mere om etablering af dit brands typografi.

Eksempel på BBC-typografivejledningBBC deler markup og layout af deres typografiske elementer – en nødvendighed for en stor nyhedsorganisation, der bruger mange forskellige overskrifter af forskellig betydning.

Trin 4. Vælg din farvepalet

Farve kan være mere end bare en visuel repræsentation af dit brand – det kan påvirke dine brugers psykologi. En bestemt rødfarve kunne endda blive mindre en farve og mere en underbevidst forbindelse til en bestemt læskedrik.

Eksempel på Mozilla-farveguideMozilla holder sit brand ensartet ved at definere farvepaletten på deres software. Det er vigtigt, at du inkluderer farvekoder i HEX, Pantone, HSB, CMYK og RGB; skulle lejligheden opstå, at dit brand skal eksistere ud over en computerskærm, er du klar til det!

Trin 5. Bestem den rigtige ikonografi

Ikoner koger en idé ned i umiddelbart tilgængelig grafik. Der er ikke meget at gemme sig bag; hvis et ikon endda er lidt ude af kilter, dræber det den tilsigtede effekt. Nogle ikoner er mere designtunge end andre; dette gør ikke den ene stil bedre end den anden, men de skal bare være ensartede. Undgå inkongruøs ikonografi.

Eksempel på IBM-stilstilguideIBMs ikonbibliotek giver kontekstbaserede handlinger til deres ikonografi. Bemærk, hvordan de alle følger en lignende stil, der er monokrom, flad og forenklet.

Trin 6. Bestem det rigtige billede

Hvilke billeder understøtter bedst dit brand, det pulserende landskabsfoto eller den håndtegne tegneserie? Vil du repræsentere din virksomhed gennem stock fotos, eller vil du ansætte en fotograf til at levere noget unikt? Uanset hvad der er bedst for din situation, skal du overveje emotion at dit brand ønsker at kommunikere.

Trin 7: Byg layout og gitter-systemet

Det er her, hvor din planlægning helt sikkert vil betale sig, da det forsøger at skabe fremtidige sidelayouter uden en henvisning normalt tager en latterlig mængde tid. Husk at beholde layoutet væske til flere skærmstørrelser.

MailChimps netguideeksempelMailChimp fastlægger, hvordan deres hovedindhold er struktureret i et gitter. Specifikke pixelmængder til tagrenden og polstring sikrer, at gitteret forbliver sandt, uanset brugerens skærmstørrelse.

Trin 8: Stil elementerne

Afhængigt af omfanget af dit websted kan du have hundreder af separate elementer, der skal tages i betragtning, fra videoer til blogkommentarer til e-handelsvarer. Her er nogle af de mest almindelige, som uden tvivl vil blive inkluderet på ethvert websted:

Forms

Det handler ikke kun om farven og størrelsen på dine inputfelter og etiketter; skal du også medtage teksten, der skal vises i tilfælde af vellykket formularindgivelse, fejl eller advarselsmeddelelser.

Knapper

Din farvepalet og typografi tager sig af mange af disse. Farver og størrelse af dine knapper kan betyde forskellige ting: der er knaplink, indsend knap, CTA knapper, annullering knapper, menuknapper osv..

Menuer

Igen, meget af det, du allerede har etableret, får dig mest af vejen hit. Afstand og tekstjustering er de vigtigste stilarter, der skal specificeres. Vil dit logo fungere som en Home-knap? Grøfter du det velkendte “hamburgerikon” for noget mere kreativt?

modals

En god stilguide viser ikke kun designet til dine modaler (eller pop-ups), men den angiver også betingelserne for deres udseende. Hvilke handlinger skal en bruger tage for at se modalen? Hvordan skal modalen overtale handling fra brugeren?

Interaktions- og animationseffekter

Tro det eller ej, dit brand kan udtrykkes i detaljer, selv så småt som millisekunderne med en sveveeffekt. Et tekstlink med værdien {animation: 500ms eas-in; } formidler en anden personlighed og en følelse af uopsættelighed sammenlignet med {animation: 100ms lineær; }.

En uoverensstemmelse i animationstimingen mellem forskellige links på dit websted kan muligvis blande brugeroplevelsen, så tag dig tid til at planlægge, hvilken meddelelse dine animationer og interaktioner videresendes og hold dig til disse regler.

Glem ikke noget om indhold

Jeg lægger særlig vægt på denne, fordi inkludering af indhold og kopi i stilguider er lige så vigtig, men ofte overset. Som du har hørt det før, indhold er den største drivkraft bag dit websteds succes. Nyttigt, originalt og velskrevet indhold belønner brugerne en meget dybere tilfredshed end smukke knapper eller smarte menuer. Derfor er det vigtigt at give dine tekstforfattere brand-retningslinjer ud over dine designere.

Fantastisk indhold er ikke kun godt skrevet, det skal kommunikere stemme og tone af dit brand gennem en konsistent skrivestil. Disse to nøgleord er så vigtige at fange, MailChimp har endda navngivet deres udpegede vejledning til indholdsstil efter dem.

Fra dette eksempel kan du se, hvordan MailChimp instruerer deres tekstforfattere til at formulere ordlyd, der er i overensstemmelse med deres brand, mens de tager højde for følelser af deres brugere til enhver tid.

Vejledninger til indholdsstil kan være temmelig udtømmende, også inklusive grammatiske regler, som du kunne forvente af en engelsk professor. Vejledningen til Tuts+ gør netop det. (Deres indholdsguide beder mig endda om at skrive det som “Tuts +” og ikke “Tutsplus”!)

Konklusion

Stilguider tager gætteriet fra at skalere din online forretning. Med denne vitale ressource på plads, vil du ikke længere krybe for at fange nye teammedlemmer op til hastighed efter reglerne for dit brand.

Der er millioner af virksomheder derude – men der er kun én. Beskyt værdien af ​​din unikhed ved at være fast med, hvordan du bliver præsenteret. Anvend nu en stilguide til et brand, der forbliver genkendeligt i fremtiden.

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