Riksarkivet. Designretningslinjer for elektroniske medier. Designdokumentasjon for Riksarkivet. Versjon 01

Transkript

1 Riksarkivet Designretningslinjer for elektroniske medier Designdokumentasjon for Riksarkivet. Versjon 01

2 Introduksjon DESIGNDOKUMENTASJON 2 Denne dokumentasjonen beskriver Riksarkivets retningslinjer for den grafiske profilen på nett. Innenfor digitale medier er det mange hensyn å ta, i forhold til preservering av identitet og ikke minst med hensyn til brukere. Designmanualen skal gi retningslinjer for bruk av maler, innhold, grafiske elementer, typografi, bilder og farger for Riksarkivet sine websider. Det nye grafiske designet for arkivverket har som mål å presentere informasjonen på en moderne måte, uten at det skal fremstå som spesielt trendy. Designet skal ha et tydelig uttrykk, med fokus på klare innganger og seksjoner. Det grafiske uttrykket/rammeverket skal være funksjonelt med fokus på brukervennlig, intuitiv og enkel navigasjon. I rammeverket er det brukt jordfarger og gull for å skape et nøytralt, klassisk uttrykk, som i tillegg spiller på fargevalørene i gamle dokumenter. For å forsterke dette ligger selve siden eller arket på en papirbakgrunn. De øvrige fargene er brukt for å fremheve tittel på artikkel og for å dele inn siden.

3 Malverk for Riksarkivet.no

4 4 Malverk MAL 1. ARKIVVERKET HJEM MAL 1. ARKIVVERKET HJEM Total innholdsbredde er 996 pixel. Mal for forsiden til Arkivverket. Globalmeny- og/ eller hovedmeny sammen med inngangsporter i innholdsfeltet navigerer brukeren videre i løsningen. Kampanjen i toppfeltet kan rullerer og variere.

5 5 Malverk MAL 2. ÅPNINGSSIDE DIGITALARKIVET MAL 2. ÅPNINGSSIDE DIGITALARKIVET Total innholdsbredde er 996 pixel. Forsiden eller åpningssiden for digitalarkivet. Denne malen er basert på mal 1.

6 6 Malverk MAL 3. 2 SPALTER MAL 3. 2 SPALTER Total innholdsbredde er 996 pixel. Artikkel mal med mulighet for å legge inn bilder i teksten. Bildene vil ha en fast bredde, men kan variere i høyde. Mulighet for navigere fra 2 nivå og videre ned til 3 og 4 nivå med hjelp av en venstremeny.

7 7 Malverk MAL 4 MAL 4 Total innholdsbredde er 996 pixel. Artikkelside med mulighet for å legge inn variable bilder. Her vises et eksempel med full bredde bilde, men å legge inn bilder bilder med andre bredder og høyder er også mulig.

8 8 Malverk MAL5. UTSTILLINGER. EKSISTERENDE DATABASER MAL 5. UTSTILLINGER. EKSISTERENDE DATABASER Total innholdsbredde er 996 pixel. Mal til bruk for eksisterende databaser. Toppfeltet er basert på de foregående maler.

9 9 Malverk MAL 6. NETTUTSTILLINGER MAL 6. NETTUTSTILLINGER Total innholdsbredde er 996 pixel. Denne malen skiller seg noe fra de andre malene med egen meny på høyre side som gir mulighet for å bla i kapitler. Denne malen kan utvides med å legge til en ekstra bildestripe under toppfeltet. Det er også en mulighet for å legge til flere bilder på høyre side.

10 10 Malverk MAL 7. NYHETSBREV MAL 7. NYHETSBREV Egen mal for Nyhetsbrev som er basert på øvrig design. Denne malen er tilpasset utskriftsformatet.

11 11 Malverk MAL 8. DIGITALPENSJONATET MAL 8. DIGITALPENSJONATET Total innholdsbredde er 996 pixel.

12 Farger

13 Farger HOVEDFARGER 13 Basisfarger GULL HEX C8A153 R200/G161/B83 VARM BRUN HEX 684D16 R104/G77/B22 MELLOMBRUN HEX 7E6C4C R126/G108/B76 GRÅ 1 HEX BFBEBD R191/G190/B189 GRÅ 2 HEX E3E2E0 R227/G226/B224 GRÅ 3 HEX EEEDEB R238/G237/B235 Tekstfarger HOVEDFARGE Fargepaletten er delt inn i tre kategorier. TEKSTFARGE 1 TEKSTFARGE 2 TEKSTFARGE 3 BASISFARGER Fargekoder for rammeverket og andre hovedelementer som logo, knapper og ikoner. HEX 1D1705 R29/G23/B5 HEX 463E2F R70/G62/B47 HEX ADACAA R173/G172/B170 TEKSTFARGER Fargekoder for overskrifter, ingresser og brødtekster. Spotfarger SPOTFARGER Spotfargene er brukt på elementer som skal fremheves som eksempelvis lenker. BLÅGRØNN RØD ISBLÅ HEX R23/G115/B145 HEX 9E0303 R158/G3/B3 HEX 82E7FD R55/G66/B74

