GUI/ SYSTEM DESIGNHÅNDBOK. Versjon 1.0 December 2014

Transkript

1 GUI/ SYSTEM DESIGNHÅNDBOK Versjon 1.0 December 2014

2 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

3 Typografi Arial ABCDEFGHIJKL- MNOPQRSTU- VWXYZÆØÅ Georgia ABCDEFG- HIJKLMNOPQR- STUVWXYZÆØÅ Arial regular Arial Italic ABCDEFGHIJKLM NOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwx yzæøå ! #$%&)/ Arial bold Arial bold Italic ABCDEFGHIJKLM NOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwx yzæøå ! #$%&)/ 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æøå ! #$%&)/ *!?+#&@ *!?+#&@ Georgia Bold ABCDEFGHIJKLM NOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstu vwxyzæøå ! #$%&)/ 3 Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014

4 PROFIL BRUN RGB / #3a2618 PROFIL BLÅ RGB / #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 / #D9D9D6 80 % 60 % 30 % RØD RGB / #D % 60 % 30 % GRØNN RGB / # 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

5 PROFIL BLÅ RGB / #9fdcf2 Gradient Blå gradient Start #9fdcf2 Slutt #ffffff HVIT RGB / #ffffff 5 Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014

6 Tittel Tekst lorem ipsum GRAFISKE ELEMENTER 6 Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014

7 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

8 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

9 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

10 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

11 Sideoverskrift Søknad 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

12 Tidligere søknader PT H2012 PT V2012 RMP 2011 RMP 2010 Dispensasjoner Ingen dispensasjoner Godkjent Godkjent 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

13 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: #3a Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014

14 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

15 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

16 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

17 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

18 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 Søknad Notater (1) Dokumenter (2) Historikk Status Simulert tilsk Under behandling Lagre Avbryt Avslå Avvis Godkjenn Grunnopplysninger Organisajonsnr Foretakets navn Eksempelgården Nord Tidligere søknader Telefon Mobil Kontonummer PT H2012 Godkjent PT V2012 Godkjent Etternavn innhaver Telefon RMP RMP 2010 Avslått Johansen Adresse Postnr Poststed Gårdstunet 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

19 Kontakt Har du spørsmål vedrørende profilen, kontakt: Henrik Levinsen Seniorrådgiver Mobil Profilen er utviklet av Itera Gazette. 19 Landbruksdirektoratet GUI/ System designhåndbok / Versjon 1.0 / December 2014