De fleste af os er bekendte med større virksomheders nidkærhed over for deres brand, når det fremstilles i trykte medier. En “style guide”, “brand guideline” eller “design manual” finder du typisk hos de mere etablerede virksomheder og offentlige instanser. Den er med til at sikre, at der er en vis sammenhæng i virksomhedens udtryk, når denne fremstilles i alt fra annoncer, brochurer og rapporter til beklædning og køretøjer – og når andre virksomheder og privatpersoner benytter deres logo og brand i anden sammenhæng.
Men vores verden er langt fra kun fysisk. Langt det meste kommunikation fra virksomhed til målgruppe og omverden foregår i dag via nettet. Har du tænkt over, hvordan du gerne vil se ud der?
Hvorfor en style guide til online brug?
Hjemmesider bliver mere og mere komplekse og er sjældent ”færdige” i indhold. Ofte kan der være mange hænder inde over processen med at få designet ny hjemmeside. I større organisationer og virksomheder er der dog ofte flere end én hjemmeside. Hvordan sikrer man, at der er en vis sammenhæng, lighed og genkendelighed på tværs af alle sider – uden at det er den samme designer og udvikler, der sidder med dem alle? Svaret er en style guide! Og som større virksomhed, hvis brand ofte benyttes af tredjepart, er der tryghed i at vide, at brandet fremstilles efter hensigten hver gang. Henvis til din style guide og vær tryg.
Hvad er en online style guide?
Kort fortalt er en style guide historien om dit brand og din design-løsning. Den fremviser generelle designprincipper, som definerer projektets stil-retning. Den demonstrerer virksomhedens (eller projektets) image, identitet, værdier og stil og skaber den skabelon, som sikrer sammenhængende og konsekvent udtryk.
Style guiden giver dig – eller din(e) designer(e), udvikler(e) og tredjepart – en række prædefinerede elementer, grafik og fastsatte regler at arbejde ud fra. Med sådanne faste regler og anvisninger kan du som virksomhed sikre, at din online tilstedeværelse er ensrettet, strømlinet og sammenhængende på tværs af forskellige platforme – lige fra websites til sociale medier og apps.
Hvorfor er det vigtigt? Fordi genkendelighed skaber ro, tillid og top-of-mind hos din målgruppe. Se eksempelvis Hertz herunder. Hertz er et kæmpe internationalt foretagende med afdelinger og ansatte over hele kloden. Hovedsitet er gennemgående for alle lande. Men så stopper ligheden også. For Hertz har naturligvis et væld af sites for forskellige ordninger, rabatter, klubber, interessefællesskaber osv.
Ville det ikke have tjent Hertz bedre, hvis de og designerne havde arbejdet ud fra samme “skabelon”? Det ville i hvert fald have sikret, at Hertz fik den ønskede genkendelighed og sammenhæng på tværs af alle platforme.
Hvad skal der (som minimum) med i din virksomheds online style guide?
1. Logo
Som det gør sig gældende for trykte medier, er virksomhedens logo udgangspunktet for brandets visuelle kommunikation. Sørg for at have designet logoet ordentligt til at starte med og gør logoet tilgængeligt i forskellige opsætninger og fastsæt en minimumsstørrelse for brugen af logo. Logo skal desuden være tilgængeligt i forskellige farver med anvisning af, hvilke farvesammensætninger, der er tilladte.
Tillad fleksibilitet og fasthold sammenhæng.
2. Typografi
En ekstremt vigtig del af online kommunikation og webdesign er typografi – altså, hvilke skrifttyper, størrelser og kombinationer en virksomhed benytter sig af. Det er vigtigt at bruge tid på dette, da dårlig typografi i værste fald kan skræmme besøgende væk.
Brug tid på hierarkiet. Først overskrifterne: h1, h2, h3, h4, h5 og h6. Så brødteksten (paragraph), inkl. fed (bold) og italics. Og så er der specielskrifterne anvendt til mindre links, brødkrummer, intro tekster, knapper osv.
Skrifttyperne, vægten, spacing og farve. Angiv webfont alternativer til ikke-web-fonts.
3. Farveskema
Farver er vigtige for dit brand. Kunne du forestille dig Mærsk i en svag rosa? Eller evt. med en regnbuefarvet gradient på? Nej vel? Det er fordi, at Mærsk har været dygtige til at være konsekvente i deres branding. Det skal du også være.
Farveskema skal indeholde de tilladte farver og hvornår disse skal anvendes. Derudover skal der fremgå formater til hhv. tryk og online brug: CMYK, Pantone (eller den nærmeste Pantone farve) og RGB (Hex).
Specificer gerne primære og sekundære farver og angiv hvor og hvornår disse skal anvendes.
4. Lingo (tekstens stil)
En stor del af et brands personlighed bliver udtrykt via deres ”stemme”. At definere hvordan din virksomhed snakker og kommunikerer er en vigtig del af virksomhedens identitet. Taler du formelt og høfligt til din målgruppe? Taler du bedrevidende? Taler du kundens sprog? Er du sjov og nede på jorden?
Definer, hvordan din virksomhed taler og skab en vis sammenhæng mellem de mange ansattes kommunikation med kunder, b2b osv. Når mange mennesker taler og skriver for din virksomhed, kan det i værste fald lyde som skizofreni. Forsøg at holde en vis ensartet standard – uden at blive robotter.
5. Ikonografi
En mere og mere vigtig del af online design er ikonografi – brugen af standardiserede og minimalistiske billeder til at hjælpe med genkendelighed og brugervenlighed. Ganske vist har mennesket brugt sådanne forsimplede billeder i tusinder af år, så det er ikke noget nyt. Det nye er mediet.
Benyt fast definerede ikoner, der passer til virksomhedens stil og målgruppe (få dem gerne designet specifikt). Gør disse ikoner tilgængelige for alle, der er inde over virksomheden (.ai, .eps eller .svg). Ikoner kan hjælpe enormt på brugervenligheden (og konverteringen).
6. Billeder
Et billede siger mere end tusind ord. Gammel udslidt kliché. Jep. Men det er sandt. Specielt når vi tager den nuværende trend med enorme headersektioner med i betragtningen (om det er godt for konverteringen på dit site, er en anden snak)
Hvad enten du benytter store eller små billeder i din online kommunikation, skal du sikre, at stil og ”retning” hænger sammen. Tænk på virksomhedens værdier og de værdier, som virksomheden ønsker at signalere. Tænk på målgruppe, medie og kontekst og find billedmateriale, som understøtter dette og er i harmoni med farver og generelt udtryk (få meget gerne taget helt unikke billeder, som ikke hænger fast i stock foto dynget).
7. Formularer
En hjemmeside skal konvertere. Enten direkte via salg af fysisk eller virtuel vare. Eller indirekte via leads, kontakt, brugeradfærd o.l. En vigtig del af dette er formularer. Overvej nøje, hvordan disse strikkes sammen – ikke kun designmæssigt (farver, størrelser, spacing osv.), men også adfærdsmæssigt: Aktiv, passiv, hover, fejlbeskeder, advarsler, succes-beskeder, passwordstyrkeindikator (langt ord), standardbeskeder som ”din besked er sendt” og navigation ml. felter ved tryk på ->| (Tab) knappen.
Vi bruger alle formularer mange gange dagligt. Vi bemærker dem sjældent for alvor, med mindre de er dårligt udførte. Sørg for ikke at være iblandt sidstnævnte pulje.
8. Knapper
Knapper er en skøn forening af farveskema, formularer og din virksomheds lingo. Når disse enheder spiller maksimalt sammen, har du en forening, der får englene til at synge.
9. Spacing
Spacing er mellemrummet/afstanden mellem et element og et andet – og de indbyrdes forhold. At få defineret den afstand, der som minimum skal være fra logo til øvrige elementer er i sig selv vigtig og ret indlysende for de fleste. Men mellemrum mellem felter i formularer, knapper, billeder og øvrige elementer er også vigtig.
White space og god, konsekvent brug af spacing mellem elementer gør hele forskellen, når alle elementer er placeret.
10. Do’s and Don’ts
Show it – Don’t tell it. List op og vis, hvad man må og ikke må med dit brand. Giv eksempler på, hvad der virker og ser godt ud. Og giv eksempler på, hvad der ikke må gøres. Det gør det nemmere for alle.
Se fx her, hvordan LinkedIn præciserer do’s and don’ts for deres logo:
Find i øvrigt LinkedIns styleguide her.
Gode eksempler til inspiration
På findguidelin.es kan du finde et stort udvalg af online style guides – lige fra Facebook og Pinterest til Spotify og Airbnb. Brug dem som inspiration og tjekliste til din egen online style guide. Og husk, at det kan betale sig at tænke stort fra starten af. Kommer din virksomheds succes bag på dig, kan du godt have skubbet en masse arbejde foran dig, som du ender med at snuble over på vejen op. Det er bedre at være forberedt og have en strategi fra starten af – det er altid muligt at lægge til og trække fra løbende og i takt med virksomhedens udvikling.
Og husk, at ovenstående liste på ingen måde er udtømmende. Er du en online virksomhed, giver det også mening at overveje generelle ting inden for programmering og udvikling: hvilket sprog skal anvendes, CSS, JavaScript integration, form styling, version control osv. osv. Men måske det skal være oplægget til en kommende liste?
Sæt i gang og gør verden til et smukkere og mere sammenhængende sted fyldt med harmoni, farveafstemte logoer med god afstand til andre elementer med skarpe hjørner!
Starbucks skulle bla. have en god guide og det samme med mailchimp, så der sikres ens brug af elementer og deslige. For ikke at tale om at kommunikere ens.
Hej Michael. Som jeg kan se det, er Starbucks’ guide meget specifik og handler meget om webdesign, regler for kode o.l. Super nemt at gå til. Mailchimps guideslines – som også findes på guidelin.es – er også meget fine… og selvfølgelig lækkert sat op 🙂 Det er i bund og grund meget fedt, at flere og flere virksomheder tænker over det, får smidt det online og gør det let tilgængeligt. Nu skal vi bare have mange flere af de mindre virksomheder med.