14 Farger TILLEGGSFARGER 14 Kampanjefarger Mørk Blå1 HEX 415D7B R65/G93/B123 Mørk Grønn1 HEX 4D6C75 R77/G108/B117 Grønn1 HEX R97/G136/B131 Mose1 HEX 999E68 R153/G158/B104 Mørk Grå1 HEX R96/G96/B96 Mørk Brun1 HEX 6C6048 R108/G96/B72 Brun1 HEX A18C65 R161/G140/B101 Mørk Rød1 HEX R116/G49/B49 TILLEGGSFARGER Mørk Blå2 HEX R37/G52/B69 Mørk Grønn2 HEX 2D4147 R45/G65/B71 Grønn2 HEX 446B66 R68/G107/B102 Mose2 HEX 64683E R100/G104/B62 Mørk Grå2 HEX R73/G73/B73 Mørk Brun2 HEX 463E2F R70/G62/B47 Brun2 HEX 6B5A3C R107/G90/B60 Mørk Rød2 HEX R89/G38/B38 Tilleggsfargene er brukt i gradienter i bla. kampanjefeltene/toppfeltene. Dette er forslag til farger med muligheter for variasjoner. Paletten viser den mørkeste og den lyseste fargene i gradientene. Mørk Blå Mørk Grønn Grønn Mose Mørk Grå Mørk Brun Brun Mørk Rød GRADIENT GRADIENT GRADIENT GRADIENT GRADIENT GRADIENT GRADIENT GRADIENT

15 Typografi

16 16 Typografi HOVEDFONT OG STØTTEFONT Hovedfont GEORGIA Georgia regular ABCDEFGHIJKLMNOPQRSTUVWXYZÆÅ abcdefghijklmnopqrstuvwxyzæøå ?!+ HOVEDFONT OG STØTTEFONT Støttefont VERDANA Verdana regular ABCDEFGHIJKLMNOPQRSTUVWXYZÆÅ abcdefghijklmnopqrstuvwxyzæøå ?!+ Hovedfont Georgia blir brukt i alle overskrifter, ingresser, hovedmenyer og i et utvalg lenker. Georgia er brukt som erstatnigsfont til Riksarkivet profilfont Garamond. Støttefont Verdana Verdana er tatt i bruk på øvrig tekst som eksempelvis brødtekst, lenker og navigasjon bortsett fra hovemeny nivå1. Verdana har god lesbarhet og er anbefalt i tilgjengelighetskrav. Verdana bold ABCDEFGHIJKLMNOPQRSTUVWXYZÆÅ abcdefghijklmnopqrstuvwxyzæøå ?!+

17 Typografi TYPOGRAFI I BRUK OVERSKRIFT 1 Eksempel på bruk av overskrift 1 i toppfelt 17 Eksempel på bruk av overskrift 1 i kampanjefelt TYPOGRAFI God typografi bidrar til å heve det visuelle uttrykket. Det er viktig med et balansert og begrenset utvalg av overskrifter sammen med ingresser og brødtekst. OVERSKRIFT 1 Font størrelse: 36 Font: Georgia Bold Farge: HEX: FFFFFF Overskrift 1 er brukt i kampanje- og toppfeltene og ligger som hvit skrift på farget bakgrunn. For at teksten skal ha god lesbarhet er fonten stor og tydlig.

18 Typografi TYPOGRAFI I BRUK OVERSKRIFT 2 Eksempel på bruk av overskrift 2 i artikkel 18 Font størrelse: 26 Font: Georgia Regular Farge: HEX: 1D1705 OVERSKRIFT 2 Overskrift 2 er hovedoverskriften for artikler. OVERSKRIFT 3 Eksempel på bruk av overskrift 2 i artikkel OVERSKRIFT 3 Denne overskriften er under overskrift i artikler. Font størrelse: 17 Font: Georgia Regular Farge: HEX: 1D1705

