Farger. Vi legger opp til en rolig fargepalett for å sikre et godt arbeidsmiljø for de som skal bruke løsningen på daglig basis.

Transkript

1 Bakgrunn I designet har vi tatt utgangspunkt i skjermdumper fra tidligere løsninger. Vi tar med oss det som er relevant (bl.a. fargebruken) videre for å bidra til gjenkjennelse for brukerne.

2 Farger Grått til typografi, navigasjon etc Kontrastfarge brukes til feilmeldinger e.l. grey # grey-light # grey-lighter #D6D6D6 grey-lightest #F0F0F0 red #FA4545 Blått til viktigste felter, knapper, lenker Gradienter brukes til å skille miljøene fra hverandre i meny prod background-image: linear-gradient(-180deg, #5D93DF 0%, #2B5B9F 100%); blue #3D73BF blue-light #8FB3E6 blue-lighter #B0CBF0 blue-lightest #DFEBF7 test background-image: linear-gradient(-180deg, #F7B166 0%, #DD5B41 100%); Grønt til aktivt felt, f eks i accordion utvikling background-image: linear-gradient(-180deg, #FFFFFF 0%, #CCCCCC 100%); green #5B985B green-light #9ABF9A green-lighter #C0DCC0 green-lightest #EFF5F2 Vi legger opp til en rolig fargepalett for å sikre et godt arbeidsmiljø for de som skal bruke løsningen på daglig basis.

3 Typografi Hovedfont: Helvetica Neue til statisk informasjon En mye brukt font som er lett å lese, også i små størrelser. I tillegg er det en standardfont på alle maskiner. Helvetica Neue Bold 36/43 Tittel på siden h1 Helvetica Neue Bold 24/28 Tittel h2 Tittel h3 Helvetica Neue Bold 18/22 color: grey # Helvetica Neue Bold 14/18 Helvetica Neue 14/18 Georgia 14/18 Label Hjelpetekst inni inputfelter Input som bruker skriver Helvetica Neue Bold 14/18 Helvetica Neue 14/18 Inaktiv label Inaktiv hjelpetekst color: grey-light # blue, underlined Lenketekst color: blue #3D73BF Tilleggsfont: Georgia til input som brukeren fyller inn, for å skille dette tydeligere fra den statiske informasjonen.

4 Knapper str knapp, høyde: 32 px på registreringer (fungerer i praksis som nedtrykt knapp) Normal Legg til flere personer Bla gjennom 1. Under forberedelse 2. Analyse påbegynt 3a. Analyse ferdig 3b. Avsluttet uten resultat Hover Legg til flere personer på registreringer: hover state Active Legg til flere personer 1. Under forberedelse 2. Analyse påbegynt 3a. Analyse ferdig 3b. Avsluttet uten resultat Inactive Legg til flere personer Stor knapp, høyde: 43 px (for handlinger som berører hele siden) Button_normal background: #F0F0F0; border: 1px solid #909090; Button_active background: #353535; border: 1px solid #909090; Normal Lagre Hover Lagre Inactive Lagre font-family: HelveticaNeue; color: #353535; font-family: HelveticaNeue; color: #FFFFFF; Button_hover background: #D6D6D6; border: 1px solid #909090; Button_inactive background: #F0F0F0; border: 1px solid #D6D6D6; Big button_normal background-image: linear-gradient(-180deg, #3D73BF 0%, #214F90 100%); border: 1px solid #214F90; Big button_hover background-image: linear-gradient(-180deg, #3D73BF 0%, #214F90 100%); border: 1px solid #214F90; font-family: HelveticaNeue; color: #909090; background: rgba(54,54,54,0.30); font-family: HelveticaNeue-Bold; font-size: 18px; color: #FFFFFF; Big button_inactive background-image: linear-gradient(-180deg, #FFFFFF 0%, #CCCCCC 100%); border: 1px solid #CCCCCC; font-family: HelveticaNeue-Bold; font-size: 18px; color: #909090;

5 Bakgrunn og popup Rae for viktigste innhold på en side (standard well fra Bootstrap) Popup + Er du sikker på at du vil slette Chad Hill fra denne analysen? Ja, slett Angre sletting blue-lightest #DFEBF7

6 Tabeller Tabell for å liste ut objekter Objekter/prøver Museumsnr Unr Term/artsnavn Spyd Beltering Øsekar Spyd Prøvenr P0223 Prøvetype C14 - datering Eget res. Raden skal kunne ekspanderes Table header border: 2px solid #D6D6D6; Table_border border: 1px solid #D6D6D6; Grey lines background: #F0F0F0; Label font-family: HelveticaNeue-Bold; color: #353535; line-height: 18px; Body font-family: HelveticaNeue; color: #353535; line-height: 18px; Legg til flere objekter/prøver i denne analysen Tabell for å liste ut objekter, en rad åpen Museumsnr Unr Term/artsnavn Prøvenr Prøvetype Eget res Spyd Beltering Øsekar P0223 Unr2: Materiale: Messing Se flere detaljer C14 - datering Slett objekt/prøve Table_active background: #C0DCC0; border: 1px solid #9ABF9A; Ekstern kilde Legg til lenke Table_active content background: #EFF5F2; border: 1px solid #9ABF9A; Last opp fil Bla gjennom Spyd OBS. Høyde på medium knapper, linjer, rader i tabeller, bokser: 32 px Maxbredde tabeller 800 px

