Digital profilhåndbok
for Wattn
Her finner du alt du trenger for å bygge merkevaren Wattn.
Versjon 2.0, 2024
Index
Co-branding
Uttak
Kontaktinfo
Topphistorie
Midt mellom folk og bedrifters behov for strøm og den store energiomstillingen, finner du Wattn. Vi skal sørge for at folk og bedrifter får lys og varme slik at vi sammen tar større hensyn til fremtiden, hvor varmen på badegulvet og strømmen til produksjonsfabrikken kommer fra fornybar energi.
I 150 år har det vært produsert strøm i Norge. Det er like selvfølgelig at vi har strøm i kontakten som rent vann i springen. Vi bruker strøm til det meste i hverdagen, og fremover kommer vi til å bruke mer strøm. Mye mer strøm. Derfor må vi sløse mindre og det må produseres mer fornybar energi.
Vi i Wattn skal ta vårt ansvar for å bidra til dette. Hvordan og når du bruker strøm har nemlig noe å si. Når skal du steke bursdagskaken? Når skal bedriften sette klippfisken til tørking? Og når bør elbilen lades? Vi tror at løsningen på de små tingene i hverdagen også er en viktig del av løsningen på de store utfordringene.
Svarene finner vi ved å spille på lag med kundene, teknologien og gode digitale løsninger som gir folk og bedrifter kontroll og oversikt over strømforbruket. Sammen skal vi unngå strømsløseri, noe som er bra for både lommeboka og miljøet. Effekten av å spille på lag er avgjørende for å lykkes, og sammen skaper vi en positivt lada fremtid.
Brand Canvas
Konsept
Hverdagsmagi
Det er noe magisk ved energi. Den kan verken høres eller sees, men den omgir oss. Den er alltid i bevegelse. Den flyter, stråler, skaper og aktiverer. Energi er en kontinuerlig og naturlig syklus som skaper liv, og gir liv.
Gjennom smarte ideer og effektive løsninger, gir vi din energi positive næring. Vi tilpasser oss. Vi er fleksible, endringsvillige og søker kontinuerlig nye inspirerende muligheter.
Dynamiske, levende og optimistiske muligheter. For oss er energi en sterk og positiv kraft. En kraft som kan skape både små og store magiske øyeblikk i hverdagen. Øyeblikk som forenkler, forbedrer og viser vei mot en lysere og mer bærekraftig fremtid.
Logo
Vår logo er en skreddersydd versjon av vårt navn og representerer vår varme og engasjement gjennom de myke geometriske linjene kombinert med vårt solide fundament og lang historikk presentert gjennom de rette horisontale linjene. Dette kombinert skaper en solid og sterk logo som representerer oss som selskap.
Primærlogo (sort)
Logoen vår skal som hovedregel brukes med sort farge. Dette sikrer et konsistent og helhetlig uttrykk på tvers av alle flater bakgrunnsfarger, og den sorte fargen gjør at vi alltid er godt synlige.
Sekundærlogo (hvit)
Vi har også en hvit logo, som helt unntaksvis skal brukes på bilder, video og andre mørke flater der primærlogoen vår ikke synes.
Den skal derfor aldri brukes på gradienten eller noen av de definerte fargene i paletten våre, det er lyse farger så der vil ikke den hvite logoen synes.
Logoplassering
Foretrukket plassering på en flate er i øverste eller nederste venstre hjørne. Logoen kan også midtstilles. Den skal aldri plasseres til høyre.
Symbol
W'en fra logoen vår kan også brukes som et eget frittstående symbol. Formuttrykket er inspirert av vannet vi henter vår energi fra og står trygt og er fremoverlent – akkurat som oss.
Symbolet skal brukes der det ikke er plass til hele logoen – f.eks. profilbilder i sosiale medier, app-ikon, thumbnails eller andre små flater.
Clear space
Logoen skal være omgitt av tilstrekkelig clear-space (plass rundt logoen), for orden og ryddighet. Grenseområdet rundt logo baserer seg på høyde og bredde av dobbel t. På symbolet er grenseområdet konsistent med høyden og bredden på 50% av selve symbolet.
Co-branding
Når logoen vår brukes sammen med andre logoer, skal den alltid benyttes i sort eller hvitt, avhengig av bakgrunn. Når Wattn er ansvarlige for oppsett av co-branding, gjelder dette prinsippet også for andre logoer som benyttes.
Morselskaper
Satt sammen med én morselskaplogo kan logoene sidestilles. Ved to eller flere logoer skal Wattn oppleves som helten og stå som den største logoen. På mindre flater hvor morselskaplogoene oppleves mindre synlige kan navnene skrives ut med tekst i profilfonten.
Designelement
Et designelement det er takknemlig og gøy å jobbe med. Elementet understreker de magiske øyeblikkene som oppstår i hverdagen og viser den positive energien som vi omgir oss med – som en aura. Gradientfargene er inspirert av naturen og understreker vårt bærekraftsperspektiv, viser skiftende strømninger og formasjon av energi. Elementet fremstiller oss som en katalysator og aktivator og er en grafisk fremstilling av vår energi, nysgjerrighet og drivkraft.
Animert og statisk bruk
Designelementet fungerer godt både animert og på statiske flater. På flater hvor dette er mulig skal elementet helst settes i bevegelse, dette for ytterligere å underbygge energien dette representerer. Der det ikke er mulig kan én av flere predefinerte gradienter bruker som bakgrunn.
Designelementets store variasjon
Der det er mulig skal den animerte gradientfilmen brukes som bakgrunn for mest mulig dynamikk og energi, men det er mange tilfeller der video ikke kan brukes. Derfor er det hentet ut 10 stillbilder fra den animerte gradienten, som skaper 10 ulike varierte designelementer. Disse har høy bildekvalitet og er svært fleksible i bruk, og man kan fritt rotere, croppe og strekke i disse for å skape uendelige variasjoner i designelementets utseende.
Som hovedregel er det designelementet som skal være “bakgrunnsfargen” på en flate, enten det er en SoMe-post, reklameannonser, bannere, og andre steder.
Stillbilder av gradienten
– 10 stk høyoppløselige gradienter
– 3840 x 2160 px (4K oppløsning)
– JPG format, for høyest kvalitet med lavest filstørrelse (totalt 13,6 MB for alle bildene)
– Kan croppes, roteres, skaleres og strekkes til alle mulige bruksområder og flater.
Fargepalett
Fargepaletten vår er utviklet basert på designkonseptet «hverdagsmagi» hvor de levende fargene utstråler energi. Et fargesystem som differensierer oss, tilfører noe nytt og gir energi. Fargene viser egenart, og gir oss et fleksibelt og dynamisk system som er spesielt godt egnet for digitale flater.
I hovedsak skal fargepaletten oppleves lys og luftig, hvor primært sort og hvitt brukes i kombinasjon med energifargene. Disse fargene støttes opp av ett sett «jordnære» solide sekundærfarger for bruk på mindre områder.
Primærfarger
Fargepaletten vår er basert på designkonseptet «hverdagsmagi» hvor de levende fargene utstråler energi. Et fargesystem som differensierer oss, tilfører noe nytt og gir energi. Fargene viser egenart, og gir oss et fleksibelt og dynamisk system som er spesielt godt egnet for digitale flater.
Et viktig prinsipp er at det etterlatte visuelle inntrykket skal oppleves lyst, luftig og variert. Som hovedregel skal gradienten (i alle dens variasjoner) brukes som bakgrunnsfarge, og der det ikke er mulig skal man bruke Hvit eller Fjell. Skog kan brukes som profilbærende Call to Action-farge, f.eks. på knapper. Sort skal i de aller fleste tilfeller brukes som tekstfarge.
Hvit
Skog
Fjell
Sort
Aksentfarger til infografikk
I tillegg til hovedfargene har vi også et sett med aksentfarger. Disse skal brukes der man har behov for å vise grafer og infografikk. Fargene er programmert inn i vår PowerPoint-mal og man har derfor tilgang på de der.
Hvor skal disse fargene brukes?
Der hvor det er viktig å skille mellom infografikk, statistikk eller grafer bør disse fargene brukes. Eksempler på dette er grafer og tabeller i PowerPoint-presentasjoner, årsrapporter, statistikk på nettsiden eller uliker grafer i Wattn-appen.
Hvor skal disse fargene ikke brukes?
Disse skal som hovedregel ikke brukes i kommunikasjon eksternt. Eksempler på dette er SoMe-poster, bannere eller reklameannonser. De skal heller aldri brukes som tekstfarge.
Aksent 1
Aksent 3
Aksent 5
Aksent 2
Aksent 4
Aksent 6
Grafer og tabeller i Powerpoint
Slik legges fargepaletten inn i PowerPoint-malen. Det styrer hvilken rekkefølge fargene vises når de brukes i grafer.
Fargene blir automatisk lagt til i riktig rekkefølge. Hvis det er behov for flere enn seks farger blir det automatisk brukt nye nyanser av de seks aksentfargene.
For tabeller blir det automatisk generert ulike fargevarianter basert på fargepaletten. Disse kan ikke endres, så man står fritt til å bruke alle.
Digitale farger
På digitale flater (hovedsakelig nettsiden og appen) har vi bruk for er utvidet sett med farger, dette for å sikre et konsistent visuelt uttrykk.
Primærfarger skal brukes til hovedelementer (knapper, ikoner, seksjoner), sekundærfarger til støttende elementer, og et sett med gråtoner brukes til ulike bakgrunner, skillelinjer og omriss rundt former.
Det er viktig med tilstrekkelig kontrast for å sikre tilgjengelighetskrav (WCAG, AA eller høyere), og interaktive elementer skal ha tydelige farger med visuelle tilbakemeldinger.
Her vil det vises en generell oversikt over fargene som skal brukes. Mer konkret bruk på mikronivå vil spesifiseres nærmere i Figma som vil være tilgjengelig for relevante personer.
NB:
Denne seksjonen er under utvikling, og fargene vil justeres etterhvert som nettsiden og appen skal oppdateres.
Hvor skal disse fargene ikke brukes?
Disse skal som hovedregel ikke brukes i kommunikasjon eksternt. Eksempler på dette er SoMe-poster, bannere eller reklameannonser. De skal heller aldri brukes som tekstfarge.
Under vises et eksempel på hvordan grånyansene kan brukes på ulike elementer og komponenter i appen.
(NB: Ikke et reelt redesign av appen, den vil oppdateres på et senere tidspunkt)
Riktig og feil bruk av farger og gradienter
Typografi
Banana Grotesk er en font med brede proporsjoner, som gir den et avrundet og vennlig inntrykk. Buene på bokstavene gir fonten særpreg, og gjør at den spiller på lag med designelementet.
I tråd med resten av identiteten skal også typografien oppleves lett og luftig. Banana Grotesk Light brukes derfor som primærvekt. På små størrelser kan Banana Grotesk Regular brukes for å oppnå tilstrekkelig kontrast.
På steder hvor det ikke er mulig å bruke Banana Grotesk benyttes Arial. Denne finnes på alle datamaskiner.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz Ææ Øø Åå 0123456789
Banana Grotesk Thin
Banana Grotesk Light
Banana Grotesk Regular
Banana Grotesk Semibold
Banana Grotesk Thin Italic
Banana Grotesk Light Italic
Banana Grotesk Regular Italic
Banana Grotesk Semibold Italic
Grid
Vi har et enkelt blokkbasert gridsystem som sørger for et konsistent layout på tvers av ulike flater. Griddet er svært fleksibelt, og sørger for at det er enkelt å dele inn en flate for å kombinere titler, bilder, mengdetekst og avsenderinfo på ulike måter.
Hold musen over bildene til høyre for å se hvordan griddet er konstruert.
Illustrasjonsstil
Illustrasjonsstilen er enkel, sjarmerende og understreker vår entusiasme og energi. De har en leken fremstilling som gir et «ungdommelig» og moderne uttrykk.
En stil som er enkel å jobbe med og godt egnet for animasjoner. Med en fleksibel og skalerbar strek.
Fargebruk i illustrasjonene
Våre illustrasjoner tegnes med sort strek, og enkelte objekter og former kan fargelegges. Med utgangspunkt i aksentfargene er det laget tre enke gradienter – en grønn, blå og oransje – som går fra mørk til lys. Disse kan legges til ulike objekter for å skape variasjon.
Ikonstil
Ensfargede ikoner
I menypunkter og sammen med mindre tekst benyttes størrelse 24px. Disse holdes ensfarget for å ivareta lesbarhet. Tykkelse på strek skal være 1,5px.
Flerfargede ikoner
Fra ikonpakken Phosphor er det valgt ut et sett med flerfargete ikoner. Disse fylles med en spesialtilpasset gradientfarge basert på fargene i designelementet. Om ikonpakken ikke inneholder relevante ikoner kan nye tegnes ut. Da er det viktig å bruke de samme fargene som resten for et helhetlig uttrykk.
Standardstørrelsen på de flerfargede ikonene er 32 px, og med en strektykkelse på 2 px. Ikonene kan også skaleres opp til 64 px der dette er relevant.
Fotostil
Vår fotostil skal fange de magiske øyeblikkene som skjer i hverdagen.
Fotostilen skal fokusere på mennesker, teknologi, innovasjon og bærekraft. Den skal være enkel og rett på sak, og samtidig sjarmere og bidra med positiv energi og gode opplevelser i kundens møte med Wattn.
Vi ønsker empatiske bilder, som viser en eller form for energi. Bildene skal oppleves som ekte, nære og personlig og ikke iscenesatt. De skal ikke være prangende og ta oppmerksomheten bort fra innholdet, men skal i stedet støtte opp under og gi liv til saker, artikler, eller skjemaer som skal fylles ut.
Sol og varme
Lys og skygge
Eksempler på uttak
PowerPoint-mal
Digitale uttak
Som overordnet prinsipp skal websiden oppleves lys og luftig, uten for mange forstyrrende elementer. Innganger og CTA skal være tydelige for å ivareta brukeropplevelsen.
I tråd med identitetskonseptet legges det til rette for at elementer på nettsiden har en iboende energi i form av gradientfarger. Denne enerigen vises ved ulik interaksjon fra brukeren.