19 Typografi TYPOGRAFI I BRUK OVERSKRIFT 4 Eksempel på bruk av overskrift 4 19 Font størrelse: 18 Font: Georgia Bold Farge: HEX: 684D16 OVERSKRIFT 4 Overskrift 4 blir brukt på områder der innholdet skal fremheves som eksempelvis Snarveier. OVERSKRIFT 5 Eksempel på bruk av overskrift 5 OVERSKRIFT 5 Overskift 5 er brukt i overskrifter på bla. ressursfeltene som ligger til høyre på forsider og Nettutstilling. Font størrelse: 17 Font: Georgia Regular Farge: HEX: FFFFFF Bakgrunn: HEX: 7E6C4C

20 Typografi TYPOGRAFI I BRUK INGRESS Eksempel på bruk av ingress 20 Font størrelse: 14 Font: Georgia Regular Farge: HEX: 1D1705 BRØDTEKST Eksempel på bruk av brødtekst Font størrelse: 11 Font: Verdana Regular Farge: HEX: 1D1705

21 Navigasjon

22 Navigasjon GLOBAL- OG HOVEDNAVIGASJON 22 GLOBALMENY Font størrelse: 11 Font: Verdana Regular Farge: HEX: 463E2F (Tekstfarge2) NAVIGASJON. MENY NIVÅ 1 OG 2 Eksempelet viser 1 nivå med menymarkering og 2 nivå med markering GLOBALNAVIGASJON Ligger har en fast plass i toppfeltet og ligger i alle malene bortsett fra Nettutstillinger og Nyhetsbrev Meny nivå 1 Meny nivå 2 Meny nivå 1 Meny nivå 2 MENY NIVÅ 1 OG 2 Innholdet i menyene varierer i forhold til hvor brukeren er i løsningen. Denne menyen har to nivåer og suppleres i tillegg med en venstremeny. Font størrelse: 17 Font: Georgia Regular Farge: HEX: 1D1705 (Tekstfarge1) Font størrelse: 11 Font: Verdana Regular Farge Statsarkivene: HEX: 1D1705 (Tekstfarge1) Farge andre: HEX: 463E2F (Tekstfarge2)

23 23 Navigasjon VENSTREMENY VENSTREMENY NIVÅ 1 VENSTREMENY NIVÅ 2 OG 3 Meny markert Meny mouseover Font størrelse: 11 Font: Verdana Regular Farge: HEX: 463E2F (Tekstfarge2) Meny mouseover: HEX: EEEDEB (Grå3) Font størrelse: 11 Font: Verdana Regular Farge: HEX: 463E2F (Tekstfarge2) Meny mouseover: HEX: EEEDEB (Grå3) Meny markert: HEX: E3E2E0 (Grå2) Bulletpoints: HEX: C8A153 (Gull) VENSTREMENY Venstremenyen inneholder valgene for tredje og fjerde nivå i strukturen og gir en lett og oversiktlig tilgang til underliggende innhold.

24 24 Navigasjon SØK SØK PÅ SIDER SØK I ALLE KILDER SØK SØK PÅ SIDER Søkefunksjon for sidene i Arkivverket SØK OG FINN I ARKIVKATALOGER OG DIGITALARKIV SØK I ALLE KILDER Gir brukeren mulighet for søk i alle kildene i Digitalarkivet SØK OG FINN I ARKIVKATALOGER OG DIGITALARKIV Egne søk i Arkivkataloger og Digitalarkiv.

25 Navigasjon INNGANGSPORTER 25 FINN KILDE NETTUTSTILING Overskrift 5 Lenker Overskrifter: Overskrift 4 (se s.19) Overskrifter: Overskrift 5 (se s.19) INNGANGSPORTER Brun lenke: Georgia Regular Fontstørrelse: 13 Fontfarge: #684D16 (Varm brun) Lenke font: Verdana regular Fontstørrelse: 11 Fontfarge: # (Blå grønn) FINN KILDE Finn kilde er en variant av inngansporter og et område med mer statiske lenker. Fontfarge besøkt: Pil besøkt: #9E0303 (Rød) #9E0303 (Rød) Pil: # (Blå grønn) Mouseover: #ADACAA (Grå 3) NETTUTSTILLING Markering: #ADACAA (Grå 2) Nettutstillngen har en egen meny med mulighet for å dele opp innholdet i kapitler med bla-funksjon.

26 26 Navigasjon INNGANGSPORTER SNARVEIER Stor lenke Overskrifter: Overskrift 4 (se s.19) Meny font: Georgia regular Fontstørrelse: 17 Fontfarge: #684D16 (Varm brun) Fontfarge besøkt: #9E0303 (Rød) Pil besøkt: #9E0303 (Rød) Blå lenke Lenke font: Verdana regular Fontstørrelse: 11 Fontfarge: # (Blå grønn) Pil: # (Blå grønn) Fontfarge markert: #9E0303 (Rød) Pil besøkt: #9E0303 (Rød) INNGANGSPORTER SNARVEIER Lenken i Snarveier er større enn øvrige lenker. Dette gir et viuellt inntrykk av prioritering og fremhever ønskede områder.

