GUI/ SYSTEM DESIGNHÅNDBOK Versjon 1.0 December 2014
GUI designmanual Innhold Her beskrives layout og grafisk profil for systemer og tjenester i Landbruksdirektoratet. Designmanualen er utarbeidet av Ciber i forbindelse med utviklingen av estil. Det er ment som en referanse for utviklere som skal implementere skjermbilder, og for å forklare hvilke elementer som skal brukes i forskjellige sammenhenger. Et basissett med grafikkfiler bør følge denne malen ved distribusjon... 2 GUI designmanual 3 Typografi 4 Farger 5 Gradient 7 Grid 8 Header 9 Bakgrunn 10 Innholdseksjon 11 Sideoverskrift 12 Infoboks 13 Meny 14 Knapper 14 Knapper 15 Inputfelter 16 Fanner 17 Lister/tabeller 18 Layout 19 Kontakt 2 Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014
Typografi Arial ABCDEFGHIJKL- MNOPQRSTU- VWXYZÆØÅ Georgia ABCDEFG- HIJKLMNOPQR- STUVWXYZÆØÅ Arial regular Arial Italic ABCDEFGHIJKLM NOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwx yzæøå 1234567890! #$%&)/ Arial bold Arial bold Italic ABCDEFGHIJKLM NOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwx yzæøå 1234567890! #$%&)/ Webfonter Arial og Georgia brukes 2 Skrifttyper Brødtekst color: #58595b; font-family: Arial, Helvetica, sansserif; font-size: 12px; Lenker color: #xxxxx; font-family: Arial, Helvetica, sansserif; font-size: 12px; abcdefghijklmnopqrstuvwxyz æøå abcdefghijklmnopqrstuvwxyz æøå Georgia Regular Georgia Italic ABCDEFGHIJKLM NOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstu vwxyzæøå 1234567890! #$%&)/ 12..3 4567890 *!?+#&@ 12..3 4567890 *!?+#&@ Georgia Bold ABCDEFGHIJKLM NOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstu vwxyzæøå 1234567890! #$%&)/ 3 Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014
PROFIL BRUN RGB 78 54 41 / #3a2618 PROFIL BLÅ RGB 0 175 215 / #00AFD7 80 % 60 % 30 % 80 % 60 % 30 % Farger i RGB Designet er basert på fargene og gradientene som er beskrevet i dette kapittelet. Det vil refereres til disse ved navn i beskrivelsen av grafiske elementer. GRÅ RGB 217 217 214 / #D9D9D6 80 % 60 % 30 % RØD RGB 210 38 48 / #D22630 80 % 60 % 30 % GRØNN RGB 110 206 178 / # 6ECEB2 80 % 60 % 30 % Sort 100 % 90 % 80 % 60 % 50 % 40 % 30 % 20 % 10 % 4 Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014
PROFIL BLÅ RGB 159 220 242 / #9fdcf2 Gradient Blå gradient Start #9fdcf2 Slutt #ffffff HVIT RGB 255 255 255 / #ffffff 5 Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014
Tittel Tekst lorem ipsum GRAFISKE ELEMENTER 6 Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014
GRID 6 columns- margin left: 20px Størrelser Layouten er basert på et 1240 pikslers grid-system. Alle bokser skal skaleres og plasseres i henhold til det. Avstander Det skal være 20px horisontal og vertikal avstand mellom elementer på siden, og også 20px padding på innsiden av innholdsbokser o.l. Dersom det trengs mer plass på siden, kan alternativt 10 pikslers avstand benyttes. 7 Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014
Header Landbruksdirektoratet Fagsystemet Elektroniske tjenester / Global meny / Eksterner snarveier / Logg ut Pålogget bruker Pålogget [bruker] Hovedside Søknader Rapporter Søknadsomganger Tiltak Help I versjon 2.0 Headeren plasseres øverst på skjermbildet, og scroller nedover sammen med resten av siden. Bakgrunnen skal flyte helt ut i kantene på vinduet. Headeren inneholder navn på systemet, informasjon om innlogget bruker, eventuelt brukerinnstillinger/profil, samt første nivå i menystrukturen. Globale linker (på tvers av systemer/intranett) skal legges i det brune feltet øverst i headeren. Global funksjonalitet tilknyttet kun det aktuellt systemet skal legges i det mørke feltet i headeren når det er behov for det. 8 Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014
WALLPAPER Bakgrunn/ wallpaper Bakgrunnen er en blå gradient med tynne blå linjer i -28. Bakgrunnen flyter i hele sidens bredde. Gradienten går mot hvit i bunnen. Se side. 5 for gradient farge koder 9 Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014
Eiendommer Legg til eiendom Innholdseksjon Innholdsseksjonene brukes for å markere, gruppere og skille segmenter av innhold i et skjermbilde. Det vil være naturlig å legge funksjonalitet og innhold som hører sammen i samme innholdsseksjon. Innholdsseksjonen er et adskilt segment av innholdsområdet, som består av en overskrift i lys gradient. Seksjonen flyter helt til neste seksjon. 10 Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014
Sideoverskrift Søknad 23478 Overskriften har en egen ramme og utsnitt av logo/ ikon. font-family: Georgia, sans-serif; font-size: 22px; font-style: italic; font-weight: normal; color: #58595b line-height: 30px grå felt color: #D9D9D6 11 Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014
Tidligere søknader PT H2012 PT V2012 RMP 2011 RMP 2010 Dispensasjoner Ingen dispensasjoner Godkjent Godkjent 25 000 Avslått Infoboks Infobokser brukes der det er behov for å gi brukeren ekstra informasjon. Overskriften kan suppleres med et høyrejustert ikon der man ser behovet for det. Ikoner: color: # 00AFD7 12 Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014
Landbruksdirektoratet Fagsystemet Hovedside Søknader Rapporter Søknadsomganger Tiltak Meny Menyen er den nederste delen av headeren. Noen systemer vil kun ha behov for ett nivå menystrukturen, mens andre har behov for flere. Det øverste nivået i menystrukturen vises hele tiden, mens andre nivå kun vises når du velger det aktuelle menypunktet. Menypunkt nivå 1 font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 13px; color: #ffffff; Menypunkt nivå 1 aktivt I tillegg til fargeendringene skal et aktivt menypunkt også være markert med en 3px tykk horisontal linje som dekker hele toppen av det aktuelle menypunktet. Fargen på linjen er # #00AFD7; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 13px; color: # 9fdcf2 Menypunkt nivå 2 font-family: Arial, Helvetica, sansserif; font-weight: normal; font-size: 12px; color: # 58595b background-color: #3a2618 13 Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014
Avbryt Lagre Send Send og start behandling Knapper Knapper har lett avrundete hjørner og et sett forskjellige bakgrunnsfarger etter funksjon. Vanlige knapper color: #e6e7e8 Lagre-knapp color: #00a350 Knapper som endrer saksbehandlingsstatus color: #9fdcf2 14 Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014
Inputfelter Telefon Kontonummer Inputfeltene har en avrundet 1px border og overliggende feltoverskrift i standard brødtekstskrifttype. 15 Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014
Faner Søknad Notater (1) Dokumenter (2) Historikk Fanene brukes frittstående fra annet innhold. De benytter standard brødteksttype. Inaktive faner color: #00a350 Aktive faner color: #9fdcf2 16 Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014
Lett høstharving Ingen jordbearbeiding, ikke prioritert område Sum: 28 Søkt om 30 dekar Kommentar til bruker Lister/tabeller Overskriften på listene har grunnsfarge basert på grå bakgrunnsfarge. Radene i listene alternerer mellom hvit og grå og lyse grå bakgrunn. grå color: #a7a9ac lyse grå color: #D9D9D6 Ingen jordbearbeiding, prioritert område Sum: 0 Der det er behov for funksjonalitet tilknyttet flere rader, kan man legge til en kolonne med avkrysningsbokser helt til høyre i tabellen, samt en knapperad over overskriftsraden. Knapper som har funksjonalitet tilknyttet avkrysningsboksene, skal høyrejusteres over tabellen, mens knapper som ikke er tilknyttet disse skal venstrejusteres. 17 Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014
Landbruksdirektoratet Elektroniske tjenester / Global meny / Eksterner snarveier / Logg ut Pålogget bruker Fagsystemet Pålogget [bruker] Hovedside Søknader Rapporter Søknadsomganger Tiltak Help I versjon 2.0 Layout Søknad 23478 Søknad Notater (1) Dokumenter (2) Historikk Status Simulert tilsk Under behandling 100000 Lagre Avbryt Avslå Avvis Godkjenn Grunnopplysninger Organisajonsnr Foretakets navn 7777777777 Eksempelgården Nord Tidligere søknader Telefon Mobil Kontonummer PT H2012 Godkjent PT V2012 Godkjent Etternavn innhaver Telefon RMP 2011 25 000 RMP 2010 Avslått Johansen Adresse Postnr Poststed Gårdstunet 3 1234 Oslo Dispensasjoner E-post Ingen dispensasjoner Layouten i systemet består av en header, samt en eller flere innholdsbokser og/eller infobokser med innhold. Størrelser Layouten er basert på et 1240 pikslers grid-system. Alle bokser skal skaleres og plasseres i henhold til det. Kommunenr 444 Festenr Gårdstunet 3 Gårdsnr Bruksnr 3 31 Løpenr 1234 Ønsker tilbakemelding Per e-post Per brev Eiendommer Legg til eiendom Tiltak mot forurensning Lett høstharving Ingen jordbearbeiding, ikke prioritert område Sum: 28 Søkt om 30 dekar Kommentar til bruker Ingen jordbearbeiding, prioritert område Sum: 0 Høstkorn Høstkorn, direktesådd Sum: 20 Kontrolsum: 48 Lagre Avbryt Avslå Avvis Godkjenn 18 Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014
Kontakt Har du spørsmål vedrørende profilen, kontakt: Henrik Levinsen Seniorrådgiver Mobil 47 922 06 737 henrik.levinsen@landbruksdirektoratet.no Profilen er utviklet av Itera Gazette. 19 Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014