Berg-Hansen
Designmanual
Sist oppdatert:
22.oktober 2024
6.0
Grafisk elementer
7.0
Sosiale medier
8.0
Universell utforming
9.0
Tone of voice
10.0
Nedlastning
Velkommen til vår designmanual! Her finner du våre retningslinjer og maler for visuell utforming. Du kan laste ned logo, malene og lese om vår tone of voice.
Har du spørsmål eller tilbakemeldinger kontakt oss gjerne: kommunikasjon@berg-hansen.no
Er du på utkikk etter designsystem for digitale flater? Den finner du i Figma
1.0
Logo
Logoen består av to elementer, symbolet og ordmerket/merkevarenavnet vårt. Logoen vår symboliserer møter, reiser, opplevelser, dynamikk og fart.
Font brukt i logo: Apex New Book og Bold.
1.1
Symbol
Symbol-logo («kula») skal kun brukes i de tilfellene hvor arealet er liten eller når hovedlogoen ikke kan brukes. Eksempel for hvor denne skal brukes er på profilbilde i sosiale medier, footeren på nettsidene og i appen.
1.2
Variasjoner
Det er to versjoner av logoen, for å optimalisere hvordan vi presentere merkevaren vår i forskjellig formater.
Den horisontale logoen er hovedlogoen vår. Symbolet brukes kun der det ikke er plass til hovedlogoen. Ved bruk av Symbolet må hovedlogoen framkomme på et tidspunkt slik at det er tydelig hvem som er avsenderen. Eksempel på dette er i Power Point malene, eller i en slutt vignet for film.
Horisontal logo (Hovedlogo)
Trykk: 10 mm
Digitalt: 40 px
Symbol logo
Trykk: 5 mm høy
Digitalt: 29 px
1.3
Fargevariasjoner
Førstevalg av logo er alltid farget symbol med Berg-Hansen i sort tekst. Deretter er andre valget farget symbol med hvit tekst. Nestevalget er deretter hel hvit logo. Helt sort logo (både emblem og tekst) skal kun brukes hvis hverken farget eller hvit logo fungerer.
1.4
Feilbruk
Logotypen skal ikke endres på noen måte og skal alltid følge retningslinjen.
Følgende eksempler viser hva som ikke er mulig å gjøre med logoen.
Endre form og/eller farge
Lage mønster med logoen
Legge til forettningsområdet
Plassere logoen skrått
1.5
Luft rundt logo
Logoen skal alltid plasseres i en fremtredende posisjon slik at den vises tydelig. Rundt logoen skal det alltid være nok luft til å sikre et rent og oversiktlig visuelt bilde.
Riktig mengde luft beregnes ved hjelp av logosymbolet, kulen. Som vist her.
Formatene EPS, AI, PNG, PDF, JPG og AI er lagret med dette luftrommet rundt logoen.
1.6
Bakgrunn
Det er viktig at logoen alltid har tilstrekkelig kontrast til bakgrunnen.
1.7
Plassering
Når du benytter logoen må den plassers riktig ut fra hvilke kanal den plasseres i. Som hovedregel skal logoen plasseres inntil et hjørne. Det er aldri lov å plassere den fritt på flaten.
Topp venstre: kun for nettsider.
Topp høyre: Word, Power Point, film og markedsføringsmateriale.
Midten: markedsmateriell og film.
Bunn venstre: kun for nettsider.
Bunn høyre: kun for markedsmateriell.
1.8
Nettsider
På nettsidene skal logoen plasseres i header og footer på venstre side. På nettsiden benyttes helfarge logoen som er hovedlogoen og symbollogo.
1.9
Annonser
På annonsen skal hovedlogoen alltid plassers i høyre hjørne på bunnen.
For bestilling: Fyll du ut vedalgt bestillingskjema og send til kommunikasjon@berg-hansen.no
1.10
Word og PowerPoint dokument
I Word dokumenter skal hovedlogoen stå i topp høyre hjørne.
For ansatte ligger Word-mal med riktig plassering av logo i Microsoft Office 365.
1.11
Film
Alle filmer skal ha en sluttplakat med hovedlogoen. Logoen skal plasseres i midten av skjermen. Symbollogoen skal alltid plasseres i topp høyre hjørne igjennom filmen dersom denne skal benyttes.
Vi tekster film hvor det er dialog. Det er et krav i sosiale medier.
1.13
Samarbeidspartnere
Plassering av samarbeidspartner sin logo skal ha et emblem avstand til «Berg-Hansen»-logoen. Den skal plasseres til venstre for Berg-Hansen logoen.
Ved bruk av logoene til flere samarbeidspartnere skal et halvt logosymbol benyttes for å justere avstanden mellom logoene. Høyden for samarbeidslogoen skal ikke overstige 75% av høyden til Berg-Hansen logoen.
1.14
Meeting & Events
Meetings & Events-logoen er kun for bruk i presentasjoner, arbeidsklær og annet relevant crew-materiell. Logoen benyttes ikke eksternt utover presentasjoner.
luft
Logoen skal alltid plasseres i en fremtredende posisjon slik at den vises tydelig. Rundt logoen skal det alltid være nok luft til å sikre et rent og oversiktlig visuelt bilde.
Riktig mengde luft beregnes ved hjelp av bokstaven «M». Som vist her.
Formatene EPS, AI, PNG, PDF, JPG og AI er lagret med dette luftrommet rundt logoen.
Hvordan bruke logoen
Ved bruk av Meetings & Events logoen må Berg-Hansen fremstå tydelig som avsender. Dermed må man enten vise logoen sammen med Berg-Hansen på samme flate, eller kun vise Berg-Hansen sin logo på et tidspunkt.
Skriften i de to logoen skal alltid ha samme farge dersom de dukker opp på samme flate. Dermed skal de begge to enten ha hvit tekst eller svart tekst.
Skriftstørrelse på logoene skal være lik da det ikke skal være noen fokusforskjell når de dukker opp på samme flate. Avstanden mellom logoene skal være en «Berg-Hansen logo»-avstand. Illustret til høyre. Ved bruk av Meeting & Events logoen skal Berg-Hansen sin logo alltid være plassert på samme flate.
Feilbruk av logo
Meetings & Events-logoen kan kun benyttes i svart eller hvit. Den skal følge de samme reglene som hovedlogoen i forhold til bakgrunn og feil bruk. Meetings & Events-logoen skal ikke brukes for mye, og bør derfor ikke plasseres på alle sidene i en presentasjon, for eksempel.
Ikke plasser M&E logoen og Berg-Hansen sin logo for tett under hverandre. Dette framstår som en egen ny logo. Dette er ikke tillatt å bruke logoen slikt. Se bilde til høyre for illustrasjon.
2.0
Profilfarger
Berg-Hansen blå er vår primærfarge og skal være fremtredende i alle flater der farge brukes. Fargen skal alltid være til stede når Berg-Hansen er avsender, enten som bakgrunnsfarge på mindre flater eller for å fremheve viktige elementer, som en Call to action.
Der det er mulig, bruker vi mørk blå i stedet for sort for å styrke det visuelle uttrykket vårt.
2.1
Fargene våres
Berg-Hansen blå
Mørk blå
Lys blå
Turkis
2.2
Vektlegges
Bildet til venster visualiseres hvordan fargene skal vektes i alle flatene. Det er Berg-Hansen blå som skal være den fargen som er brukt mest på en flate i mostestning til de andre tre fargene.
2.3
Feilbruk
Fargekomboer som ikke er tillat på tekst (i alle størrelser):
• Lys blå & Turkis
• Mørk blå & Berg-Hansen blå
2.4
Farger til digital bruk
På digitale flater har vi behov for flere skarpere fargenyanser.
2.5
Kontraster
All fargebruk i Berg-Hansen skal til enhver tid oppfylle kravene til universell utforming basert på EU-standarden WCAG 2.0. Som hovedregel skal vi alltid etterstrebe at komposisjoner oppfyller middels kontrastnivå (AA).
Les mer om universell utforming
3.0
Typografi
Vi skal kun benytte fontene "Inter" på all material som produseres i Berg-Hansen.
Denne fontene er utviklet til bruk på dataskjermer med søkelys på god lesbarhet. Denne fonten fungere også godt i små tekststørrelse og har en stor variasjon av forskjellige vekter og stiler. Det er en allsidig font som støtter en rekke språk. I tillegg er den tilgjengelig under SIL Open Font License, noe som betyr at den er gratis for både personlig og kommersiell bruk.
Inter: Brukes til all materiell.
Aptos: Kun til bruk i e-post kommunikasjon.
Apex New: Kun bruk i logo.
3.1
Feilbruk
Følgene punkter er ikke tillatt å gjøre:
• Ikke juster tegnavstand eller linjeavstand.
• Ikke bruk kun caps lock (store bokstaver).
• Skrifttypen skal ikke skyggelegges eller ha andre effekter.
3.2
Bruk og plassering
Følgene punkter skal følges for all typografi:
• Teksten skal alltid være lesbar.
• Farge på brødtekst: mørkeblå, lyseblå, svart og hvit.
• Undertittel og tittel skal ha forskjellige farger.
• Undertittel skal være 70% av størresen til tittelen.
Forsøk å bruke mørk blå/lys blå på brødtekst hvor mulig. Skaper et mer helhetlig uttrykk som er snillere for øynene.
3.3
E-post signatur
For all e-postsignaturer og kommunikasjon via e-post skal erstatningsfonten Aptos benyttes. Denne fonten skal kun brukes til e-post og ikke til andre formål. Innholdet i
e-postsignaturen bestemmes basert på informasjonen som finnes på «Min side», og vil derfor variere avhengig av ansettelsessted.
4.0
Bilder og film
Vi bruker bilder/filmer som folk kan kjenne seg igjen i på reiser, møter, konferanser og arrangementer. Det betyr at vi fokuserer på:
Ekte mennesker og situasjoner
Velg bilder/filmer som inneholder ekte mennesker i autentiske situasjoner. Unngå sterkt stagede eller overdrevne bilder. La ansikter og kroppsspråk formidle ekte følelser og relasjonene mellom mennesker.
Uforglemmelige øyeblikk
Velg bilder/filmer som fanger øyeblikk av møter mellom mennesker, latter og jublende øyeblikk. Dette innebærer også øyeblikk på gruppereiser eller fra scenen på arrangementer. Sørg for å bruke naturlig lys, eller blits som gjør at lyset fremstår naturlig. Unngå oppstilte bilder med sterk blits og kalde toner.
Teknologiske løsninger
Teknologiske løsninger som brukes i ekte situasjoner av mennesker som gjør reisen/arrangementet enklere. Dette kan vises gjennom bilder av mennesker på farten som sjekker app på telefonen eller interaksjoner mellom mennesker på arrangementer som registreres via teknologiske løsninger.
Destinasjoner og transportmidler
Bildene/filmene skal på en eller annen måte formidle at vi er tilbydere av reiser, møter, konferanser og arrangementer. Dette innebærer bilder av destinasjoner, situasjoner i små og store møte- og konferanselokaler, på arrangementer og ulike transportmidler som fly, tog, båt og bil.
4.1
Riktig bruk
Bildene/filmene våre skal formidle ekte øyeblikk fra med ekte følelser og mennesker. Unngå oppstilte eller stagede
bilder/filmer.
Vi etterstreber at bildene/filmer skal se mer sjarmerende ut enn profesjonelle. Mer fokus på at bildene/filmene er godt sett, enn imponerende teknisk.
Mennsker
Varme bilder
Stemingsfullt
4.2
Feilbruk
Unngå å retusjere bort mindre ufullkommenheter, med mindre det er svært distraherende.
Unngå bruk av AI-genererte-bilder/filmer med mindre det er en tydelig del av konseptet eller fremstillingen.
Kalde bilder
Oppstilt bilder
Alkohol/vinglass
Ai-generet
Overredigert
Folketomt
4.3
Våre bilder
Dersom du skulle trenge bilder finner du dette i bildebanken vår på SharePoint. Alle bildene her kan bennytes både internt og eksternt.
Dersom du trenger nye bilder kan vi være behjelpelig til å ta nye bilder. Eller så kan du finne gratisbilder her
• Pexels
• Unsplash
Vi har også muligheter til å skaffe lisenser på bilder fra Adobe Stock.
Grunnet opphavsrett er det ikke lov å hente bildder fra søkemotororer som Google ol.
4.4
Musikk i film
Det er viktig å være bevisst i valg av musikk til bruk i film. Musikkvalget skal støtte opp under filmens budskap, og takt/tone skal være i tråd med innholdet i filmen. På video med intervjuer eller mennesker som prater, skal det benyttes instrumental musikk. Velg musikk som bidrar til å skape entusiasme og positiv energi, gjerne innen sjangerne Pop eller Rock.
4.5
Grafikk i film
Grafikk skal kun brukes dersom det styrker budskapet i videoen eller gir nyttig informasjon som ikke kan formidles på annen måte, for eksempel navn på personer som intervjues eller steder som vises.
Berg-Hansens logo skal alltid være synlig for å tydeliggjøre hvem som er avsenderen av videoen. Logoen skal alltid stå i høyre hjørne, og det skal i tillegg være en sluttplakat med hovedlogoen som plasseres i midten av skjermen. Farger og skrifttyper skal følge designmanualen.
4.6
Teksting i film
Alle forhåndsinnspilte videoer produsert av Berg-Hansen skal tekstes i henhold til retningslinjene fra WCAG 2.1. Det betyr at alt som blir sagt eller viktig informasjon skal fremkomme som undertekst i filmen. Lydeffekter som er relevante for handlingen skal også fremkomme i teksten. Tekst som allerede vises på skjermen, som for eksempel kulepunkter eller på en presentasjon, trenger ikke å tekstes i tillegg dersom informasjonen blir gjengitt i tale.
Teksting skal ha maksimalt to linjer og samsvare med det som blir sagt. Undertekst skal være i skrifttypen Inter med hvit tekst og svart omrisse.
For å lese mer om rettninglinjene fra WCAG 2.1 kan du se på følgende punkter:
• 1.2.1 Bare lyd og bare video
• 1.2.2 Teksting (forhåndsinnspilt) (Nivå A)
4.7
Egne bilder
Bruk mobilen når du er tilstede på arrangementer, møter, konferanser, studieturer o.l. for å ta bilder og video.
Hold telefonen stående. Dette formatet egner seg best for sosiale medier. Du trenger ikke redigere bildene - det kan vi hjelpe deg med hvis bildet trenger redigering.
Til alle med Iphone: Gå til «Innstillinger» —> «Kamera» —> «Formater» —> Huk av «Mest kompitabelt». Da blir bildene «JPG» og ikke HEIC. Heic-filer kan ikke leses av Microsoft (RDS)
4.8
Filming til sosiale medier
Bruk kameraet på telefonen for å filme, ikke apper som Snapchat o.l. Vi ønsker ikke videoklipp med filter, klistremerker eller musikk som er lagt på i ettertid.
Hold telefonen stående (og helst i ro) når du filmer. Du kan bevege deg sakte, men unngå raske bevegelser som å snurre telefonen rundt.
Film korte snutter på 5-10 sekunder, gjerne samme motiv fra forskjellige vinkler.
5.0
Ikoner
Et ikon er et symbol som har en likhet med objektet det representerer. Generelt brukes ikoner til å kommunisere informasjon uten behov for ord. Ikoner skal kun brukes i digitale tjenester.
Vi bruker ikonene fra Google. Hele biblioteket er i utgangspunktet lov å bruke, men det skal grundig vurderes om man skal inkludere ett nytt ikon fra biblioteket til nettsidene. Dersom det er behov for et nytt ikon utover det som finnes på Google, har Google en guide som beskriver hvordan man skal lage ikoner. Dersom det lages et nytt ikon må ikonet bruketestet før det tas i bruk.
Ikoner kan være i fargene blå, turkis, sort og hvit.
5.1
Størrelse
Til digitalt bruk er det kun lov med størrelsene: 12px, 16px, 20px, 24px, 32px, 48px og 65px.
Ikke bruk ikoner fra andre bibliotek
Ikke endre tykkelse
Ikke bruk andre farger enn spesifisert i designmanual
6.0
Grafiske elementer
Implementeringen av sirkler som designelement i vår visuelle identitet er et valg som bygger på både praktiske og estetiske hensyn. Sirkelen stammer direkte fra vår logo, og representerer verdier som reise, bærekraft og jorden – sentrale temaer i Berg-Hansen sin merkevare.
I tillegg til symbolikken gir sirkelen en visuell enkelhet som er både gjenkjennelig og fleksibel i ulike flater. Sammenlignet med tidligere bruk av heksagoner, er sirkler enklere å anvende og tilpasse i ulike sammenhenger, både i digitalt og trykt materiell.
6.1
Bruk og plassering
Sirkelen gir mulighet for å integrere både bilder og tekst på en lesbar og konsistent måte, forutsatt at det er godt begrunnet og visuelt i tråd med vårt helhetlige uttrykk. Denne fleksibiliteten åpner for kreativitet, samtidig som den sikrer et enhetlig merkevareuttrykk.
6.2
Feil bruk
All tekst inni sirkler skal være lesbar. Ikke press inn masse tekst dersom det ikke egner seg.
Dersom bilder skal plasseres inni sirkler, må sirklene være stor nok til at det ikke blir utydelig eller rotete.
Det er lov å ikke bruke sirkler.
7.0
Sosiale medier
På Instagram står vi ikke fritt til å benytte de farger og skrifttyper vi ønsker. Benytt egne retningslinjer for sosiale medier.
Retningslinjer sosiale medier.pptx
For spørsmål kontakt: kommunikasjon@berg-hansen.no
8.0
Universell utforming
Universell utforming handler kort sagt om design for alle! Alt vi gjør i Berg-Hansen skal tilgjengeliggjøres for alle type mennesker, uansett behov. Dette er noe vi stadig jobber med for å forbedre.
8.1
For utviklere
All HTML må være semantisk. Les mer om semantisk HTML.
Brukeren må kunne navigere med tastatur, med fokus på relevante objekter. Gode beskrivende alt-tekster og korrekte aria-labels, tilrettelagt for skjermlesere. Alt skal utvikles responsivt, slik at innholdet passer alle flater. Brukere må kunne overstyre tekststørrelse. Interaktive elementer må ha tilstrekkelig trykkflater.
8.2
Nyttige verktøy
Google Lighthouse (Web)
Webaim Wave (Web)
Captions (teksting)
Capcut (teksting)
W3C-HTML (Validering av HTML)
W3C-CSS (validering av CSS)
9.0
Tone of Voice
Berg-Hansens tone of voice beskriver følelsene vi ønsker å uttrykke og formidle i ord, bilder og layout. Alt vi sier og gjør formidler en følelse og gir en opplevelse – fra hvordan vi formulerer våre tekster og utformer våre publikasjoner til måten vi oppfører oss på. Stemmen vår skal beskrive følelsen vi ønsker å skape og den tar utgangspunkt i tre temaer:
Visjon
Vi skal bli uunnværlige for alle reisende.
Misjon
Vi forstår kundenes behov og bruker vår kompetanse, brukervennlige tjenester og unike nettverk til å levere den desidert beste løsningen for kunden.
Posisjon
Å benytte seg av Berg-Hansen er lurt, lett og lønnsomt.
Personlig
Vi ønsker å vise at vi brenner for det vi gjør. I det så ligger det også å bli oppfattet som uformelle og engasjerte. Dette reflekteres i både måten vi kommuniserer, og i hvilken type bilder vi bruker.
Hva det er:
Å vise interesse i kunden
Å ha en uformell tone
Å ha en varm bildestil
Hva det ikke er:
Å bare kommunisere en vei (enveiskommunikasjon)
Å ha en formell og høytidelig tone
Å skape distanse gjennom bildebruk
Uredd
Vi ønsker å bli oppfattet som uredde gjennom å vise mot og handlekraft. Handlekraften skal være med en positiv «drive». Det betyr at vi skal fokusere på det positive og ikke det negative.
Hva det er:
Å være direkte i tonen
Å være tilgjengelig
Å tørre å anbefale
Hva det ikke er:
Å være utydelig
Å være negativ
Å skjule noe
Nytenkende
Vi ønsker å bli oppfattet som nytenkende og innovative og dette reflekteres i alt fra våre tekniske løsninger, tips vi gir kunden til hvilke typer bilder vi bruker.
Hva det er:
Å tenke positivt
Å ligge i forkant
Å tenke annerledes
Hva det ikke er:
Å være traust
Å være tradisjonell
Å henge etter
Våre verdier
Ansvarlig
Vi er til å stole på.
Personlig
Vi brenner for det vi gjør.
Nytenkende
Vi går foran.
Uredd
Vi viser mot og handlekraft.
10.0
Nedlastning
10.1
Logo
Dersom du trenger logoen til Berg-Hansen finner du den her. Det er viktig å lese igjennom rettninglinnjer for logobruk når du skal bruke denne logoen.
10.2
Bestillingskjema
Dersom du skal kontakte oss i Kommunikasjons og markedsførings avdelingen for bestilling kan du benytte bestillingskjamet. Dette sender du til oss på e-post:
© Berg-Hansen 2024