27 27 Navigasjon INNGANGSPORTER RESSURSKOLONNE Brun lenke Overskrifter: Overskrift 5 (se s.19) Lenke font: Georgia regular Fontstørrelse: 13 Fontfarge: #684D16 (Varm brun) Fontfarge besøkt: #9E0303 (Rød) Pil besøkt: #9E0303 (Rød) Blå lenke Lenke font: Verdana regular Fontstørrelse: 11 Fontfarge: # (Blå grønn) Pil: # (Blå grønn) Fontfarge besøkt: #9E0303 (Rød) Pil besøkt: #9E0303 (Rød) INNGANGSPORTER RESSURSKOLONNE Lenkene har fått variasjoner i font og farge for å skape et mer spennende viuellt uttrykk. Ressurskolonnen er snarveier til innhold.

28 Grafiske elementer

29 29 Grafiske elementer LOGO OG VIGNETTER Logo for Riksarkivet og Statsarkivene s Malverk Logo for Digitalarkivet LOGO OG VIGNETTER Logo for Digitalpensjonatet Logoene er satt i fargene gull # C8A153 og tekstfarge 1# 1D1705. Dette gjelder alle variantene av logoer bortsett fra disclaimer som har et rødfarget stempel. Disclaimer

30 30 Grafiske elementer BILDER Kampanjefelt s Malverk Eksempler på fargekombinasjoner på kampanjerfelt KAMPANJER Kampanjefeltet kan varieres i farger. Foreslått fargevarianter er definert i kapitellet om farger. Kampanjebilde Mål på kampanjebilde er : 378 x 182 pixler

31 31 Grafiske elementer BILDER s Malverk Artikkel bilde Artikkel bilde dypetset Bilde for artikler over to spalter Varianten av artikkel bilde blir brukt på forsiden til Arkivverket og i nettutstillinger. Anbefalte mål: Bredde: 90 pixler Høyde: Bør følge innhold Anbefalte mål: Bredde: 253 pixler Høyde: Bør følge innhold BILDER Bildene har stort sett den samme bredde men kan variere i høyden. Det er likevle viktig å begrense bildestørrelse både for typografiske hensyn og med tanke på tyngde på sidene. ARTIKKEL BILDE Artikkelbilde 80x80 pixler brukes både på forsiden til Arkivverket og på sidene for Utstilling. Motivene bør være enkle og med et godt utsnitt. De dypetsetede bilde er mer faste bilder som kan ligge over lengre tid og fungere som illustrasjoner. Nettutstilling bilde Eksempel på bilde som kan brukes på Nettutstillingene. Bildet har en fast bredde men kan varieres i høyden. NETTUTSTILLING BILDE Bildene har en fast bredde med mulighet for varierte høyder.

32 Sideskisser

33 33 Sideskisser MAL1. ARKIVVERKET HJEM

34 34 Sideskisser MAL2. ÅPNINGSSIDE DIGITALARKIVET

35 35 Sideskisser MAL3. 2 SPALTER MED BILDER

36 36 Sideskisser MAL3. 2 SPALTER UTEN BILDER

37 37 Sideskisser MAL4. ARTIKKEL MED FULL BREDDE BILDE

38 38 Sideskisser MAL4. ARTIKKEL MED VENSTREJUSTER BILDE

39 39 Sideskisser MAL4. ARTIKKEL MED HØYREJUSTER BILDE

40 40 Sideskisser MAL5. UTSTILLINGER. EKSISTERENDE DATABASER

41 41 Sideskisser MAL6. NETTUTSILLINGER VAR 1

42 42 Sideskisser MAL5. NETTUTSILLINGER VAR 2 MAL6. NETTUTSTILLINGER VAR 2 Til forskjell fra variant 1 er det her lagt til en ekstra bildestripe under toppfeltet. Bildestripen er i likhet med overliggende felt justerbar i høyden.

43 43 Sideskisser MAL6. NETTUTSILLINGER VAR 3 MAL6. NETTUTSTILLINGER VAR 3 Variant av Nettutstillinger. Forslag til hvordan kampanjefeltet kan varieres. Denne sideskissen er en tilleggsmal til variant 1 og 2.

44 44 Sideskisser MAL7. NYHETSBREV

45 45 Sideskisser MAL8. DIGITALPENSJONATET