Sykkeldyktig.no Designmanual

Innledning

Sykkeldyktig.no er en nettside for lærere som skal hjelpe med sykkelundervisningen. Siden skal appellere til lysten til å lære bort eller å lære trafikkopplæring på sykkel. Det skal være tydelig og gjenkjennelig uansett i hvilken kontekst logo og profil vises. Det skal være tillit og troverdighet pakket inn i noe som er lystbetont.

Sykkeldyktig.no skal oppfattes som troverdig, inspirerende, tillitsvekkende, ukomplisert, leken, fargerik og appellerende. Den har en trygg men entusiastisk stemme, med tålmodighet i alt den formidler. 

Logo

Logoversjoner

Logoen består av ordbildet «sykkeldyktig.no» sammen med et symbol som representerer både et vennlig ansikt og fronten av en sykkel. Som hovedregel skal logoen benyttes i fargeversjon og på hvit bakgrunn, men den finnes også i svart og hvit. 

Farge

Sort

Negativ

Logoanimasjoner

Logosymbol

Symbolet skal vise fram nettsidens personlighet. Det kan brukes blant annet som profilbilde på sosiale medier. Merk at symbolet er IKKE en erstatning for logoen. Symbolet skal brukes alene kun i sykkeldyktig.no sine kanaler. I ekstern sammenheng skal man bruke hele logoen. 

Hovedfarger

Fargepalett

Fargene er inspirert av trafikkfarger, lek, å sykle utendørs. Duse, rolige farger – balanse mellom tillitsvekkende & lekenhet. Det er viktig å nevne at profilen innebærer bruk av veldig mye hvit/negativ rom. Fargene skal stort sett kun benyttes som aksenter. Hovedfargen er egentlig hvit når det gjelder vekting.

Utvidet fargepalett

Denne versjonen av fargepaletten skal brukes kun av profesjonelle til å produsere illustrasjoner, animasjon, nettside design. Fargene er satt opp slik at hver farge har en lys, medium og mørk versjon, samtidig som de varierer i temperatur. Dette bidrar til mer livlig uttrykk. Se seksjonen om visuelt språk for eksempel på bruk av utvidet fargepalett.

Color Swatches

Typografi

Primærtypografi

Avenir Next er et moderne sans-serif skriftsnitt som innehar god lesbarhet både på digitale og analoge flater. Det ble valgt på grunn av det rene designet som fasiliterer rask formidling av informasjon, uten å overvelde brukeren med sitt visuelle preg.

Avenir Next er en moderne tilpasset versjon av klassikeren Avenir. Dette er en fontfamilie med stort utvalg, men her er 4 anbefalte vekter. Styrken til denne fonten er ekstremt god lesbarhet til og med i små størrelser. Ikke erstatt med den gamle Avenir, siden Avenir Next er bedre egnet for digitale formål.

Usage

font-family: «avenir-next», sans-serif;

Sekundærtypografi

Siden Avenir Next ikke er en standardfont som er installert på alle maskiner, kan det i enkelte situasjoner være behov for en sekundærtypografi. Dette være seg i Powerpoint presentasjoner, e-poster, brev o.l. Som sekundærtypogafi er Helvetica eller Arial anbefalt. Disse er klassiske, tidløse skriftsnitt som finnes installert på de fleste maskiner.

Usage

font-family: «Helvetica», sans-serif;

Usage

font-family: «Arial», sans-serif;

Webtypografi

Avenir Next er en moderne font med veldig god lesbarhet, til og med i små størrelser. 

Usage

font-family: «avenir-next», sans-serif;

Dekorelementer

Dekorelementene består av enkle, fargerike, barnevennlige former, inspirert av trafikkskilt. De skal brukes enten som små aksenter eller som et mønster. De burde helst brukes sparsomt og i ulike utsnitt. Se dekorelementene i bruk i «Web» seksjonen. Selv om elementene skaleres opp, skal man ivareta størrelsesforholdet mellom de større og de små elementene.

Elementene er likevel allsidige og man kan finne andre bruk til dem. F.eks et poengsystem, klistremerker etc. 

Ikoner

Oppdateres med ikoner etter nettside design er ferdig. 

Illustrasjonsstil

Illustrasjoner og animasjon som produseres på vegne av sykkeldyktig.no skal bruke i utgangspunktet en begrenset fargepalett (se «Utvidet fargepalett»). Man kan skyggelegge med den neste mørkere versjonen av samme farge fra paletten. F. eks. Himmelblå skal være trafikkblå i skyggen. Det er anbefalt at skyggelegging er subtil og eventuelt bruker en «stipple» brush eller en «grain effekt». 

Merk at formene skal være enkle, vennlige, med mange rundinger og få skarpe kanter. Tenk «flytende» former. 

Foto

Webdesign

Merk at dekorelementene brukes sparsommelig, i ulike utsnitt, uten å ta en sentral rolle. Fargene også brukes stort sett som aksenter i sammenheng med mye hvit rom.