7 Tabeller OBS. Høyde på medium knapper, linjer, rader i tabeller, bokser: 32 px Maxbredde tabeller 800 px Tabell hvor man kan redigere direkte inn i cellene PrøveID Prøvetype Prøvevolum/-vekt Lagringskontainer Lagringsmedium Table header border: 2px solid #D6D6D6; Table border: 1px solid #D6D6D6; background: #FFFFFF; Tabell: active state PrøveID Prøvetype Prøvevolum/-vekt Lagringskontainer Lagringsmedium 3452 Input_active background: #FFFFFF; border: 1px solid #9ABF9A; box-shadow: 0 0 4px 0 #9ABF9A; Tabell: dropdown PrøveID Prøvetype Prøvevolum/-vekt Lagringskontainer Lagringsmedium Table_active background: #C0DCC0; border: 1px solid #9ABF9A; Table_active content background: #EFF5F2; border: 1px solid #9ABF9A;

8 Tabeller Kondensert tabell (til bruk hvor objektene kun skal listes opp på minimalt med plass ) Kondensert tabell (eksempel på tabellen på farget bakgrunn) Velg objekter som skal inkluderes Velg objekter som skal inkluderes Spyd Body_small Spyd Spyd font-family: HelveticaNeue; font-size: 12px; Spyd Spyd color: #333333; Spyd Spyd line-height: 14px; Spyd Spyd Spyd Spyd Grey lines Spyd Spyd background: #F0F0F0; Spyd Spyd Spyd Spyd Spyd Spyd Spyd Tabell for å legge til folk Personer tilknyttet Navn Rolle Dato Table header border: 2px solid #D6D6D6; Fornavn Etternavn Velg rolle Input_default background: #FFFFFF; border: 1px solid #909090; border-radius: 3px;

9 Accordion Accordion - alt lukket Accordion - en åpen Materialbesteelse 1 (5 objekter) Teknisk beskrivelse Materialebesteelse 2 (3 objekter) Materialebesteelse Tilstandsvurdering Målangivelse Behandling Rapport 1 Vekt g Lengde 205 Største lengde Rapport 2 Volum ml Bredde Største bredde Oppbevaring og håndtering Diam. Høyde Største høyde HMS-risikoangivelse Tvm. Antall gjenst. Tykkelse Antall fragm. Største tykkelse Største m. Mer detaljer: Velg utfyllingsfelt Legg til Tilstandsvurdering Behandling Tegning Rapport Oppbevaring og håndtering HMS-risikoangivelse

10 Skjemaelementer Skjemaelementer Inputfelter: active state Beskrivelse/ koentar Beskrivelse/ koentar Her skriver brukeren Saksnuer Analysested Velg sted Analysested Ekstern kilde Velg sted Sted 1 Navn på sted 2 Sted med langt navn 3 Klausulering Ja Klausulering Ja Utlånsperiode Fra Til dd..ååå dd..ååå Saksnuer

11 Tabs Tabs (bare brukt på objektvisning foreløpig) Hendelser Prøver Filer

12 Visning av registrerte data Visning av registrerte data, eksempel Visning av registrerte data, eksempel Klausulert for Årsak til klausulering Per Pettersen Prosjekt untatt offentligheten Prøvenr: 5 PrøveID: PP-58 EksternID: Prøvetype: Beskrivelse av prøve: : Prøvevolum/-vekt: Ekstern14 DNA extract Her kan det koe en lang beskrivelse. Lang, lang beskrivelse. Her kan det koe en lang beskrivelse. Lang, lang beskrivelse. Kontaminert 14 cl Visning av registrerte data, eksempel Museumsnr: 1234 Gjenstand: Kniv Unr: Form: Flat Unr2 : Funnr: Materiale: materiale/spes.materiale, materiale, materiale/spes.materiale Funndato: Funnsted: Fylke, Koune, Gårdsnavn, gårdsnuer, bruksnuer Fylke, Koune, Gårdsnavn, gårdsnuer, bruksnuer Koordinat: N, E (forklaring) Plassering: Universitetsmuseet( /Dreggsalmenning 3

13 Validering og feilmeldinger Feilmelding og validering Koentar / resultat Feilmelding border: 3px solid #FA4545; border-radius: 3px; Påkrevd felt Sluttdato Dato har feil format Krisemelding (forside) Grunnet flytting av data vil MUSITbasen være nede fra mandag 1. mai Vi beklager ulempen. Lukk

14 Menyer Header utvikling MUSIT utv Magasin Analyse Rapporter Utlån 0 0 Meny_utv background-image: linear-gradient(-180deg, #FFFFFF 0%, #CCCCCC 100%); border: 1px solid #CCCCCC; font-family: HelveticaNeue-; color: #353535; Header test MUSIT test Magasin Analyse Rapporter Utlån 0 0 Meny_test background-image: linear-gradient(-180deg, #F7B166 0%, #DD5B41 100%); border: 1px solid #E7E7E7; box-shadow: 0 2px 6px 0 rgba(0,0,0,0.05); font-family: HelveticaNeue-; color: #FFFFFF; Header prod MUSIT Magasin Analyse Rapporter Utlån 0 0 Meny_prod background-image: linear-gradient(-180deg, #5D93DF 0%, #2B5B9F 100%); border: 1px solid #E7E7E7; font-family: HelveticaNeue-; color: #FFFFFF;